import React, { useCallback, useEffect, useRef, useState } from "react"; import { FontContainer, OverviewBox, OverviewData, OverviewOpt, AvailabilityCol, ProductAvailability, PriceQuoteCol, QuoteBtnCol, SelectedOrigin, ShippingOption, PaymentOpt, ProductAvlil, OriginShippingPayIconsInfo, CheckedTypography, ContactForShippingBox, PaymentMethodImageBox, DetailBigOverview, SelectproductFeature, StyleDrawer, } from "@/components/ProductDetail/style"; import { Box, Grid, Typography, Button } from "@mui/material"; import { CountryName, HideOptionns, PortLocationContainer, PortStyleContainer, } from "@/components/ProductDetail/ProductComponents/Style"; import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; import { styled } from "@mui/material"; import { useSelector } from "react-redux"; import Slider from "react-slick"; import { CurrencySymbol, getCountryNameByCode, GetFileExtension, NameFromUrl, } from "@/components/common/common"; import { setQuoteDetails } from "@/hooks/quoteHooks"; import QuoteModal from "./Modal/QuoteModal"; import { useAppDispatch } from "redux/store"; import { capitalizeFirstLetter } from "@/utils/commonFunctions/other"; import Quantity from "./Modal/Quantity"; import { LightTooltip } from "@/components/common/Tooltip/tooltip"; import QueryModal from "./Modal/QueryModal"; import Auth from "@/auth/Auth"; import Swal from "sweetalert2"; import ConfigureProduct from "./ConfigureProduct"; // import Placeholder from "pages/placeholder/[id]"; import ConfigueQuoteModal from "./Modal/ConfigueQuoteModal"; // import GetQuoteConfigModal from "./Modal/GetQuoteConfiModal"; const GetQuoteConfigModal = dynamic(() => import("./Modal/GetQuoteConfiModal")); import ProductItemConfigGetQuote from "./Modal/ProductItemConfigGetQuote"; import { PriceRangeColInfo } from "@/components/products/editProduct/commercialInformation/styles"; import { toast } from "react-toastify"; import { useRouter } from "next/router"; import dynamic from "next/dynamic"; const SpHead = styled(Typography)(() => ({ fontWeight: 600, fontFamily: "Open sans", color: "#231F20", textTransform: "capitalize", })); const BigOverview = ({ marginTop = "0px" }) => { const { upload_files, is_placeholder } = useSelector( (state: any) => state.productDetail.detail.data ); function downloadCatalogs() { let links = upload_files.map((v) => v.source); let name = NameFromUrl(links[0]); let ext = GetFileExtension(links); for (let i = 0; i < links.length; i++) { fetch(links[i], { mode: "no-cors", method: "GET" }) .then((response) => response.blob()) .then((blob) => { const link = document.createElement("a"); link.setAttribute("aria-label", "Download Catalog"); const url = window.URL.createObjectURL(blob); link.href = url; const fileName = links[i].substring(links[i].lastIndexOf("/") + 1); link.download = fileName; document.body.appendChild(link); link.click(); document.body.removeChild(link); window.URL.revokeObjectURL(url); }) .catch((error) => console.error("Error downloading image:", error)); } } const { existence_place, country_origins, product_type, availability, dispatch_day, dispatch_in, brand_name, price_term, negotiable_price, price_type, quantity_based_list, quantity_status, qty_unit, unit_price, currency_id, unit, hide_price, specifications, custom_specification, port_, case_label, in_house_production, in_house_production_days, available_restrictions_availibility, available_restrictions_country, available_restrictions_status, manufacturing_restrictions_availibility, manufacturing_restrictions_country, manufacturing_restrictions_status, shiping_restrictions_toggle, production_unit, delivery_time, delivery_select, caseData, payment_methods, hide_price_condition, quote_button_type, case_type, delivery_time_period, delivery_time_value, user_id, production_unit_name, symbol, qty_unit_name, price_unavailable_type, id, unit_name = "", minimum_order, } = useSelector((state: any) => state.productDetail.detail.data); const newPOrtData = port_.split(","); // let symbol = `${CurrencySymbol(currency_id)}`; // const strongElementText = case_label.match(/(.*?)<\/strong>/)[1]; // const splittedValues = strongElementText // .split(",") // .map((value) => value.trim()); const { quotedetails } = useSelector((state: any) => state.quoteDetails); const matchResult = case_label?.match(/(.*?)<\/strong>/); let splittedValues; if (matchResult) { const strongElementText = matchResult[1]; splittedValues = strongElementText.split(",").map((value) => value.trim()); } else { splittedValues = case_label; } let unitList = useSelector((state: any) => state.header.unit); const { productQuantity } = useSelector((state: any) => state.quoteDetails); const { country } = useSelector((state: any) => state.productDetail); const [openModal, setModal] = useState(false); const [openConfiModal, setConfiModal] = useState(false); const [anchorEl, setAnchorEl] = React.useState(null); const { sea_ } = useSelector((state: any) => state.productDetail.detail.data); const data = useSelector((state: any) => state.productDetail.detail.data); const dispatch = useAppDispatch(); const Units = useSelector((state: any) => state.productDetail.unit); const [openSupplier, setOpenSupplier] = React.useState(false); const handleClose = () => { setOpenSupplier(false); }; const GetCountryName = (name: any) => { let countryName = name?.split(","); let countriesName = countryName?.map( (v) => country.find((el) => el.value == v)?.view ); return countriesName?.toString(); }; const [isFlyoutOpen, setIsFlyoutOpen] = useState(false); const toggleFlyout = useCallback(() => { setIsFlyoutOpen(!isFlyoutOpen); }, [setIsFlyoutOpen, isFlyoutOpen]); const [isFlyoutConfiOpen, setIsFlyoutConfiOpen] = useState(false); console.log(minimum_order, unit_name, "minimum_order-----------------"); const toggleConfiFlyout = () => { setIsFlyoutConfiOpen(!isFlyoutConfiOpen); }; const GetCountryOrigins = (name: any) => { if (availability == "in_stock") { let countryName = existence_place?.split(","); let countriesName = countryName?.map( (v) => country.find((el) => el.value == v)?.view ); return countriesName?.toString(); } else { let countryName = country_origins?.split(","); let countriesName = countryName?.map( (v) => country.find((el) => el.value == v)?.view ); return countriesName?.toString(); } }; const Value = [ ...(Array.isArray(custom_specification) ? custom_specification : []), ...specifications.map((v) => ({ title: v.name, value: v.values })), ]; const newSeaData = sea_.split(","); var settings = { dots: false, infinite: false, speed: 500, slidesToShow: 3, slidesToScroll: 3, initialSlide: 0, responsive: [ // { // breakpoint: 1600, // settings: { // slidesToShow: 3, // slidesToScroll: 3, // infinite: false, // dots: false, // }, // }, // { // breakpoint: 1366, // settings: { // slidesToShow: 2, // slidesToScroll: 2, // infinite: false, // dots: false, // }, // }, { breakpoint: 1280, settings: { slidesToShow: 2, slidesToScroll: 2, infinite: false, dots: false, }, }, { breakpoint: 1024, settings: { slidesToShow: 1, slidesToScroll: 1, infinite: false, dots: false, }, }, { breakpoint: 900, settings: { slidesToShow: 2, slidesToScroll: 2, initialSlide: 2, infinite: false, }, }, { breakpoint: 600, settings: { slidesToShow: 1, slidesToScroll: 1, initialSlide: 1, infinite: false, }, }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1, }, }, ], }; let unitToShow = Units?.find((v) => (v.id == qty_unit ? qty_unit : unit ? unit : "")) ?.name ?? null; let productionUnit = Units?.find((v) => v.id == production_unit)?.name ?? null; let AvailableCountry = GetCountryName(available_restrictions_country); let ManufacturerCountry = GetCountryName(manufacturing_restrictions_country); let country_origin = GetCountryOrigins(country_origins); const DeliveryTerms = [ { name: "EXW", tooltip: "Ex Works" }, { name: "FOB", tooltip: "Free On Board" }, { name: "CFR/CNF", tooltip: "Cost and Freight" }, { name: "CNF/CFR", tooltip: "Cost and Freight" }, { name: "CFR", tooltip: "Cost and Freight" }, { name: "CNF", tooltip: "Cost and Freight" }, { name: "CIF", tooltip: "Cost, Insurance and Freight" }, { name: "CPT", tooltip: "Carriage Paid To" }, { name: "CIP", tooltip: "Carriage and Insurance Paid To" }, { name: "DAF", tooltip: "Delivered at Frontier" }, { name: "DES", tooltip: "Delivered Ex Ship" }, { name: "DDP", tooltip: "Delivery Duty Paid" }, { name: "DDU", tooltip: "Delivery Duty Unpaid" }, ]; let ids = localStorage?.userData ? JSON.parse(localStorage?.userData).id : ""; const paymentMethods = [ { src: "/assets/powercozmo.png", name: "Payment through Power Cozmo", tooltip: "Most recommended method, Power Cozmo safeguards the payment until the buyer verifies the receipt of goods or documents, establishing a secure and transparent transaction for both parties.", }, { src: "/assets/cbs.svg", name: "CBS (Cash before Shipment)", tooltip: "Guarantees payment for the seller before shipment, eliminating risk but potentially discouraging buyers due to the upfront requirement.", }, { src: "/assets/advancepayment.svg", name: "Advanced Payment", tooltip: "Encourages buyer commitment and accelerates cash flow for the seller by receiving a portion of the payment upfront but requires trust from the buyer.", }, { src: "/assets/ach.svg", name: "ACH Transfer", tooltip: "Transfers funds electronically within the same country, offering a cost-effective alternative to wire transfers but with slightly longer processing times.", }, { src: "/assets/credit-card.svg", name: "Credit Card", tooltip: "Offers convenience and wide acceptance for buyers, but sellers incur processing fees.", }, { src: "/assets/debit-card.svg", name: "Debit Card", tooltip: "Similar to credit cards but deducts funds directly from the buyer's bank account, offering convenience and security.", }, { src: "/assets/paypal.svg", name: "Online Payment Platforms (e.g. PayPal)", tooltip: "Provides a secure and user-friendly platform for online payments, but fees may be associated with transactions.", }, { src: "/assets/cash.svg", name: "Cash", tooltip: "Traditional payment method accepted by most businesses but carries the risk of theft or loss.", }, { name: "Escrow", tooltip: "", src: "/assets/escrow.svg" }, { src: "/assets/dp.svg", name: "D/P (Documents against Payment)", tooltip: "Provides some security for the seller while allowing buyers to inspect goods before payment.", }, { src: "/assets/da.svg", name: "D/A (Documents against Acceptance)", tooltip: "Offers extended credit terms to the buyer compared to D/P.", }, { src: "/assets/tt.svg", name: "TT (Telegraphic Transfer)", tooltip: "Fast, secure, and widely accepted globally. Transparent fees and tracking of funds.", }, { src: "/assets/lc.svg", name: "LC (Letter of Credit)", tooltip: "Guarantees payment to the seller through a bank upon fulfilling specific conditions outlined in the LC document, offering high security but requiring complex setup and incurring bank fees.", }, ]; const hideOptions1 = [ { name: "Sign in to show price.", value: 1, }, { name: "Price Flexible: The price of the product is flexible and may vary depending on quantity and other factors. Please sign in to discuss pricing.", value: 2, }, { name: "Price Negotiable Upon Request: Please sign in for pricing information. The price of the product may vary depending on quality and other factors.", value: 3, }, { name: "Price Subject to Negotiation: The price of the product is negotiable upon request. Please sign in for more information.", value: 4, }, { name: `Price Subject to Final Agreement: The price of this product is flexible and may vary depending on quantity and other factors. Please sign in to discuss pricing.`, value: 5, }, ]; const login = [ { name: "@Sign in@ to show price.", value: 1, }, { name: "Price Flexible: The price of this product is flexible and may vary depending on quantity and other factors. Please @Sign in@ to discuss pricing.", value: 2, }, { name: "Price Negotiable Upon Request: Please @Sign in@ for pricing information. The price of this product may vary depending on quantity and other factors.", value: 3, }, { name: "Price Subject to Negotiation: The price of this product is negotiable upon request. Please @Sign in@ for more information", value: 4, }, { name: "Price Subject to Final Agreement: The price of this product is flexible and may vary depending on quantity and other factors. Please @Sign in@ to discuss pricing", value: 5, }, ]; const hideOptions = !Auth?.userData()?.id ? login : hideOptions1; console.log("quote_button_type-------", quote_button_type); let UnitPrice: any = typeof unit_price === "string" ? unit_price.split("-") : unit_price; const router = useRouter(); const getWithoutLoginContent = (htmlData) => { return htmlData?.split(/@([^@]+)@/)?.map((part, index) => ( {index % 2 === 0 ? ( part ) : ( { if (part === "Sign in") { router.push("/user/signup"); } else { // setOpenSupplier(true); } }} className="blueclr" style={{ cursor: "pointer", fontWeight: "600", color: "#d7282f", }} > {part} )} )); }; const getWithLoginContent = (type) => { return type == 1 ? ( <> { // setOpenSupplier(true); let id = localStorage?.userData ? JSON.parse(localStorage?.userData).id : ""; if (id === user_id) { const swalWithBootstrapButtons = Swal.mixin({ customClass: { confirmButton: "custom-btn cancel-button", cancelButton: "custom-btn remove-btn", }, buttonsStyling: false, }); swalWithBootstrapButtons.fire({ title: "", html: `You cannot
contact for your own product.`, icon: undefined, showCancelButton: false, reverseButtons: true, imageUrl: "/assets/minisiteimages/blockmessage.svg", imageWidth: 80, imageAlt: "alt", }); return; } if (quote_button_type == "contact") { setOpenSupplier(true); } else { // setModal(true); setOpenSupplier(true); // dispatch(setQuoteDetails(data)); } }} style={{ cursor: "pointer", fontWeight: "600", color: "#0055D6", }} > Contact Us{" "} for pricing information. ) : type == 2 ? ( <> Price Flexible: The price of this product is flexible and may vary depending on quantity and other factors. Please{" "} { let id = localStorage?.userData ? JSON.parse(localStorage?.userData).id : ""; if (id === user_id) { const swalWithBootstrapButtons = Swal.mixin({ customClass: { confirmButton: "custom-btn cancel-button", cancelButton: "custom-btn remove-btn", }, buttonsStyling: false, }); swalWithBootstrapButtons.fire({ title: "", html: `You cannot
contact for your own product.`, icon: undefined, showCancelButton: false, reverseButtons: true, imageUrl: "/assets/minisiteimages/blockmessage.svg", imageWidth: 80, imageAlt: "alt", }); return; } setOpenSupplier(true); }} style={{ cursor: "pointer", fontWeight: "600", color: "#0055D6", }} > Contact Us{" "} for pricing information. ) : type == 3 ? ( <> Price Negotiable Upon Request: {" "} Please{" "} { // setOpenSupplier(true); let id = localStorage?.userData ? JSON.parse(localStorage?.userData).id : ""; if (id === user_id) { const swalWithBootstrapButtons = Swal.mixin({ customClass: { confirmButton: "custom-btn cancel-button", cancelButton: "custom-btn remove-btn", }, buttonsStyling: false, }); swalWithBootstrapButtons.fire({ title: "", html: `You cannot
contact for your own product.`, icon: undefined, showCancelButton: false, reverseButtons: true, imageUrl: "/assets/minisiteimages/blockmessage.svg", imageWidth: 80, imageAlt: "alt", }); return; } setOpenSupplier(true); // if (quote_button_type == "contact") { // setOpenSupplier(true); // } else { // setOpenSupplier(true) // return; // } // if (quote_button_type == "contact") { // setOpenSupplier(true); // } else { // setModal(true); // dispatch(setQuoteDetails(data)); // } }} style={{ cursor: "pointer", fontWeight: "600", color: "#0055D6", }} > Contact Us{" "} for pricing information. The price of this product may vary depending on quantity and other factors. ) : type == 4 ? ( <> Price Subject to Negotiation: {" "} The price of this product is negotiable upon request. Please{" "} { // setOpenSupplier(true); let id = localStorage?.userData ? JSON.parse(localStorage?.userData).id : ""; if (id === user_id) { const swalWithBootstrapButtons = Swal.mixin({ customClass: { confirmButton: "custom-btn cancel-button", cancelButton: "custom-btn remove-btn", }, buttonsStyling: false, }); swalWithBootstrapButtons.fire({ title: "", html: `You cannot
contact for your own product.`, icon: undefined, showCancelButton: false, reverseButtons: true, imageUrl: "/assets/minisiteimages/blockmessage.svg", imageWidth: 80, imageAlt: "alt", }); return; } if (quote_button_type == "contact") { setOpenSupplier(true); } else { setOpenSupplier(true); // setModal(true); // dispatch(setQuoteDetails(data)); } }} style={{ cursor: "pointer", fontWeight: "600", color: "#0055D6", }} > Contact Us{" "} for more information. ) : ( <> Price Subject to Final Agreement: {" "} The price of this product is flexible and may vary depending on quantity and other factors. Please{" "} { // setOpenSupplier(true); let id = localStorage?.userData ? JSON.parse(localStorage?.userData).id : ""; if (id === user_id) { const swalWithBootstrapButtons = Swal.mixin({ customClass: { confirmButton: "custom-btn cancel-button", cancelButton: "custom-btn remove-btn", }, buttonsStyling: false, }); swalWithBootstrapButtons.fire({ title: "", html: `You cannot
contact for your own product.`, icon: undefined, showCancelButton: false, reverseButtons: true, imageUrl: "/assets/minisiteimages/blockmessage.svg", imageWidth: 80, imageAlt: "alt", }); return; } if (quote_button_type == "contact") { setOpenSupplier(true); } else { setOpenSupplier(true); // setModal(true); // dispatch(setQuoteDetails(data)); } }} style={{ cursor: "pointer", fontWeight: "600", color: "#0055D6", }} > Contact Us{" "} to discuss pricing. ); }; let article = ["A", "E", "I", "O", "U"].includes( data?.price_term?.[0]?.toUpperCase() ) ? "an" : "a"; let toolTipData = `The seller's base price is based on ${article} ${data?.price_term?.replaceAll( ",", ", " )} delivery term.`; let parsedCaseData = null; try { parsedCaseData = caseData ? JSON.parse(caseData) : null; } catch (error) {} const hasSelection = parsedCaseData?.selection && ((parsedCaseData?.show_territory === 1 && parsedCaseData?.selection === "territory") || (parsedCaseData?.show_countries === 1 && parsedCaseData?.selection === "country")); const [priceRange, setPriceRange] = useState([]); useEffect(() => { const ranges = []; for (let index = 0; index < quantity_based_list?.length; index++) { if (quantity_based_list[index]?.min_qty == "") { break; } const item = quantity_based_list[index]; if (item?.min_qty != "" && item?.price != "") { let rangeStart, rangeEnd; const isLastSamePrev = index > 0 && item?.min_qty === quantity_based_list[index - 1]?.min_qty; if ( index > 0 && quantity_based_list[index - 1]?.min_qty > item?.min_qty ) { break; } if (index === 0) { rangeStart = 1; rangeEnd = item?.min_qty; } else if ( index === quantity_based_list?.length - 1 && !isLastSamePrev ) { rangeStart = quantity_based_list[index - 1]?.min_qty + 1; rangeEnd = item?.min_qty; } else if ( index === quantity_based_list?.length - 1 && isLastSamePrev ) { rangeStart = quantity_based_list[index - 1]?.min_qty; rangeEnd = null; } else { rangeStart = quantity_based_list[index - 1]?.min_qty + 1; rangeEnd = item?.min_qty; } ranges.push( {`${symbol}${quantity_based_list[ index ]?.price.toLocaleString()}`} {rangeEnd !== null && rangeStart != rangeEnd ? `${rangeStart}-${rangeEnd}/${qty_unit_name}` : rangeStart == rangeEnd && rangeEnd !== null ? `${rangeEnd}/${qty_unit_name}` : `>${rangeStart}/${qty_unit_name}`} ); } } setPriceRange(ranges); }, [quantity_based_list, qty_unit_name]); const textRef = useRef(null); const [isClamped, setIsClamped] = useState(false); useEffect(() => { const checkClamped = () => { const el = textRef.current; if (el) { const lineHeight = parseFloat(getComputedStyle(el).lineHeight); const lines = el.scrollHeight / lineHeight; setIsClamped(lines > 1); // ⬅️ change this to > 1 if you want even a second line to trigger it } }; checkClamped(); window.addEventListener("resize", checkClamped); return () => { window.removeEventListener("resize", checkClamped); }; }, []); return ( <> {is_placeholder == "yes" ? ( {Boolean(anchorEl) && quantity_status == 1 && product_type === "simple" && price_type === "quantity" && ( setAnchorEl(null)} anchorEl={anchorEl} Units={Units} qty_unit={qty_unit} /> )} {openModal && ( setModal(false)} /> )} Product features & Characteristics v.value).length < 4 ? "noScroll" : "" } > v.value).length < 1 ? 12 : 5} sm={Value.filter((v) => v.value).length < 1 ? 12 : 3} md={Value.filter((v) => v.value).length < 1 ? 12 : 4} lg={Value.filter((v) => v.value).length < 1 ? 12 : 3} > {"Manufacturer/Brand"} {brand_name} {Value.filter((v) => v.value).length > 1 ? ( {Value.map((item, index) => { if (item.value || item.value !== "") { return (
{item?.title} {/* {item?.value}{" "}{item?.unit_name} */} {typeof item?.value === "string" && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/.test( item?.value ) ? new Date( item?.value ).toLocaleDateString("en-US", { month: "2-digit", day: "2-digit", year: "numeric", }) // MM-DD-YYYY format : item?.value}{" "} {item?.unit_name}
); } })} ) : ( {Value?.[0]?.title} {Value?.[0]?.value} {Value?.[0]?.unit_name} )} {/* configured product */} {product_type == "configured" && ( This is {availability == "in_stock" ? ( {capitalizeFirstLetter(availability)?.replace("_", " ")} ) : ( {capitalizeFirstLetter(availability)?.replace("_", " ")} )} product.{" "} {hide_price === 0 && ",available for purchase at below listed prices."} {/* product, available for purchase at below listed */} {/* {price_type == "quantity" && quantity_based_list?.length > 1 ? " prices." : " price."} */} )} {/* end */} {is_placeholder == "yes" && unit_price != null && (unit_price != "0.00" || (price_type == "price_unavailable" && price_unavailable_type)) && ( {(quantity_status == 0 && price_type == "quantity") || (hide_price == 0 && price_type == "fixed" && product_type == "simple" && ( ))} {product_type != "simple" && ( )} {(quantity_status == 1 && price_type == "quantity") || (hide_price == 1 && price_type == "fixed") ? ( This is {availability == "in_stock" ? ( {capitalizeFirstLetter(availability)?.replace( "_", " " )} ) : ( {capitalizeFirstLetter(availability)?.replace( "_", " " )} )} product{" "} {hide_price === 0 && ", available for purchase at below listed prices."} {/* product, available for purchase at below listed */} {/* {price_type == "quantity" && quantity_based_list?.length > 1 ? " prices." : " price."} */} ) : ( This is {availability == "in_stock" ? ( {capitalizeFirstLetter(availability)?.replace( "_", " " )} ) : ( {capitalizeFirstLetter(availability)?.replace( "_", " " )} )} product. )} {product_type == "simple" && unit_price != null && (unit_price != "0.00" || (price_type == "price_unavailable" && price_unavailable_type)) && ( {quantity_based_list?.length > 0 && price_type == "quantity" ? ( quantity_status == 1 && hide_price == 1 ? ( quantity_based_list?.map((row: any) => ( {`${symbol}${row.price.toLocaleString()}`} {row.max_qty > 0 ? ( `${row.min_qty}-${row.max_qty} ` ) : ( <>≥ {row.min_qty} )} /{qty_unit_name} )) ) : ( {hide_price == 1 ? ( <> {" "} {symbol} {UnitPrice.length > 1 ? `${Number( UnitPrice[0] ).toLocaleString()}-${Number( UnitPrice[1] ).toLocaleString()}` : +unit_price.toLocaleString()} {" "} {`0-1 ${ Units?.find((v) => v.id == unit)?.name ?? "NA" }`} ) : ( {Auth?.userData()?.id && ( {getWithLoginContent( hideOptions[+hide_price_condition - 1] ?.value )} )} {!Auth?.userData()?.id && ( {getWithoutLoginContent( hideOptions[+hide_price_condition - 1] ?.name )} )} )} ) ) : ( <> {hide_price == 1 ? ( <> {typeof unit_price === "number" && !isNaN(unit_price) ? ( <> {symbol} {unit_price}/{unit_name} ) : ( <> {price_type == "price_unavailable" && price_unavailable_type ? ( price_unavailable_type ) : ( <> {symbol} {unit_price}/{unit_name}{" "} )} )} {/* {`0-1 ${ Units?.find((v) => v.id == unit)?.name ?? "NA" }`} */} ) : ( {Auth?.userData()?.id && ( {hideOptions[+hide_price_condition - 1] ?.value == 1 ? ( <> { // setOpenSupplier(true); let id = localStorage?.userData ? JSON.parse( localStorage?.userData ).id : ""; if (id === user_id) { const swalWithBootstrapButtons = Swal.mixin({ customClass: { confirmButton: "custom-btn cancel-button", cancelButton: "custom-btn remove-btn", }, buttonsStyling: false, }); swalWithBootstrapButtons.fire({ title: "", html: `You cannot
contact for your own product.`, icon: undefined, showCancelButton: false, reverseButtons: true, imageUrl: "/assets/minisiteimages/blockmessage.svg", imageWidth: 80, imageAlt: "alt", }); return; } if ( quote_button_type == "contact" ) { setOpenSupplier(true); } else { setOpenSupplier(true); // setModal(true); // dispatch(setQuoteDetails(data)); } }} style={{ cursor: "pointer", fontWeight: "600", color: "#0055D6", }} > Contact Us{" "} for pricing information. ) : hideOptions[+hide_price_condition - 1] ?.value == 2 ? ( <> Price Flexible: The price of this product is flexible and may vary depending on quantity and other factors. Please{" "} { // setOpenSupplier(true); let id = localStorage?.userData ? JSON.parse( localStorage?.userData ).id : ""; if (id === user_id) { const swalWithBootstrapButtons = Swal.mixin({ customClass: { confirmButton: "custom-btn cancel-button", cancelButton: "custom-btn remove-btn", }, buttonsStyling: false, }); swalWithBootstrapButtons.fire({ title: "", html: `You cannot
contact for your own product.`, icon: undefined, showCancelButton: false, reverseButtons: true, imageUrl: "/assets/minisiteimages/blockmessage.svg", imageWidth: 80, imageAlt: "alt", }); return; } if ( quote_button_type == "contact" ) { setOpenSupplier(true); } else { setOpenSupplier(true); // setModal(true); // dispatch(setQuoteDetails(data)); } }} style={{ cursor: "pointer", fontWeight: "600", color: "#0055D6", }} > Contact Us{" "} for pricing information. ) : hideOptions[+hide_price_condition - 1] ?.value == 3 ? ( <> Price Negotiable Upon Request , Please{" "} { // setOpenSupplier(true); let id = localStorage?.userData ? JSON.parse( localStorage?.userData ).id : ""; if (id === user_id) { const swalWithBootstrapButtons = Swal.mixin({ customClass: { confirmButton: "custom-btn cancel-button", cancelButton: "custom-btn remove-btn", }, buttonsStyling: false, }); swalWithBootstrapButtons.fire({ title: "", html: `You cannot
contact for your own product.`, icon: undefined, showCancelButton: false, reverseButtons: true, imageUrl: "/assets/minisiteimages/blockmessage.svg", imageWidth: 80, imageAlt: "alt", }); return; } if ( quote_button_type == "contact" ) { setOpenSupplier(true); } else { setOpenSupplier(true); // setModal(true); // dispatch(setQuoteDetails(data)); } }} style={{ cursor: "pointer", fontWeight: "600", color: "#0055D6", }} > Contact Us{" "} for pricing information. The price of this product may vary depending on quantity and other factors ) : hideOptions[+hide_price_condition - 1] ?.value == 4 ? ( <> Price Subject to Negotiation: {" "} The price of this product is negotiable upon request. Please{" "} { // setOpenSupplier(true); let id = localStorage?.userData ? JSON.parse( localStorage?.userData ).id : ""; if (id === user_id) { const swalWithBootstrapButtons = Swal.mixin({ customClass: { confirmButton: "custom-btn cancel-button", cancelButton: "custom-btn remove-btn", }, buttonsStyling: false, }); swalWithBootstrapButtons.fire({ title: "", html: `You cannot
contact for your own product.`, icon: undefined, showCancelButton: false, reverseButtons: true, imageUrl: "/assets/minisiteimages/blockmessage.svg", imageWidth: 80, imageAlt: "alt", }); return; } if ( quote_button_type == "contact" ) { setOpenSupplier(true); } else { setOpenSupplier(true); // setModal(true); // dispatch(setQuoteDetails(data)); } }} style={{ cursor: "pointer", fontWeight: "600", color: "#0055D6", }} > Contact Us{" "} for more information ) : ( <> {" "} Price Subject to Final Agreement: The price of this product is flexible and may vary depending on quantity and other factors. Please{" "} { // setOpenSupplier(true); let id = localStorage?.userData ? JSON.parse( localStorage?.userData ).id : ""; if (id === user_id) { const swalWithBootstrapButtons = Swal.mixin({ customClass: { confirmButton: "custom-btn cancel-button", cancelButton: "custom-btn remove-btn", }, buttonsStyling: false, }); swalWithBootstrapButtons.fire({ title: "", html: `You cannot
contact for your own product.`, icon: undefined, showCancelButton: false, reverseButtons: true, imageUrl: "/assets/minisiteimages/blockmessage.svg", imageWidth: 80, imageAlt: "alt", }); return; } if ( quote_button_type == "contact" ) { setOpenSupplier(true); } else { setOpenSupplier(true); // setModal(true); // dispatch(setQuoteDetails(data)); } }} style={{ cursor: "pointer", fontWeight: "600", color: "#0055D6", }} > Contact Us{" "} to discuss pricing. )} )} {!Auth?.userData()?.id && ( {getWithoutLoginContent( hideOptions[+hide_price_condition - 1] ?.name )} )} )} )} {hide_price == 1 && price_type == "fixed" && ( {price_term?.replaceAll(",", ", ")} } > )} {price_type == "quantity" && quantity_status == 1 && hide_price == 1 && ( {price_term?.replaceAll(",", ", ")} } > )} {price_type == "fixed" && negotiable_price == 1 && hide_price == 1 && ( The final price of this product will be subject to negotiation and mutual agreement. )} )} )} {hasSelection ? ( {parsedCaseData?.countries?.length > 1 ? ( <>Countries of Origin ) : ( <>Country of Origin )}
{case_type === "case_1" && parsedCaseData?.source_component_toggle === "1" && ( Please note that some components of this product may be sourced from other countries. )} ) : case_label ? ( Country of Origin {case_label.split("@@@@").map((label, index) => (
))} ) : null} {delivery_time && delivery_select && ( Lead Time {availability == "by_order" && ( Delivery Time Period: {" "} {delivery_time} {delivery_select} Production Capacity: {" "} {in_house_production ? `${in_house_production}` : ""}{" "} {production_unit_name}{" "} {in_house_production_days ? in_house_production_days?.replace(/s$/, "") : ""} )} {availability == "in_stock" && ( {" "} Order Preparation Time: {" "} {dispatch_in ? `${dispatch_in}` : ""}{" "} {dispatch_day ? dispatch_day : ""} {" "} Delivery Time Period: {" "} {delivery_time_value ? `${delivery_time_value}` : ""}{" "} {delivery_time_period ? delivery_time_period : ""} )} )} {country_origin && ( Shipping {newPOrtData.length > 1 ? "Nearby Airports:" : "Nearby Airport:"} {newPOrtData.length > 1 ? ( <> {port_ || "Not available"} in{" "} {country_origin} ) : ( <> {port_ || "Not available"} {","} {country_origin} )} {newSeaData.length > 1 ? "Nearby Seaports:" : "Nearby Seaport:"} {newSeaData.length > 1 ? ( <> {sea_ || "Not available"} in{" "} {country_origin} ) : ( <> {sea_ || "Not available"} {","} {country_origin} )} )} Payments: {payment_methods?.split(",").length > 0 ? ( payment_methods.split(",").map((v, i) => { let tooltip: any = paymentMethods?.find((i) => i.name == v); if (tooltip?.src) { return ( ); } }) ) : ( N/A )} {(available_restrictions_status == "1" || manufacturing_restrictions_status == "1") && ( Product availability or manufacturing restrictions: {available_restrictions_status === "1" && AvailableCountry && AvailableCountry?.split(",").length > 0 && ( This product {available_restrictions_availibility}{" "} available to sell in the{" "} {AvailableCountry.split(",").map( (country, index, array) => ( {country.trim()} {index !== array.length - 1 ? ", " : "."} ) )} )} {manufacturing_restrictions_status === "1" && ManufacturerCountry && ManufacturerCountry?.split(",").length > 0 && ( This product {manufacturing_restrictions_availibility}{" "} manufactured for the{" "} {ManufacturerCountry.split(",").map( (country, index, array) => ( {country.trim()} {index !== array.length - 1 ? ", " : "."} ) )} )} {shiping_restrictions_toggle == 1 && ( Please{" "} { setOpenSupplier(true); }} > Contact us {" "} for shipping restrictions to your specific location. )} )} setIsFlyoutConfiOpen(true)} onOpen={toggleConfiFlyout} > setConfiModal(false)} /> setIsFlyoutOpen(true)} onOpen={toggleFlyout} > {openSupplier && ( )} {upload_files?.length > 0 && ( )} ) : ( {Boolean(anchorEl) && quantity_status == 1 && product_type === "simple" && price_type === "quantity" && ( setAnchorEl(null)} anchorEl={anchorEl} Units={Units} qty_unit={qty_unit} /> )} {openModal && ( setModal(false)} /> )} Product features & Characteristics v.value).length < 4 ? "noScroll" : "" } > v.value).length < 1 ? 12 : 5} sm={Value.filter((v) => v.value).length < 1 ? 12 : 4} md={Value.filter((v) => v.value).length < 1 ? 12 : 5} lg={Value.filter((v) => v.value).length < 1 ? 12 : 4} xl={Value.filter((v) => v.value).length < 1 ? 12 : 3} > {"Manufacturer/Brand"} {brand_name} {Value.filter((v) => v.value).length > 2 ? ( {Value.map((item, index) => { if (item.value || item.value !== "") { return (
{item.title} {item.value} {item?.unit_name}
); } })} ) : Value.filter((v) => v.value).length === 2 ? ( {Value.map((item, index) => { if (item.value || item.value !== "") { return (
{item.title} {item.value} {item?.unit_name}
); } })} ) : ( {Value?.[0]?.title} {Value?.[0]?.value} {Value?.[0]?.unit_name} )} {/* configured product */} {product_type == "configured" && ( This is {availability == "in_stock" ? ( {capitalizeFirstLetter(availability)?.replace("_", " ")} ) : ( {capitalizeFirstLetter(availability)?.replace("_", " ")} )} product.{" "} {hide_price === 0 && ", available for purchase at below listed prices."} {/* product, available for purchase at below listed */} {/* {price_type == "quantity" && quantity_based_list?.length > 1 ? " prices." : " price."} */} )} {/* end */} {product_type == "simple" && ( {(quantity_status == 0 && price_type == "quantity") || (hide_price == 0 && price_type == "fixed" && product_type == "simple" && ( ))} {product_type != "simple" && ( )} {product_type == "simple" && ((quantity_status == 1 && price_type == "quantity" && hide_price == 1) || (hide_price == 1 && price_type == "fixed")) ? ( This is {availability == "in_stock" ? ( {capitalizeFirstLetter(availability)?.replace("_", " ")} ) : ( {capitalizeFirstLetter(availability)?.replace("_", " ")} )} {/* product, available for purchase at below listed */} product.{" "} {hide_price === 0 && ",available for purchase at below listed prices."} {/* {price_type == "quantity" && quantity_based_list?.length > 1 ? " prices." : " price."} */} ) : ( This is {availability == "in_stock" ? ( {capitalizeFirstLetter(availability)?.replace("_", " ")} ) : ( {capitalizeFirstLetter(availability)?.replace("_", " ")} )} product. )} {product_type == "simple" && ( {quantity_based_list?.length > 0 && price_type == "quantity" ? ( quantity_status == 1 && hide_price == 1 ? ( priceRange ) : ( {hide_price == 1 ? ( <> {" "} {symbol} {UnitPrice.length > 1 ? `${Number( UnitPrice[0] ).toLocaleString()}-${Number( UnitPrice[1] ).toLocaleString()}` : +unit_price.toLocaleString()} {" "} {`0-1 ${ Units?.find((v) => v.id == unit)?.name ?? "NA" }`} ) : ( {Auth?.userData()?.id && ( {getWithLoginContent( hideOptions[+hide_price_condition - 1] ?.value )} )} {!Auth?.userData()?.id && ( {getWithoutLoginContent( hideOptions[+hide_price_condition - 1] ?.name )} )} )} ) ) : ( <> {hide_price == 1 ? ( <> {typeof unit_price === "number" && !isNaN(unit_price) ? ( <> {symbol} {/* {CurrencySymbol(+currency_id)}{" "} */} {unit_price}/{unit_name} ) : ( <> {symbol} {unit_price}/{unit_name} )} {/* {`0-1 ${ Units?.find((v) => v.id == unit)?.name ?? "NA" }`} */} ) : ( {Auth?.userData()?.id && ( {hideOptions[+hide_price_condition - 1] ?.value == 1 ? ( <> { // setOpenSupplier(true); let id = localStorage?.userData ? JSON.parse(localStorage?.userData) .id : ""; if (id === user_id) { const swalWithBootstrapButtons = Swal.mixin({ customClass: { confirmButton: "custom-btn cancel-button", cancelButton: "custom-btn remove-btn", }, buttonsStyling: false, }); swalWithBootstrapButtons.fire({ title: "", html: `You cannot
contact for your own product.`, icon: undefined, showCancelButton: false, reverseButtons: true, imageUrl: "/assets/minisiteimages/blockmessage.svg", imageWidth: 80, imageAlt: "alt", }); return; } if (quote_button_type == "contact") { setOpenSupplier(true); } else { setOpenSupplier(true); // setModal(true); // dispatch(setQuoteDetails(data)); } }} style={{ cursor: "pointer", fontWeight: "600", color: "#0055D6", }} > Contact Us{" "} for pricing information ) : hideOptions[+hide_price_condition - 1] ?.value == 2 ? ( <> Price Flexible: The price of this product is flexible and may vary depending on quantity and other factors. Please{" "} { // setOpenSupplier(true); let id = localStorage?.userData ? JSON.parse(localStorage?.userData) .id : ""; if (id === user_id) { const swalWithBootstrapButtons = Swal.mixin({ customClass: { confirmButton: "custom-btn cancel-button", cancelButton: "custom-btn remove-btn", }, buttonsStyling: false, }); swalWithBootstrapButtons.fire({ title: "", html: `You cannot
contact for your own product.`, icon: undefined, showCancelButton: false, reverseButtons: true, imageUrl: "/assets/minisiteimages/blockmessage.svg", imageWidth: 80, imageAlt: "alt", }); return; } if (quote_button_type == "contact") { setOpenSupplier(true); } else { setOpenSupplier(true); // setModal(true); // dispatch(setQuoteDetails(data)); } }} style={{ cursor: "pointer", fontWeight: "600", color: "#0055D6", }} > Contact Us{" "} for pricing information. ) : hideOptions[+hide_price_condition - 1] ?.value == 3 ? ( <> {" "} Price Negotiable Upon Request: Please{" "} { // setOpenSupplier(true); let id = localStorage?.userData ? JSON.parse(localStorage?.userData) .id : ""; if (id === user_id) { const swalWithBootstrapButtons = Swal.mixin({ customClass: { confirmButton: "custom-btn cancel-button", cancelButton: "custom-btn remove-btn", }, buttonsStyling: false, }); swalWithBootstrapButtons.fire({ title: "", html: `You cannot
contact for your own product.`, icon: undefined, showCancelButton: false, reverseButtons: true, imageUrl: "/assets/minisiteimages/blockmessage.svg", imageWidth: 80, imageAlt: "alt", }); return; } if (quote_button_type == "contact") { setOpenSupplier(true); } else { setOpenSupplier(true); // setModal(true); // dispatch(setQuoteDetails(data)); } }} style={{ cursor: "pointer", fontWeight: "600", color: "#0055D6", }} > Contact Us{" "} for pricing information. The price of this product may vary depending on quantity and other factors ) : hideOptions[+hide_price_condition - 1] ?.value == 4 ? ( <> Price Subject to Negotiation: {" "} The price of this product is negotiable upon request. Please{" "} { // setOpenSupplier(true); let id = localStorage?.userData ? JSON.parse(localStorage?.userData) .id : ""; if (id === user_id) { const swalWithBootstrapButtons = Swal.mixin({ customClass: { confirmButton: "custom-btn cancel-button", cancelButton: "custom-btn remove-btn", }, buttonsStyling: false, }); swalWithBootstrapButtons.fire({ title: "", html: `You cannot
contact for your own product.`, icon: undefined, showCancelButton: false, reverseButtons: true, imageUrl: "/assets/minisiteimages/blockmessage.svg", imageWidth: 80, imageAlt: "alt", }); return; } if (quote_button_type == "contact") { setOpenSupplier(true); } else { setOpenSupplier(true); // setModal(true); // dispatch(setQuoteDetails(data)); } }} style={{ cursor: "pointer", fontWeight: "600", color: "#0055D6", }} > Contact Us{" "} for more information ) : ( <> {" "} Price Subject to Final Agreement: {" "} The price of this product is flexible and may vary depending on quantity and other factors. Please{" "} { // setOpenSupplier(true); let id = localStorage?.userData ? JSON.parse(localStorage?.userData) .id : ""; if (id === user_id) { const swalWithBootstrapButtons = Swal.mixin({ customClass: { confirmButton: "custom-btn cancel-button", cancelButton: "custom-btn remove-btn", }, buttonsStyling: false, }); swalWithBootstrapButtons.fire({ title: "", html: `You cannot
contact for your own product.`, icon: undefined, showCancelButton: false, reverseButtons: true, imageUrl: "/assets/minisiteimages/blockmessage.svg", imageWidth: 80, imageAlt: "alt", }); return; } if (quote_button_type == "contact") { setOpenSupplier(true); } else { setOpenSupplier(true); // setModal(true); // dispatch(setQuoteDetails(data)); } }} style={{ cursor: "pointer", fontWeight: "600", color: "#0055D6", }} > Contact Us{" "} to discuss pricing. )} )} {!Auth?.userData()?.id && ( {getWithoutLoginContent( hideOptions[+hide_price_condition - 1]?.name )} )} )} )} {hide_price == 1 && price_type == "fixed" && ( {price_term?.replaceAll(",", ", ")} } > )} {price_type == "quantity" && quantity_status == 1 && hide_price == 1 && ( {price_term?.replaceAll(",", ", ")} } > )} {/* {unit_name ? `${minimum_order} ${unit_name}${ minimum_order > 1 ? "s" : "" }` : `${minimum_order} ${qty_unit_name}${ minimum_order > 1 ? "s" : "" }`} */} {`${minimum_order} ${unit_name || qty_unit_name}`} MOQ{" "} {" "} {price_type == "fixed" && negotiable_price == 1 && hide_price == 1 && ( The final price of this product will be subject to negotiation and mutual agreement. )} )} )} {case_type && hasSelection ? ( {parsedCaseData?.countries?.length > 1 ? ( <>Countries of Origin ) : ( <>Country of Origin )}
{case_type === "case_1" && parsedCaseData?.source_component_toggle === "1" && ( Please note that some components of this product may be sourced from other countries. )} ) : case_label ? ( Country of Origin {case_label.split("@@@@").map((label, index) => (
))} ) : null} Lead Time {availability == "by_order" && ( Delivery Time Period: {" "} {delivery_time} {delivery_select} Production Capacity: {" "} {in_house_production ? `${in_house_production}` : ""}{" "} {production_unit_name} {/* {" per "} */} {in_house_production_days ? in_house_production_days?.replace(/s$/, "") : ""} )} {availability == "in_stock" && ( {" "} Order Preparation Time: {" "} {dispatch_in ? `${dispatch_in}` : ""}{" "} {dispatch_day ? dispatch_day : ""} {" "} Delivery Time Period: {" "} {delivery_time_value ? `${delivery_time_value}` : ""}{" "} {delivery_time_period ? delivery_time_period : ""} )} Shipping {newPOrtData.length > 1 ? "Nearby Airports:" : "Nearby Airport:"} {newPOrtData.length > 1 ? ( <> {port_ || "Not available"} in{" "} {country_origin} ) : ( <> {port_ || "Not available"} {","} {country_origin} )} {" "} {newSeaData.length > 1 ? "Nearby Seaports:" : "Nearby Seaport:"} {newSeaData.length > 1 ? ( <> {sea_ || "Not available"} in{" "} {country_origin} ) : ( <> {sea_ || "Not available"} {","} {country_origin} )} Payments: {payment_methods?.split(",").map((v, i) => { let tooltip: any = paymentMethods?.find((i) => i.name == v); if (tooltip?.src) { return ( ); } })} {(available_restrictions_status == "1" || manufacturing_restrictions_status == "1" || shiping_restrictions_toggle == 1) && ( {(manufacturing_restrictions_status === "1" || available_restrictions_status === "1") && ( <> Product availability or manufacturing restrictions: {available_restrictions_status === "1" && AvailableCountry && AvailableCountry?.split(",").length > 0 && ( This product {available_restrictions_availibility}{" "} available to sell in the{" "} {AvailableCountry.split(",").map( (country, index, array) => ( {country.trim()} {index !== array.length - 1 ? ", " : "."} ) )} )} {manufacturing_restrictions_status === "1" && ManufacturerCountry && ManufacturerCountry?.split(",").length > 0 && ( This product{" "} {manufacturing_restrictions_availibility}{" "} manufactured for the{" "} {ManufacturerCountry.split(",").map( (country, index, array) => ( {country.trim()} {index !== array.length - 1 ? ", " : "."} ) )} )} )} {shiping_restrictions_toggle == 1 && ( Please{" "} { let id = localStorage?.userData ? JSON.parse(localStorage?.userData).id : ""; if (id === user_id) { const swalWithBootstrapButtons = Swal.mixin({ customClass: { confirmButton: "custom-btn cancel-button", cancelButton: "custom-btn remove-btn", }, buttonsStyling: false, }); swalWithBootstrapButtons.fire({ title: "", html: `You cannot
contact for your own product.`, icon: undefined, showCancelButton: false, reverseButtons: true, imageUrl: "/assets/minisiteimages/blockmessage.svg", imageWidth: 80, imageAlt: "alt", }); return; } setOpenSupplier(true); }} > Contact us {" "} for shipping restrictions to your specific location. )} )} setIsFlyoutOpen(true)} onOpen={toggleFlyout} > {/* */} {openSupplier && ( )} {upload_files?.length > 0 && ( )} )} ); }; export default BigOverview;