"use client"; import { useState, useEffect } from "react"; import Link from "next/link"; import staticCopy from "@/i18n/staticCopy.json"; import { DEFAULT_LOCALE, getStoredLocale, getStoredLocaleRaw, LOCALE_CHANGE_EVENT, type LocaleCode, } from "@/i18n/localeSwitcher"; interface OrderInfoSectionProps { orderNumber?: string; email?: string; nextPaymentDate?: string; contactEmail?: string; contactPhone?: string; importantInformationTitle?: string; importantInformationRichtext?: string; needHelpTitle?: string; needHelpDescription?: string; needHelpContacts?: Array<{ text?: string; logo_svg?: string }>; needHelpButtons?: Array<{ button_text?: string; button_url?: string; logo_svg?: string }>; invoiceUrl?: string; receiptUrl?: string; emailReceiptUrl?: string; orderId?: string; } const IconArrow1 = () => ( ); const IconArrow2 = () => ( ); const IconDownload = () => ( ); const IconPrint = () => ( ); function isContactEmail(text: string) { return text.includes("@"); } async function downloadPdf(url: string, filename: string) { const headers: Record = { "Content-Type": "application/json", "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_API_KEY || "", }; try { const raw = typeof window !== "undefined" ? localStorage.getItem("currentUser") : null; const user = raw ? JSON.parse(raw) : null; const token = String(user?.token ?? user?.access_token ?? "").trim(); if (token) headers.Authorization = `Bearer ${token}`; } catch {} const res = await fetch(url, { method: "GET", headers, credentials: "include", }); if (!res.ok) throw new Error("Failed to download PDF"); const blob = await res.blob(); const objectUrl = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.href = objectUrl; a.download = filename; document.body.appendChild(a); a.click(); a.remove(); window.URL.revokeObjectURL(objectUrl); } function contactHref(text: string) { const t = text.trim(); if (!t) return "#"; return isContactEmail(t) ? `mailto:${t}` : `tel:${t.replace(/\s/g, "")}`; } function extractListItemsFromHtml(html: string): string[] { const items: string[] = []; const re = /]*>([\s\S]*?)<\/li>/gi; let m: RegExpExecArray | null; while ((m = re.exec(html)) !== null) { items.push(m[1].trim()); } return items; } const IconMailOutline = () => ( ); export default function OrderInfoSection({ importantInformationTitle, importantInformationRichtext, needHelpTitle, needHelpDescription, needHelpContacts, needHelpButtons, invoiceUrl, receiptUrl, emailReceiptUrl, orderId, }: OrderInfoSectionProps) { const [emailLoading, setEmailLoading] = useState(false); const [emailSuccess, setEmailSuccess] = useState(false); const [emailError, setEmailError] = useState(false); const [uiLocale, setUiLocale] = useState(DEFAULT_LOCALE); useEffect(() => { const syncLocale = () => setUiLocale(getStoredLocale()); syncLocale(); window.addEventListener("storage", syncLocale); window.addEventListener(LOCALE_CHANGE_EVENT, syncLocale); return () => { window.removeEventListener("storage", syncLocale); window.removeEventListener(LOCALE_CHANGE_EVENT, syncLocale); }; }, []); const labels = staticCopy.orderInfoSection[uiLocale as keyof typeof staticCopy.orderInfoSection] ?? staticCopy.orderInfoSection["en-EN"]; const handleDownloadInvoice = async () => { if (!invoiceUrl || !orderId) return; try { const fullUrl = invoiceUrl.startsWith("http") ? invoiceUrl : `${process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL}${invoiceUrl}`; await downloadPdf(fullUrl, `invoice-${orderId}.pdf`); } catch (error) { } }; const handlePrintReceipt = async () => { if (!receiptUrl || !orderId) return; try { const fullUrl = receiptUrl.startsWith("http") ? receiptUrl : `${process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL}${receiptUrl}`; await downloadPdf(fullUrl, `receipt-${orderId}.pdf`); } catch (error) { } }; const handleEmailReceipt = async () => { if (!emailReceiptUrl) return; setEmailLoading(true); setEmailSuccess(false); setEmailError(false); try { const headers: Record = { "Content-Type": "application/json", "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_API_KEY || "", "x-medusa-locale": (getStoredLocaleRaw() ?? getStoredLocale()).trim(), }; try { const raw = typeof window !== "undefined" ? localStorage.getItem("currentUser") : null; const user = raw ? JSON.parse(raw) : null; const token = String(user?.token ?? user?.access_token ?? "").trim(); if (token) headers.Authorization = `Bearer ${token}`; } catch {} const fullUrl = emailReceiptUrl.startsWith("http") ? emailReceiptUrl : `${process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL}${emailReceiptUrl}`; const res = await fetch(fullUrl, { method: "POST", headers, credentials: "include", }); if (res.ok) { setEmailSuccess(true); setTimeout(() => setEmailSuccess(false), 3000); } else { setEmailError(true); setTimeout(() => setEmailError(false), 3000); } } catch (error) { setEmailError(true); setTimeout(() => setEmailError(false), 3000); } finally { setEmailLoading(false); } }; const infoHtml = importantInformationRichtext?.trim(); const infoHeading = importantInformationTitle?.trim() || "Important Information"; const importantInfoListItems = infoHtml ? extractListItemsFromHtml(infoHtml) : []; const needHelpButtonsFiltered = needHelpButtons?.filter( (b) => String(b.button_text ?? "").trim() !== "" || String(b.button_url ?? "").trim() !== "" ) ?? []; const needHelpContactsFiltered = needHelpContacts?.filter((c) => String(c.text ?? "").trim() !== "") ?? []; const hasNeedHelpCms = Boolean(needHelpTitle?.trim()) || Boolean(needHelpDescription?.trim()) || needHelpContactsFiltered.length > 0 || needHelpButtonsFiltered.length > 0; return (
{infoHtml ? (

{infoHeading}

{importantInfoListItems.length > 0 ? (
    {importantInfoListItems.map((innerHtml, i) => (
    • ))}
) : (
)}
) : null} {hasNeedHelpCms ? (
{needHelpTitle?.trim() ? (

{needHelpTitle.trim()}

) : null} {needHelpDescription?.trim() ? ( {needHelpDescription.trim()} ) : null} {needHelpContactsFiltered.length > 0 ? (
{needHelpContactsFiltered.flatMap((item, index) => { const text = String(item.text ?? "").trim(); const svg = String(item.logo_svg ?? "").trim(); const row = ( ); if (index === 0) return [row]; return [
, row, ]; })}
) : null} {needHelpButtonsFiltered.length > 0 ? (
0 ? "mt-[10px]" : "" }`} > {needHelpButtonsFiltered.map((btn: any, index) => { const label = String(btn.button_text || btn.button_label || btn.text || "").trim() || "Learn more"; const href = String(btn.button_url || btn.url || btn.href || "").trim() || "#"; const btnSvg = String(btn.logo_svg || btn.icon_svg || btn.icon || "").trim(); const primary = index % 2 === 0; return ( {label} {btnSvg ? ( ) : ( {primary ? : } )} ); })}
) : null}
) : null}
); }