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 82 83 84 | 2x 2x 2x 2x 3x 3x 3x 3x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 3x 1x 2x 2x 2x | import React, { useEffect, useState } from 'react';
import { Alert, Box, CircularProgress, Divider, List, ListItemButton, ListItemText, Typography } from '@mui/material';
import { Link } from 'react-router-dom';
import { getMyOrders } from '../../db/api';
const formatCurrency = (value) => {
const number = Number(value || 0);
return number.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
};
const OrdersPage = () => {
const [loading, setLoading] = useState(true);
const [error, setError] = useState('');
const [orders, setOrders] = useState([]);
useEffect(() => {
let mounted = true;
const load = async () => {
try {
setLoading(true);
const data = await getMyOrders({ page: 1, pageSize: 20 });
Eif (mounted) {
setOrders(Array.isArray(data?.items) ? data.items : []);
}
} catch (err) {
if (mounted) setError(err.message || 'Erro ao carregar pedidos');
} finally {
Eif (mounted) setLoading(false);
}
};
load();
return () => {
mounted = false;
};
}, []);
if (loading) {
return (
<Box id="account-orders-loading" sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
<CircularProgress />
</Box>
);
}
Iif (error) {
return <Alert severity="error">{error}</Alert>;
}
return (
<Box id="account-orders-wrapper">
<Typography variant="h6" sx={{ fontWeight: 700, mb: 2 }}>
Meus pedidos
</Typography>
{orders.length === 0 ? (
<Alert severity="info">Você ainda não possui pedidos.</Alert>
) : (
<List id="account-orders-list" sx={{ p: 0 }}>
{orders.map((order) => (
<React.Fragment key={order.id}>
<ListItemButton
id={`account-order-item-${order.id}`}
component={Link}
to={`/minha-conta/pedidos/${order.id}`}
>
<ListItemText
primary={`Pedido ${order.order_number || `#${order.id}`}`}
secondary={`Status: ${order.status} • Total: ${formatCurrency(order.grand_total)}`}
/>
</ListItemButton>
<Divider component="li" />
</React.Fragment>
))}
</List>
)}
</Box>
);
};
export default OrdersPage;
|