import { Document, Footer, Head, MarginBox, Page } from "@htmldocs/react" import "~/index.css" interface BillingAddress { name: string; street: string; city: string; state: string; zip: string; country: string; } interface OrderItem { name: string; description: string; quantity: number; price: string; discountedPrice: string | null; image: string; } export interface ReceiptProps { orderNumber: string; orderDate: string; orderTotal: string; customerName: string; billingAddress: BillingAddress; items: OrderItem[]; } function Receipt({ orderNumber, orderDate, orderTotal, customerName, billingAddress, items }: ReceiptProps) { // Calculate total dynamically const calculateTotal = () => { return items.reduce((sum, item) => { const price = item.discountedPrice ? parseFloat(item.discountedPrice.replace('$', '').replace(',', '')) : parseFloat(item.price.replace('$', '').replace(',', '')); return sum + (price * item.quantity); }, 0); }; return ( Order Confirmation - CloudStack Solutions
Axis

Order Confirmation

Thank you for your purchase! Your order has been confirmed and will ship in the next 24 hours. For any inquiries, please reach out to our support team.

View Order Details

Order Information

Order Number
{orderNumber}
Order Date
{orderDate}
Total Amount
${calculateTotal().toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

Billing Information

{billingAddress.name}

{billingAddress.street}

{billingAddress.city}, {billingAddress.state} {billingAddress.zip}

{billingAddress.country}

Customer ID: ACME-2023

Order Summary

{items.map((item, index) => ( ))}
Item Qty Price Total
{item.name}

{item.name}

{item.description}

 {item.quantity} {item.discountedPrice ? ( <>

{item.price}

{item.discountedPrice}

) : (

{item.price}

)} 		${(item.quantity * parseFloat((item.discountedPrice || item.price).replace('$', '').replace(',', ''))).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
Total: ${calculateTotal().toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
) } Receipt.PreviewProps = { orderNumber: `ORD-${Math.random().toString(36).substr(2, 9).toUpperCase()}`, orderDate: new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }), orderTotal: "$1,499.00", // This will be overridden by calculated total customerName: "Acme Corporation", billingAddress: { name: "Acme Corporation", street: "123 Business Ave, Suite 500", city: "San Francisco", state: "CA", zip: "94105", country: "United States" }, items: [ { name: "Premium Software License", description: "Annual subscription with premium support", quantity: 1, price: "$999.00", discountedPrice: null, image: "/static/placeholder.svg?height=100&width=100" }, { name: "Additional User Seats", description: "5-user package", quantity: 2, price: "$299.00", discountedPrice: "$249.00", image: "/static/placeholder.svg?height=100&width=100" } ] }; Receipt.documentId = "receipt"; export default Receipt;