Order Details Block for Astro

---
const orderDetailsProps = {
    img: {
        src: '/product-image.png',
        alt: 'Product image alt text',
        height: 215,
        width: 350
    },
    price: '$6.00',
    paidOn: 'November 07, 2024',
    productDetailsLink: {
        text: 'See product details',
        href: '#'
    },
    orderId: '1pxjyv0v',
    product: 'Webcore',
    invoiceNumber: '6876-10027',
    paymentMethod: 'visa ending in 5556 (Expires: 2025/1)',
    cta: {
        text: 'Download'
    }
}
---

<OrderDetails {...orderDetailsProps}>
    <span class="muted">Your transaction has been completed...</span>
</OrderDetails>

---
import { Stepper } from 'webcoreui/astro'

const orderDetailsProps = { ... }
const steps = [
    {
        title: 'Download and login',
        subTitle: 'Use your checkout email',
        icon: lockOpen, // Make sure to import your custom SVG icons
        active: true
    },
    {
        title: 'Read our introduction',
        subTitle: 'Review key concepts',
        icon: 'file'
    },
    {
        title: 'Launch',
        subTitle: 'Start using with clients',
        icon: rocketIcon
    }
]
---

<OrderDetails {...orderDetailsProps}>
    <div class="grid">
        <span class="muted">Your transaction has been completed successfully...</span>
        <Stepper items={steps} />
        <hr />
    </div>
</OrderDetails>

---
const orderDetailsProps = { ... }
const translations = {
    amountPaid: 'Product price',
    paidOn: 'Completed on',
    transactionDetails: 'Order with custom translations',
    orderId: 'Your Order\'s ID:',
    product: 'Product Name:',
    invoiceNumber: 'Your Invoice:',
    paymentMethod: 'Your Payment Details:'
}
---

<OrderDetails {...orderDetailsProps} translations={translations}>
    <span class="muted">Your transaction has been completed...</span>
</OrderDetails>

type OrderDetailsProps = {
    title?: string
    img?: {
        src: string
        alt: string
        width: number
        height: number
        lazy?: boolean
    }
    price: string
    paidOn?: string
    productDetailsLink?: {
        text: string
        href: string
        target?: '_self'
            | '_blank'
            | '_parent'
            | '_top'
            | '_unfencedTop'
    }
    orderId?: string
    product?: string
    invoiceNumber?: string
    paymentMethod?: string
    cta?: ({
        text: string
        icon?: string
    } & ButtonProps)
    translations?: {
        amountPaid?: string
        paidOn?: string
        transactionDetails?: string
        orderId?: string
        product?: string
        invoiceNumber?: string
        paymentMethod?: string
    }
    className?: string
}