"use client"; import { useState, useEffect, useMemo, Fragment, type ReactNode } from "react"; import Link from "next/link"; import { useRouter } from "next/navigation"; import { Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js"; import { loadStripe } from "@stripe/stripe-js"; import staticCopy from "@/i18n/staticCopy.json"; import { DEFAULT_LOCALE, getStoredLocale, getStoredLocaleRaw, LOCALE_CHANGE_EVENT, type LocaleCode, } from "@/i18n/localeSwitcher"; export type CheckoutPageProps = { cartId?: string; }; type CheckoutSidebarCms = { secureTitle: string; secureHeaderSvg: string; features: { text: string; logoSvg: string }[]; helpTitle: string; helpDescription: string; contacts: { text: string; logoSvg: string; href: string }[]; infoCardItems: { title: string; subtitle: string }[]; }; function collectPageComponents(pageJson: unknown): any[] { const list: any[] = []; for (const sec of (pageJson as { page?: { sections?: any[] } })?.page?.sections ?? []) { for (const comp of sec?.components ?? []) list.push(comp); } return list; } function contactHrefFromText(text: string): string { const t = text.trim(); if (!t) return "#"; if (/^https?:\/\//i.test(t)) return t; if (t.includes("@")) return `mailto:${t}`; const digits = t.replace(/[^\d+]/g, ""); if (digits.replace(/\D/g, "").length >= 6) return `tel:${digits}`; return "#"; } function parseCheckoutSidebar(pageJson: unknown): CheckoutSidebarCms { const comps = collectPageComponents(pageJson); const secure = comps.find((c) => c?.type?.name === "secure_transition_card"); const support = comps.find((c) => c?.type?.name === "supporthelp_card"); const secureData = secure?.instance?.data ?? {}; const featuresRaw = Array.isArray(secureData?.features?.items) ? secureData.features.items : []; const features = featuresRaw .map((item: { text?: string; logo_svg?: string }) => ({ text: String(item?.text ?? "").trim(), logoSvg: typeof item?.logo_svg === "string" ? item.logo_svg : "", })) .filter((f: { text: string; logoSvg: string }) => f.text || f.logoSvg); const secureTitle = String(secureData?.title ?? "").trim(); const secureHeaderSvg = typeof secureData?.logo_svg === "string" ? secureData.logo_svg.trim() : ""; const supportData = support?.instance?.data ?? {}; const supportItem = Array.isArray(supportData?.items) ? supportData.items[0] : supportData; const helpTitle = String(supportItem?.text ?? "").trim(); const helpDescription = String(supportItem?.description ?? "").trim(); const contactItems = Array.isArray(supportItem?.contact_info?.items) ? supportItem.contact_info.items : Array.isArray(supportItem?.contact_information?.items) ? supportItem.contact_information.items : []; const contacts = contactItems .map((item: { text?: string; logo_svg?: string }) => { const text = String(item?.text ?? "").trim(); return { text, logoSvg: typeof item?.logo_svg === "string" ? item.logo_svg : "", href: contactHrefFromText(text), }; }) .filter((c: { text: string; logoSvg: string; href: string }) => c.text || c.logoSvg); const infoCard = comps.find((c) => c?.type?.name === "information_card"); const infoItemsRaw = Array.isArray(infoCard?.instance?.data?.info?.items) ? infoCard.instance.data.info.items : []; const infoCardItems = infoItemsRaw .map((item: { title?: string; subtitle?: string }) => ({ title: String(item?.title ?? "").trim(), subtitle: String(item?.subtitle ?? "").trim(), })) .filter((item: { title: string; subtitle: string }) => item.title || item.subtitle); return { secureTitle, secureHeaderSvg, features, helpTitle, helpDescription, contacts, infoCardItems, }; } const TERMS_LINK_MARKER = "Terms & Conditions"; function renderTermsLinkInText(text: string): ReactNode { const idx = text.indexOf(TERMS_LINK_MARKER); if (idx === -1) return text; return ( <> {text.slice(0, idx)} {TERMS_LINK_MARKER} {text.slice(idx + TERMS_LINK_MARKER.length)} ); } function renderInformationCardSubtitle(subtitle: string): ReactNode { if (!subtitle) return null; const emailRe = /\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}\b/gi; const chunks = subtitle.split(emailRe); const emails = subtitle.match(emailRe) ?? []; const out: ReactNode[] = []; chunks.forEach((chunk, i) => { out.push({renderTermsLinkInText(chunk)}); if (i < emails.length) { const e = emails[i]; out.push( {e} ); } }); return <>{out}; } function IconChevronDown() { return ( ); } function IconArrowRight() { return ( ); } function IconArrowPay() { return ( ); } type B2bAddress = { company?: string | null; first_name?: string | null; last_name?: string | null; address_1?: string | null; address_2?: string | null; city?: string | null; country_code?: string | null; postal_code?: string | null; phone?: string | null; email?: string | null; }; type CustomerDefaultAddress = { address_1?: string | null; address_2?: string | null; city?: string | null; province?: string | null; postal_code?: string | null; country_code?: string | null; phone?: string | null; company?: string | null; first_name?: string | null; last_name?: string | null; }; type B2bCheckoutData = { customer_details?: { email?: string | null; company_name?: string | null; tax_id?: string | null; phone?: string | null; responsible_person_name?: string | null; responsible_person_phone?: string | null; default_billing_address?: CustomerDefaultAddress | null; default_shipping_address?: CustomerDefaultAddress | null; }; cart?: { email?: string | null; currency_code?: string; total?: number; subtotal?: number; shipping_total?: number; shipping_methods?: Array<{ id?: string; name?: string; amount?: number; shipping_option_id?: string; data?: Record; tax_lines?: unknown[]; }>; tax_total?: number; metadata?: Record | null; billing_address?: B2bAddress | null; shipping_address?: B2bAddress | null; items?: Array<{ title?: string; quantity?: number; unit_price?: number; metadata?: Record | null; }>; customer?: { email?: string | null } | null; }; payment_options?: Array<{ code?: string; label?: string; description?: string; requires_additional_action?: boolean; client_secret?: string; }>; countries?: Array<{ iso_2?: string; display_name?: string; tax_rate?: number | null; tax_label?: string; }>; data?: { countries?: Array<{ iso_2?: string; display_name?: string; tax_rate?: number | null; tax_label?: string; }>; }; pricing_summary?: { product_title?: string; quantity?: number; quantity_unit?: string; tax_label?: string; tax_rate?: number; }; }; function formatCheckoutMoney(amount: number | undefined, currencyCode: string | undefined): string { const code = (currencyCode ?? "eur").toLowerCase(); const sym = code === "eur" ? "€" : `${code.toUpperCase()} `; return `${sym}${Number(amount ?? 0).toFixed(2)}`; } function isStripeCardPaymentOption(opt: NonNullable[number]): boolean { const pid = (opt.code ?? "").toLowerCase(); const code = (opt.code ?? "").toLowerCase(); const text = `${opt.label ?? ""} ${opt.description ?? ""}`.toLowerCase(); if (text.includes("bank transfer") || text.includes("wire transfer") || pid.includes("manual")) { return false; } if (pid.includes("stripe") || code.includes("stripe")) return true; if (/\b(credit|debit)\b/.test(text) && /\bcard\b/.test(text)) return true; if (text.includes("credit/debit") || text.includes("debit/credit")) return true; return false; } function StripeCardPayButton({ cartId, billingData, shippingData, grandTotal, currencyCode, selectedPaymentProvider, termsAccepted, payLabels, }: { cartId: string; billingData: { company: string; vat: string; email: string; phone: string; address: string; postal: string; city: string; country: string }; shippingData: { company?: string; email: string; phone: string; address: string; postal: string; city: string; country: string }; grandTotal: number; currencyCode: string | undefined; selectedPaymentProvider: string; termsAccepted: boolean; payLabels: { acceptTermsMessage: string; processing: string; confirmPay: string }; }) { const stripe = useStripe(); const elements = useElements(); const [busy, setBusy] = useState(false); const [msg, setMsg] = useState(null); const getAuthHeaders = (): Record => { 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(); return token ? { Authorization: `Bearer ${token}` } : {}; } catch { return {}; } }; const handlePay = async () => { if (!stripe || !elements || !cartId) return; if (!termsAccepted) { setMsg(payLabels.acceptTermsMessage); return; } setBusy(true); setMsg(null); const base = process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL!; const headers: Record = { "Content-Type": "application/json", "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_API_KEY || "", ...getAuthHeaders(), }; try { const addrRes = await fetch(`${base}/store/checkout/${cartId}/address`, { method: "POST", headers, body: JSON.stringify({ use_default_address: false, shipping_same_as_billing: false, billing_email: billingData.email, billing_name: billingData.company, billing_company_name: billingData.company, billing_tax_id: billingData.vat, billing_phone: billingData.phone, billing_address: billingData.address, billing_city: billingData.city, billing_province: billingData.city, billing_postal_code: billingData.postal, billing_country: billingData.country, shipping_email: shippingData.email, shipping_name: shippingData.company || billingData.company, shipping_company_name: shippingData.company || billingData.company, shipping_phone: shippingData.phone, shipping_address: shippingData.address, shipping_city: shippingData.city, shipping_province: shippingData.city, shipping_postal_code: shippingData.postal, shipping_country: shippingData.country, }), }); if (!addrRes.ok) { const e = await addrRes.json().catch(() => ({})) as { message?: string }; setMsg(e.message ?? "Failed to save address"); setBusy(false); return; } } catch { setMsg("Network error saving address"); setBusy(false); return; } let clientSecret = ""; try { const sessionRes = await fetch(`${base}/store/checkout/${cartId}/payment-session`, { method: "POST", headers, body: JSON.stringify({ provider: selectedPaymentProvider }), }); if (!sessionRes.ok) { const e = await sessionRes.json().catch(() => ({})) as { message?: string }; setMsg(e.message ?? "Failed to initialize payment"); setBusy(false); return; } const sessionData = await sessionRes.json() as { payment_session?: { data?: { client_secret?: string } }; payment_collection?: { payment_sessions?: Array<{ data?: { client_secret?: string } }> }; }; clientSecret = sessionData.payment_session?.data?.client_secret ?? sessionData.payment_collection?.payment_sessions?.[0]?.data?.client_secret ?? ""; if (!clientSecret) { setMsg("Could not get payment session from server"); setBusy(false); return; } } catch { setMsg("Network error initializing payment session"); setBusy(false); return; } const { error: submitError } = await elements.submit(); if (submitError) { setMsg(submitError.message ?? "Check your card details"); setBusy(false); return; } const returnUrl = `${window.location.origin}/stripe-return?cart_id=${encodeURIComponent(cartId)}`; const { error } = await stripe.confirmPayment({ elements, clientSecret, confirmParams: { return_url: returnUrl }, }); if (error) { setMsg(error.message ?? "Payment could not be completed"); setBusy(false); } }; return ( <> {msg ?

{msg}

: null}
); } export default function CheckoutPage({ cartId = "" }: CheckoutPageProps) { const router = useRouter(); const [checkoutData, setCheckoutData] = useState(null); const [billingCompany, setBillingCompany] = useState(""); const [billingVat, setBillingVat] = useState(""); const [billingEmail, setBillingEmail] = useState(""); const [billingPhone, setBillingPhone] = useState(""); const [billingAddress, setBillingAddress] = useState(""); const [billingPostal, setBillingPostal] = useState(""); const [billingCity, setBillingCity] = useState(""); const [shippingEmail, setShippingEmail] = useState(""); const [shippingPhone, setShippingPhone] = useState(""); const [shippingCompany, setShippingCompany] = useState(""); const [shippingAddress, setShippingAddress] = useState(""); const [shippingPostal, setShippingPostal] = useState(""); const [shippingCity, setShippingCity] = useState(""); const [shippingCountry, setShippingCountry] = useState(""); const [selectedPaymentProvider, setSelectedPaymentProvider] = useState(""); const [termsAccepted, setTermsAccepted] = useState(false); const [country, setCountry] = useState(""); const [stripeIntentLoading, setStripeIntentLoading] = useState(false); const [stripeIntentError, setStripeIntentError] = useState(null); const [stripePublishableKeyFromApi, setStripePublishableKeyFromApi] = useState(""); const [busy, setBusy] = useState(false); const [sidebarCms, setSidebarCms] = useState(null); const [uiLocale, setUiLocale] = useState(DEFAULT_LOCALE); const envStripePublishableKey = (process.env.NEXT_PUBLIC_STRIPE_TEST_PUBLIC_KEY ?? "").trim(); const effectiveStripePublishableKey = envStripePublishableKey || stripePublishableKeyFromApi.trim(); const stripePromise = useMemo( () => (effectiveStripePublishableKey ? loadStripe(effectiveStripePublishableKey) : null), [effectiveStripePublishableKey] ); useEffect(() => { const id = cartId?.trim(); if (!id) { setCheckoutData(null); setBillingCompany(""); setBillingVat(""); setBillingEmail(""); setBillingPhone(""); setBillingAddress(""); setBillingPostal(""); setBillingCity(""); setCountry(""); setSelectedPaymentProvider(""); setStripeIntentError(null); setStripePublishableKeyFromApi(""); return; } const base = process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL; if (!base) return; let cancelled = false; const load = async () => { 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 authTok = String(user?.token ?? user?.access_token ?? "").trim(); if (authTok) headers.Authorization = `Bearer ${authTok}`; } catch { } try { const res = await fetch(`${base}/store/checkout/${encodeURIComponent(id)}`, { method: "GET", headers, credentials: "include", cache: "no-store", }); if (!cancelled && res.ok) { const data = (await res.json().catch(() => null)) as B2bCheckoutData | null; if (data) setCheckoutData(data); } } catch { } }; void load(); const onLocaleChange = () => { void load(); }; if (typeof window !== "undefined") { window.addEventListener(LOCALE_CHANGE_EVENT, onLocaleChange); } return () => { cancelled = true; if (typeof window !== "undefined") { window.removeEventListener(LOCALE_CHANGE_EVENT, onLocaleChange); } }; }, [cartId]); useEffect(() => { let cancelled = false; const base = process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL; if (!base) return; const loadSidebar = async () => { try { const xMedusaLocale = (getStoredLocaleRaw() ?? getStoredLocale()).trim(); const res = await fetch(`${base}/store/pages/check-out`, { method: "GET", headers: { "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_API_KEY || "", "x-medusa-locale": xMedusaLocale, }, cache: "no-store", }); if (!res.ok || cancelled) return; const json = await res.json().catch(() => null); if (!cancelled && json) setSidebarCms(parseCheckoutSidebar(json)); } catch { } }; void loadSidebar(); const onLocaleChange = () => { void loadSidebar(); }; if (typeof window !== "undefined") { window.addEventListener(LOCALE_CHANGE_EVENT, onLocaleChange); } return () => { cancelled = true; if (typeof window !== "undefined") { window.removeEventListener(LOCALE_CHANGE_EVENT, onLocaleChange); } }; }, []); useEffect(() => { if (!checkoutData?.cart) return; const cart = checkoutData.cart; const b = cart.billing_address; const meta = cart.metadata; const companyOrName = (b?.company && String(b.company)) || [b?.first_name, b?.last_name].filter(Boolean).join(" ").trim(); setBillingCompany(companyOrName); setBillingVat(meta?.buyer_vat_number != null && meta.buyer_vat_number !== "" ? String(meta.buyer_vat_number) : ""); setBillingEmail(String(cart.email ?? cart.customer?.email ?? "")); setBillingPhone(b?.phone != null ? String(b.phone) : ""); setBillingAddress(b?.address_1 != null ? String(b.address_1) : ""); setBillingPostal(b?.postal_code != null ? String(b.postal_code) : ""); setBillingCity(b?.city != null ? String(b.city) : ""); setCountry((b?.country_code ?? "").toLowerCase()); const s = cart.shipping_address; setShippingEmail(s?.email ?? cart.email ?? cart.customer?.email ?? ""); setShippingPhone(s?.phone != null ? String(s.phone) : ""); setShippingAddress(s?.address_1 != null ? String(s.address_1) : ""); setShippingPostal(s?.postal_code != null ? String(s.postal_code) : ""); setShippingCity(s?.city != null ? String(s.city) : ""); setShippingCountry((s?.country_code ?? "").toLowerCase()); setShippingCompany(s?.company != null ? String(s.company) : ""); const opts = checkoutData.payment_options; if (opts?.length) { setSelectedPaymentProvider((prev) => prev && opts.some((o) => o.code === prev) ? prev : (opts[0]?.code ?? "") ); } }, [checkoutData]); const handleNonStripeConfirm = async () => { if (!termsAccepted) { alert("Please accept the Terms & Conditions"); return; } if (!cartId) return; setBusy(true); const base = process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL!; 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 { } try { const addressRes = await fetch(`${base}/store/checkout/${cartId}/address`, { method: "POST", headers, body: JSON.stringify({ use_default_address: false, shipping_same_as_billing: false, billing_email: billingEmail, billing_name: billingCompany, billing_company_name: billingCompany, billing_tax_id: billingVat, billing_phone: billingPhone, billing_address: billingAddress, billing_city: billingCity, billing_province: billingCity, billing_postal_code: billingPostal, billing_country: country, shipping_email: shippingEmail, shipping_name: shippingCompany || billingCompany, shipping_company_name: shippingCompany || billingCompany, shipping_phone: shippingPhone, shipping_address: shippingAddress, shipping_city: shippingCity, shipping_province: shippingCity, shipping_postal_code: shippingPostal, shipping_country: shippingCountry, }), }); if (!addressRes.ok) { alert("Failed to save addresses"); setBusy(false); return; } const sessionRes = await fetch(`${base}/store/checkout/${cartId}/payment-session`, { method: "POST", headers, body: JSON.stringify({ provider: selectedPaymentProvider }), }); if (!sessionRes.ok) { alert("Failed to initialize payment session"); setBusy(false); return; } const completeRes = await fetch(`${base}/store/checkout/${cartId}/complete`, { method: "POST", headers, body: JSON.stringify({ provider: selectedPaymentProvider }), }); const data = await completeRes.json() as { order?: { id: string } }; if (data.order?.id) { localStorage.removeItem("biomket_cart_id"); router.push(`/payment?orderId=${data.order.id}`); } else { setBusy(false); } } catch (err) { alert("An error occurred during checkout. Please try again."); setBusy(false); } }; const fillBillingFromCustomerDetails = () => { const d = checkoutData?.customer_details; if (!d) return; const b = d.default_billing_address; if (b) { const addr1 = b.address_1 != null ? String(b.address_1) : ""; const addr2Raw = b.address_2 != null ? String(b.address_2).trim() : ""; const addressLine = addr2Raw ? `${addr1}, ${addr2Raw}` : addr1; setBillingAddress(addressLine); setBillingPostal(b.postal_code != null ? String(b.postal_code) : ""); setBillingCity(b.city != null ? String(b.city) : ""); setCountry(String(b.country_code ?? "").toLowerCase()); const companyFromDetails = String(d.company_name ?? "").trim(); const companyFromAddr = b?.company != null && String(b.company).trim() !== "" ? String(b.company) : ""; const nameFromAddr = [b?.first_name, b?.last_name].filter(Boolean).join(" ").trim(); setBillingCompany(companyFromDetails || companyFromAddr || nameFromAddr); setBillingVat(d.tax_id != null ? String(d.tax_id) : ""); setBillingEmail(d.email != null ? String(d.email) : ""); setBillingPhone(String(d.phone ?? b?.phone ?? "").trim()); } }; const fillShippingFromBilling = () => { setShippingEmail(billingEmail); setShippingPhone(billingPhone); setShippingAddress(billingAddress); setShippingCompany(billingCompany); setShippingPostal(billingPostal); setShippingCity(billingCity); setShippingCountry(country); }; const cart = checkoutData?.cart; const pricing = checkoutData?.pricing_summary; const items = cart?.items ?? []; const titlesFromItems = items.map((i) => i.title).filter(Boolean).join(", "); const displayTitle = (pricing?.product_title ?? titlesFromItems) || ""; const quantityUnitLabel = pricing?.quantity != null ? `${pricing.quantity}${pricing.quantity_unit ? ` ${pricing.quantity_unit}` : ""}` : items[0]?.quantity != null ? `${items[0].quantity}${items[0].metadata?.quantity_unit ? ` ${String(items[0].metadata.quantity_unit)}` : "" }` : ""; const subtotal = cart?.subtotal ?? 0; const shippingMethods = cart?.shipping_methods ?? []; const shippingTotal = shippingMethods.length > 0 ? Math.round( shippingMethods.reduce((sum, m) => sum + (Number(m.amount) || 0), 0) * 100 ) / 100 : (cart?.shipping_total ?? 0); const lineSubtotal = items.length > 0 ? Math.round( items.reduce((sum, i) => { const q = Number(i.quantity) || 0; const meta = i.metadata; const base = meta != null && meta.base_price != null && String(meta.base_price).trim() !== "" && !Number.isNaN(Number(meta.base_price)) ? Number(meta.base_price) : Number(i.unit_price) || 0; return sum + q * base; }, 0) * 100 ) / 100 : subtotal; const currencyCode = cart?.currency_code; const paymentOptions = checkoutData?.payment_options ?? []; const rootCountries = checkoutData?.countries; const nestedCountries = checkoutData?.data?.countries; const apiCountries = ((rootCountries?.length ? rootCountries : nestedCountries) ?? []).filter((c) => String(c.iso_2 ?? "").trim() ); const selectedCountryMeta = country.trim() && apiCountries.length > 0 ? apiCountries.find((c) => (c.iso_2 ?? "").toLowerCase() === country.toLowerCase()) : undefined; let taxLabel: string; let vat: number; let total: number; if (selectedCountryMeta) { const rate = selectedCountryMeta.tax_rate; taxLabel = rate != null ? `VAT (${rate}%)` : (selectedCountryMeta.tax_label ?? "VAT"); if (typeof rate === "number") { const taxableAmount = lineSubtotal + shippingTotal; vat = Math.round(taxableAmount * (rate / 100) * 100) / 100; total = Math.round((taxableAmount + vat) * 100) / 100; } else { vat = cart?.tax_total ?? 0; total = cart?.total ?? 0; } } else { taxLabel = pricing?.tax_rate != null ? `VAT (${pricing.tax_rate}%)` : (pricing?.tax_label ?? "VAT"); vat = cart?.tax_total ?? 0; total = cart?.total ?? 0; } const grandTotal = total; const totalExclVatAmount = Math.round((lineSubtotal + shippingTotal) * 100) / 100; const grandTotalDisplay = total > 0 ? total : totalExclVatAmount; const selectedPaymentOption = paymentOptions.find((o) => o.code === selectedPaymentProvider); const stripeCardSelected = Boolean( selectedPaymentOption && isStripeCardPaymentOption(selectedPaymentOption) ); useEffect(() => { if (!stripeCardSelected) { setStripeIntentError(null); setStripeIntentLoading(false); } }, [stripeCardSelected]); 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 co = staticCopy.checkout[uiLocale]; return (

{co.yourOrder}

{displayTitle}
{co.subtotal} {formatCheckoutMoney(lineSubtotal, currencyCode)}
{co.transportCost} {formatCheckoutMoney(shippingTotal, currencyCode)}
{co.totalExclVat} {formatCheckoutMoney(lineSubtotal + shippingTotal, currencyCode)}
+ {taxLabel} {formatCheckoutMoney(vat, currencyCode)}
{co.grandTotal} {formatCheckoutMoney(grandTotalDisplay, currencyCode)}

{co.billingInfoTitle}

{checkoutData?.customer_details ? ( ) : null}
setBillingCompany(e.target.value)} className="w-full border border-[#053F31]/20 rounded-[5px] px-[30px] py-1.5 focus:outline-none focus:border-gray-300 text-[18px] leading-[150%] font-outfit font-light text-[18px] text-[#000000] placeholder:text-[#999999]" />
setBillingVat(e.target.value)} className="w-full border border-[#053F31]/20 rounded-[5px] px-[30px] py-1.5 focus:outline-none focus:border-gray-300 text-[18px] leading-[150%] font-outfit font-light text-[18px] text-[#000000] placeholder:text-[#999999]" />
setBillingEmail(e.target.value)} className="w-full border border-[#053F31]/20 rounded-[5px] px-[30px] py-1.5 focus:outline-none focus:border-gray-300 text-[18px] leading-[150%] font-outfit font-light text-[18px] text-[#000000] placeholder:text-[#999999]" />
setBillingPhone(e.target.value)} className="w-full border border-[#053F31]/20 rounded-[5px] px-[30px] py-1.5 focus:outline-none focus:border-gray-300 text-[18px] leading-[150%] font-outfit font-light text-[18px] text-[#000000] placeholder:text-[#999999]" />
setBillingAddress(e.target.value)} className="w-full border border-[#053F31]/20 rounded-[5px] px-[30px] py-1.5 focus:outline-none focus:border-gray-300 text-[18px] leading-[150%] font-outfit font-light text-[18px] text-[#000000] placeholder:text-[#999999]" />
setBillingPostal(e.target.value)} className="w-full border border-[#053F31]/20 rounded-[5px] px-[30px] py-1.5 focus:outline-none focus:border-gray-300 text-[18px] leading-[150%] font-outfit font-light text-[18px] text-[#000000] placeholder:text-[#999999]" />
setBillingCity(e.target.value)} className="w-full border border-[#053F31]/20 rounded-[5px] px-[30px] py-1.5 focus:outline-none focus:border-gray-300 text-[18px] leading-[150%] font-outfit font-light text-[18px] text-[#000000] placeholder:text-[#999999]" />

