refactor: abstract site URL across email templates

- Add NEXT_PUBLIC_SITE_URL to .env.local
- Update email templates to accept siteUrl prop
- Update webhook handler to pass siteUrl from env var
- Update create-webhooks.graphql with placeholder URL

src/emails/BaseLayout.tsx

@@ -16,6 +16,7 @@ interface BaseLayoutProps {
   children: React.ReactNode;
   previewText: string;
   language: string;
+  siteUrl: string;
 }
 
 const translations: Record<string, { footer: string; company: string }> = {
@@ -37,7 +38,7 @@ const translations: Record<string, { footer: string; company: string }> = {
   },
 };
 
-export function BaseLayout({ children, previewText, language }: BaseLayoutProps) {
+export function BaseLayout({ children, previewText, language, siteUrl }: BaseLayoutProps) {
   const t = translations[language] || translations.en;
 
   return (
@@ -48,7 +49,7 @@ export function BaseLayout({ children, previewText, language }: BaseLayoutProps)
         <Container style={styles.container}>
           <Section style={styles.logoSection}>
             <Img
-              src="https://manoonoils.com/logo.png"
+              src={`${siteUrl}/logo.png`}
               width="150"
               height="auto"
               alt="ManoonOils"

src/emails/OrderCancelled.tsx

@@ -16,6 +16,7 @@ interface OrderCancelledProps {
   items: OrderItem[];
   total: string;
   reason?: string;
+  siteUrl: string;
 }
 
 const translations: Record<
@@ -85,11 +86,12 @@ export function OrderCancelled({
   items,
   total,
   reason,
+  siteUrl,
 }: OrderCancelledProps) {
   const t = translations[language] || translations.en;
 
   return (
-    <BaseLayout previewText={t.preview} language={language}>
+    <BaseLayout previewText={t.preview} language={language} siteUrl={siteUrl}>
       <Text style={styles.title}>{t.title}</Text>
       <Text style={styles.greeting}>{t.greeting.replace("{name}", customerName)}</Text>
       <Text style={styles.text}>{t.orderCancelled}</Text>
@@ -124,7 +126,7 @@ export function OrderCancelled({
       </Section>
 
       <Section style={styles.buttonSection}>
-        <Button href="https://manoonoils.com" style={styles.button}>
+        <Button href={siteUrl} style={styles.button}>
           {language === "sr" ? "Pogledajte proizvode" : "Browse Products"}
         </Button>
       </Section>

src/emails/OrderConfirmation.tsx

@@ -17,6 +17,7 @@ interface OrderConfirmationProps {
   items: OrderItem[];
   total: string;
   shippingAddress?: string;
+  siteUrl: string;
 }
 
 const translations: Record<
@@ -101,11 +102,12 @@ export function OrderConfirmation({
   items,
   total,
   shippingAddress,
+  siteUrl,
 }: OrderConfirmationProps) {
   const t = translations[language] || translations.en;
 
   return (
-    <BaseLayout previewText={t.preview} language={language}>
+    <BaseLayout previewText={t.preview} language={language} siteUrl={siteUrl}>
       <Text style={styles.title}>{t.title}</Text>
       <Text style={styles.greeting}>{t.greeting.replace("{name}", customerName)}</Text>
       <Text style={styles.text}>{t.orderReceived}</Text>
@@ -142,7 +144,7 @@ export function OrderConfirmation({
       )}
 
       <Section style={styles.buttonSection}>
-        <Button href="https://manoonoils.com" style={styles.button}>
+        <Button href={siteUrl} style={styles.button}>
           {language === "sr"
             ? "Pogledajte narudžbinu"
             : language === "de"

src/emails/OrderPaid.tsx

@@ -15,6 +15,7 @@ interface OrderPaidProps {
   customerName: string;
   items: OrderItem[];
   total: string;
+  siteUrl: string;
 }
 
 const translations: Record<
@@ -92,11 +93,12 @@ export function OrderPaid({
   customerName,
   items,
   total,
+  siteUrl,
 }: OrderPaidProps) {
   const t = translations[language] || translations.en;
 
   return (
-    <BaseLayout previewText={t.preview} language={language}>
+    <BaseLayout previewText={t.preview} language={language} siteUrl={siteUrl}>
       <Text style={styles.title}>{t.title}</Text>
       <Text style={styles.greeting}>{t.greeting.replace("{name}", customerName)}</Text>
       <Text style={styles.text}>{t.orderPaid}</Text>
@@ -131,7 +133,7 @@ export function OrderPaid({
       </Section>
 
       <Section style={styles.buttonSection}>
-        <Button href="https://manoonoils.com" style={styles.button}>
+        <Button href={siteUrl} style={styles.button}>
           {language === "sr" ? "Nastavite kupovinu" : "Continue Shopping"}
         </Button>
       </Section>

src/emails/OrderShipped.tsx

@@ -16,6 +16,7 @@ interface OrderShippedProps {
   items: OrderItem[];
   trackingNumber?: string;
   trackingUrl?: string;
+  siteUrl: string;
 }
 
 const translations: Record<
@@ -80,11 +81,12 @@ export function OrderShipped({
   items,
   trackingNumber,
   trackingUrl,
+  siteUrl,
 }: OrderShippedProps) {
   const t = translations[language] || translations.en;
 
   return (
-    <BaseLayout previewText={t.preview} language={language}>
+    <BaseLayout previewText={t.preview} language={language} siteUrl={siteUrl}>
       <Text style={styles.title}>{t.title}</Text>
       <Text style={styles.greeting}>{t.greeting.replace("{name}", customerName)}</Text>
       <Text style={styles.text}>{t.orderShipped}</Text>