Merge branch 'feature_pending' of https://git.zeptic.in/abintoppo_lincpay/CircleCollect into feature_profile
This commit is contained in:
Abin Toppo
+101
-69
@@ -8,11 +8,15 @@ import {
|
||||
Platform,
|
||||
TouchableOpacity,
|
||||
Alert,
|
||||
Image,
|
||||
} from "react-native";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import { CustomInput } from "../components/common/Custom";
|
||||
import CustomButton from "../components/CustomButton";
|
||||
import colors from "../components/colors";
|
||||
import { launchImageLibrary } from "react-native-image-picker";
|
||||
import Ionicons from "@react-native-vector-icons/ionicons";
|
||||
import { UPLOAD_GROUP_IMAGE } from "../utils/ApiUrls";
|
||||
|
||||
export default function GroupCreationForm() {
|
||||
const navigation = useNavigation<any>();
|
||||
@@ -31,6 +35,7 @@ export default function GroupCreationForm() {
|
||||
});
|
||||
|
||||
const [errors, setErrors] = useState<any>({});
|
||||
const [selectedImage, setSelectedImage] = useState()
|
||||
|
||||
const handleChange = (key: string, value: string) => {
|
||||
setForm({ ...form, [key]: value });
|
||||
@@ -60,12 +65,12 @@ export default function GroupCreationForm() {
|
||||
const handleReview = () => {
|
||||
if (validateForm()) {
|
||||
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),
|
||||
...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 });
|
||||
@@ -74,7 +79,9 @@ export default function GroupCreationForm() {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
|
||||
<KeyboardAvoidingView
|
||||
style={{ flex: 1, backgroundColor: "#f5f6fa", paddingTop: Platform.OS === "android" ? 40 : 0 }}
|
||||
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
||||
@@ -86,54 +93,54 @@ export default function GroupCreationForm() {
|
||||
<CustomInput label="Description" placeholder="e.g., 'Monthly fund for family needs'" value={form.description} onChangeText={(val) => handleChange("description", val)} multiline icon="document-text" error={errors.description} />
|
||||
|
||||
<Section title="Group Settings">
|
||||
<SettingRow label="Visibility">
|
||||
<ToggleButtons
|
||||
options={["PRIVATE", "PUBLIC"]}
|
||||
selectedValue={form.visibility}
|
||||
onSelect={(val) => handleChange("visibility", val)}
|
||||
/>
|
||||
</SettingRow>
|
||||
<SettingRow label="Fund Distribution">
|
||||
<ToggleButtons
|
||||
options={distributionTypes}
|
||||
selectedValue={form.withdrawalMethod}
|
||||
onSelect={(val) => handleChange("withdrawalMethod", val)}
|
||||
/>
|
||||
</SettingRow>
|
||||
<SettingRow label="Visibility">
|
||||
<ToggleButtons
|
||||
options={["PRIVATE", "PUBLIC"]}
|
||||
selectedValue={form.visibility}
|
||||
onSelect={(val) => handleChange("visibility", val)}
|
||||
/>
|
||||
</SettingRow>
|
||||
<SettingRow label="Fund Distribution">
|
||||
<ToggleButtons
|
||||
options={distributionTypes}
|
||||
selectedValue={form.withdrawalMethod}
|
||||
onSelect={(val) => handleChange("withdrawalMethod", val)}
|
||||
/>
|
||||
</SettingRow>
|
||||
</Section>
|
||||
|
||||
<Section title="Participant Rules">
|
||||
<View style={styles.participantsRow}>
|
||||
<View style={styles.participantInput}><CustomInput label="Min" placeholder="e.g., 5" value={form.minParticipants} onChangeText={(val) => handleChange("minParticipants", val)} keyboardType="numeric" icon="person-add" error={errors.minParticipants} /></View>
|
||||
<View style={styles.participantInput}><CustomInput label="Max" placeholder="e.g., 10" value={form.maxParticipants} onChangeText={(val) => handleChange("maxParticipants", val)} keyboardType="numeric" icon="people-circle" error={errors.maxParticipants} /></View>
|
||||
<View style={styles.participantInput}><CustomInput label="Min" placeholder="e.g., 5" value={form.minParticipants} onChangeText={(val) => handleChange("minParticipants", val)} keyboardType="numeric" icon="person-add" error={errors.minParticipants} /></View>
|
||||
<View style={styles.participantInput}><CustomInput label="Max" placeholder="e.g., 10" value={form.maxParticipants} onChangeText={(val) => handleChange("maxParticipants", val)} keyboardType="numeric" icon="people-circle" error={errors.maxParticipants} /></View>
|
||||
</View>
|
||||
</Section>
|
||||
|
||||
<Section title="Financial Details">
|
||||
<CustomInput label="Contribution Amount (INR)" placeholder="e.g., 5000" value={form.contributionAmount} onChangeText={(val) => handleChange("contributionAmount", val)} keyboardType="numeric" icon="cash" error={errors.contributionAmount} />
|
||||
<SettingRow label="Payment Cycle">
|
||||
<ToggleButtons
|
||||
options={cycleTypes}
|
||||
selectedValue={form.cycleType}
|
||||
onSelect={(val) => handleChange("cycleType", val)}
|
||||
isWrap={true}
|
||||
/>
|
||||
</SettingRow>
|
||||
{form.cycleType === "CUSTOM" && (<CustomInput label="Custom Cycle (Days)" placeholder="Enter number of days" value={form.customCycleDays} onChangeText={(val) => handleChange("customCycleDays", val)} keyboardType="numeric" icon="calendar" error={errors.customCycleDays} />)}
|
||||
<CustomInput label="Contribution Amount (INR)" placeholder="e.g., 5000" value={form.contributionAmount} onChangeText={(val) => handleChange("contributionAmount", val)} keyboardType="numeric" icon="cash" error={errors.contributionAmount} />
|
||||
<SettingRow label="Payment Cycle">
|
||||
<ToggleButtons
|
||||
options={cycleTypes}
|
||||
selectedValue={form.cycleType}
|
||||
onSelect={(val) => handleChange("cycleType", val)}
|
||||
isWrap={true}
|
||||
/>
|
||||
</SettingRow>
|
||||
{form.cycleType === "CUSTOM" && (<CustomInput label="Custom Cycle (Days)" placeholder="Enter number of days" value={form.customCycleDays} onChangeText={(val) => handleChange("customCycleDays", val)} keyboardType="numeric" icon="calendar" error={errors.customCycleDays} />)}
|
||||
</Section>
|
||||
|
||||
<Section title="Late Fee Policy">
|
||||
<SettingRow label="Fee Mode">
|
||||
<ToggleButtons
|
||||
options={lateFeeModes}
|
||||
selectedValue={form.lateFeeMode}
|
||||
onSelect={(val) => handleChange("lateFeeMode", val)}
|
||||
/>
|
||||
</SettingRow>
|
||||
<CustomInput label="Late Fee Value (INR)" placeholder="e.g., 50" value={form.lateFeeValue} onChangeText={(val) => handleChange("lateFeeValue", val)} keyboardType="numeric" icon="alert-circle" error={errors.lateFeeValue} />
|
||||
<SettingRow label="Fee Mode">
|
||||
<ToggleButtons
|
||||
options={lateFeeModes}
|
||||
selectedValue={form.lateFeeMode}
|
||||
onSelect={(val) => handleChange("lateFeeMode", val)}
|
||||
/>
|
||||
</SettingRow>
|
||||
<CustomInput label="Late Fee Value (INR)" placeholder="e.g., 50" value={form.lateFeeValue} onChangeText={(val) => handleChange("lateFeeValue", val)} keyboardType="numeric" icon="alert-circle" error={errors.lateFeeValue} />
|
||||
</Section>
|
||||
|
||||
<CustomButton title="Review Group" onPress={handleReview} style={{marginTop: 20}} />
|
||||
<CustomButton title="Review Group" onPress={handleReview} style={{ marginTop: 20 }} />
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
@@ -142,33 +149,33 @@ export default function GroupCreationForm() {
|
||||
// --- Helper Components for a cleaner layout ---
|
||||
|
||||
const Section: React.FC<{ title: string, children: React.ReactNode }> = ({ title, children }) => (
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>{title}</Text>
|
||||
{children}
|
||||
</View>
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>{title}</Text>
|
||||
{children}
|
||||
</View>
|
||||
);
|
||||
|
||||
const SettingRow: React.FC<{ label: string, children: React.ReactNode }> = ({ label, children }) => (
|
||||
<View style={styles.settingRow}>
|
||||
<Text style={styles.label}>{label}</Text>
|
||||
{children}
|
||||
</View>
|
||||
<View style={styles.settingRow}>
|
||||
<Text style={styles.label}>{label}</Text>
|
||||
{children}
|
||||
</View>
|
||||
);
|
||||
|
||||
const ToggleButtons: React.FC<{ options: string[], selectedValue: string, onSelect: (value: string) => void, isWrap?: boolean }> = ({ options, selectedValue, onSelect, isWrap = false }) => (
|
||||
<View style={[styles.toggleContainer, isWrap && { flexWrap: 'wrap' }]}>
|
||||
{options.map((option) => (
|
||||
<TouchableOpacity
|
||||
key={option}
|
||||
onPress={() => onSelect(option)}
|
||||
style={[styles.toggleButton, selectedValue === option && styles.selectedButton, isWrap && {flex: 0, paddingHorizontal: 15}]}
|
||||
>
|
||||
<Text style={[styles.toggleButtonText, selectedValue === option && styles.selectedButtonText]}>
|
||||
{option.charAt(0) + option.slice(1).toLowerCase()}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
<View style={[styles.toggleContainer, isWrap && { flexWrap: 'wrap' }]}>
|
||||
{options.map((option) => (
|
||||
<TouchableOpacity
|
||||
key={option}
|
||||
onPress={() => onSelect(option)}
|
||||
style={[styles.toggleButton, selectedValue === option && styles.selectedButton, isWrap && { flex: 0, paddingHorizontal: 15 }]}
|
||||
>
|
||||
<Text style={[styles.toggleButtonText, selectedValue === option && styles.selectedButtonText]}>
|
||||
{option.charAt(0) + option.slice(1).toLowerCase()}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
);
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
@@ -196,6 +203,31 @@ const styles = StyleSheet.create({
|
||||
paddingBottom: 10,
|
||||
},
|
||||
|
||||
avatarContainer: {
|
||||
position: "relative",
|
||||
marginBottom: 16,
|
||||
},
|
||||
avatar: {
|
||||
width: 120,
|
||||
height: 120,
|
||||
borderRadius: 60,
|
||||
borderWidth: 4,
|
||||
borderColor: "#e2e8f0",
|
||||
},
|
||||
cameraIcon: {
|
||||
position: "absolute",
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: colors.pastelBlue,
|
||||
borderRadius: 20,
|
||||
width: 40,
|
||||
height: 40,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderWidth: 3,
|
||||
borderColor: "#fff",
|
||||
elevation: 2,
|
||||
},
|
||||
settingRow: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
@@ -204,13 +236,13 @@ const styles = StyleSheet.create({
|
||||
|
||||
toggleContainer: { flexDirection: "row", gap: 10 },
|
||||
toggleButton: {
|
||||
flex: 1,
|
||||
paddingVertical: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: "#D1D5DB",
|
||||
borderRadius: 8,
|
||||
alignItems: "center",
|
||||
backgroundColor: "#F9FAFB"
|
||||
flex: 1,
|
||||
paddingVertical: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: "#D1D5DB",
|
||||
borderRadius: 8,
|
||||
alignItems: "center",
|
||||
backgroundColor: "#F9FAFB"
|
||||
},
|
||||
selectedButton: { backgroundColor: colors.pastelGreen, borderColor: "#62b59a" },
|
||||
toggleButtonText: { color: "#374151", fontWeight: "600", textTransform: 'capitalize' },
|
||||
|
||||
@@ -10,6 +10,8 @@ import {
|
||||
Alert,
|
||||
ActivityIndicator,
|
||||
Share,
|
||||
Image,
|
||||
ToastAndroid,
|
||||
} from 'react-native';
|
||||
import { RootStackParamList } from '../../navigation/AppNavigator'; // Adjust path
|
||||
import { apiCall } from '../../utils/ApiHelper'; // Adjust path
|
||||
@@ -20,6 +22,11 @@ import Clipboard from '@react-native-clipboard/clipboard';
|
||||
import { CompositeScreenProps, useNavigation } from '@react-navigation/native';
|
||||
import { BottomTabScreenProps } from '@react-navigation/bottom-tabs';
|
||||
import { ManagementTabParamList } from './ManagementTabNavigation'; // Adjust path
|
||||
import { UPLOAD_GROUP_IMAGE } from '../../utils/ApiUrls';
|
||||
import { launchImageLibrary } from 'react-native-image-picker';
|
||||
import *as Keychain from 'react-native-keychain'
|
||||
import Ionicons from '@react-native-vector-icons/ionicons';
|
||||
import { CustomButton } from '../../components/common/Custom';
|
||||
import { StackNavigationProp } from '@react-navigation/stack';
|
||||
|
||||
|
||||
@@ -54,6 +61,7 @@ export interface GroupDetails {
|
||||
organizerId: string;
|
||||
totalParticipants: number;
|
||||
participants: Participant[];
|
||||
imageBlob:string
|
||||
}
|
||||
|
||||
|
||||
@@ -108,6 +116,8 @@ const EditGroupScreen: React.FC<EditGroupScreenProps> = ({ route }) => {
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [paymentStatus, setPaymentStatus] = useState<boolean | null>(null);
|
||||
const [currentCycle, setCurrentCycle] = useState<number | null>(null);
|
||||
const [selectedImage, setSelectedImage] = useState<string | null>()
|
||||
const [imageUpdating, setImageUpdating] = useState<boolean>(false)
|
||||
|
||||
const initializeEditableData = (data: GroupDetails) => {
|
||||
setEditableData({
|
||||
@@ -130,7 +140,7 @@ const EditGroupScreen: React.FC<EditGroupScreenProps> = ({ route }) => {
|
||||
setError(null);
|
||||
try {
|
||||
const response = await apiCall(`https://exotic-humpback-mistakenly.ngrok-free.app/api/fund/group/details?groupId=${groupId}`, 'GET') as { status: string; data?: GroupDetails; message?: string };
|
||||
console.log("groupDetails",response)
|
||||
console.log("groupDetails", response)
|
||||
if (response.status === 'success' && response.data) {
|
||||
setGroupDetails(response.data);
|
||||
initializeEditableData(response.data);
|
||||
@@ -161,7 +171,7 @@ const getPaymentStatus = async()=>{
|
||||
|
||||
const handleCancel = () => {
|
||||
if (groupDetails) {
|
||||
initializeEditableData(groupDetails);
|
||||
initializeEditableData(groupDetails);
|
||||
}
|
||||
setEditingCard(null);
|
||||
};
|
||||
@@ -172,8 +182,8 @@ const getPaymentStatus = async()=>{
|
||||
|
||||
|
||||
if (editableData.maxParticipants < groupDetails.totalParticipants) {
|
||||
Alert.alert('Invalid Input', `Max participants cannot be less than the current count (${groupDetails.totalParticipants}).`);
|
||||
return;
|
||||
Alert.alert('Invalid Input', `Max participants cannot be less than the current count (${groupDetails.totalParticipants}).`);
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
@@ -228,23 +238,23 @@ const getPaymentStatus = async()=>{
|
||||
const response = await apiCall(`https://exotic-humpback-mistakenly.ngrok-free.app/api/invite/generate?groupId=${groupDetails.id}`, 'GET') as { data?: string };
|
||||
|
||||
|
||||
const inviteLink = response.data;
|
||||
const inviteLink = response.data;
|
||||
|
||||
if (inviteLink) {
|
||||
Clipboard.setString(inviteLink);
|
||||
Alert.alert('Copied!', 'Invitation link copied to clipboard.');
|
||||
await Share.share({
|
||||
message: `Join my group on CircleCollect! ${inviteLink}`,
|
||||
url: inviteLink,
|
||||
title: 'CircleCollect Group Invitation'
|
||||
});
|
||||
} else {
|
||||
throw new Error('Could not generate invitation link.');
|
||||
}
|
||||
if (inviteLink) {
|
||||
Clipboard.setString(inviteLink);
|
||||
Alert.alert('Copied!', 'Invitation link copied to clipboard.');
|
||||
await Share.share({
|
||||
message: `Join my group on CircleCollect! ${inviteLink}`,
|
||||
url: inviteLink,
|
||||
title: 'CircleCollect Group Invitation'
|
||||
});
|
||||
} else {
|
||||
throw new Error('Could not generate invitation link.');
|
||||
}
|
||||
} catch (error: any) {
|
||||
Alert.alert('Error', error.message || 'Failed to generate invitation.');
|
||||
Alert.alert('Error', error.message || 'Failed to generate invitation.');
|
||||
} finally {
|
||||
setInviting(false);
|
||||
setInviting(false);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -258,47 +268,47 @@ const getPaymentStatus = async()=>{
|
||||
const commonInputProps = { style: styles.input, placeholderTextColor: "#9CA3AF" };
|
||||
|
||||
const getInputForField = () => {
|
||||
switch(field) {
|
||||
case 'groupName':
|
||||
return <TextInput {...commonInputProps} value={editableData.groupName} onChangeText={(text) => handleUpdateField('groupName', text)} />;
|
||||
case 'description':
|
||||
return <TextInput {...commonInputProps} style={[styles.input, styles.textArea]} value={editableData.description} onChangeText={(text) => handleUpdateField('description', text)} multiline />;
|
||||
case 'contributionAmount':
|
||||
return <TextInput {...commonInputProps} value={String(editableData.contributionAmount ?? '')} onChangeText={(text) => handleUpdateField('contributionAmount', text ? Number(text.replace(/[^0-9]/g, '')) : 0)} keyboardType="numeric" />;
|
||||
case 'maxParticipants':
|
||||
return <TextInput {...commonInputProps} value={String(editableData.maxParticipants ?? '')} onChangeText={(text) => handleUpdateField('maxParticipants', text ? Number(text.replace(/[^0-9]/g, '')) : 0)} keyboardType="numeric" />;
|
||||
case 'latePaymentCharge':
|
||||
return <TextInput {...commonInputProps} value={String(editableData.latePaymentCharge ?? '')} onChangeText={(text) => handleUpdateField('latePaymentCharge', text ? Number(text.replace(/[^0-9]/g, '')) : 0)} keyboardType="numeric" />;
|
||||
case 'cycleType':
|
||||
return (
|
||||
<Picker selectedValue={editableData.cycleType} onValueChange={(itemValue) => handleUpdateField('cycleType', itemValue)} style={styles.picker}>
|
||||
{['MONTHLY', 'WEEKLY', 'QUARTERLY', 'CUSTOM'].map(c => <Picker.Item key={c} label={c} value={c} />)}
|
||||
</Picker>
|
||||
);
|
||||
case 'customCycleDays':
|
||||
if (editableData.cycleType !== 'CUSTOM') return null;
|
||||
return <TextInput {...commonInputProps} value={String(editableData.customCycleDays ?? '')} onChangeText={(text) => handleUpdateField('customCycleDays', text ? Number(text.replace(/[^0-9]/g, '')) : 0)} keyboardType="numeric" />;
|
||||
case 'visibility':
|
||||
return (
|
||||
<Picker selectedValue={editableData.visibility} onValueChange={(itemValue) => handleUpdateField('visibility', itemValue)} style={styles.picker}>
|
||||
<Picker.Item label="PUBLIC" value="PUBLIC" />
|
||||
<Picker.Item label="PRIVATE" value="PRIVATE" />
|
||||
</Picker>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
switch (field) {
|
||||
case 'groupName':
|
||||
return <TextInput {...commonInputProps} value={editableData.groupName} onChangeText={(text) => handleUpdateField('groupName', text)} />;
|
||||
case 'description':
|
||||
return <TextInput {...commonInputProps} style={[styles.input, styles.textArea]} value={editableData.description} onChangeText={(text) => handleUpdateField('description', text)} multiline />;
|
||||
case 'contributionAmount':
|
||||
return <TextInput {...commonInputProps} value={String(editableData.contributionAmount ?? '')} onChangeText={(text) => handleUpdateField('contributionAmount', text ? Number(text.replace(/[^0-9]/g, '')) : 0)} keyboardType="numeric" />;
|
||||
case 'maxParticipants':
|
||||
return <TextInput {...commonInputProps} value={String(editableData.maxParticipants ?? '')} onChangeText={(text) => handleUpdateField('maxParticipants', text ? Number(text.replace(/[^0-9]/g, '')) : 0)} keyboardType="numeric" />;
|
||||
case 'latePaymentCharge':
|
||||
return <TextInput {...commonInputProps} value={String(editableData.latePaymentCharge ?? '')} onChangeText={(text) => handleUpdateField('latePaymentCharge', text ? Number(text.replace(/[^0-9]/g, '')) : 0)} keyboardType="numeric" />;
|
||||
case 'cycleType':
|
||||
return (
|
||||
<Picker selectedValue={editableData.cycleType} onValueChange={(itemValue) => handleUpdateField('cycleType', itemValue)} style={styles.picker}>
|
||||
{['MONTHLY', 'WEEKLY', 'QUARTERLY', 'CUSTOM'].map(c => <Picker.Item key={c} label={c} value={c} />)}
|
||||
</Picker>
|
||||
);
|
||||
case 'customCycleDays':
|
||||
if (editableData.cycleType !== 'CUSTOM') return null;
|
||||
return <TextInput {...commonInputProps} value={String(editableData.customCycleDays ?? '')} onChangeText={(text) => handleUpdateField('customCycleDays', text ? Number(text.replace(/[^0-9]/g, '')) : 0)} keyboardType="numeric" />;
|
||||
case 'visibility':
|
||||
return (
|
||||
<Picker selectedValue={editableData.visibility} onValueChange={(itemValue) => handleUpdateField('visibility', itemValue)} style={styles.picker}>
|
||||
<Picker.Item label="PUBLIC" value="PUBLIC" />
|
||||
<Picker.Item label="PRIVATE" value="PRIVATE" />
|
||||
</Picker>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.fieldContainer}>
|
||||
<Text style={styles.infoLabel}>{label}</Text>
|
||||
{isEditing && isEditable ? (
|
||||
<View style={{marginTop: 8}}>{getInputForField()}</View>
|
||||
) : (
|
||||
<Text style={styles.infoValue}>{displayValue}</Text>
|
||||
)}
|
||||
</View>
|
||||
<View style={styles.fieldContainer}>
|
||||
<Text style={styles.infoLabel}>{label}</Text>
|
||||
{isEditing && isEditable ? (
|
||||
<View style={{ marginTop: 8 }}>{getInputForField()}</View>
|
||||
) : (
|
||||
<Text style={styles.infoValue}>{displayValue}</Text>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -307,31 +317,31 @@ const getPaymentStatus = async()=>{
|
||||
|
||||
|
||||
return (
|
||||
<View style={styles.card}>
|
||||
<View style={styles.cardHeader}>
|
||||
<Text style={styles.cardTitle}>{title}</Text>
|
||||
{isEditable && !editingCard && (
|
||||
<TouchableOpacity onPress={() => setEditingCard(cardKey)} style={styles.editButton}>
|
||||
<Text style={styles.editButtonText}>✎</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{fields.map(({ field, label, displayValue }) =>
|
||||
renderField(field, label, displayValue(), isEditingThisCard, isEditable)
|
||||
)}
|
||||
|
||||
{isEditingThisCard && (
|
||||
<View style={styles.cardActions}>
|
||||
<TouchableOpacity style={[styles.button, styles.cancelButton]} onPress={handleCancel} disabled={saving}>
|
||||
<Text style={[styles.buttonText, { color: '#374151' }]}>Cancel</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={[styles.button, styles.saveButton]} onPress={handleSave} disabled={saving}>
|
||||
{saving ? <ActivityIndicator color="#FFFFFF" size="small" /> : <Text style={styles.buttonText}>Save</Text>}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
<View style={styles.card}>
|
||||
<View style={styles.cardHeader}>
|
||||
<Text style={styles.cardTitle}>{title}</Text>
|
||||
{isEditable && !editingCard && (
|
||||
<TouchableOpacity onPress={() => setEditingCard(cardKey)} style={styles.editButton}>
|
||||
<Text style={styles.editButtonText}>✎</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{fields.map(({ field, label, displayValue }) =>
|
||||
renderField(field, label, displayValue(), isEditingThisCard)
|
||||
)}
|
||||
|
||||
{isEditingThisCard && (
|
||||
<View style={styles.cardActions}>
|
||||
<TouchableOpacity style={[styles.button, styles.cancelButton]} onPress={handleCancel} disabled={saving}>
|
||||
<Text style={[styles.buttonText, { color: '#374151' }]}>Cancel</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={[styles.button, styles.saveButton]} onPress={handleSave} disabled={saving}>
|
||||
{saving ? <ActivityIndicator color="#FFFFFF" size="small" /> : <Text style={styles.buttonText}>Save</Text>}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -344,6 +354,84 @@ const getPaymentStatus = async()=>{
|
||||
const isInvitable = groupDetails.status === 'APPROVED';
|
||||
const canStartGroup = groupDetails.status === 'APPROVED' && groupDetails.totalParticipants >= groupDetails.minParticipants;
|
||||
|
||||
const pickImage = () => {
|
||||
launchImageLibrary({ mediaType: "photo", quality: 0.5 }, (response) => {
|
||||
if (response.didCancel) return;
|
||||
if (response.errorCode) {
|
||||
Alert.alert("Error", response.errorMessage || "Something went wrong");
|
||||
} else if (response.assets && response.assets.length > 0) {
|
||||
const selectedImage = response.assets[0];
|
||||
console.log(selectedImage?.uri)
|
||||
setSelectedImage(selectedImage?.uri)
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleUpdateImage = async () => {
|
||||
try {
|
||||
const credentials = await Keychain.getGenericPassword();
|
||||
if (!credentials) {
|
||||
Alert.alert("Error", "You are not logged in");
|
||||
return;
|
||||
}
|
||||
const token = credentials.password;
|
||||
|
||||
if (!selectedImage) {
|
||||
Alert.alert("Error", "Please select an image first");
|
||||
return;
|
||||
}
|
||||
|
||||
setImageUpdating(true);
|
||||
|
||||
// Get file extension and mime type dynamically
|
||||
const fileExtension = selectedImage.split('.').pop();
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("file", {
|
||||
uri: selectedImage,
|
||||
type: "image/jpeg",
|
||||
name: `group_${groupId}_profile.${fileExtension || "jpg"}`,
|
||||
});
|
||||
|
||||
const url = `${UPLOAD_GROUP_IMAGE}${groupId}/upload-image`;
|
||||
|
||||
console.log("url : ", url)
|
||||
console.log("formdata : ", formData)
|
||||
|
||||
// return
|
||||
const response = await fetch(url, {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
"Authorization": `Bearer ${token}`,
|
||||
},
|
||||
body: formData,
|
||||
});
|
||||
|
||||
console.log("image response : ", response)
|
||||
if(response?.status === 200){
|
||||
fetchGroupDetails()
|
||||
ToastAndroid.show('Group uploaded successfully', ToastAndroid.SHORT)
|
||||
}
|
||||
|
||||
} catch (error:any) {
|
||||
console.error("❌ Error updating group image:", error);
|
||||
Alert.alert("Error", error.message || "Could not update group image");
|
||||
} finally {
|
||||
setImageUpdating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getProfileImage = () => {
|
||||
return selectedImage
|
||||
? selectedImage
|
||||
: groupDetails?.imageBlob
|
||||
? `data:image/jpeg;base64,${groupDetails.imageBlob}`
|
||||
: "https://img.freepik.com/premium-vector/people-group-frame-icon_791764-2649.jpg";
|
||||
};
|
||||
// Helper function to get MIME type
|
||||
|
||||
|
||||
return (
|
||||
<AppView style={{ flex: 1, paddingHorizontal: 0 }}>
|
||||
<View style={styles.headerContainer}>
|
||||
@@ -361,9 +449,31 @@ const getPaymentStatus = async()=>{
|
||||
contentContainerStyle={styles.contentContainer}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<View style={[styles.avatarContainer, { flexDirection: 'row', flex: 1, gap: 10 }]}>
|
||||
<View style={{}}>
|
||||
<Image
|
||||
// source={{ uri: groupDetails?.imageBlob ? groupDetails?.imageBlob : selectedImage || "https://img.freepik.com/premium-vector/people-group-frame-icon_791764-2649.jpg" }}
|
||||
source={{ uri: getProfileImage() }}
|
||||
style={styles.avatar}
|
||||
onError={() => console.log("Error loading image")}
|
||||
/>
|
||||
<TouchableOpacity style={styles.cameraIcon} onPress={pickImage}>
|
||||
<Ionicons name="camera" size={18} color="#000" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View style={{justifyContent:'center'}}>
|
||||
<CustomButton
|
||||
title={imageUpdating ? "Updating..." : "Update Image"}
|
||||
onPress={handleUpdateImage}
|
||||
icon={imageUpdating ? undefined : "cloud-upload"}
|
||||
style={{paddingHorizontal:20}}
|
||||
buttonBackground={colors.pastelBlue}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
{renderCard('Group Info', [
|
||||
{ field: 'groupName', label: 'Group Name', displayValue: () => groupDetails.groupName },
|
||||
{ field: 'description', label: 'Description', displayValue: () => groupDetails.description },
|
||||
{ field: 'groupName', label: 'Group Name', displayValue: () => groupDetails.groupName },
|
||||
{ field: 'description', label: 'Description', displayValue: () => groupDetails.description },
|
||||
], 'groupInfo')}
|
||||
|
||||
|
||||
@@ -384,28 +494,28 @@ const getPaymentStatus = async()=>{
|
||||
|
||||
|
||||
{renderCard('Configuration', [
|
||||
{ field: 'cycleType', label: 'Payment Cycle', displayValue: () => groupDetails.cycleType },
|
||||
...(groupDetails.cycleType === 'CUSTOM' ? [{ field: 'customCycleDays' as keyof EditGroupPayload, label: 'Custom Days', displayValue: () => `${groupDetails.customCycleDays} days` }] : []),
|
||||
{ field: 'visibility', label: 'Visibility', displayValue: () => groupDetails.visibility },
|
||||
{ field: 'cycleType', label: 'Payment Cycle', displayValue: () => groupDetails.cycleType },
|
||||
...(groupDetails.cycleType === 'CUSTOM' ? [{ field: 'customCycleDays' as keyof EditGroupPayload, label: 'Custom Days', displayValue: () => `${groupDetails.customCycleDays} days` }] : []),
|
||||
{ field: 'visibility', label: 'Visibility', displayValue: () => groupDetails.visibility },
|
||||
], 'configuration')}
|
||||
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.cardTitle}>Participants ({groupDetails.totalParticipants})</Text>
|
||||
{groupDetails.participants.length > 0 ? (
|
||||
groupDetails.participants.map(p => (
|
||||
<View key={p.id} style={styles.participantRow}>
|
||||
<View>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
<Text style={styles.participantName}>{`${p.firstName} ${p.lastName || ''}`.trim()}</Text>
|
||||
{p.role === 'ORGANIZER' && <View style={styles.organizerBadge}><Text style={styles.organizerBadgeText}>Organizer</Text></View>}
|
||||
</View>
|
||||
<Text style={styles.participantMobile}>{p.mobile}</Text>
|
||||
</View>
|
||||
</View>
|
||||
))
|
||||
) : (
|
||||
<Text style={styles.noParticipantsText}>No participants yet.</Text>
|
||||
)}
|
||||
<Text style={styles.cardTitle}>Participants ({groupDetails.totalParticipants})</Text>
|
||||
{groupDetails.participants.length > 0 ? (
|
||||
groupDetails.participants.map(p => (
|
||||
<View key={p.id} style={styles.participantRow}>
|
||||
<View>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
<Text style={styles.participantName}>{`${p.firstName} ${p.lastName || ''}`.trim()}</Text>
|
||||
{p.role === 'ORGANIZER' && <View style={styles.organizerBadge}><Text style={styles.organizerBadgeText}>Organizer</Text></View>}
|
||||
</View>
|
||||
<Text style={styles.participantMobile}>{p.mobile}</Text>
|
||||
</View>
|
||||
</View>
|
||||
))
|
||||
) : (
|
||||
<Text style={styles.noParticipantsText}>No participants yet.</Text>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
@@ -460,6 +570,33 @@ const styles = StyleSheet.create({
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#E5E7EB',
|
||||
},
|
||||
|
||||
|
||||
avatarContainer: {
|
||||
position: "relative",
|
||||
marginVertical: 16,
|
||||
},
|
||||
avatar: {
|
||||
width: 120,
|
||||
height: 120,
|
||||
borderRadius: 60,
|
||||
borderWidth: 4,
|
||||
borderColor: "#e2e8f0",
|
||||
},
|
||||
cameraIcon: {
|
||||
position: "absolute",
|
||||
// right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: colors.pastelBlue,
|
||||
borderRadius: 20,
|
||||
width: 40,
|
||||
height: 40,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderWidth: 3,
|
||||
borderColor: "#fff",
|
||||
elevation: 2,
|
||||
},
|
||||
headerTitle: { fontSize: 28, fontWeight: 'bold', color: '#111827' },
|
||||
card: { backgroundColor: '#FFFFFF', borderRadius: 16, padding: 20, marginBottom: 16, shadowColor: '#374151', shadowOpacity: 0.05, shadowRadius: 10 },
|
||||
cardHeader: {
|
||||
|
||||
@@ -25,6 +25,8 @@ const FloatingTabBar = ({ state, descriptors, navigation }: BottomTabBarProps) =
|
||||
{state.routes.map((route, index) => {
|
||||
const { options } = descriptors[route.key];
|
||||
const label = options.tabBarLabel ?? options.title ?? route.name;
|
||||
|
||||
console.log("option : ", options)
|
||||
// A custom option to pass the icon name
|
||||
const iconName = options.tabBarIconName ?? 'help-circle';
|
||||
|
||||
@@ -66,7 +68,7 @@ const FloatingTabBar = ({ state, descriptors, navigation }: BottomTabBarProps) =
|
||||
color={isFocused ? '#4F46E5' : '#6B7280'}
|
||||
/>
|
||||
<Text style={[styles.tabLabel, { color: isFocused ? '#4F46E5' : '#6B7280' }]}>
|
||||
{label}
|
||||
{label as string}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
@@ -118,6 +120,7 @@ const ManagementTabNavigation: React.FC<Props> = ({ route }) => {
|
||||
tabBarLabel: 'Members',
|
||||
|
||||
}}
|
||||
|
||||
/>
|
||||
{/* You can easily add more tabs here in the future */}
|
||||
</Tab.Navigator>
|
||||
|
||||
@@ -445,8 +445,6 @@ const Profile = () => {
|
||||
icon={imageUpdating ? undefined : "cloud-upload"}
|
||||
style={styles.updateImageButton}
|
||||
buttonBackground={colors.pastelBlue}
|
||||
|
||||
|
||||
/>
|
||||
</View>
|
||||
|
||||
|
||||
@@ -20,3 +20,5 @@ export const GROUP_ALL_MEMBER = `${BASE_URL}fund/group/all/member`
|
||||
export const UPDATE_BANK_URL = `${BASE_URL}user/bank/update`;
|
||||
export const CONTRIBUTE = `${BASE_URL}payments/groups/`;
|
||||
export const TRANSACTION = `${BASE_URL}payments/my-transactions`;
|
||||
export const UPLOAD_GROUP_IMAGE = `${BASE_URL}fund/groups/`;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user