1#@!#!123s

ALWAYS HENGHENG888 1#@!#!123s
: / var / www / chinawholesale-frontend-next / src / components / pages / product / productBody /
Filename : ProductBody1688.js
back
'use client'
import React, { useMemo, useRef, useState } from 'react'
import MediaPart from './includes/MediaPart'
import PriceCard from './includes/PriceCard'
// import { useWholesaleItemMarkAsCart, useWholesalePopupMessage} from "@/api/cartApi";
import { useCart, useCartData } from '@/api/cart-api'
// import ItemSourceLink from "@/components/mixed/ItemSourceLink";
import { getActiveConfiguredItems } from '@/helpers/product'
// import ProductWishListButton from "./wishlist/ProductWishListButton";
import LoadAttributes from './includes/attribute/LoadAttributes'
// import { slugToTitle } from '@/helpers/general'
// import PageCardComponent from '@/components/mixed/PageCardComponent'
import ProductShipping from './includes/shipping-selection/ProductShipping'
import ProductSummary from './includes/ProductSummary'
import AddToCartButtons from './addToCart/AddToCartButtons'
import SellerInfo2 from "./includes/SellerInfo2";
import SocialShare from './includes/SocialShare'
// import ResetProductCache from "@/page-components/product/productBody/includes/ResetProductCache";

export default function ProductBody1688({ product, settings }) {
    const [cartStore, setCartStore] = useState({})
    const [activeImg, setActiveImg] = useState('')
    const [shippingModal, setShippingModal] = useState(false)

    const mediaRef = useRef(null)
    const { data: cart } = useCartData()
    const { itemMarkAsCart } = useCart()
    // const {popupMessage} = useWholesalePopupMessage();
    // console.log({ cart })

    // console.log({product})

    const product_id = product?.Id ? product.Id : ''
    const title = product?.Title ? product.Title : ''

    const cartItem = useMemo(() => {
        return cart?.cart_items?.find((item) => item.ItemId === product_id) || {}
    }, [cart, product_id])

    let cart_id = cartItem?.cart_id || ''
    let cart_item_id = cartItem?.id || ''
    const ConfiguredItems = product?.ConfiguredItems || []
    const selectAttributes = cartStore?.Attributes || []
    const activeConfiguredItems = getActiveConfiguredItems(ConfiguredItems, selectAttributes)

    const SalesInLast30Days = useMemo(() => {
        return (
            product?.FeaturedValues?.find((find) => find.Name === 'SalesInLast30Days')
                ?.Value || 0
        )
    }, [product])

    const favCount = useMemo(() => {
        return product?.FeaturedValues?.find((find) => find.Name === 'favCount')?.Value || 0
    }, [product])

    const reviews = useMemo(() => {
        return (
            product?.FeaturedValues?.find((find) => find.Name === 'reviews')?.Value ||
            0
        )
    }, [product])

    const processAddToCart = () => {
        itemMarkAsCart.mutateAsync({ cart_id, cart_item_id })
            .then((resData) => {
                if (resData?.data?.status) {
                    setShippingModal(false)
                }
            })
    }

    return (
        <>
            <div className={'min-h-[60dvh] bg-white rounded-[6px] pb-6'}>
                <div className={'hidden lg:flex justify-between items-center border-b border-gray-300 px-2 py-2 mb-2'}>
                    <div>
                        <h2 className={'text-xl font-semibold min-h-6'}>{title}</h2>
                    </div>
                </div>

                <div className={'grid grid-cols-1 lg:grid-cols-5 gap-4'}>
                    <div className={'col-span-2'} ref={mediaRef}>
                        <MediaPart
                            mediaRef={mediaRef}
                            activeImg={activeImg}
                            setActiveImg={setActiveImg}
                            product={product}
                        />
                    </div>
                    <div className={'col-span-3'}>
                        <h1 className={'sm:hidden single-product-title text-base font-medium'}>
                            {title}
                        </h1>
                        <div>
                            <PriceCard
                                product={product}
                                cartItem={cartItem}
                                settings={settings}
                                activeConfiguredItems={activeConfiguredItems}
                            />
                            <div className={'my-2.5'}>
                                <div className={'grid grid-cols-2 gap-4'}>
                                    <div className={'col-span-1'}>
                                        {!!(favCount || reviews || SalesInLast30Days) && (
                                            <p style={{ margin: '0', fontWeight: '600' }}>
                                                {favCount > 0 && (
                                                    <span> <b>{favCount}</b> Favorite with </span>
                                                )}
                                                {reviews > 0 && (
                                                    <>
                                                        <span> <b>{reviews}</b> positive feedback </span> <br />
                                                    </>
                                                )}
                                                {SalesInLast30Days && (
                                                    <span> Sales In Last 30 Days - <b>{SalesInLast30Days}</b> </span>
                                                )}
                                            </p>
                                        )}
                                    </div>
                                    <div className={'col-span-1'}>
                                        {/*<ProductWishListButton*/}
                                        {/*  product={product}*/}
                                        {/*  settings={settings}*/}
                                        {/*/>*/}
                                        {/*<ResetProductCache*/}
                                        {/*    product={product}*/}
                                        {/*/>*/}
                                    </div>
                                </div>
                            </div>
                            <div className="product-details">
                                <LoadAttributes
                                    cartItem={cartItem}
                                    cartStore={cartStore}
                                    setCartStore={setCartStore}
                                    setActiveImg={setActiveImg}
                                    product={product}
                                    settings={settings}
                                />

                                <ProductShipping
                                    product={product}
                                    cartItem={cartItem}
                                    settings={settings}
                                    show={shippingModal}
                                    setShow={setShippingModal}
                                    processAddToCart={processAddToCart}
                                    isPending={itemMarkAsCart.isPending}
                                />
                                <ProductSummary
                                    cartItem={cartItem}
                                    product={product}
                                    settings={settings}
                                />
                                <AddToCartButtons
                                    cartItem={cartItem}
                                    product={product}
                                    settings={settings}
                                    setShow={setShippingModal}
                                    processAddToCart={processAddToCart}
                                    isPending={itemMarkAsCart.isPending}
                                />
                                <SellerInfo2 product={product} />
                                <SocialShare product={product} settings={settings} />
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </>
    )
}