{co.shippingInfoTitle}

setShippingEmail(e.target.value)} className="w-full border border-[#053F31]/20 rounded-[5px] px-[30px] py-1.5 focus:outline-none focus:border-gray-300 text-[18px] leading-[150%] font-outfit font-light text-[18px] text-[#000000] placeholder:text-[#999999]" />
setShippingPhone(e.target.value)} className="w-full border border-[#053F31]/20 rounded-[5px] px-[30px] py-1.5 focus:outline-none focus:border-gray-300 text-[18px] leading-[150%] font-outfit font-light text-[18px] text-[#000000] placeholder:text-[#999999]" />
setShippingAddress(e.target.value)} className="w-full border border-[#053F31]/20 rounded-[5px] px-[30px] py-1.5 focus:outline-none focus:border-gray-300 text-[18px] leading-[150%] font-outfit font-light text-[18px] text-[#000000] placeholder:text-[#999999]" />
setShippingPostal(e.target.value)} className="w-full border border-[#053F31]/20 rounded-[5px] px-[30px] py-1.5 focus:outline-none focus:border-gray-300 text-[18px] leading-[150%] font-outfit font-light text-[18px] text-[#000000] placeholder:text-[#999999]" />
setShippingCity(e.target.value)} className="w-full border border-[#053F31]/20 rounded-[5px] px-[30px] py-1.5 focus:outline-none focus:border-gray-300 text-[18px] leading-[150%] font-outfit font-light text-[18px] text-[#000000] placeholder:text-[#999999]" />

{co.paymentMethodTitle}

{paymentOptions.length > 0 ? ( paymentOptions.map((opt) => { const pid = opt.code ?? ""; const selected = selectedPaymentProvider === pid; return ( ); }) ) : (

{co.paymentOptionsEmpty}

)} {stripeCardSelected && (stripeIntentLoading || stripePromise || Boolean(stripeIntentError)) ? (
{stripeIntentLoading ? (

{co.preparingCardPayment}

) : null} {stripeIntentError ? (

{stripeIntentError}

) : null} {stripePromise && stripeCardSelected ? (

{co.postPaymentNote}

) : null}
) : null}
{!(stripeCardSelected && stripePromise) ? (

{co.postPaymentNote}

) : null} {!stripeCardSelected ? (
) : null}
{sidebarCms?.infoCardItems?.length ? (
{sidebarCms.infoCardItems.map((row, idx) => (
{row.title ? (

{row.title}

) : null} {row.subtitle ? ( {renderInformationCardSubtitle(row.subtitle)} ) : null}
))}
) : null}
); }