72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
interface EmailTemplateProps {
|
||
data: {
|
||
user_name: string,
|
||
host: string,
|
||
order_id: string,
|
||
order: {
|
||
id: string,
|
||
display_id: string,
|
||
trackingNumber: string,
|
||
items: any[],
|
||
currency_code: string,
|
||
item_total: number,
|
||
shipping_methods: {
|
||
amount: number,
|
||
name: string
|
||
}[],
|
||
total: number
|
||
email: string
|
||
shipping_address: {
|
||
first_name: string,
|
||
last_name: string,
|
||
company: string,
|
||
address_1: string,
|
||
address_2: string,
|
||
city: string,
|
||
province: string,
|
||
postal_code: string,
|
||
phone: string
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
export const BuyerOrderShippedEmailTemplate: React.FC<Readonly<EmailTemplateProps>> = ({ data }) => {
|
||
return (
|
||
<div>
|
||
<h1>Your order #{data.order.trackingNumber} has been shipped!</h1>
|
||
<p>The package is on its way and will be in your hands soon.</p>
|
||
<div>
|
||
<p>
|
||
<strong>Shipping address:</strong>
|
||
</p>
|
||
<p>
|
||
{data.order.shipping_address.first_name} {data.order.shipping_address.last_name}
|
||
,<br />
|
||
{data.order.shipping_address?.company ? `${data.order.shipping_address.company}, ` : ''}
|
||
{data.order.shipping_address.address_1}
|
||
{data.order.shipping_address.address_2}, {data.order.shipping_address.postal_code}{' '}
|
||
{data.order.shipping_address.city}
|
||
{data.order.shipping_address.province ? `, ${data.order.shipping_address.province}` : ''}
|
||
<br />
|
||
{data.order.email}, {data.order.shipping_address.phone}
|
||
</p>
|
||
</div>
|
||
<p>
|
||
<a href={`${data.host}/orders/${data.order.id}`}>View Order Details</a>
|
||
If you can’t click the button, no worries! Here’s your link: {`${data.host}/orders/${data.order.id}`}
|
||
</p>
|
||
|
||
<p>
|
||
You received this email because you made a purchase or sale on the Mercur marketplace. If you have any
|
||
questions, please contact our support team.
|
||
</p>
|
||
<div style={{ marginTop: 32 }}>
|
||
<div>Best regards,</div>
|
||
<div style={{ fontWeight: 600 }}>The Mercur Team</div>
|
||
<div style={{ color: '#888', marginTop: 4 }}>mercurjs.com</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|