feat: implement full caregiver application feature set including services, availability, profile, and navigation modules
This commit is contained in:
@@ -0,0 +1,201 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { View, StyleSheet, ScrollView, Alert, KeyboardAvoidingView, Platform } from 'react-native';
|
||||
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
||||
import { RouteProp } from '@react-navigation/native';
|
||||
import { RootStackParamList } from '../navigation/AppNavigator';
|
||||
import { Header } from '../components/ui/Header';
|
||||
import { Input } from '../components/ui/Input';
|
||||
import { Button } from '../components/ui/Button';
|
||||
import { Typography } from '../components/ui/Typography';
|
||||
import { profileService, PaymentProfile } from '../services/profileService';
|
||||
import { THEME } from '../constants/theme';
|
||||
import { CreditCard } from 'lucide-react-native';
|
||||
import { useSnackbar } from '../context/SnackbarContext';
|
||||
|
||||
interface AddEditPaymentProfileScreenProps {
|
||||
navigation: NativeStackNavigationProp<RootStackParamList, 'AddEditPaymentProfile'>;
|
||||
route: RouteProp<RootStackParamList, 'AddEditPaymentProfile'>;
|
||||
}
|
||||
|
||||
export const AddEditPaymentProfileScreen: React.FC<AddEditPaymentProfileScreenProps> = ({ navigation, route }) => {
|
||||
const { profile } = route.params || {};
|
||||
const isEditing = !!profile;
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const insets = useSafeAreaInsets();
|
||||
const { showSnackbar } = useSnackbar();
|
||||
|
||||
const [form, setForm] = useState<Partial<PaymentProfile>>({
|
||||
payment_method: profile?.payment_method || 'bank',
|
||||
account_holder_name: profile?.account_holder_name || '',
|
||||
account_number: profile?.account_number || '',
|
||||
ifsc_code: profile?.ifsc_code || '',
|
||||
bank_name: profile?.bank_name || '',
|
||||
branch_name: profile?.branch_name || '',
|
||||
account_type: profile?.account_type || 'savings',
|
||||
});
|
||||
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
|
||||
const handleChange = (field: keyof PaymentProfile, value: string) => {
|
||||
setForm(prev => ({ ...prev, [field]: value }));
|
||||
if (errors[field]) {
|
||||
setErrors(prev => ({ ...prev, [field]: '' }));
|
||||
}
|
||||
};
|
||||
|
||||
const validate = () => {
|
||||
const newErrors: Record<string, string> = {};
|
||||
if (!form.account_holder_name) newErrors.account_holder_name = 'Account holder name is required';
|
||||
if (!form.account_number) newErrors.account_number = 'Account number is required';
|
||||
if (!form.ifsc_code) newErrors.ifsc_code = 'IFSC code is required';
|
||||
if (!form.bank_name) newErrors.bank_name = 'Bank name is required';
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!validate()) {
|
||||
Alert.alert('Validation Error', 'Please fill in all required fields.');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsSaving(true);
|
||||
const payload = form as PaymentProfile;
|
||||
|
||||
if (isEditing && profile?.id) {
|
||||
payload.id = profile.id;
|
||||
await profileService.updatePaymentProfile(payload);
|
||||
showSnackbar('Payment profile updated successfully.');
|
||||
} else {
|
||||
await profileService.addPaymentProfile(payload);
|
||||
showSnackbar('Payment profile added successfully.');
|
||||
}
|
||||
navigation.goBack();
|
||||
} catch (error: any) {
|
||||
console.error('Error saving payment profile:', error);
|
||||
Alert.alert('Error', error?.response?.data?.message || 'Failed to save payment profile. Please try again.');
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
// @ts-ignore - TS types for SafeAreaView in this version incorrectly omit the style prop
|
||||
<SafeAreaView edges={['top', 'left', 'right']} style={styles.container as any}>
|
||||
<Header title={isEditing ? "Edit Bank Account" : "Add Bank Account"} showBack onBack={() => navigation.goBack()} />
|
||||
|
||||
<KeyboardAvoidingView
|
||||
style={{ flex: 1 }}
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
|
||||
>
|
||||
<ScrollView style={styles.content} contentContainerStyle={[styles.scrollContent, { paddingBottom: Math.max(insets.bottom + 40, 40) }]}>
|
||||
<View style={styles.iconContainer}>
|
||||
<View style={styles.iconWrapper}>
|
||||
<CreditCard color={THEME.colors.primary} size={32} />
|
||||
</View>
|
||||
<Typography variant="body" style={styles.headerSubtitle}>
|
||||
Add your bank details to receive payments.
|
||||
</Typography>
|
||||
</View>
|
||||
|
||||
<View style={styles.formContainer}>
|
||||
<Input
|
||||
label="Account Holder Name *"
|
||||
placeholder="e.g. John Doe"
|
||||
value={form.account_holder_name}
|
||||
onChangeText={(val) => handleChange('account_holder_name', val)}
|
||||
error={errors.account_holder_name}
|
||||
/>
|
||||
<Input
|
||||
label="Account Number *"
|
||||
placeholder="e.g. 9876543210"
|
||||
keyboardType="numeric"
|
||||
value={form.account_number}
|
||||
onChangeText={(val) => handleChange('account_number', val)}
|
||||
error={errors.account_number}
|
||||
/>
|
||||
<Input
|
||||
label="IFSC Code *"
|
||||
placeholder="e.g. SBIN0001234"
|
||||
autoCapitalize="characters"
|
||||
value={form.ifsc_code}
|
||||
onChangeText={(val) => handleChange('ifsc_code', val)}
|
||||
error={errors.ifsc_code}
|
||||
/>
|
||||
<Input
|
||||
label="Bank Name *"
|
||||
placeholder="e.g. State Bank of India"
|
||||
value={form.bank_name}
|
||||
onChangeText={(val) => handleChange('bank_name', val)}
|
||||
error={errors.bank_name}
|
||||
/>
|
||||
<Input
|
||||
label="Branch Name"
|
||||
placeholder="e.g. Koramangala"
|
||||
value={form.branch_name}
|
||||
onChangeText={(val) => handleChange('branch_name', val)}
|
||||
/>
|
||||
<Input
|
||||
label="Account Type"
|
||||
placeholder="e.g. savings or current"
|
||||
value={form.account_type}
|
||||
onChangeText={(val) => handleChange('account_type', val)}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<Button
|
||||
title={isEditing ? "Update Profile" : "Save Profile"}
|
||||
onPress={handleSave}
|
||||
loading={isSaving}
|
||||
style={styles.saveButton}
|
||||
/>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: THEME.colors.background,
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {
|
||||
padding: 24,
|
||||
},
|
||||
centerContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginTop: 100,
|
||||
},
|
||||
iconContainer: {
|
||||
alignItems: 'center',
|
||||
marginBottom: 32,
|
||||
},
|
||||
iconWrapper: {
|
||||
width: 64,
|
||||
height: 64,
|
||||
borderRadius: 32,
|
||||
backgroundColor: THEME.colors.primaryLighter,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginBottom: 16,
|
||||
},
|
||||
headerSubtitle: {
|
||||
color: THEME.colors.text.secondary,
|
||||
textAlign: 'center',
|
||||
},
|
||||
formContainer: {
|
||||
marginBottom: 32,
|
||||
},
|
||||
saveButton: {
|
||||
backgroundColor: THEME.colors.primary,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user