matej
ee1ce09508
Fixed token validation issue Fixed issue displaying shipping method and fee on checkout Added Light only theme Fixed positioning issue on mobile view
118 lines
6.1 KiB
JavaScript
118 lines
6.1 KiB
JavaScript
import React from 'react';
|
|
import {Heading, Separator, DataList, Stack, Center, Box, Image, Badge, Text} from "@chakra-ui/react"
|
|
|
|
const OrderSummary = ({ orderData, loading, order }) => {
|
|
const formatCurrency = (amount, currency = 'USD') => {
|
|
return new Intl.NumberFormat('en-US', {
|
|
style: 'currency',
|
|
currency: currency,
|
|
}).format(parseFloat(amount));
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="order-summary">
|
|
<div className="loading-spinner">
|
|
<div className="spinner-border" role="status">
|
|
<span className="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Center>
|
|
<div className="order-summary">
|
|
<Box maxW="sm" borderWidth="1px" mb={5}>
|
|
<Box p="4" spaceY="2">
|
|
<Heading as="h2" fontSize="xl" fontWeight="bold" size="lg">Order Summary</Heading>
|
|
<Box>
|
|
<DataList.Root orientation="horizontal" divideY="1px" maxW="md">
|
|
<DataList.Item pt="4">
|
|
<DataList.ItemLabel>Order #</DataList.ItemLabel>
|
|
<DataList.ItemValue>{orderData.wc_order_id}</DataList.ItemValue>
|
|
</DataList.Item>
|
|
{ order.billing !== undefined && <>
|
|
{/*<DataList.Item pt="4">*/}
|
|
{/* <DataList.ItemLabel>First Name</DataList.ItemLabel>*/}
|
|
{/* <DataList.ItemValue>{order.billing.first_name}</DataList.ItemValue>*/}
|
|
{/*</DataList.Item>*/}
|
|
{/*<DataList.Item pt="4">*/}
|
|
{/* <DataList.ItemLabel>Last Name</DataList.ItemLabel>*/}
|
|
{/* <DataList.ItemValue>{order.billing.last_name}</DataList.ItemValue>*/}
|
|
{/*</DataList.Item>*/}
|
|
<DataList.Item pt="4">
|
|
<DataList.ItemLabel>Shipping details</DataList.ItemLabel>
|
|
<DataList.ItemValue>
|
|
{order.shipping.first_name} {order.shipping.last_name}<br />
|
|
{order.shipping.address_1}
|
|
{order.shipping.address_2 && `, ${order.shipping.address_2}`}
|
|
{`, ${order.shipping.city}`}
|
|
{`, ${order.shipping.postcode}`}
|
|
{order.shipping.state && `, ${order.shipping.state}`}
|
|
{`, ${order.shipping.country}`}
|
|
</DataList.ItemValue>
|
|
</DataList.Item>
|
|
<DataList.Item pt="4">
|
|
<DataList.ItemLabel>E-mail</DataList.ItemLabel>
|
|
<DataList.ItemValue>{order.billing.email}</DataList.ItemValue>
|
|
</DataList.Item>
|
|
|
|
{/*{orderData.customer_email && (
|
|
<DataList.Item>
|
|
<DataList.ItemLabel>E-mail</DataList.ItemLabel>
|
|
<DataList.ItemValue>{orderData.customer_email}</DataList.ItemValue>
|
|
</DataList.Item>
|
|
)}*/}
|
|
{order.shipping.method &&
|
|
<DataList.Item pt="4">
|
|
<DataList.ItemLabel>
|
|
<Badge colorPalette="teal" variant="solid">
|
|
{order.shipping.method}
|
|
</Badge>
|
|
</DataList.ItemLabel>
|
|
<DataList.ItemValue>{formatCurrency(order.shipping.total, orderData.currency)}</DataList.ItemValue>
|
|
</DataList.Item> }
|
|
</> }
|
|
<DataList.Item pt="4" textStyle="xl">
|
|
<DataList.ItemLabel><strong>Total Amount:</strong></DataList.ItemLabel>
|
|
<DataList.ItemValue><strong>{formatCurrency(orderData.total, orderData.currency)}</strong></DataList.ItemValue>
|
|
</DataList.Item>
|
|
</DataList.Root>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
<Box maxW="sm" borderWidth="1px" mb={5}>
|
|
<Box p="4" spaceY="2">
|
|
<Heading as="h4" fontSize="xl" fontWeight="bold" size="lg">Ordered Items</Heading>
|
|
<Box>
|
|
{order.line_items !== undefined && order.line_items.map((item, index) => (
|
|
<Box key={index} className="order-item">
|
|
<Stack direction="row" gap={5} mb={3}>
|
|
{item.image && <Image
|
|
width="75px"
|
|
src={item.image}
|
|
alt={item.name}
|
|
/>}
|
|
<Center>
|
|
<Heading size="sm" as="h6">{item.name}</Heading>
|
|
</Center>
|
|
</Stack>
|
|
<Stack direction="row" gap={5} mb={2}>
|
|
<Text w="75px" textStyle="sm">Qty: {item.quantity}</Text>
|
|
<Text textStyle="sm">${item.total}</Text>
|
|
</Stack>
|
|
<Separator />
|
|
</Box>
|
|
))}
|
|
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</div>
|
|
</Center>
|
|
);
|
|
};
|
|
|
|
export default OrderSummary; |