manoon-headless/src/emails/OrderShipped.tsx

import { Button, Hr, Section, Text } from "@react-email/components";
import { BaseLayout } from "./BaseLayout";

interface OrderItem {
  id: string;
  name: string;
  quantity: number;
  price: string;
}

interface OrderShippedProps {
  language: string;
  orderId: string;
  orderNumber: string;
  customerName: string;
  items: OrderItem[];
  trackingNumber?: string;
  trackingUrl?: string;
  siteUrl: string;
}

const translations: Record<
  string,
  {
    title: string;
    preview: string;
    greeting: string;
    orderShipped: string;
    tracking: string;
    items: string;
    questions: string;
  }
> = {
  sr: {
    title: "Vaša narudžbina je poslata!",
    preview: "Vaša narudžbina je na putu",
    greeting: "Poštovani {name},",
    orderShipped:
      "Odlične vesti! Vaša narudžbina je poslata i uskoro će stići na vašu adresu.",
    tracking: "Praćenje pošiljke",
    items: "Artikli",
    questions: "Imate pitanja? Pišite nam na support@manoonoils.com",
  },
  en: {
    title: "Your Order Has Shipped!",
    preview: "Your order is on its way",
    greeting: "Dear {name},",
    orderShipped:
      "Great news! Your order has been shipped and will arrive at your address soon.",
    tracking: "Track your shipment",
    items: "Items",
    questions: "Questions? Email us at support@manoonoils.com",
  },
  de: {
    title: "Ihre Bestellung wurde versendet!",
    preview: "Ihre Bestellung ist unterwegs",
    greeting: "Sehr geehrte/r {name},",
    orderShipped:
      "Großartige Neuigkeiten! Ihre Bestellung wurde versandt und wird in Kürze bei Ihnen eintreffen.",
    tracking: "Sendung verfolgen",
    items: "Artikel",
    questions: "Fragen? Schreiben Sie uns an support@manoonoils.com",
  },
  fr: {
    title: "Votre commande a été expédiée!",
    preview: "Votre commande est en route",
    greeting: "Cher(e) {name},",
    orderShipped:
      "Bonne nouvelle! Votre commande a été expédiée et arrivera bientôt à votre adresse.",
    tracking: "Suivre votre envoi",
    items: "Articles",
    questions: "Questions? Écrivez-nous à support@manoonoils.com",
  },
};

export function OrderShipped({
  language = "en",
  orderId,
  orderNumber,
  customerName,
  items,
  trackingNumber,
  trackingUrl,
  siteUrl,
}: OrderShippedProps) {
  const t = translations[language] || translations.en;

  return (
    <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>

      {trackingNumber && (
        <Section style={styles.trackingSection}>
          <Text style={styles.sectionTitle}>{t.tracking}</Text>
          {trackingUrl ? (
            <Button href={trackingUrl} style={styles.trackingButton}>
              {trackingNumber}
            </Button>
          ) : (
            <Text style={styles.trackingNumber}>{trackingNumber}</Text>
          )}
        </Section>
      )}

      <Section style={styles.itemsSection}>
        <Text style={styles.sectionTitle}>{t.items}</Text>
        <Hr style={styles.hr} />
        {items.map((item) => (
          <Section key={item.id} style={styles.itemRow}>
            <Text style={styles.itemName}>
              {item.quantity}x {item.name}
            </Text>
            <Text style={styles.itemPrice}>{item.price}</Text>
          </Section>
        ))}
      </Section>

      <Text style={styles.questions}>{t.questions}</Text>
    </BaseLayout>
  );
}

const styles = {
  title: {
    fontSize: "24px",
    fontWeight: "bold" as const,
    color: "#1a1a1a",
    marginBottom: "20px",
  },
  greeting: {
    fontSize: "16px",
    color: "#333333",
    marginBottom: "10px",
  },
  text: {
    fontSize: "14px",
    color: "#666666",
    marginBottom: "20px",
  },
  trackingSection: {
    backgroundColor: "#f9f9f9",
    padding: "15px",
    borderRadius: "8px",
    marginBottom: "20px",
  },
  sectionTitle: {
    fontSize: "16px",
    fontWeight: "bold" as const,
    color: "#1a1a1a",
    marginBottom: "10px",
  },
  trackingNumber: {
    fontSize: "14px",
    color: "#333333",
    margin: "0",
  },
  trackingButton: {
    backgroundColor: "#000000",
    color: "#ffffff",
    padding: "10px 20px",
    borderRadius: "4px",
    fontSize: "14px",
    textDecoration: "none",
  },
  itemsSection: {
    marginBottom: "20px",
  },
  hr: {
    borderColor: "#e0e0e0",
    margin: "10px 0",
  },
  itemRow: {
    display: "flex" as const,
    justifyContent: "space-between" as const,
    padding: "8px 0",
  },
  itemName: {
    fontSize: "14px",
    color: "#333333",
    margin: "0",
  },
  itemPrice: {
    fontSize: "14px",
    color: "#333333",
    margin: "0",
  },
  questions: {
    fontSize: "14px",
    color: "#666666",
  },
};