"use client"; import Link from "next/link"; import { useRouter } from "next/navigation"; import { useEffect, useMemo, useRef, useState } from "react"; import { createPortal } from "react-dom"; import ProductZoom from "./ProductZoom"; import PageLoading from "@/components/PageLoading"; import { parseProductSeoMetaFromDetail, type ProductSeoMeta } from "@/lib/metadata"; import staticCopy from "@/i18n/staticCopy.json"; import { DEFAULT_LOCALE, getStoredLocale, getStoredLocaleRaw, LOCALE_CHANGE_EVENT, type LocaleCode, } from "@/i18n/localeSwitcher"; import { stripKnownLocalePrefix } from "@/i18n/localePathPrefix"; export type ProductDetailPageProps = { productId?: string; }; function IconQuantity() { return ( ); } function IconFrequency() { return ( ); } function IconLocation() { return ( ); } function IconWasteType() { return ( ); } function IconArrowRight() { return ( ); } function IconDownload() { return ( ); } function IconCheck() { return ( ); } const TAB_KEYS = ["productDetails", "certifications", "transportInfo", "compliance"] as const; type TabKey = (typeof TAB_KEYS)[number]; type VerifiedServiceCard = { svg: string; title: string; description: string; }; type ProductDetailData = { title: string; subtitle: string; code: string; description: string; image: string; images: string[]; quantity: string; supplyFrequency: string; location: string; locationDetail: string; wasteType: string; price: string; currency_symbol: string; priceUnit: string; technicalSheetUrl: string; technicalSheetFilename: string; variantId: string; currentAvailableQuantity: number | null; availability: string; }; type AvailabilityDisplayStyle = { label: string; className: string; }; function normalizeAvailabilityKey(raw: unknown): string { return String(raw ?? "") .trim() .toLowerCase() .replace(/\s+/g, " "); } function resolveAvailabilityDisplay( availability: string, currentAvailableQuantity: number | null, outOfStockLabel: string, ): AvailabilityDisplayStyle | null { const value = String(availability ?? "").trim(); if (!value) { if (currentAvailableQuantity == null || currentAvailableQuantity < 1) { return { label: outOfStockLabel, className: "border-[#FF4D4D] text-[#FF4D4D]", }; } return null; } const key = normalizeAvailabilityKey(availability); if (key === "in stock" || key === "en stock") { return { label: value, className: "border-[#053F31] text-[#053F31]" }; } if (key === "recurring supply" || key.includes("recurring") || key.includes("recurrente")) { return { label: value, className: "border-[#1A6BBA] text-[#1A6BBA]" }; } if (key === "on request" || key.includes("on request") || key.includes("bajo pedido") || key === "a pedido") { return { label: value, className: "border-[#D97706] text-[#D97706]" }; } if (key === "out of stock" || key.includes("out of stock") || key.includes("agotado") || key.includes("sin stock")) { return { label: value, className: "border-[#FF4D4D] text-[#FF4D4D]" }; } if (currentAvailableQuantity == null || currentAvailableQuantity < 1) { return { label: value, className: "border-[#FF4D4D] text-[#FF4D4D]" }; } return { label: value, className: "border-[#757575] text-[#757575]" }; } function mapApiProductToDetail(item: any): ProductDetailData | null { if (!item) return null; const apiImages = Array.isArray(item?.images) ? item.images .map((img: any) => String(img ?? "").trim()) .filter((img: string) => Boolean(img)) : []; return { title: String(item?.title ?? ""), subtitle: String(item?.category?.name ?? ""), code: String(item?.ler_code ?? ""), description: String(item?.description ?? ""), image: String(apiImages[0] ?? item?.image ?? ""), images: apiImages, quantity: String(item?.available_quantity ?? ""), supplyFrequency: String(item?.supply_frequency ?? item?.supplyFrequency ?? ""), location: String(item?.location_display ?? ""), locationDetail: String(item?.location_detail ?? ""), wasteType: String(item?.waste_type ?? ""), price: String(item?.price_amount ?? ""), currency_symbol: item.currency_symbol ?? "", priceUnit: String(item?.unit ?? ""), technicalSheetUrl: String( item?.technical_sheet_url ?? item?.technical_sheet ?? item?.technicalSheetUrl ?? item?.technicalSheet ?? item?.datasheet_url ?? item?.datasheet ?? item?.pdf_url ?? "" ).trim(), technicalSheetFilename: String( item?.technical_sheet_filename ).trim(), variantId: String( item?.variant_id ?? item?.variants?.[0]?.id ?? item?.variant?.id ?? item?.default_variant_id ?? "" ).trim(), currentAvailableQuantity: (() => { const raw = item?.current_available_quantity; if (raw == null || raw === "") return null; const n = Number(raw); if (!Number.isFinite(n) || n < 1) return null; return Math.floor(n); })(), availability: String(item?.availability ?? ""), }; } function collectCategoryTreePathSlugs(tree: unknown): string[] { const slugs: string[] = []; let node: unknown = tree; while (node && typeof node === "object" && !Array.isArray(node)) { const rec = node as Record; const slug = String(rec.slug ?? "").trim(); if (slug) slugs.push(slug); node = rec.sub_category ?? rec.subcategory ?? null; } return slugs; } function marketplaceProductUrlPathMatches( pathnameWithPossibleLocale: string, categoryTree: unknown, productHandle: string, ): boolean { const handle = String(productHandle ?? "").trim(); if (!handle) return false; const { pathnameWithoutPrefix } = stripKnownLocalePrefix(pathnameWithPossibleLocale); const parts = pathnameWithoutPrefix.split("/").filter(Boolean); if (parts[0] !== "marketplace" || parts.length < 2) return false; const marketplaceParts = parts.slice(1); const urlHandle = decodeURIComponent(String(marketplaceParts[marketplaceParts.length - 1] ?? "")); if (urlHandle !== handle) return false; const urlCategorySegments = marketplaceParts .slice(0, -1) .map((segment) => decodeURIComponent(segment)); const expectedCategorySegments = collectCategoryTreePathSlugs(categoryTree); if (expectedCategorySegments.length === 0) { return urlCategorySegments.length === 0; } if (urlCategorySegments.length !== expectedCategorySegments.length) return false; return urlCategorySegments.every((segment, index) => segment === expectedCategorySegments[index]); } /** True when URL is /marketplace/.../{handle} and the last segment matches the product (e.g. search listing links). */ function marketplaceProductUrlHandleMatches( pathnameWithPossibleLocale: string, productHandle: string, ): boolean { const handle = String(productHandle ?? "").trim(); if (!handle) return false; const { pathnameWithoutPrefix } = stripKnownLocalePrefix(pathnameWithPossibleLocale); const parts = pathnameWithoutPrefix.split("/").filter(Boolean); if (parts[0] !== "marketplace" || parts.length < 2) return false; const urlHandle = decodeURIComponent(String(parts[parts.length - 1] ?? "")).trim(); return urlHandle.toLowerCase() === handle.toLowerCase(); } type CheckoutTransportOption = { id: string; code: string; transport_type: string; label: string; description: string; delivery_window: string; amount: number; display_price: string; }; type CheckoutTruckTypeOption = { value: string; label: string; description: string; }; export default function ProductDetailPage({ productId, }: ProductDetailPageProps) { const router = useRouter(); const [uiLocale, setUiLocale] = useState(DEFAULT_LOCALE); const [apiResolved, setApiResolved] = useState(null); const [apiChecked, setApiChecked] = useState(false); const [activeTab, setActiveTab] = useState("productDetails"); const [imageIndex, setImageIndex] = useState(0); const [hoveredBottomCard, setHoveredBottomCard] = useState(null); const [verifiedServicesTitle, setVerifiedServicesTitle] = useState(""); const [verifiedServiceCards, setVerifiedServiceCards] = useState([]); const [technicalSpecsTitle, setTechnicalSpecsTitle] = useState(""); const [technicalSpecs, setTechnicalSpecs] = useState<{ label: string; value: string }[]>([]); const [typicalCompositionTitle, setTypicalCompositionTitle] = useState(""); const [typicalComposition, setTypicalComposition] = useState<{ label: string; value_label: string; percentage?: number }[]>([]); const [recommendedAppsTitle, setRecommendedAppsTitle] = useState(""); const [recommendedApplications, setRecommendedApplications] = useState([]); const [certificationsTitle, setCertificationsTitle] = useState(""); const [certificationsData, setCertificationsData] = useState([]); const [transportInfoTitle, setTransportInfoTitle] = useState(""); const [transportInfoData, setTransportInfoData] = useState([]); const [complianceTitle, setComplianceTitle] = useState(""); const [complianceData, setComplianceData] = useState([]); const [configureModalOpen, setConfigureModalOpen] = useState(false); const [configQuantity, setConfigQuantity] = useState(1); const configQuantityRef = useRef(1); const [configTransport, setConfigTransport] = useState("standard"); const [checkoutTransportOptions, setCheckoutTransportOptions] = useState([]); const [checkoutTruckTypeOptions, setCheckoutTruckTypeOptions] = useState([]); const [checkoutRegionId, setCheckoutRegionId] = useState(""); const [configTruckType, setConfigTruckType] = useState(""); const [configTruckTypeError, setConfigTruckTypeError] = useState(""); const [configQuantityError, setConfigQuantityError] = useState(""); const [quoteRequestSubmitted, setQuoteRequestSubmitted] = useState(false); const [quoteRequestSending, setQuoteRequestSending] = useState(false); const [seoMeta, setSeoMeta] = useState(null); const [authReady, setAuthReady] = useState(false); useEffect(() => { try { const raw = localStorage.getItem("currentUser") || localStorage.getItem("biomket_user"); const user = raw ? JSON.parse(raw) : null; const loggedIn = !!(user && (user.fullName || user.name)); if (!loggedIn) { window.location.href = "/login"; return; } setAuthReady(true); } catch { window.location.href = "/login"; } }, []); useEffect(() => { setUiLocale(getStoredLocale()); const syncLocale = () => setUiLocale(getStoredLocale()); window.addEventListener(LOCALE_CHANGE_EVENT, syncLocale); return () => window.removeEventListener(LOCALE_CHANGE_EVENT, syncLocale); }, []); const pd = staticCopy.productDetail[uiLocale as keyof typeof staticCopy.productDetail] ?? staticCopy.productDetail["en-EN"]; const tc = staticCopy.configurePurchaseModal[uiLocale as keyof typeof staticCopy.configurePurchaseModal] ?? staticCopy.configurePurchaseModal["en-EN"]; useEffect(() => { let isMounted = true; const loadCheckoutConfig = async () => { try { const base = process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL; if (!base) return; 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(), }; const res = await fetch(`${base}/store/checkout-config`, { method: "GET", headers, cache: "no-store", }); if (!res.ok || !isMounted) return; const data = await res.json(); const raw = data?.transport_options ?? data?.data?.transport_options; const arr = Array.isArray(raw) ? raw : []; const mapped: CheckoutTransportOption[] = arr .map((o: Record) => ({ id: String(o?.id ?? ""), code: String(o?.code ?? "").trim(), transport_type: String(o?.transport_type ?? "").trim(), label: String(o?.label ?? o?.name ?? "").trim(), description: String(o?.description ?? "").trim(), delivery_window: String(o?.delivery_window ?? "").trim(), amount: Number(o?.amount ?? 0), display_price: String(o?.display_price ?? "").trim(), })) .filter((o) => o.transport_type); const regionFromConfig = String( data?.region?.id ?? "" ).trim(); const rawTrucks = data?.truck_types ?? data?.data?.truck_types; const truckArr = Array.isArray(rawTrucks) ? rawTrucks : []; if (isMounted) { setCheckoutTransportOptions(mapped); if (regionFromConfig) setCheckoutRegionId(regionFromConfig); } } catch { } }; loadCheckoutConfig(); return () => { isMounted = false; }; }, [uiLocale]); useEffect(() => { let isMounted = true; const loadTruckTypesFromFormOptions = async () => { try { const base = process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL; if (!base) return; 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(), }; const res = await fetch(`${base}/store/form-options`, { method: "GET", headers, cache: "no-store", }); if (!res.ok || !isMounted) return; const json = (await res.json()) as Record; const forms = json?.forms as Record | undefined; const block = forms?.["Checkout & Transport"] as Record | undefined; const raw = block?.truck_type as Array> | undefined; if (!Array.isArray(raw)) return; const mapped = raw .map((item) => { const value = String(item?.value ?? "").trim(); if (!value) return null; return { value, label: String(item?.label ?? value).trim() || value, } as CheckoutTruckTypeOption; }) .filter(Boolean) as CheckoutTruckTypeOption[]; if (mapped.length > 0) { setCheckoutTruckTypeOptions(mapped); } } catch { } }; loadTruckTypesFromFormOptions(); return () => { isMounted = false; }; }, [uiLocale]); useEffect(() => { if (checkoutTransportOptions.length === 0) return; setConfigTransport((prev) => { const types = checkoutTransportOptions.map((o) => o.transport_type); if (types.includes(prev)) return prev; if (types.includes("standard")) return "standard"; return types[0]!; }); }, [checkoutTransportOptions]); useEffect(() => { if (checkoutTruckTypeOptions.length === 0) return; setConfigTruckType((prev) => { if (!prev) return prev; const values = checkoutTruckTypeOptions.map((o) => o.value); return values.includes(prev) ? prev : ""; }); }, [checkoutTruckTypeOptions]); useEffect(() => { if (!configureModalOpen) { setQuoteRequestSubmitted(false); setQuoteRequestSending(false); } }, [configureModalOpen]); useEffect(() => { if (!quoteRequestSubmitted) return; const timer = window.setTimeout(() => { setConfigureModalOpen(false); router.push("/"); }, 5000); return () => window.clearTimeout(timer); }, [quoteRequestSubmitted, router]); useEffect(() => { if (configureModalOpen) { const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = prev; }; } }, [configureModalOpen]); const visibleTabs = useMemo((): TabKey[] => { const tabs: TabKey[] = []; if ( technicalSpecs.length > 0 || typicalComposition.length > 0 || recommendedApplications.length > 0 ) { tabs.push("productDetails"); } if (certificationsData.length > 0) tabs.push("certifications"); if (transportInfoData.length > 0) tabs.push("transportInfo"); if (complianceData.length > 0) tabs.push("compliance"); return tabs; }, [ technicalSpecs, typicalComposition, recommendedApplications, certificationsData, transportInfoData, complianceData, ]); useEffect(() => { if (visibleTabs.length === 0) return; if (!visibleTabs.includes(activeTab)) { setActiveTab(visibleTabs[0]!); } }, [visibleTabs, activeTab]); const currentTabIndex = visibleTabs.indexOf(activeTab); const goPrevTab = () => { if (visibleTabs.length === 0) return; const i = currentTabIndex < 0 ? 0 : currentTabIndex; setActiveTab(visibleTabs[(i - 1 + visibleTabs.length) % visibleTabs.length]!); }; const goNextTab = () => { if (visibleTabs.length === 0) return; const i = currentTabIndex < 0 ? 0 : currentTabIndex; setActiveTab(visibleTabs[(i + 1) % visibleTabs.length]!); }; useEffect(() => { let isMounted = true; const loadById = async () => { setApiResolved(null); setApiChecked(false); setSeoMeta(null); setCertificationsData([]); setTransportInfoData([]); setComplianceData([]); try { const base = process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL; const id = decodeURIComponent(String(productId ?? "")).trim(); if (!base || !id) { if (isMounted) setApiChecked(true); return; } let resolvedFromApi: ProductDetailData | null = null; const singleRes = await fetch(`${base}/store/product-detail/${encodeURIComponent(id)}`, { method: "GET", headers: { "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_API_KEY || "", "x-medusa-locale": (getStoredLocaleRaw() ?? getStoredLocale()).trim(), }, cache: "no-store", }); if (singleRes.ok) { const singleData = await singleRes.json(); const singleItem = singleData?.product ?? singleData?.data ?? singleData; const productSlug = String(singleItem?.handle ?? id ?? "").trim(); const urlMatchesProduct = typeof window !== "undefined" && (marketplaceProductUrlPathMatches( window.location.pathname, singleItem?.category_tree, productSlug, ) || marketplaceProductUrlHandleMatches(window.location.pathname, productSlug) || marketplaceProductUrlHandleMatches(window.location.pathname, id)); resolvedFromApi = mapApiProductToDetail(singleItem); if (!urlMatchesProduct || !resolvedFromApi) { resolvedFromApi = null; } else { const productDetails = singleItem?.product_details; const productDetailsRows = Array.isArray(productDetails?.data) ? productDetails.data : []; const technicalSection = productDetailsRows.find((row: any) => row?.slug === "technical-specifications"); const typicalSection = productDetailsRows.find((row: any) => row?.slug === "typical-composition"); const recommendedSection = productDetailsRows.find((row: any) => row?.slug === "recommended-applications"); let apiTechnicalSpecs = Array.isArray(technicalSection?.data) ? technicalSection.data .map((item: any) => ({ label: String(item?.label ?? ""), value: String(item?.value ?? "") })) .filter((item: { label: string; value: string }) => item.label || item.value) : []; let apiTypicalComposition = Array.isArray(typicalSection?.data) ? typicalSection.data .map((item: any) => ({ label: String(item?.label ?? ""), value_label: String(item?.value_label ?? ""), percentage: typeof item?.percentage === "number" ? item.percentage : undefined, })) .filter((item: { label: string; value_label: string }) => item.label || item.value_label) : []; let apiRecommendedApplications = Array.isArray(recommendedSection?.data) ? recommendedSection.data .map((item: any) => String(item ?? "")) .filter((item: string) => item.trim().length > 0) : []; if (apiTechnicalSpecs.length === 0) { const specs = singleItem?.technical_specifications; if (specs && typeof specs === "object" && !Array.isArray(specs)) { apiTechnicalSpecs = Object.entries(specs as Record) .map(([label, value]) => ({ label: String(label), value: String(value ?? ""), })) .filter((item) => item.label || item.value); } } if (apiTypicalComposition.length === 0 && Array.isArray(singleItem?.composition)) { apiTypicalComposition = singleItem.composition .map((item: any) => ({ label: String(item?.label ?? ""), value_label: String(item?.value_label ?? ""), percentage: typeof item?.percentage === "number" ? item.percentage : undefined, })) .filter((item: { label: string; value_label: string }) => item.label || item.value_label); } if (apiRecommendedApplications.length === 0 && Array.isArray(singleItem?.recommended_applications)) { apiRecommendedApplications = singleItem.recommended_applications .map((item: any) => (typeof item === "string" ? item : String(item?.label ?? item?.value ?? ""))) .filter((item: string) => item.trim().length > 0); } const certificationsSection = singleItem?.certifications; const transportInfoSection = singleItem?.transport_info; const complianceSection = singleItem?.compliance; const normalizeSectionData = (arr: any): string[] => Array.isArray(arr) ? arr .map((item: any) => { if (typeof item === "string") return item; return String(item?.label ?? item?.name ?? item?.value ?? ""); }) .filter((item: string) => item.trim().length > 0) : []; let apiCertifications = normalizeSectionData(certificationsSection?.data); if (apiCertifications.length === 0) { apiCertifications = normalizeSectionData(singleItem?.certifications); } const apiTransportInfo = normalizeSectionData(transportInfoSection?.data); const apiCompliance = normalizeSectionData(complianceSection?.data); if (isMounted) { if (technicalSection?.name) setTechnicalSpecsTitle(String(technicalSection.name)); if (typicalSection?.name) setTypicalCompositionTitle(String(typicalSection.name)); if (recommendedSection?.name) setRecommendedAppsTitle(String(recommendedSection.name)); if (certificationsSection?.name) setCertificationsTitle(String(certificationsSection.name)); if (transportInfoSection?.name) setTransportInfoTitle(String(transportInfoSection.name)); if (complianceSection?.name) setComplianceTitle(String(complianceSection.name)); setTechnicalSpecs(apiTechnicalSpecs); setTypicalComposition(apiTypicalComposition); setRecommendedApplications(apiRecommendedApplications); setCertificationsData(apiCertifications); setTransportInfoData(apiTransportInfo); setComplianceData(apiCompliance); } } } else { resolvedFromApi = null; } if (isMounted) { setApiResolved(resolvedFromApi); setApiChecked(true); } } catch { if (isMounted) setApiChecked(true); } }; loadById(); return () => { isMounted = false; }; }, [productId, uiLocale]); useEffect(() => { let isMounted = true; const loadVerifiedServices = async () => { try { const base = process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL; if (!base) return; const res = await fetch(`${base}/store/pages/product-detail-page`, { method: "GET", headers: { "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_API_KEY || "", "x-medusa-locale": (getStoredLocaleRaw() ?? getStoredLocale()).trim(), }, cache: "no-store", }); if (!res.ok) return; const data = await res.json(); const sections = data?.page?.sections ?? []; const sectionDataList = sections.flatMap((s: any) => Array.isArray(s?.components) ? s.components.map((c: any) => c?.instance?.data) : [] ); const verifiedServicesData = sectionDataList.find((d: any) => d?.cards?.items); const title = String(verifiedServicesData?.title ?? "").trim(); const cards = Array.isArray(verifiedServicesData?.cards?.items) ? verifiedServicesData.cards.items .map((item: any) => ({ svg: String(item?.svg ?? ""), title: String(item?.title ?? ""), description: String(item?.description ?? ""), })) .filter((item: VerifiedServiceCard) => item.title || item.description || item.svg) : []; if (!isMounted) return; if (title) setVerifiedServicesTitle(title); setVerifiedServiceCards(cards); } catch { } }; loadVerifiedServices(); return () => { isMounted = false; }; }, [uiLocale]); configQuantityRef.current = configQuantity; useEffect(() => { if (!configureModalOpen) { setConfigQuantityError(""); return; } const max = apiResolved?.currentAvailableQuantity ?? null; if (max == null) return; const q = configQuantityRef.current; if (q > max) { setConfigQuantity(max); setConfigQuantityError(tc.quantityExceedsAvailable); } }, [configureModalOpen, apiResolved, tc.quantityExceedsAvailable]); const resolved = apiResolved; const isLoading = !apiChecked; const notFound = apiChecked && resolved == null; if (!authReady || isLoading) { return ; } if (notFound) { return (

{pd.notFoundTitle}

{pd.notFoundDescription}

{pd.backToMarketplace}
); } const display = resolved!; const productImages = display.images.length > 0 ? display.images : (display.image ? [display.image] : []); const isInStock = display.currentAvailableQuantity != null && display.currentAvailableQuantity >= 1; const availabilityDisplay = resolveAvailabilityDisplay( display.availability, display.currentAvailableQuantity, pd.outOfStock, ); const maxPurchaseQty = display.currentAvailableQuantity; const applyConfigQuantityFromInput = (raw: number) => { const base = Number.isFinite(raw) ? Math.floor(raw) : 1; const low = Math.max(1, base); if (maxPurchaseQty != null && low > maxPurchaseQty) { setConfigQuantity(maxPurchaseQty); setConfigQuantityError(tc.quantityExceedsAvailable); return; } setConfigQuantity(low); setConfigQuantityError(""); }; const handleProceedToCheckout = async () => { if (!configTruckType.trim()) { setConfigTruckTypeError(pd.truckTypeRequired); return; } setConfigTruckTypeError(""); const capQty = display.currentAvailableQuantity; if (capQty != null && configQuantity > capQty) { setConfigQuantity(capQty); setConfigQuantityError(tc.quantityExceedsAvailable); return; } /* const base = process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL; const publishable = process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_API_KEY || ""; const raw = localStorage.getItem("currentUser"); const user = raw ? JSON.parse(raw) : null; const selectedTransport = checkoutTransportOptions.find((o) => o.transport_type === configTransport); const transportOptionId = selectedTransport?.code || selectedTransport?.id || ""; const regionId = (checkoutRegionId || process.env.NEXT_PUBLIC_MEDUSA_REGION_ID || "").trim(); const body = { variant_id: display.variantId, region_id: regionId, quantity: configQuantity, transport_option_id: transportOptionId, truck_type: configTruckType, }; let cartIdParam = ""; if (base) { try { const postHeaders: Record = { "Content-Type": "application/json", "x-publishable-api-key": publishable, }; const authTok = String(user?.token ?? user?.access_token ?? "").trim(); if (authTok) postHeaders.Authorization = `Bearer ${authTok}`; const res = await fetch(`${base}/store/cart`, { method: "POST", headers: postHeaders, body: JSON.stringify(body), }); if (res.ok) { const json = (await res.json().catch(() => ({}))) as { cart_id?: string; cartId?: string; id?: string; cart?: { id?: string }; data?: { cart_id?: string; cart?: { id?: string } }; }; cartIdParam = String( json.cart_id ?? "" ).trim(); } if (cartIdParam) { setConfigureModalOpen(false); router.push(`/payment?cartId=${encodeURIComponent(cartIdParam)}`); } return; } catch { } } setConfigureModalOpen(false); router.push(`/payment?cartId=${encodeURIComponent(cartIdParam)}`); */ const base = process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL; const publishable = process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_API_KEY || ""; const raw = localStorage.getItem("currentUser"); const user = raw ? JSON.parse(raw) : null; const authTok = String(user?.token ?? user?.access_token ?? "").trim(); const unitPrice = parseFloat(display.price); const basePrice = Number.isFinite(unitPrice) ? unitPrice : 0; const totalPrice = Math.round(basePrice * configQuantity * 100) / 100; const currencySymbol = String(display.currency_symbol ?? "").trim(); const currencyCode = currencySymbol === "€" ? "EUR" : currencySymbol === "$" ? "USD" : currencySymbol === "£" ? "GBP" : "EUR"; const quoteBody = { product_name: display.title, product_url: typeof window !== "undefined" ? window.location.href : "", quantity: configQuantity, quantity_unit: display.priceUnit.trim() || "t", truck_type: configTruckType, base_price: Math.round(basePrice * 100) / 100, total_price: totalPrice, currency_code: currencyCode, }; setQuoteRequestSending(true); if (base) { try { const postHeaders: Record = { "Content-Type": "application/json", "x-publishable-api-key": publishable, }; if (authTok) postHeaders.Authorization = `Bearer ${authTok}`; const res = await fetch(`${base}/store/quote-request`, { method: "POST", headers: postHeaders, body: JSON.stringify(quoteBody), }); const json = (await res.json().catch(() => ({}))) as { success?: boolean }; if (res.ok && json.success === true) { setQuoteRequestSubmitted(true); } } catch { } finally { setQuoteRequestSending(false); } return; } setQuoteRequestSending(false); }; return (
{productImages.map((_, i) => (
{display.title}
{display.subtitle && ( {display.subtitle} )} {/* {availabilityDisplay && ( {availabilityDisplay.label} )} */}
{display.code &&
{pd.codeLabel} {display.code}
}

{display.description}

{pd.availableQuantity}

{display.quantity}

{pd.supplyFrequency}

{display.supplyFrequency}

{pd.productLocation}

{display.location}

{display.locationDetail}

{pd.wasteType}

{display.wasteType}

{display.currency_symbol}{display.price} {pd.priceUnitSlash} {display.priceUnit}
{pd.transportCostsNote}
{isInStock ? ( ) : (

{availabilityDisplay?.label ?? pd.outOfStock}

)} {display.technicalSheetUrl ? ( ) : null}
{visibleTabs.length > 0 ? (
) : null} {visibleTabs.length > 0 && activeTab === "productDetails" && (

{technicalSpecsTitle || pd.technicalSpecsDefaultTitle}

{technicalSpecs.map(({ label, value }, i) => (

{label}

{value}

))}

{typicalCompositionTitle || pd.typicalCompositionDefaultTitle}

{typicalComposition.map(({ label, value_label, percentage }) => { const fill = Math.max(0, Math.min(100, Number(percentage ?? 0))); return (
{label} {value_label}
); })}

{recommendedAppsTitle || pd.recommendedAppsDefaultTitle}

    {recommendedApplications.map((item) => (
  • {item}
    • ))}
)} {visibleTabs.length > 0 && activeTab === "certifications" && (

{certificationsTitle || pd.certificationsDefaultTitle}

{certificationsData.length > 0 ? (
    {certificationsData.map((item) => (
  • {item}
    • ))}
) : (

{pd.dataNotFound}

)}
)} {visibleTabs.length > 0 && activeTab === "transportInfo" && (

{transportInfoTitle || pd.transportInfoDefaultTitle}

{transportInfoData.length > 0 ? (
    {transportInfoData.map((item) => (
  • {item}
    • ))}
) : (

{pd.dataNotFound}

)}
)} {visibleTabs.length > 0 && activeTab === "compliance" && (

{complianceTitle || pd.complianceDefaultTitle}

{complianceData.length > 0 ? (
    {complianceData.map((item) => (
  • {item}
    • ))}
) : (

{pd.dataNotFound}

)}
)}

{(() => { const title = verifiedServicesTitle.trim() || pd.verifiedServicesDefaultTitle; const words = title.trim().split(/\s+/).filter(Boolean); if (words.length <= 1) return title; return ( <> {words[0]}{" "} {words.slice(1).join(" ")} ); })()}

{verifiedServiceCards.map(({ title, description, svg }, index) => { const isElevated = hoveredBottomCard === index; return (
setHoveredBottomCard(index)} onMouseLeave={() => setHoveredBottomCard(null)} className={`rounded-[20px] max-w-[500px] max-h-[300px] border border-[#E6E6E6] bg-white px-[30px] pt-[30px] pb-[120px] transition-all duration-500 ease-out cursor-pointer md:flex-1 ${isElevated ? "md:-mt-[50px] shadow-[inset_0_3px_0_#053F31,0_15px_20px_-10px_rgba(0,0,0,0.15)] z-10" : "md:mt-0"}`} >

{title}

{description}

); })}
{typeof document !== "undefined" && configureModalOpen && createPortal(
setConfigureModalOpen(false)}>
e.stopPropagation()}>

{tc.title}

{tc.intro}

{tc.productImageAlt}

{tc.productLabel}

{display.title}

{tc.quantity}

{display.priceUnit.trim() ? `(${display.priceUnit.trim()})` : tc.tonnesParens}

{ const parsed = parseInt(e.target.value, 10); applyConfigQuantityFromInput(Number.isNaN(parsed) ? 1 : parsed); }} aria-invalid={!!configQuantityError} className={`w-[136px] h-[50px] text-center rounded-[5px] border text-[#053F31] bg-white text-[20px] leading-[150%] font-semibold ${configQuantityError ? "border-red-600" : "border-[#053F31]/10"}`} />

{tc.basePriceUppercase}

€{(parseFloat(display.price) * configQuantity).toFixed(2)}

{configQuantityError ? (

{configQuantityError}

) : null}
{/*

{tc.transportType}

{checkoutTransportOptions.map((opt) => ( ))}
*/}

{tc.truckType}

{configTruckTypeError ? (

{configTruckTypeError}

) : null}
{(() => { const basePrice = parseFloat(display.price) * configQuantity; const total = basePrice; return (
{`${tc.basePriceLabel} (${configQuantity} ${display.priceUnit.trim() || tc.tonnesWord})`}

€{basePrice.toFixed(2)}

{/* const selectedTransport = checkoutTransportOptions.find((o) => o.transport_type === configTransport); const transportCost = selectedTransport?.amount ?? 0; const total = basePrice + transportCost;
{tc.transportCost}

€{transportCost.toFixed(3)}

*/}
{tc.total}

€{total.toFixed(2)}

); })()} {quoteRequestSubmitted ? (

{tc.quoteAvailabilityNote}

{tc.quoteSubmittedMessage}

) : null}
, document.body, )}
); }