97 lines
3.2 KiB
TypeScript
97 lines
3.2 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { View, TouchableOpacity } from 'react-native';
|
|
import { MyText, tw, BottomDialog, MyTextInput } from 'common-ui';
|
|
import { trpc } from '@/src/trpc-client';
|
|
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
|
|
import { Alert } from 'react-native';
|
|
|
|
interface CancelOrderDialogProps {
|
|
orderId: number;
|
|
open: boolean;
|
|
onClose: () => void;
|
|
onSuccess?: () => void;
|
|
}
|
|
|
|
export default function CancelOrderDialog({ orderId, open, onClose, onSuccess }: CancelOrderDialogProps) {
|
|
const [cancelReason, setCancelReason] = useState('');
|
|
const cancelOrderMutation = trpc.admin.order.cancelOrder.useMutation();
|
|
|
|
const handleCancel = () => {
|
|
if (!cancelReason.trim()) {
|
|
Alert.alert('Error', 'Please enter a cancellation reason');
|
|
return;
|
|
}
|
|
|
|
Alert.alert(
|
|
'Cancel Order',
|
|
'Are you sure you want to cancel this order? This action cannot be undone.',
|
|
[
|
|
{ text: 'No', style: 'cancel' },
|
|
{
|
|
text: 'Yes, Cancel',
|
|
style: 'destructive',
|
|
onPress: () => {
|
|
cancelOrderMutation.mutate(
|
|
{ orderId, reason: cancelReason },
|
|
{
|
|
onSuccess: () => {
|
|
onClose();
|
|
setCancelReason('');
|
|
onSuccess?.();
|
|
},
|
|
onError: (error: any) => {
|
|
Alert.alert('Error', error.message || 'Failed to cancel order');
|
|
},
|
|
}
|
|
);
|
|
},
|
|
},
|
|
]
|
|
);
|
|
};
|
|
|
|
return (
|
|
<BottomDialog open={open} onClose={onClose}>
|
|
<View style={tw`p-6`}>
|
|
<View style={tw`items-center mb-6`}>
|
|
<View style={tw`w-12 h-12 bg-red-100 rounded-full items-center justify-center mb-3`}>
|
|
<MaterialIcons name="cancel" size={24} color="#DC2626" />
|
|
</View>
|
|
<MyText style={tw`text-xl font-bold text-gray-900 text-center`}>
|
|
Cancel Order
|
|
</MyText>
|
|
<MyText style={tw`text-gray-500 text-center mt-2 text-sm leading-5`}>
|
|
This will cancel the order and mark it as cancelled by admin. A refund record will be created.
|
|
</MyText>
|
|
</View>
|
|
|
|
<MyTextInput
|
|
topLabel="Cancellation Reason *"
|
|
value={cancelReason}
|
|
onChangeText={setCancelReason}
|
|
placeholder="Enter reason for cancellation..."
|
|
multiline
|
|
style={tw`h-24`}
|
|
/>
|
|
|
|
<View style={tw`flex-row gap-3 mt-6`}>
|
|
<TouchableOpacity
|
|
style={tw`flex-1 bg-gray-100 py-3.5 rounded-xl items-center`}
|
|
onPress={onClose}
|
|
>
|
|
<MyText style={tw`text-gray-700 font-bold`}>Keep Order</MyText>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={tw`flex-1 bg-red-500 py-3.5 rounded-xl items-center shadow-sm ${cancelOrderMutation.isPending ? 'opacity-50' : ''}`}
|
|
onPress={handleCancel}
|
|
disabled={cancelOrderMutation.isPending || !cancelReason.trim()}
|
|
>
|
|
<MyText style={tw`text-white font-bold`}>
|
|
{cancelOrderMutation.isPending ? 'Cancelling...' : 'Cancel Order'}
|
|
</MyText>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</BottomDialog>
|
|
);
|
|
}
|