KavyaCsh/Caregiver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement payment profile management and caregiver authentication services with theme and UI components

Browse Source
This commit is contained in:
KavyaCsh
2026-08-18 14:16:24 +05:30
parent 8beb0ebbb5
commit 13656d4bb3
9 changed files with 487 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ui/Header.tsx
+3 -2
View File
@@ -10,9 +10,10 @@ interface HeaderProps {
title: string;
showBack?: boolean;
rightComponent?: React.ReactNode;
onBack?: () => void;
}
export const Header: React.FC<HeaderProps> = ({ title, showBack = false, rightComponent }) => {
export const Header: React.FC<HeaderProps> = ({ title, showBack = false, rightComponent, onBack }) => {
const navigation = useNavigation();
const { screenPadding } = useResponsiveLayout();
@@ -21,7 +22,7 @@ export const Header: React.FC<HeaderProps> = ({ title, showBack = false, rightCo
<View style={styles.leftContainer}>
{showBack && (
<TouchableOpacity
onPress={() => navigation.goBack()}
onPress={() => onBack ? onBack() : navigation.goBack()}
style={styles.backButton}
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
>
src/components/ui/OtpInput.tsx
+116
View File
@@ -0,0 +1,116 @@
import React, { useState, useRef } from 'react';
import { View, TextInput, StyleSheet, Pressable } from 'react-native';
interface OtpInputProps {
length?: number;
value: string;
onChange: (value: string) => void;
error?: boolean;
}
export const OtpInput: React.FC<OtpInputProps> = ({ length = 6, value, onChange, error }) => {
const [isFocused, setIsFocused] = useState(false);
const inputRef = useRef<TextInput>(null);
const handlePress = () => {
inputRef.current?.focus();
};
const renderBoxes = () => {
const boxes = [];
for (let i = 0; i < length; i++) {
const char = value[i] || '';
const isCurrentDigit = i === value.length;
const isLastDigit = i === length - 1;
const isBoxFocused = isFocused && (isCurrentDigit || (value.length === length && isLastDigit));
boxes.push(
<View
key={i}
style={[
styles.box,
isBoxFocused && styles.boxFocused,
error && styles.boxError,
]}
>
<TextInput
style={styles.text}
value={char}
editable={false}
selectTextOnFocus={false}
/>
</View>
);
}
return boxes;
};
return (
<View style={styles.container}>
<Pressable style={styles.boxesContainer} onPress={handlePress}>
{renderBoxes()}
</Pressable>
<TextInput
ref={inputRef}
value={value}
onChangeText={(text) => {
// Allow only numbers and up to `length`
const cleanedText = text.replace(/[^0-9]/g, '');
if (cleanedText.length <= length) {
onChange(cleanedText);
}
}}
keyboardType="number-pad"
textContentType="oneTimeCode"
maxLength={length}
style={styles.hiddenInput}
onFocus={() => setIsFocused(true)}
onBlur={() => setIsFocused(false)}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
marginVertical: 8,
alignItems: 'center',
width: '100%',
},
boxesContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
width: '100%',
},
box: {
width: 45,
height: 55,
borderWidth: 1,
borderColor: '#D1D5DB', // gray-300
borderRadius: 12,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F9FAFB', // gray-50
},
boxFocused: {
borderColor: '#4F46E5', // indigo-600
borderWidth: 2,
backgroundColor: '#EEF2FF', // indigo-50
},
boxError: {
borderColor: '#DC2626', // red-600
backgroundColor: '#FEF2F2', // red-50
},
text: {
fontSize: 24,
fontWeight: 'bold',
color: '#111827', // gray-900
textAlign: 'center',
},
hiddenInput: {
position: 'absolute',
width: 1,
height: 1,
opacity: 0,
},
});
src/constants/theme.ts
+2 -2
View File
@@ -1,12 +1,12 @@
export const THEME = {
colors: {
primary: 'navy',
primary: '#1E3A8A',
primaryLight: '#E0E7FF',
primaryLighter: '#EEF2FF',
background: '#F9FAFB',
surface: '#FFFFFF',
text: {
primary: '#111827',
primary: '#1e3a8aff',
secondary: '#6B7280',
muted: '#9CA3AF',
},
src/navigation/AppNavigator.tsx
+3
View File
@@ -15,6 +15,7 @@ import { AddSkillScreen } from '../screens/AddSkillScreen';
import { AvailabilityListScreen } from '../screens/AvailabilityListScreen';
import { AddAvailabilityScreen } from '../screens/AddAvailabilityScreen';
import { EditAvailabilityScreen } from '../screens/EditAvailabilityScreen';
import { PaymentProfileScreen } from '../screens/PaymentProfileScreen';
export type RootStackParamList = {
Login: undefined;
@@ -30,6 +31,7 @@ export type RootStackParamList = {
start_time: string;
end_time: string;
};
PaymentProfile: undefined;
};
export type TabParamList = {
@@ -117,6 +119,7 @@ export const AppNavigator = () => {
<Stack.Screen name="AvailabilityList" component={AvailabilityListScreen} />
<Stack.Screen name="AddAvailability" component={AddAvailabilityScreen} />
<Stack.Screen name="EditAvailability" component={EditAvailabilityScreen} />
<Stack.Screen name="PaymentProfile" component={PaymentProfileScreen} />
</Stack.Navigator>
</NavigationContainer>
);
src/screens/LoginScreen.tsx
+10 -7
View File
@@ -4,6 +4,7 @@ import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { RootStackParamList } from '../navigation/AppNavigator';
import { Typography } from '../components/ui/Typography';
import { Input } from '../components/ui/Input';
import { OtpInput } from '../components/ui/OtpInput';
import { Button } from '../components/ui/Button';
import { authService } from '../services/authService';
import AsyncStorage from '@react-native-async-storage/async-storage';
@@ -108,15 +109,17 @@ export const LoginScreen: React.FC<LoginScreenProps> = ({ navigation }) => {
onChangeText={setPhone}
/>
) : (
<Input
label="Enter OTP"
labelStyle={{ fontWeight: 'bold', fontSize: 16 }}
placeholder="e.g. 881433"
keyboardType="numeric"
autoCapitalize="none"
<View style={{ marginBottom: 16 }}>
<Typography variant="body" weight="bold" style={{ marginBottom: 12, fontSize: 16, color: '#111827' }}>
Enter OTP
</Typography>
<OtpInput
length={6}
value={otp}
onChangeText={setOtp}
onChange={setOtp}
error={!!error}
/>
</View>
)}
<Button
src/screens/PaymentProfileScreen.tsx
+235
View File
@@ -0,0 +1,235 @@
import React, { useState, useEffect } from 'react';
import { View, StyleSheet, ScrollView, Alert, KeyboardAvoidingView, Platform } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
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';
interface PaymentProfileScreenProps {
navigation: NativeStackNavigationProp<RootStackParamList, 'PaymentProfile'>;
}
export const PaymentProfileScreen: React.FC<PaymentProfileScreenProps> = ({ navigation }) => {
const [isLoading, setIsLoading] = useState(true);
const [isSaving, setIsSaving] = useState(false);
const [existingId, setExistingId] = useState<number | undefined>(undefined);
const [form, setForm] = useState<Partial<PaymentProfile>>({
payment_method: 'bank',
account_holder_name: '',
account_number: '',
ifsc_code: '',
bank_name: '',
branch_name: '',
account_type: 'savings',
});
const [errors, setErrors] = useState<Record<string, string>>({});
useEffect(() => {
fetchPaymentProfile();
}, []);
const fetchPaymentProfile = async () => {
try {
setIsLoading(true);
const response = await profileService.getPaymentProfile();
if (response.success && response.data && response.data.id) {
setExistingId(response.data.id);
setForm({
payment_method: response.data.payment_method || 'bank',
account_holder_name: response.data.account_holder_name || '',
account_number: response.data.account_number || '',
ifsc_code: response.data.ifsc_code || '',
bank_name: response.data.bank_name || '',
branch_name: response.data.branch_name || '',
account_type: response.data.account_type || 'savings',
});
}
} catch (error: any) {
// If 404 or not found, it means no profile exists yet.
console.log('No existing payment profile found or error fetching.');
} finally {
setIsLoading(false);
}
};
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 (existingId) {
await profileService.updatePaymentProfile(payload);
Alert.alert('Success', 'Payment profile updated successfully.');
} else {
const response = await profileService.addPaymentProfile(payload);
if (response.data && response.data.id) {
setExistingId(response.data.id);
}
Alert.alert('Success', '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="Payment Profile" showBack onBack={() => navigation.goBack()} />
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
>
<ScrollView style={styles.content} contentContainerStyle={styles.scrollContent}>
{isLoading ? (
<View style={styles.centerContainer}>
<Typography>Loading...</Typography>
</View>
) : (
<>
<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={existingId ? "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,
paddingBottom: 40,
},
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,
},
});
src/screens/SettingsScreen.tsx
+61 -2
View File
@@ -1,14 +1,15 @@
import React from 'react';
import { View, StyleSheet, TouchableOpacity } from 'react-native';
import { View, StyleSheet, TouchableOpacity, Alert } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Typography } from '../components/ui/Typography';
import { Header } from '../components/ui/Header';
import { Card } from '../components/ui/Card';
import { User, ChevronRight } from 'lucide-react-native';
import { User, ChevronRight, LogOut, CreditCard } from 'lucide-react-native';
import { CompositeNavigationProp } from '@react-navigation/native';
import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { TabParamList, RootStackParamList } from '../navigation/AppNavigator';
import { authService } from '../services/authService';
type SettingsScreenNavigationProp = CompositeNavigationProp<
BottomTabNavigationProp<TabParamList, 'Settings'>,
@@ -20,6 +21,30 @@ interface SettingsScreenProps {
}
export const SettingsScreen: React.FC<SettingsScreenProps> = ({ navigation }) => {
const handleLogout = () => {
Alert.alert(
"Logout",
"Are you sure you want to log out?",
[
{
text: "Cancel",
style: "cancel"
},
{
text: "Logout",
onPress: async () => {
await authService.logout();
(navigation as unknown as NativeStackNavigationProp<RootStackParamList>).reset({
index: 0,
routes: [{ name: 'Login' }],
});
},
style: "destructive"
}
]
);
};
return (
// @ts-ignore
<SafeAreaView edges={['top', 'left', 'right']} style={styles.container as any}>
@@ -43,6 +68,40 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({ navigation }) =>
</Card>
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('PaymentProfile')}>
<Card noPadding style={styles.menuItem}>
<View style={styles.menuIconContainer}>
<CreditCard color="#4F46E5" size={24} />
</View>
<View style={styles.menuTextContainer}>
<Typography variant="body" weight="bold" style={styles.menuTitle}>
Payment Profile
</Typography>
<Typography variant="caption" style={styles.menuSubtitle}>
Manage your bank details
</Typography>
</View>
<ChevronRight color="#9CA3AF" size={20} />
</Card>
</TouchableOpacity>
<TouchableOpacity onPress={handleLogout}>
<Card noPadding style={styles.menuItem}>
<View style={[styles.menuIconContainer, { backgroundColor: '#FEE2E2' }]}>
<LogOut color="#EF4444" size={24} />
</View>
<View style={styles.menuTextContainer}>
<Typography variant="body" weight="bold" style={[styles.menuTitle, { color: '#EF4444' }]}>
Logout
</Typography>
<Typography variant="caption" style={styles.menuSubtitle}>
Sign out of your account
</Typography>
</View>
<ChevronRight color="#9CA3AF" size={20} />
</Card>
</TouchableOpacity>
</View>
</SafeAreaView>
);
src/services/authService.ts
+11
View File
@@ -1,4 +1,5 @@
import { apiClient } from './apiClient';
import AsyncStorage from '@react-native-async-storage/async-storage';
export interface LoginResponse {
// Define expected response based on your backend
@@ -50,4 +51,14 @@ export const authService = {
throw error;
}
},
logout: async (): Promise<void> => {
try {
await AsyncStorage.removeItem('token');
await AsyncStorage.removeItem('refresh_token');
} catch (error) {
console.error('Logout Error:', error);
throw error;
}
},
};
src/services/profileService.ts
+44
View File
@@ -51,6 +51,20 @@ export interface CaregiverAvailability {
is_available: number;
}
export interface PaymentProfile {
id?: number;
caregiver_profile_id?: number;
payment_method: string;
account_holder_name: string;
account_number: string;
ifsc_code: string;
bank_name: string;
branch_name: string;
account_type: string;
upi_id?: string | null;
is_verified?: boolean;
}
export const profileService = {
getProfile: async (): Promise<CaregiverProfileResponse> => {
try {
@@ -172,5 +186,35 @@ export const profileService = {
console.error('Error deleting day availability:', error);
throw error;
}
},
getPaymentProfile: async (): Promise<any> => {
try {
const response = await apiClient.get('/v1/resource/caregiver/payment-profile');
return response.data;
} catch (error) {
console.error('Error fetching payment profile:', error);
throw error;
}
},
addPaymentProfile: async (data: PaymentProfile): Promise<any> => {
try {
const response = await apiClient.post('/v1/resource/caregiver/payment-profile', data);
return response.data;
} catch (error) {
console.error('Error adding payment profile:', error);
throw error;
}
},
updatePaymentProfile: async (data: PaymentProfile): Promise<any> => {
try {
const response = await apiClient.patch('/v1/resource/caregiver/payment-profile', data);
return response.data;
} catch (error) {
console.error('Error updating payment profile:', error);
throw error;
}
}
};