diff --git a/src/components/common/Custom.tsx b/src/components/common/Custom.tsx index ae3f3ec..fcd837e 100644 --- a/src/components/common/Custom.tsx +++ b/src/components/common/Custom.tsx @@ -14,12 +14,14 @@ import colors from "../colors"; type CustomInputProps = TextInputProps & { label?: string; icon?: IoniconsIconName; + error:string }; const CustomInput: React.FC = ({ label, icon, style, + error, ...rest }) => { return ( diff --git a/src/screens/GroupCreation.tsx b/src/screens/GroupCreation.tsx index 7fb6308..227fb68 100644 --- a/src/screens/GroupCreation.tsx +++ b/src/screens/GroupCreation.tsx @@ -7,97 +7,68 @@ import { KeyboardAvoidingView, Platform, TouchableOpacity, - Modal, Alert, } from "react-native"; -import Slider from "@react-native-community/slider"; import { useNavigation } from "@react-navigation/native"; import { CustomInput } from "../components/common/Custom"; import CustomButton from "../components/CustomButton"; -import { Calendar } from "react-native-calendars"; -import { Ionicons } from "@react-native-vector-icons/ionicons"; import colors from "../components/colors"; -const calendarTheme = { - backgroundColor: '#ffffff', - calendarBackground: '#ffffff', - textSectionTitleColor: '#62b59a', - selectedDayTextColor: '#333', - todayTextColor: '#62b59a', - dayTextColor: '#333', - textDisabledColor: '#d9e1e8', - arrowColor: '#62b59a', - monthTextColor: '#333', - textDayFontWeight: '500', - textMonthFontWeight: 'bold', - textDayHeaderFontWeight: '600', - textDayFontSize: 16, - textMonthFontSize: 18, - textDayHeaderFontSize: 14, -}; - export default function GroupCreationForm() { const navigation = useNavigation(); const [form, setForm] = useState({ - contributionAmount: "4000", - customCycleDays: "", - cycleType: "MONTHLY", - description: "", groupName: "", - maxParticipants: "", - minParticipants: "", - startDate: "", + description: "", visibility: "PRIVATE", - withdrawalMethod: "SEQUENTIAL", + withdrawalMethod: "RANDOM", + minParticipants: "", + maxParticipants: "", + contributionAmount: "", + cycleType: "MONTHLY", + customCycleDays: "", + lateFeeMode: "DAILY", + lateFeeValue: "", }); - const [errors, setErrors] = useState({}); // State for validation errors - const [isCalendarVisible, setCalendarVisible] = useState(false); + const [errors, setErrors] = useState({}); const handleChange = (key: string, value: string) => { setForm({ ...form, [key]: value }); - // Clear error for the field when user starts typing if (errors[key]) { setErrors({ ...errors, [key]: null }); } }; - const handleAmountChange = (value: number) => { - setForm({ ...form, contributionAmount: Math.round(value).toString() }); - }; - - const handleDayPress = (day: any) => { - setForm({ ...form, startDate: day.dateString }); - setCalendarVisible(false); - setErrors({ ...errors, startDate: null }); - }; - - const presetAmounts = [2000, 4000, 8000]; const cycleTypes = ["CUSTOM", "MONTHLY", "QUARTERLY", "YEARLY"]; const distributionTypes = ["SEQUENTIAL", "RANDOM"]; - - const handlePresetAmount = (amount: number) => { - setForm({ ...form, contributionAmount: amount.toString() }); - }; + const lateFeeModes = ["DAILY", "FIXED"]; const validateForm = () => { const newErrors: any = {}; if (!form.groupName.trim()) newErrors.groupName = "Group name is required."; if (!form.description.trim()) newErrors.description = "Description is required."; - if (!form.minParticipants || Number(form.minParticipants) <= 0) newErrors.minParticipants = "Min participants must be greater than 0."; + if (!form.minParticipants || Number(form.minParticipants) <= 1) newErrors.minParticipants = "Min participants must be at least 2."; if (!form.maxParticipants || Number(form.maxParticipants) < Number(form.minParticipants)) newErrors.maxParticipants = "Max must be greater than or equal to min."; if (!form.contributionAmount || Number(form.contributionAmount) <= 0) newErrors.contributionAmount = "Amount must be greater than 0."; if (form.cycleType === "CUSTOM" && (!form.customCycleDays || Number(form.customCycleDays) <= 0)) newErrors.customCycleDays = "Custom days must be greater than 0."; - if (!form.startDate) newErrors.startDate = "Start date is required."; - + if (form.lateFeeMode && (!form.lateFeeValue || Number(form.lateFeeValue) <= 0)) newErrors.lateFeeValue = "Late fee value is required."; + setErrors(newErrors); return Object.keys(newErrors).length === 0; }; const handleReview = () => { if (validateForm()) { - console.log("------",form) - navigation.navigate("GroupReview", { form }); + const payload = { + ...form, + contributionAmount: Number(form.contributionAmount), + customCycleDays: Number(form.customCycleDays) || 0, + lateFeeValue: Number(form.lateFeeValue) || 0, + maxParticipants: Number(form.maxParticipants), + minParticipants: Number(form.minParticipants), + }; + console.log("Reviewing Payload:", payload); + navigation.navigate("GroupReview", { form: payload }); } else { Alert.alert("Incomplete Form", "Please fill out all required fields correctly."); } @@ -106,101 +77,145 @@ export default function GroupCreationForm() { return ( - Group Creation + Create New Group - handleChange("groupName", val)} icon="people" /> - handleChange("description", val)} multiline icon="document-text" error={errors.description} /> + handleChange("groupName", val)} icon="people" error={errors.groupName} /> + handleChange("description", val)} multiline icon="document-text" error={errors.description} /> - Visibility - - handleChange("visibility", "PRIVATE")}>Private - handleChange("visibility", "PUBLIC")}>Public - +
+ + handleChange("visibility", val)} + /> + + + handleChange("withdrawalMethod", val)} + /> + +
- Fund Distribution - - {distributionTypes.map((type) => ( handleChange("withdrawalMethod", type)} style={[styles.toggleButton, form.withdrawalMethod === type && styles.selectedButton]}>{type.charAt(0) + type.slice(1).toLowerCase()}))} - - - - handleChange("minParticipants", val)} keyboardType="numeric" icon="person-add" /> - handleChange("maxParticipants", val)} keyboardType="numeric" icon="people-circle" /> - +
+ + handleChange("minParticipants", val)} keyboardType="numeric" icon="person-add" error={errors.minParticipants} /> + handleChange("maxParticipants", val)} keyboardType="numeric" icon="people-circle" error={errors.maxParticipants} /> + +
- Contribution Amount (INR) - - {presetAmounts.map((amount) => ( handlePresetAmount(amount)} style={[styles.presetButton, form.contributionAmount === amount.toString() && styles.presetSelected]}>{amount}))} - - - - handleChange("contributionAmount", val)} keyboardType="numeric" icon="cash" /> - - - Cycle Type - - {cycleTypes.map((type) => ( handleChange("cycleType", type)} style={[styles.cycleTypeButton, form.cycleType === type && styles.cycleTypeSelected]}>{type.charAt(0) + type.slice(1).toLowerCase()}))} - - {form.cycleType === "CUSTOM" && ( handleChange("customCycleDays", val)} keyboardType="numeric" icon="calendar" />)} +
+ handleChange("contributionAmount", val)} keyboardType="numeric" icon="cash" error={errors.contributionAmount} /> + + handleChange("cycleType", val)} + isWrap={true} + /> + + {form.cycleType === "CUSTOM" && ( handleChange("customCycleDays", val)} keyboardType="numeric" icon="calendar" error={errors.customCycleDays} />)} +
- Start Date - setCalendarVisible(true)}> - - {form.startDate || "Select a start date"} - - {errors.startDate && {errors.startDate}} +
+ + handleChange("lateFeeMode", val)} + /> + + handleChange("lateFeeValue", val)} keyboardType="numeric" icon="alert-circle" error={errors.lateFeeValue} /> +
- + - - setCalendarVisible(false)}> - setCalendarVisible(false)}> - - - ); } +// --- Helper Components for a cleaner layout --- + +const Section: React.FC<{ title: string, children: React.ReactNode }> = ({ title, children }) => ( + + {title} + {children} + +); + +const SettingRow: React.FC<{ label: string, children: React.ReactNode }> = ({ label, children }) => ( + + {label} + {children} + +); + +const ToggleButtons: React.FC<{ options: string[], selectedValue: string, onSelect: (value: string) => void, isWrap?: boolean }> = ({ options, selectedValue, onSelect, isWrap = false }) => ( + + {options.map((option) => ( + onSelect(option)} + style={[styles.toggleButton, selectedValue === option && styles.selectedButton, isWrap && {flex: 0, paddingHorizontal: 15}]} + > + + {option.charAt(0) + option.slice(1).toLowerCase()} + + + ))} + +); + const styles = StyleSheet.create({ - container: { flexGrow: 1, padding: 20, backgroundColor: "#f5f6fa" }, - titleContainer: { paddingVertical: 2, borderRadius: 15, alignSelf: "flex-start", marginBottom: 30 }, - title: { fontSize: 22, fontWeight: "bold", color: "#333" }, - label: { fontSize: 14, fontWeight: "600", marginBottom: 10, color: "#444" }, - toggleContainer: { flexDirection: "row", gap: 10, marginBottom: 15 }, - toggleButton: { flex: 1, paddingVertical: 12, borderWidth: 1, borderColor: "#ddd", borderRadius: 12, alignItems: "center", backgroundColor: "#fff" }, + container: { flexGrow: 1, padding: 16, backgroundColor: "#f5f6fa" }, + titleContainer: { marginBottom: 20, paddingHorizontal: 4 }, + title: { fontSize: 28, fontWeight: "bold", color: "#1F2937" }, + + section: { + backgroundColor: '#fff', + borderRadius: 12, + padding: 16, + marginBottom: 16, + elevation: 1, + shadowColor: '#4A5568', + shadowOpacity: 0.06, + shadowRadius: 10, + }, + sectionTitle: { + fontSize: 18, + fontWeight: '600', + color: '#374151', + marginBottom: 16, + borderBottomWidth: 1, + borderBottomColor: '#F3F4F6', + paddingBottom: 10, + }, + + settingRow: { + marginBottom: 16, + }, + + label: { fontSize: 14, fontWeight: "600", marginBottom: 8, color: "#4B5563" }, + + toggleContainer: { flexDirection: "row", gap: 10 }, + toggleButton: { + flex: 1, + paddingVertical: 12, + borderWidth: 1, + borderColor: "#D1D5DB", + borderRadius: 8, + alignItems: "center", + backgroundColor: "#F9FAFB" + }, selectedButton: { backgroundColor: colors.pastelGreen, borderColor: "#62b59a" }, - toggleButtonText: { color: "#444", fontWeight: "600" }, - selectedButtonText: { color: "#333" }, - participantsRow: { flexDirection: "row", justifyContent: "space-between", alignItems: 'flex-start', marginBottom: 10 }, - participantInput: { flex: 0.48 }, - presetContainer: { flexDirection: 'row', justifyContent: 'flex-start', gap: 10, marginBottom: 10 }, - presetButton: { paddingVertical: 8, paddingHorizontal: 15, backgroundColor: '#ddd', borderRadius: 20 }, - presetSelected: { backgroundColor: colors.pastelGreen, }, - presetButtonText: { color: '#555', fontWeight: '600' }, - presetSelectedText: { color: '#333' }, - amountContainer: { flexDirection: 'row', alignItems: 'center', marginBottom: 15, }, - slider: { flex: 1 }, - amountInput: { width: 120, marginLeft: 10 }, - cycleTypeContainer: { flexDirection: 'row', flexWrap: 'wrap', gap: 10, marginBottom: 20 }, - cycleTypeButton: { paddingVertical: 10, paddingHorizontal: 15, backgroundColor: '#fff', borderWidth: 1, borderColor: '#ddd', borderRadius: 20, elevation: 1 }, - cycleTypeSelected: { backgroundColor: colors.pastelGreen, borderColor: '#62b59a' }, - cycleTypeButtonText: { color: '#444', fontWeight: '600', textTransform: 'capitalize' }, - cycleTypeSelectedText: { color: '#333' }, - datePickerButton: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#fff', borderWidth: 1, borderColor: '#ddd', borderRadius: 12, paddingVertical: 15, paddingHorizontal: 15, marginBottom: 5, }, - datePickerText: { marginLeft: 10, fontSize: 16, color: '#333' }, - modalBackdrop: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0, 0, 0, 0.5)' }, - calendarWrapper: { width: '90%', backgroundColor: 'white', borderRadius: 16, paddingVertical: 10, elevation: 5, shadowColor: '#000', shadowOpacity: 0.2, shadowRadius: 10, }, - // --- ERROR STYLES --- - errorBorder: { - borderColor: '#ff4d4d', // Red border for fields with errors - }, - errorText: { - color: '#ff4d4d', - fontSize: 12, - marginBottom: 10, - marginLeft: 5, - }, + toggleButtonText: { color: "#374151", fontWeight: "600", textTransform: 'capitalize' }, + selectedButtonText: { color: "#1F2937" }, + + participantsRow: { flexDirection: "row", gap: 15 }, + participantInput: { flex: 1 }, }); diff --git a/src/screens/GroupReview.tsx b/src/screens/GroupReview.tsx index a0f91dd..30d0bd2 100644 --- a/src/screens/GroupReview.tsx +++ b/src/screens/GroupReview.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React, { useState } from "react"; import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Modal, ActivityIndicator } from "react-native"; import { Ionicons } from "@react-native-vector-icons/ionicons"; import AppView from "../components/AppView"; @@ -6,42 +6,34 @@ import { apiCall } from "../utils/ApiHelper"; import { GROUP_CREATION_URL } from "../utils/ApiUrls"; import colors from "../components/colors"; -// --- Simplified Dialog Component --- -const ThemedDialog = ({ visible, isSuccess, onClose }: { visible: boolean; isSuccess: boolean; onClose: () => void; }) => { +// --- Themed Dialog Component --- +const ThemedDialog = ({ visible, isSuccess, message, onClose, onNavigate }: { visible: boolean; isSuccess: boolean; message: string; onClose: () => void; onNavigate: () => void; }) => { if (!visible) return null; - const dialogConfig = { - success: { - icon: "checkmark-circle" as const, - color: "#2ecc71", - title: "Success!", - message: "Your group has been created.", - buttonText: "Awesome!", - }, - failure: { - icon: "close-circle" as const, - color: "#e74c3c", - title: "Oops!", - message: "Something went wrong. Please try again.", - buttonText: "Try Again", - }, + const config = isSuccess ? { + icon: "checkmark-circle" as const, + color: "#2ecc71", + title: "Success!", + buttonText: "Go Home", + action: onNavigate, + } : { + icon: "close-circle" as const, + color: "#e74c3c", + title: "Oops!", + buttonText: "Try Again", + action: onClose, }; - const config = isSuccess ? dialogConfig.success : dialogConfig.failure; - return ( - + {config.title} - {config.message} - {/* Only show button for failure case */} - {!isSuccess && ( - - {config.buttonText} - - )} + {message} + + {config.buttonText} + @@ -51,56 +43,56 @@ const ThemedDialog = ({ visible, isSuccess, onClose }: { visible: boolean; isSuc export default function GroupReview({ route, navigation }: any) { const { form } = route.params; const [isLoading, setIsLoading] = useState(false); - // --- Simplified State --- const [isSuccess, setIsSuccess] = useState(false); const [modalVisible, setModalVisible] = useState(false); + const [feedbackMessage, setFeedbackMessage] = useState(""); - // --- Automatic Navigation Effect --- - useEffect(() => { - // If the modal is visible and the operation was a success... - if (modalVisible && isSuccess) { - // ...wait for 2 seconds, then navigate. - const timer = setTimeout(() => { - setModalVisible(false); // Close the dialog - navigation.reset({ // Reset the navigation stack - index: 0, - routes: [{ name: 'Home',}], - }); - }, 2000); - - return () => clearTimeout(timer); // Cleanup timer on unmount - } - }, [modalVisible, isSuccess, navigation]); + const handleNavigateHome = () => { + setModalVisible(false); + navigation.reset({ index: 0, routes: [{ name: 'Home' }] }); + }; const handleSubmit = async () => { setIsLoading(true); try { - const payload = { - ...form, - contributionAmount: Number(form.contributionAmount) || 0, - customCycleDays: Number(form.customCycleDays) || 0, - maxParticipants: Number(form.maxParticipants) || 0, - minParticipants: Number(form.minParticipants) || 0, - }; - console.log("payload:", payload); - const res = await apiCall(GROUP_CREATION_URL, "POST", payload) as { statusCode?: number }; - + const res = await apiCall(GROUP_CREATION_URL, "POST", form) as { statusCode?: number, message?: string }; if (res?.statusCode === 201) { setIsSuccess(true); + setFeedbackMessage(res.message || "Your group has been created successfully."); } else { - throw new Error("Failed to create group."); + throw new Error(res?.message || "Failed to create the group."); } - } catch (error) { + } catch (error: any) { setIsSuccess(false); + setFeedbackMessage(error.message || "An unexpected error occurred."); } finally { setIsLoading(false); - setModalVisible(true); // Show the dialog for both success and failure + setModalVisible(true); } }; - // --- UI COMPONENTS --- - const TimelineSection = ({ icon, title, children }: { icon: any; title: string; children: React.ReactNode }) => ( {title} {children} ); - const renderRow = (label: string, value: string | number) => { if (!value && typeof value !== 'number') return null; return ( {label} {value} ); }; + const TimelineSection: React.FC<{ icon: any; title: string; children: React.ReactNode }> = ({ icon, title, children }) => ( + + + + + + + {title} + {children} + + + ); + + const renderRow = (label: string, value: string | number | null) => { + if (value === null || value === undefined || value === "") return null; + return ( + + {label} + {value} + + ); + }; return ( @@ -110,32 +102,60 @@ export default function GroupReview({ route, navigation }: any) { Confirm the details to launch your group. - {/* --- Timeline Sections --- */} - {renderRow("Name", form.groupName)}{form.description ? ( Description {form.description} ) : null} - {renderRow("Visibility", form.visibility)}{renderRow("Distribution", form.withdrawalMethod)}{renderRow("Min Members", form.minParticipants)}{renderRow("Max Members", form.maxParticipants)} - {renderRow("Contribution", `${form.contributionAmount} INR`)}{renderRow("Cycle", form.cycleType)}{form.cycleType === "CUSTOM" && renderRow("Cycle Days", `${form.customCycleDays} days`)}{renderRow("Start Date", form.startDate)} + + {renderRow("Name", form.groupName)} + {form.description ? ( + + Description + {form.description} + + ) : null} + + + + {renderRow("Visibility", form.visibility)} + {renderRow("Distribution", form.withdrawalMethod)} + {renderRow("Min Members", form.minParticipants)} + {renderRow("Max Members", form.maxParticipants)} + + + + {renderRow("Contribution", `₹${form.contributionAmount}`)} + {renderRow("Cycle", form.cycleType)} + {form.cycleType === "CUSTOM" && renderRow("Cycle Days", `${form.customCycleDays} days`)} + + + + {renderRow("Fee Mode", form.lateFeeMode)} + {renderRow("Fee Value", `₹${form.lateFeeValue}`)} + - {isLoading ? : ( <> Create Group )} + {isLoading ? : ( + <> + + Create Group + + )} - {/* --- Simplified Dialog Call --- */} setModalVisible(false)} + onNavigate={handleNavigateHome} /> ); } const styles = StyleSheet.create({ - // ... (All previous styles remain the same) container: { padding: 20, backgroundColor: "#f5f6fa" }, - header: { marginBottom: 30, alignItems: 'flex-start' }, + header: { marginBottom: 30 }, title: { fontSize: 28, fontWeight: "bold", color: "#333" }, - subtitle: { fontSize: 16, color: "#666", marginTop: 2 }, + subtitle: { fontSize: 16, color: "#666", marginTop: 4 }, section: { flexDirection: 'row', marginBottom: 10 }, timeline: { alignItems: 'center', width: 40 }, timelineIcon: { width: 40, height: 40, borderRadius: 20, backgroundColor: colors.pastelGreen, justifyContent: 'center', alignItems: 'center', elevation: 3 }, @@ -143,17 +163,17 @@ const styles = StyleSheet.create({ content: { flex: 1, paddingLeft: 10, paddingBottom: 20 }, sectionTitle: { fontSize: 18, fontWeight: 'bold', color: '#444', marginBottom: 10 }, card: { backgroundColor: "#fff", borderRadius: 12, padding: 15, elevation: 2 }, - row: { flexDirection: "row", justifyContent: "space-between", paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: '#f5f5f5' }, + row: { flexDirection: "row", justifyContent: "space-between", paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: '#f5f5f5' }, label: { fontSize: 15, color: "#666", fontWeight: "500" }, - value: { fontSize: 15, color: "#333", fontWeight: "600", textAlign: 'right', textTransform: 'capitalize' }, + value: { fontSize: 15, color: "#333", fontWeight: "600", textTransform: 'capitalize' }, descriptionContainer: { paddingVertical: 10 }, descriptionText: { fontSize: 15, color: '#333', marginTop: 4, lineHeight: 22 }, - submitBtn: { backgroundColor: colors.pastelGreen, flexDirection: 'row', justifyContent: 'center', alignItems: "center", paddingVertical: 16, borderRadius: 12, elevation: 3, marginTop: 20, borderWidth: 1.5, borderColor: '#62b59a' }, + submitBtn: { backgroundColor: colors.pastelGreen, flexDirection: 'row', justifyContent: 'center', alignItems: "center", paddingVertical: 16, borderRadius: 12, marginTop: 20 }, btnText: { color: "#333", fontWeight: "bold", fontSize: 18, marginLeft: 10 }, modalBackdrop: { flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.6)', justifyContent: 'center', alignItems: 'center' }, dialogBox: { width: '85%', backgroundColor: 'white', borderRadius: 16, padding: 25, alignItems: 'center', elevation: 10 }, - dialogTitle: { fontSize: 22, fontWeight: 'bold', color: '#333', marginTop: 15, marginBottom: 5 }, + dialogTitle: { fontSize: 22, fontWeight: 'bold', color: '#333', marginTop: 15, marginBottom: 10 }, dialogMessage: { fontSize: 16, color: '#666', textAlign: 'center', marginBottom: 25 }, - dialogButton: { backgroundColor: colors.pastelGreen, paddingVertical: 12, paddingHorizontal: 40, borderRadius: 10 }, + dialogButton: { backgroundColor: '#f0f0f0', paddingVertical: 12, paddingHorizontal: 40, borderRadius: 10 }, dialogButtonText: { color: '#333', fontWeight: 'bold', fontSize: 16 }, }); diff --git a/src/utils/HelperFunction.tsx b/src/utils/HelperFunction.tsx index 563798f..2279126 100644 --- a/src/utils/HelperFunction.tsx +++ b/src/utils/HelperFunction.tsx @@ -28,6 +28,7 @@ export const fetchUserProfile = async () => { ); const result = await response.json(); + console.log("user api data",result) if (result.status === "success") { dispatch(setUserData({ id: result?.data.id,