Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | 2x 4x 4x 2x 3x 3x 3x 3x 3x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 3x 1x 2x 2x 2x 2x | import React, { useEffect, useState } from 'react';
import { Alert, Box, CircularProgress, Divider, List, ListItem, ListItemText, Typography } from '@mui/material';
import { useParams } from 'react-router-dom';
import { getMyOrderById } from '../../db/api';
const formatCurrency = (value) => {
const number = Number(value || 0);
return number.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
};
const OrderDetailsPage = () => {
const { id } = useParams();
const [loading, setLoading] = useState(true);
const [error, setError] = useState('');
const [order, setOrder] = useState(null);
useEffect(() => {
let mounted = true;
const load = async () => {
try {
setLoading(true);
const data = await getMyOrderById(id);
Eif (mounted) setOrder(data);
} catch (err) {
if (mounted) setError(err.message || 'Erro ao carregar detalhes do pedido');
} finally {
Eif (mounted) setLoading(false);
}
};
load();
return () => {
mounted = false;
};
}, [id]);
if (loading) {
return (
<Box id="account-order-details-loading" sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
<CircularProgress />
</Box>
);
}
Iif (error) {
return <Alert severity="error">{error}</Alert>;
}
Iif (!order) {
return <Alert severity="warning">Pedido não encontrado.</Alert>;
}
return (
<Box id="account-order-details-wrapper">
<Typography variant="h6" sx={{ fontWeight: 700, mb: 1 }}>
Pedido {order.order_number || `#${order.id}`}
</Typography>
<Typography sx={{ mb: 0.5 }}><strong>Status:</strong> {order.status}</Typography>
<Typography sx={{ mb: 2 }}><strong>Total:</strong> {formatCurrency(order.grand_total)}</Typography>
<Divider sx={{ mb: 1 }} />
<Typography sx={{ fontWeight: 700, mb: 1 }}>Itens</Typography>
<List dense id="account-order-details-items">
{(order.items || []).map((item) => (
<ListItem key={item.id || `${item.product_id}-${item.quantity}`}>
<ListItemText
primary={item.product_name_snapshot || `Produto #${item.product_id}`}
secondary={`Qtd: ${item.quantity} • Total: ${formatCurrency(item.line_total)}`}
/>
</ListItem>
))}
</List>
</Box>
);
};
export default OrderDetailsPage;
|