diff --git a/server/emails/src/emails/notification_new_sale.tsx b/server/emails/src/emails/notification_new_sale.tsx index 692bb4adaf..4713b04faf 100644 --- a/server/emails/src/emails/notification_new_sale.tsx +++ b/server/emails/src/emails/notification_new_sale.tsx @@ -1,36 +1,144 @@ -import { Preview } from '@react-email/components' +import { Hr, Img, Preview, Section, Text } from '@react-email/components' +import Button from '../components/Button' import Footer from '../components/Footer' -import IntroWithHi from '../components/IntroWithHi' import PolarHeader from '../components/PolarHeader' import Wrapper from '../components/Wrapper' import type { schemas } from '../types' export function NotificationNewSale({ + customer_email, customer_name, + billing_address_city, + billing_address_line1, formatted_price_amount, + formatted_billing_reason, + formatted_address_country, product_name, - product_price_amount, - organization_name, + product_image_url, + order_date, + order_url, }: schemas['MaintainerNewProductSaleNotificationPayload']) { + const displayName = customer_name || customer_email || 'A customer' + + const formattedDate = order_date + ? new Date(order_date).toLocaleDateString('en-US', { + month: 'long', + day: 'numeric', + }) + : null + + const addressParts = [billing_address_line1, billing_address_city].filter( + Boolean, + ) + const formattedAddress = + addressParts.length > 0 ? addressParts.join(', ') : null + return ( - New {product_name} sale + + {displayName} placed an order for {product_name} + - - {customer_name} purchased {product_name} for{' '} - {formatted_price_amount}. - + +
+ + {displayName} placed an order{formattedDate ? ` on ${formattedDate}` : ''}! + +
+ + {order_url && ( +
+ +
+ )} + +
+ +
+ + Order Summary + + + + + {product_image_url && ( + + )} + + + +
+ + + + {product_name} + + + {formatted_price_amount} + +
+
+ +
+ + {formatted_billing_reason && ( +
+ + Order Type + + + {formatted_billing_reason} + +
+ )} + +
+ + Customer + + {displayName} + {customer_email && ( + {customer_email} + )} + {formattedAddress && ( + {formattedAddress} + )} + {formatted_address_country && ( + + {formatted_address_country} + + )} +
+