matej/AluxPay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added visualisation

Browse Source 
Added return and cancel URL's
This commit is contained in:
matej
2025-09-28 02:29:07 +02:00
parent bc3b86b705
commit a866801535
22 changed files with 2133 additions and 553 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
frontend/src/components/OrderSummary.jsx
View File

@@ -1,6 +1,7 @@
import React from 'react';
import {Heading, Separator, DataList, Stack, Center, Box, Image, Badge, Text} from "@chakra-ui/react"
const OrderSummary = ({ orderData, loading }) => {
const OrderSummary = ({ orderData, loading, order }) => {
const formatCurrency = (amount, currency = 'USD') => {
return new Intl.NumberFormat('en-US', {
style: 'currency',
@@ -21,48 +22,83 @@ const OrderSummary = ({ orderData, loading }) => {
}
return (
<Center>
<div className="order-summary">
<h5 className="mb-3">
<i className="fas fa-receipt me-2"></i>
Order Summary
</h5>
<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>E-mail</DataList.ItemLabel>
<DataList.ItemValue>{order.billing.email}</DataList.ItemValue>
</DataList.Item>
<div className="order-item">
<span>Order #</span>
<span className="fw-bold">{orderData.wc_order_id}</span>
</div>
{/*{orderData.customer_email && (
<DataList.Item>
<DataList.ItemLabel>E-mail</DataList.ItemLabel>
<DataList.ItemValue>{orderData.customer_email}</DataList.ItemValue>
</DataList.Item>
)}*/}
<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>
))}
<div className="order-item">
<span>Description</span>
<span>{orderData.description}</span>
</div>
{orderData.customer_email && (
<div className="order-item">
<span>Customer Email</span>
<span>{orderData.customer_email}</span>
</div>
)}
<div className="order-item">
<span>Currency</span>
<span>{orderData.currency}</span>
</div>
<div className="order-item order-total">
<span>Total Amount</span>
<span className="text-primary">
{formatCurrency(orderData.total, orderData.currency)}
</span>
</div>
<div className="mt-3 p-2 bg-info bg-opacity-10 rounded">
<small className="text-info">
<i className="fas fa-info-circle me-1"></i>
You will be redirected to PayPal to complete this payment securely
</small>
</div>
</Box>
</Box>
</Box>
</div>
</Center>
);
};