434 lines
12 KiB
TypeScript
434 lines
12 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { getUser } from '@/services/auth';
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
ScrollView,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
Alert,
|
|
ActivityIndicator,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
} from 'react-native';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { useRouter } from 'expo-router';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { useCart } from '../../hooks/useCart';
|
|
import orderApi from '../../services/orderApi';
|
|
|
|
interface PaymentMethod {
|
|
id: string;
|
|
name: string;
|
|
icon: string;
|
|
}
|
|
|
|
const PAYMENT_METHODS: PaymentMethod[] = [
|
|
{ id: 'COD', name: 'Thanh toán khi nhận hàng', icon: 'cash-outline' },
|
|
{ id: 'BANK', name: 'Chuyển khoản ngân hàng', icon: 'card-outline' },
|
|
{ id: 'MOMO', name: 'Ví MoMo', icon: 'wallet-outline' },
|
|
{ id: 'VNPAY', name: 'VNPay', icon: 'card-outline' },
|
|
];
|
|
|
|
export default function CheckoutScreen() {
|
|
const router = useRouter();
|
|
const { cart, refreshCart, clearCart } = useCart();
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
const [shippingAddress, setShippingAddress] = useState('');
|
|
const [phoneNumber, setPhoneNumber] = useState('');
|
|
const [note, setNote] = useState('');
|
|
const [selectedPayment, setSelectedPayment] = useState('COD');
|
|
|
|
const formatPrice = (price: number) => {
|
|
return new Intl.NumberFormat('vi-VN', {
|
|
style: 'currency',
|
|
currency: 'VND',
|
|
}).format(price);
|
|
};
|
|
|
|
const validateForm = () => {
|
|
if (!shippingAddress.trim()) {
|
|
Alert.alert('Lỗi', 'Vui lòng nhập địa chỉ giao hàng');
|
|
return false;
|
|
}
|
|
if (!phoneNumber.trim()) {
|
|
Alert.alert('Lỗi', 'Vui lòng nhập số điện thoại');
|
|
return false;
|
|
}
|
|
if (!/^[0-9]{10}$/.test(phoneNumber)) {
|
|
Alert.alert('Lỗi', 'Số điện thoại không hợp lệ (10 chữ số)');
|
|
return false;
|
|
}
|
|
return true;
|
|
};
|
|
|
|
const handleCreateOrder = async () => {
|
|
if (!validateForm() || !cart) return;
|
|
|
|
setLoading(true);
|
|
|
|
try {
|
|
// LẤY userId từ AsyncStorage
|
|
const user = await getUser();
|
|
if (!user) {
|
|
Alert.alert("Lỗi", "Bạn chưa đăng nhập!");
|
|
return;
|
|
}
|
|
const userId = user.userId;
|
|
|
|
const fullAddress = `${shippingAddress}${note ? ` - Ghi chú: ${note}` : ''} - SĐT: ${phoneNumber}`;
|
|
|
|
const orderData = {
|
|
shippingAddress: fullAddress,
|
|
items: cart.items.map(item => ({
|
|
productId: item.product.productId,
|
|
quantity: item.quantity,
|
|
})),
|
|
};
|
|
|
|
// Gọi API đúng với 2 tham số
|
|
const response = await orderApi.createOrder(userId, orderData);
|
|
|
|
if (response.success && response.data) {
|
|
await clearCart(false);
|
|
await refreshCart();
|
|
router.replace({
|
|
pathname: '/order-success',
|
|
params: { orderId: response.data.orderId.toString() }
|
|
});
|
|
} else {
|
|
Alert.alert("Lỗi", response.message || "Đặt hàng thất bại");
|
|
}
|
|
} catch (error: any) {
|
|
console.error("Create order error:", error);
|
|
Alert.alert("Lỗi", error.message || "Không thể kết nối đến server");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
|
|
|
|
if (!cart || cart.items.length === 0) {
|
|
return (
|
|
<SafeAreaView style={styles.container}>
|
|
<View style={styles.loadingContainer}>
|
|
<ActivityIndicator size="large" color="#ff6b6b" />
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<SafeAreaView style={styles.container} edges={['bottom']}>
|
|
<KeyboardAvoidingView
|
|
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
|
style={{ flex: 1 }}
|
|
>
|
|
{/* Header */}
|
|
<View style={styles.header}>
|
|
<TouchableOpacity onPress={() => router.back()}>
|
|
<Ionicons name="arrow-back" size={24} color="#333" />
|
|
</TouchableOpacity>
|
|
<Text style={styles.headerTitle}>Thanh toán</Text>
|
|
<View style={{ width: 24 }} />
|
|
</View>
|
|
|
|
<ScrollView style={styles.scrollView}>
|
|
{/* Shipping Address */}
|
|
<View style={styles.section}>
|
|
<View style={styles.sectionHeader}>
|
|
<Ionicons name="location" size={20} color="#ff6b6b" />
|
|
<Text style={styles.sectionTitle}>Địa chỉ giao hàng</Text>
|
|
</View>
|
|
|
|
<TextInput
|
|
style={styles.input}
|
|
placeholder="Số nhà, tên đường, phường/xã"
|
|
value={shippingAddress}
|
|
onChangeText={setShippingAddress}
|
|
multiline
|
|
numberOfLines={2}
|
|
/>
|
|
|
|
<TextInput
|
|
style={styles.input}
|
|
placeholder="Số điện thoại (10 chữ số)"
|
|
value={phoneNumber}
|
|
onChangeText={setPhoneNumber}
|
|
keyboardType="phone-pad"
|
|
maxLength={10}
|
|
/>
|
|
|
|
<TextInput
|
|
style={styles.input}
|
|
placeholder="Ghi chú cho người giao hàng (không bắt buộc)"
|
|
value={note}
|
|
onChangeText={setNote}
|
|
multiline
|
|
numberOfLines={2}
|
|
/>
|
|
</View>
|
|
|
|
{/* Order Items */}
|
|
<View style={styles.section}>
|
|
<View style={styles.sectionHeader}>
|
|
<Ionicons name="cart" size={20} color="#ff6b6b" />
|
|
<Text style={styles.sectionTitle}>
|
|
Sản phẩm ({cart.items.length})
|
|
</Text>
|
|
</View>
|
|
|
|
{cart.items.map((item) => (
|
|
<View key={item.cartItemId} style={styles.cartItem}>
|
|
<View style={styles.itemInfo}>
|
|
<Text style={styles.itemName} numberOfLines={2}>
|
|
{item.product.productName}
|
|
</Text>
|
|
<Text style={styles.itemPrice}>
|
|
{formatPrice(item.product.price)} x {item.quantity}
|
|
</Text>
|
|
</View>
|
|
<Text style={styles.itemTotal}>
|
|
{formatPrice(item.product.price * item.quantity)}
|
|
</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
|
|
{/* Payment Method */}
|
|
<View style={styles.section}>
|
|
<View style={styles.sectionHeader}>
|
|
<Ionicons name="card" size={20} color="#ff6b6b" />
|
|
<Text style={styles.sectionTitle}>Phương thức thanh toán</Text>
|
|
</View>
|
|
|
|
{PAYMENT_METHODS.map((method) => (
|
|
<TouchableOpacity
|
|
key={method.id}
|
|
style={[
|
|
styles.paymentMethod,
|
|
selectedPayment === method.id && styles.paymentMethodActive,
|
|
]}
|
|
onPress={() => setSelectedPayment(method.id)}
|
|
>
|
|
<View style={styles.paymentMethodInfo}>
|
|
<Ionicons name={method.icon as any} size={24} color="#333" />
|
|
<Text style={styles.paymentMethodName}>{method.name}</Text>
|
|
</View>
|
|
{selectedPayment === method.id && (
|
|
<Ionicons name="checkmark-circle" size={24} color="#ff6b6b" />
|
|
)}
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
|
|
{/* Order Summary */}
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>Chi tiết thanh toán</Text>
|
|
|
|
<View style={styles.summaryRow}>
|
|
<Text style={styles.summaryLabel}>Tạm tính</Text>
|
|
<Text style={styles.summaryValue}>
|
|
{formatPrice(cart.totalAmount)}
|
|
</Text>
|
|
</View>
|
|
|
|
<View style={styles.summaryRow}>
|
|
<Text style={styles.summaryLabel}>Phí vận chuyển</Text>
|
|
<Text style={styles.summaryValue}>Miễn phí</Text>
|
|
</View>
|
|
|
|
<View style={[styles.summaryRow, styles.totalRow]}>
|
|
<Text style={styles.totalLabel}>Tổng cộng</Text>
|
|
<Text style={styles.totalValue}>
|
|
{formatPrice(cart.totalAmount)}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={{ height: 100 }} />
|
|
</ScrollView>
|
|
|
|
{/* Order Button */}
|
|
<View style={styles.footer}>
|
|
<TouchableOpacity
|
|
style={[styles.orderButton, loading && styles.orderButtonDisabled]}
|
|
onPress={handleCreateOrder}
|
|
disabled={loading}
|
|
>
|
|
{loading ? (
|
|
<ActivityIndicator color="#fff" />
|
|
) : (
|
|
<>
|
|
<Text style={styles.orderButtonText}>Đặt hàng</Text>
|
|
<Text style={styles.orderButtonSubtext}>
|
|
{formatPrice(cart.totalAmount)}
|
|
</Text>
|
|
</>
|
|
)}
|
|
</TouchableOpacity>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#f5f5f5',
|
|
},
|
|
header: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
padding: 16,
|
|
backgroundColor: '#fff',
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: '#e0e0e0',
|
|
},
|
|
headerTitle: {
|
|
fontSize: 20,
|
|
fontWeight: '700',
|
|
color: '#333',
|
|
},
|
|
scrollView: {
|
|
flex: 1,
|
|
},
|
|
loadingContainer: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
section: {
|
|
backgroundColor: '#fff',
|
|
marginTop: 12,
|
|
padding: 16,
|
|
},
|
|
sectionHeader: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginBottom: 16,
|
|
},
|
|
sectionTitle: {
|
|
fontSize: 16,
|
|
fontWeight: '700',
|
|
marginLeft: 8,
|
|
color: '#333',
|
|
},
|
|
input: {
|
|
borderWidth: 1,
|
|
borderColor: '#e0e0e0',
|
|
borderRadius: 8,
|
|
padding: 12,
|
|
marginBottom: 12,
|
|
fontSize: 15,
|
|
backgroundColor: '#fafafa',
|
|
},
|
|
cartItem: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
paddingVertical: 12,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: '#f0f0f0',
|
|
},
|
|
itemInfo: {
|
|
flex: 1,
|
|
marginRight: 12,
|
|
},
|
|
itemName: {
|
|
fontSize: 15,
|
|
marginBottom: 4,
|
|
color: '#333',
|
|
},
|
|
itemPrice: {
|
|
fontSize: 13,
|
|
color: '#666',
|
|
},
|
|
itemTotal: {
|
|
fontSize: 15,
|
|
fontWeight: '700',
|
|
color: '#ff6b6b',
|
|
},
|
|
paymentMethod: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
padding: 14,
|
|
borderWidth: 1,
|
|
borderColor: '#e0e0e0',
|
|
borderRadius: 8,
|
|
marginBottom: 10,
|
|
backgroundColor: '#fafafa',
|
|
},
|
|
paymentMethodActive: {
|
|
borderColor: '#ff6b6b',
|
|
backgroundColor: '#fff5f5',
|
|
},
|
|
paymentMethodInfo: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
paymentMethodName: {
|
|
marginLeft: 12,
|
|
fontSize: 15,
|
|
color: '#333',
|
|
},
|
|
summaryRow: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
paddingVertical: 10,
|
|
},
|
|
summaryLabel: {
|
|
fontSize: 15,
|
|
color: '#666',
|
|
},
|
|
summaryValue: {
|
|
fontSize: 15,
|
|
color: '#333',
|
|
},
|
|
totalRow: {
|
|
borderTopWidth: 1,
|
|
borderTopColor: '#e0e0e0',
|
|
marginTop: 8,
|
|
paddingTop: 16,
|
|
},
|
|
totalLabel: {
|
|
fontSize: 17,
|
|
fontWeight: '700',
|
|
color: '#333',
|
|
},
|
|
totalValue: {
|
|
fontSize: 20,
|
|
fontWeight: '700',
|
|
color: '#ff6b6b',
|
|
},
|
|
footer: {
|
|
backgroundColor: '#fff',
|
|
padding: 16,
|
|
borderTopWidth: 1,
|
|
borderTopColor: '#e0e0e0',
|
|
},
|
|
orderButton: {
|
|
backgroundColor: '#ff6b6b',
|
|
padding: 16,
|
|
borderRadius: 12,
|
|
alignItems: 'center',
|
|
},
|
|
orderButtonDisabled: {
|
|
opacity: 0.6,
|
|
},
|
|
orderButtonText: {
|
|
color: '#fff',
|
|
fontSize: 17,
|
|
fontWeight: '700',
|
|
},
|
|
orderButtonSubtext: {
|
|
color: '#fff',
|
|
fontSize: 14,
|
|
marginTop: 4,
|
|
},
|
|
}); |