order
This commit is contained in:
509
app/order-detail.tsx
Normal file
509
app/order-detail.tsx
Normal file
@@ -0,0 +1,509 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
ActivityIndicator,
|
||||
Alert,
|
||||
} from 'react-native';
|
||||
import { useRouter, useLocalSearchParams } from 'expo-router';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import api from '../services/api';
|
||||
|
||||
interface OrderDetail {
|
||||
orderId: number;
|
||||
userId: number;
|
||||
userName: string;
|
||||
totalPrice: number;
|
||||
orderStatus: string;
|
||||
shippingAddress: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
orderItems: {
|
||||
orderItemId: number;
|
||||
productId: number;
|
||||
productName: string;
|
||||
quantity: number;
|
||||
price: number;
|
||||
subtotal: number;
|
||||
}[];
|
||||
}
|
||||
|
||||
interface Timeline {
|
||||
status: string;
|
||||
timestamp: string | null;
|
||||
completed: boolean;
|
||||
}
|
||||
|
||||
const STATUS_COLORS: Record<string, string> = {
|
||||
PENDING: '#FFA726',
|
||||
CONFIRMED: '#42A5F5',
|
||||
SHIPPING: '#AB47BC',
|
||||
DELIVERED: '#66BB6A',
|
||||
CANCELLED: '#EF5350',
|
||||
};
|
||||
|
||||
const STATUS_LABELS: Record<string, string> = {
|
||||
PENDING: 'Chờ xác nhận',
|
||||
CONFIRMED: 'Đã xác nhận',
|
||||
SHIPPING: 'Đang giao hàng',
|
||||
DELIVERED: 'Đã giao hàng',
|
||||
CANCELLED: 'Đã hủy',
|
||||
};
|
||||
|
||||
export default function OrderDetailScreen() {
|
||||
const router = useRouter();
|
||||
const params = useLocalSearchParams();
|
||||
const orderId = params.id;
|
||||
|
||||
const [order, setOrder] = useState<OrderDetail | null>(null);
|
||||
const [timeline, setTimeline] = useState<Timeline[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [cancelling, setCancelling] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (orderId) {
|
||||
loadOrderDetail();
|
||||
loadOrderProgress();
|
||||
}
|
||||
}, [orderId]);
|
||||
|
||||
/** 🔹 Load chi tiết đơn hàng */
|
||||
const loadOrderDetail = async () => {
|
||||
try {
|
||||
const res = await api.get(`/orders/${orderId}`, {
|
||||
requireAuth: true,
|
||||
});
|
||||
// Fix: Safely check 'res' type before accessing properties
|
||||
if (res && typeof res === 'object' && 'success' in res && (res as any).success) {
|
||||
setOrder((res as any).data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Load order detail error:', error);
|
||||
Alert.alert('Lỗi', 'Không thể tải chi tiết đơn hàng.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
/** 🔹 Load tiến trình đơn hàng */
|
||||
const loadOrderProgress = async () => {
|
||||
try {
|
||||
const res = await api.get(`/orders/${orderId}/progress`, {
|
||||
requireAuth: true,
|
||||
});
|
||||
// Fix: safely check 'res' type before accessing properties
|
||||
if (res && typeof res === 'object' && 'success' in res && (res as any).success) {
|
||||
setTimeline((res as any).data.timeline);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Load order progress error:', error);
|
||||
}
|
||||
};
|
||||
|
||||
/** 🔹 Hủy đơn hàng */
|
||||
const handleCancelOrder = () => {
|
||||
Alert.alert(
|
||||
'Hủy đơn hàng',
|
||||
'Bạn có chắc chắn muốn hủy đơn hàng này?',
|
||||
[
|
||||
{ text: 'Không', style: 'cancel' },
|
||||
{ text: 'Có', onPress: cancelOrder, style: 'destructive' },
|
||||
]
|
||||
);
|
||||
};
|
||||
|
||||
const cancelOrder = async () => {
|
||||
setCancelling(true);
|
||||
|
||||
try {
|
||||
const res = await api.put(`/orders/${orderId}/cancel`, undefined, {
|
||||
requireAuth: true,
|
||||
});
|
||||
|
||||
// Fix: 'res' is of type 'unknown', so first safely cast/type guard
|
||||
if (res && typeof res === 'object' && 'success' in res && (res as any).success) {
|
||||
Alert.alert('Thành công', 'Đơn hàng đã được hủy');
|
||||
loadOrderDetail();
|
||||
loadOrderProgress();
|
||||
} else {
|
||||
let message = 'Không thể hủy đơn hàng';
|
||||
if (res && typeof res === 'object' && 'message' in res) {
|
||||
// @ts-ignore
|
||||
message = res.message || message;
|
||||
}
|
||||
Alert.alert('Lỗi', message);
|
||||
}
|
||||
} catch (error) {
|
||||
Alert.alert('Lỗi', 'Không thể hủy đơn hàng');
|
||||
} finally {
|
||||
setCancelling(false);
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('vi-VN', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator size="large" color="#FF6B6B" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (!order) {
|
||||
return (
|
||||
<View style={styles.errorContainer}>
|
||||
<Text>Không tìm thấy đơn hàng</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ScrollView style={styles.container}>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<TouchableOpacity onPress={() => router.back()}>
|
||||
<Ionicons name="arrow-back" size={24} color="#000" />
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.headerTitle}>Chi tiết đơn hàng</Text>
|
||||
<View style={{ width: 24 }} />
|
||||
</View>
|
||||
|
||||
{/* Order status */}
|
||||
<View style={styles.statusSection}>
|
||||
<View
|
||||
style={[
|
||||
styles.statusBadge,
|
||||
{ backgroundColor: STATUS_COLORS[order.orderStatus] },
|
||||
]}
|
||||
>
|
||||
<Text style={styles.statusText}>
|
||||
{STATUS_LABELS[order.orderStatus]}
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={styles.orderId}>Đơn hàng #{order.orderId}</Text>
|
||||
<Text style={styles.orderDate}>
|
||||
Đặt hàng: {formatDate(order.createdAt)}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Timeline */}
|
||||
{order.orderStatus !== 'CANCELLED' && (
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Tiến độ đơn hàng</Text>
|
||||
{timeline.map((step, idx) => (
|
||||
<View key={idx} style={styles.timelineItem}>
|
||||
<View style={styles.timelineLeft}>
|
||||
<View
|
||||
style={[
|
||||
styles.timelineDot,
|
||||
step.completed && styles.timelineDotActive,
|
||||
]}
|
||||
>
|
||||
{step.completed && (
|
||||
<Ionicons name="checkmark" size={16} color="#fff" />
|
||||
)}
|
||||
</View>
|
||||
{idx < timeline.length - 1 && (
|
||||
<View
|
||||
style={[
|
||||
styles.timelineLine,
|
||||
step.completed && styles.timelineLineActive,
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
<View style={styles.timelineRight}>
|
||||
<Text
|
||||
style={[
|
||||
styles.timelineStatus,
|
||||
step.completed && styles.timelineStatusActive,
|
||||
]}
|
||||
>
|
||||
{STATUS_LABELS[step.status]}
|
||||
</Text>
|
||||
{step.timestamp && (
|
||||
<Text style={styles.timelineDate}>
|
||||
{formatDate(step.timestamp)}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Shipping address */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>
|
||||
<Ionicons name="location" size={18} color="#333" /> Địa chỉ giao hàng
|
||||
</Text>
|
||||
<Text style={styles.addressText}>{order.shippingAddress}</Text>
|
||||
</View>
|
||||
|
||||
{/* Items */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>
|
||||
<Ionicons name="cart" size={18} color="#333" /> Sản phẩm
|
||||
</Text>
|
||||
{order.orderItems.map((item) => (
|
||||
<View key={item.orderItemId} style={styles.productItem}>
|
||||
<View style={styles.productInfo}>
|
||||
<Text style={styles.productName}>{item.productName}</Text>
|
||||
<Text style={styles.productQuantity}>x{item.quantity}</Text>
|
||||
</View>
|
||||
<View style={styles.productPrices}>
|
||||
<Text style={styles.productPrice}>
|
||||
{item.price.toLocaleString('vi-VN')}₫
|
||||
</Text>
|
||||
<Text style={styles.productSubtotal}>
|
||||
{item.subtotal.toLocaleString('vi-VN')}₫
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* Summary */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Thanh toán</Text>
|
||||
<View style={styles.summaryRow}>
|
||||
<Text style={styles.summaryLabel}>Tạm tính</Text>
|
||||
<Text style={styles.summaryValue}>
|
||||
{order.totalPrice.toLocaleString('vi-VN')}₫
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.summaryRow}>
|
||||
<Text style={styles.summaryLabel}>Phí vận chuyển</Text>
|
||||
<Text style={styles.summaryValue}>0₫</Text>
|
||||
</View>
|
||||
<View style={[styles.summaryRow, styles.totalRow]}>
|
||||
<Text style={styles.totalLabel}>Tổng cộng</Text>
|
||||
<Text style={styles.totalValue}>
|
||||
{order.totalPrice.toLocaleString('vi-VN')}₫
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Cancel Order */}
|
||||
{(order.orderStatus === 'PENDING' ||
|
||||
order.orderStatus === 'CONFIRMED') && (
|
||||
<TouchableOpacity
|
||||
style={[styles.cancelButton, cancelling && styles.buttonDisabled]}
|
||||
onPress={handleCancelOrder}
|
||||
disabled={cancelling}
|
||||
>
|
||||
{cancelling ? (
|
||||
<ActivityIndicator color="#fff" />
|
||||
) : (
|
||||
<Text style={styles.cancelButtonText}>Hủy đơn hàng</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
|
||||
<View style={{ height: 20 }} />
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
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: 18,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
statusSection: {
|
||||
backgroundColor: '#fff',
|
||||
padding: 20,
|
||||
alignItems: 'center',
|
||||
marginTop: 10,
|
||||
},
|
||||
statusBadge: {
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 20,
|
||||
marginBottom: 12,
|
||||
},
|
||||
statusText: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
orderId: {
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 4,
|
||||
},
|
||||
orderDate: {
|
||||
fontSize: 14,
|
||||
color: '#666',
|
||||
},
|
||||
section: {
|
||||
backgroundColor: '#fff',
|
||||
marginTop: 10,
|
||||
padding: 16,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 12,
|
||||
},
|
||||
timelineItem: {
|
||||
flexDirection: 'row',
|
||||
marginBottom: 8,
|
||||
},
|
||||
timelineLeft: {
|
||||
alignItems: 'center',
|
||||
marginRight: 12,
|
||||
},
|
||||
timelineDot: {
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: 12,
|
||||
backgroundColor: '#E0E0E0',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
timelineDotActive: {
|
||||
backgroundColor: '#4CAF50',
|
||||
},
|
||||
timelineLine: {
|
||||
width: 2,
|
||||
flex: 1,
|
||||
backgroundColor: '#E0E0E0',
|
||||
marginTop: 4,
|
||||
},
|
||||
timelineLineActive: {
|
||||
backgroundColor: '#4CAF50',
|
||||
},
|
||||
timelineRight: {
|
||||
flex: 1,
|
||||
paddingBottom: 16,
|
||||
},
|
||||
timelineStatus: {
|
||||
fontSize: 14,
|
||||
color: '#999',
|
||||
marginBottom: 4,
|
||||
},
|
||||
timelineStatusActive: {
|
||||
color: '#333',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
timelineDate: {
|
||||
fontSize: 12,
|
||||
color: '#999',
|
||||
},
|
||||
addressText: {
|
||||
fontSize: 14,
|
||||
color: '#333',
|
||||
lineHeight: 20,
|
||||
},
|
||||
productItem: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
paddingVertical: 12,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#F0F0F0',
|
||||
},
|
||||
productInfo: {
|
||||
flex: 1,
|
||||
marginRight: 12,
|
||||
},
|
||||
productName: {
|
||||
fontSize: 14,
|
||||
marginBottom: 4,
|
||||
},
|
||||
productQuantity: {
|
||||
fontSize: 12,
|
||||
color: '#666',
|
||||
},
|
||||
productPrices: {
|
||||
alignItems: 'flex-end',
|
||||
},
|
||||
productPrice: {
|
||||
fontSize: 12,
|
||||
color: '#666',
|
||||
marginBottom: 4,
|
||||
},
|
||||
productSubtotal: {
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold',
|
||||
color: '#FF6B6B',
|
||||
},
|
||||
summaryRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
paddingVertical: 8,
|
||||
},
|
||||
summaryLabel: {
|
||||
fontSize: 14,
|
||||
color: '#666',
|
||||
},
|
||||
summaryValue: {
|
||||
fontSize: 14,
|
||||
},
|
||||
totalRow: {
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#E0E0E0',
|
||||
marginTop: 8,
|
||||
paddingTop: 12,
|
||||
},
|
||||
totalLabel: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
totalValue: {
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
color: '#FF6B6B',
|
||||
},
|
||||
cancelButton: {
|
||||
backgroundColor: '#EF5350',
|
||||
margin: 16,
|
||||
padding: 16,
|
||||
borderRadius: 8,
|
||||
alignItems: 'center',
|
||||
},
|
||||
buttonDisabled: {
|
||||
opacity: 0.6,
|
||||
},
|
||||
cancelButtonText: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
loadingContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
errorContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user