@riosst100/pwa-marketplace 2.0.9 → 2.1.0

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/productFullDetail.js

@@ -0,0 +1,765 @@
+import React, { useMemo, Fragment, Suspense } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { arrayOf, bool, number, shape, string } from 'prop-types';
+import { Form } from 'informed';
+import { Info } from 'react-feather';
+
+import Price from '@magento/venia-ui/lib/components/Price';
+import { useProductFullDetail } from '@magento/peregrine/lib/talons/ProductFullDetail/useProductFullDetail';
+import { isProductConfigurable } from '@magento/peregrine/lib/util/isProductConfigurable';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Breadcrumbs from '@magento/venia-ui/lib/components/Breadcrumbs';
+import Button from '@magento/venia-ui/lib/components/Button';
+import Carousel from '@magento/venia-ui/lib/components/ProductImageCarousel';
+import FormError from '@magento/venia-ui/lib/components/FormError';
+import RichContent from '@magento/venia-ui/lib/components/RichContent/richContent';
+import QuantityStepper from '../QuantityStepper';
+// import RichContent from '../RichContent/richContent';
+import { ProductOptionsShimmer } from '@magento/venia-ui/lib/components/ProductOptions';
+import CustomAttributes from './CustomAttributes';
+import defaultClasses from './productFullDetail.module.css';
+import cn from 'classnames';
+import Tabs from '@riosst100/pwa-marketplace/src/components/commons/Tabs';
+import ProductReviews from './components/productReview';
+import RichText from '@magento/venia-ui/lib/components/RichText';
+import { Star1, Verify, Sms, Message, Shop } from 'iconsax-react';
+import { Link } from "react-router-dom";
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+
+const WishlistButton = React.lazy(() => import('@magento/venia-ui/lib/components/Wishlist/AddToListButton'));
+const Options = React.lazy(() => import('@magento/venia-ui/lib/components/ProductOptions'));
+import Share from '@riosst100/pwa-marketplace/src/components/SocialMediaShare';
+import PreorderDetail from './components/preOrderDetail';
+import AuctionDetail from './components/auctionDetail';
+import CrossSeller from '@riosst100/pwa-marketplace/src/components/CrossSeller';
+import RelatedProduct from '@riosst100/pwa-marketplace/src/components/RelatedProduct';
+import ProductLabel from '@riosst100/pwa-marketplace/src/components/ProductLabel';
+import RFQ from '@riosst100/pwa-marketplace/src/components/RFQ';
+import Collapsible from '@riosst100/pwa-marketplace/src/components/commons/Collapsible';
+
+// Correlate a GQL error message to a field. GQL could return a longer error
+// string but it may contain contextual info such as product id. We can use
+// parts of the string to check for which field to apply the error.
+const ERROR_MESSAGE_TO_FIELD_MAPPING = {
+    'The requested qty is not available': 'quantity',
+    'Product that you are trying to add is not available.': 'quantity',
+    "The product that was requested doesn't exist.": 'quantity'
+};
+
+// Field level error messages for rendering.
+const ERROR_FIELD_TO_MESSAGE_MAPPING = {
+    quantity: 'The requested quantity is not available.'
+};
+
+const ProductDetailsCollapsible = (props) => {
+    const { data } = props;
+
+    return (
+        <>
+            {data.map((_data) => (
+                <Collapsible
+                    title={_data.title}
+                    contentWrapperClassName="!mt-0"
+                    rootClassName="first-of-type_!border-0 last-of-type_border-b last-of-type_border-gray-100"
+                    className="last-of-type_border-b last-of-type_border-gray-100"
+                >
+                    {_data.content}
+                </Collapsible>
+            ))}
+        </>
+    )
+}
+
+const ProductFullDetail = props => {
+    const { product } = props;
+
+    const talonProps = useProductFullDetail({ product });
+
+    const {
+        breadcrumbCategoryId,
+        errorMessage,
+        handleAddToCart,
+        handleSelectionChange,
+        isOutOfStock,
+        isEverythingOutOfStock,
+        outOfStockVariants,
+        isAddToCartDisabled,
+        isSupportedProductType,
+        mediaGalleryEntries,
+        productDetails,
+        customAttributes,
+        wishlistButtonProps,
+        sellerDetails
+    } = talonProps;
+    console.log("🚀 ~ ProductFullDetail ~ talonProps:", talonProps)
+
+    const { formatMessage } = useIntl();
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const options = isProductConfigurable(product) ? (
+        <Suspense fallback={<ProductOptionsShimmer />}>
+            <Options
+                onSelectionChange={handleSelectionChange}
+                options={product.configurable_options}
+                isEverythingOutOfStock={isEverythingOutOfStock}
+                outOfStockVariants={outOfStockVariants}
+            />
+        </Suspense>
+    ) : null;
+
+    const breadcrumbs = breadcrumbCategoryId ? (
+        <Breadcrumbs
+            categoryId={breadcrumbCategoryId}
+            currentProduct={productDetails.name}
+        />
+    ) : null;
+
+    // Fill a map with field/section -> error.
+    const errors = new Map();
+    if (errorMessage) {
+        Object.keys(ERROR_MESSAGE_TO_FIELD_MAPPING).forEach(key => {
+            if (errorMessage.includes(key)) {
+                const target = ERROR_MESSAGE_TO_FIELD_MAPPING[key];
+                const message = ERROR_FIELD_TO_MESSAGE_MAPPING[target];
+                errors.set(target, message);
+            }
+        });
+
+        // Handle cases where a user token is invalid or expired. Preferably
+        // this would be handled elsewhere with an error code and not a string.
+        if (errorMessage.includes('The current user cannot')) {
+            errors.set('form', [
+                new Error(
+                    formatMessage({
+                        id: 'productFullDetail.errorToken',
+                        defaultMessage:
+                            'There was a problem with your cart. Please sign in again and try adding the item once more.'
+                    })
+                )
+            ]);
+        }
+
+        // Handle cases where a cart wasn't created properly.
+        if (
+            errorMessage.includes('Variable "$cartId" got invalid value null')
+        ) {
+            errors.set('form', [
+                new Error(
+                    formatMessage({
+                        id: 'productFullDetail.errorCart',
+                        defaultMessage:
+                            'There was a problem with your cart. Please refresh the page and try adding the item once more.'
+                    })
+                )
+            ]);
+        }
+
+        // An unknown error should still present a readable message.
+        if (!errors.size) {
+            errors.set('form', [
+                new Error(
+                    formatMessage({
+                        id: 'productFullDetail.errorUnknown',
+                        defaultMessage:
+                            'Could not add item to cart. Please check required options and try again.'
+                    })
+                )
+            ]);
+        }
+    }
+
+    const customAttributesDetails = useMemo(() => {
+        const list = [];
+        const pagebuilder = [];
+        // const skuAttribute = {
+        //     attribute_metadata: {
+        //         uid: 'attribute_sku',
+        //         used_in_components: ['PRODUCT_DETAILS_PAGE'],
+        //         ui_input: {
+        //             ui_input_type: 'TEXT'
+        //         },
+        //         label: formatMessage({
+        //             id: 'global.sku',
+        //             defaultMessage: 'SKU'
+        //         })
+        //     },
+        //     entered_attribute_value: {
+        //         value: productDetails.sku
+        //     }
+        // };
+        if (Array.isArray(customAttributes)) {
+            customAttributes.forEach(customAttribute => {
+                if (
+                    customAttribute.attribute_metadata.ui_input
+                        .ui_input_type === 'PAGEBUILDER'
+                ) {
+                    pagebuilder.push(customAttribute);
+                } else {
+                    list.push(customAttribute);
+                }
+            });
+        }
+        // list.unshift(skuAttribute);
+        return {
+            list: list,
+            pagebuilder: pagebuilder
+        };
+    }, [customAttributes, productDetails.sku, formatMessage]);
+
+    const cartCallToActionText =
+        !isEverythingOutOfStock || !isOutOfStock ? (
+            <FormattedMessage
+                id="productFullDetail.addItemToCart"
+                defaultMessage="Add to Cart"
+            />
+        ) : (
+            <FormattedMessage
+                id="productFullDetail.itemOutOfStock"
+                defaultMessage="Out of Stock"
+            />
+        );
+    // Error message for screen reader
+    const cartActionContent = isSupportedProductType ? (
+        <section className={cn(classes.actButton, 'flex gap-x-[30px]')}>
+            <Button
+                data-cy="ProductFullDetail-addToCartButton"
+                disabled={isAddToCartDisabled}
+                aria-disabled={isAddToCartDisabled}
+                aria-label={
+                    isEverythingOutOfStock
+                        ? formatMessage({
+                            id: 'productFullDetail.outOfStockProduct',
+                            defaultMessage:
+                                'This item is currently out of stock'
+                        })
+                        : ''
+                }
+                classes={{
+                    content: 'normal-case font-medium text-[16px]'
+                }}
+                priority="low"
+                type="submit"
+            >
+                Make An Offer
+            </Button>
+
+            <Button
+                data-cy="ProductFullDetail-addToCartButton"
+                disabled={isAddToCartDisabled}
+                aria-disabled={isAddToCartDisabled}
+                aria-label={
+                    isEverythingOutOfStock
+                        ? formatMessage({
+                            id: 'productFullDetail.outOfStockProduct',
+                            defaultMessage:
+                                'This item is currently out of stock'
+                        })
+                        : ''
+                }
+                classes={{
+                    content: 'normal-case font-medium text-[16px]'
+                }}
+                priority="high"
+                type="submit"
+            >
+                {cartCallToActionText}
+            </Button>
+        </section>
+    ) : (
+        <div className={classes.unavailableContainer}>
+            <Info />
+            <p>
+                <FormattedMessage
+                    id={'productFullDetail.unavailableProduct'}
+                    defaultMessage={
+                        'This product is currently unavailable for purchase.'
+                    }
+                />
+            </p>
+        </div>
+    );
+
+    const shortDescription = productDetails.shortDescription ? (
+        <RichText
+            rootClassName="px-0"
+            content={productDetails.shortDescription.html}
+        />
+    ) : null;
+
+    const pageBuilderAttributes = customAttributesDetails.pagebuilder.length ? (
+        <section className={classes.detailsPageBuilder}>
+            <CustomAttributes
+                classes={{ list: classes.detailsPageBuilderList }}
+                customAttributes={customAttributesDetails.pagebuilder}
+                showLabels={false}
+            />
+        </section>
+    ) : null;
+
+    const review_count = 0;
+    const rating_value = 0;
+
+    const tokopedia_logo = './tokopedia_logo.png';
+
+    const contentContainerClass = 'content-container max-w-[1040px] p-2.5 m-auto relative mt-0 lg_mt-[34px] pb-6 lg_pb-0'
+    const ProductDescription = () => (
+        <div className={cn(contentContainerClass)}>
+            {/* <span
+                data-cy="ProductFullDetail-descriptionTitle"
+                className={classes.descriptionTitle}
+            >
+                <FormattedMessage
+                    id={'productFullDetail.description'}
+                    defaultMessage={'Description'}
+                />
+            </span> */}
+            {/* <RichContent html={productDetails.description} /> */}
+            <RichText
+                rootClassName="px-0"
+                content={productDetails.description}
+            />
+        </div>
+    );
+
+    const ProductMoreInfo = () => (
+        <>
+            <div className={cn(contentContainerClass)}>
+                <CustomAttributes
+                    customAttributes={customAttributesDetails.list}
+                />
+            </div>
+            {pageBuilderAttributes}
+        </>
+    );
+
+    const customAttributesList = useMemo(
+        () =>
+            customAttributesDetails.list.reduce((customAttributesData, currentAttribute) => {
+                const attrCode = currentAttribute.attribute_metadata?.code || null;
+                const value = currentAttribute.entered_attribute_value?.value || "";
+                if (attrCode) {
+                    customAttributesData.push({
+                        'code': attrCode,
+                        'value': value
+                    });
+                }
+
+                return customAttributesData;
+            }, []),
+        [customAttributesDetails.list]
+    );
+
+    const ProductTNC = () => (
+        <div className={cn(contentContainerClass)}>
+            <p>{customAttributesList.map((data, index) => {
+                if (data.code == "term_and_conditions") {
+                    return data.value;
+                }
+            })}</p>
+        </div>
+    )
+
+    const ShippingPolicy = () => (
+        <div className={cn(contentContainerClass)}>
+            <p>{customAttributesList.map((data, index) => {
+                if (data.code == "shipping_policy") {
+                    return data.value;
+                }
+            })}</p>
+        </div>
+    )
+
+    const ReturnPolicy = () => (
+        <div className={cn(contentContainerClass)}>
+            <p>{customAttributesList.map((data, index) => {
+                if (data.code == "return_policy") {
+                    return data.value;
+                }
+            })}</p>
+        </div>
+    )
+
+    const ProductFAQ = () => (
+        <div className={cn(contentContainerClass)}>
+            {customAttributesList.map((data, index) => {
+                if (data.code == "faq") {
+                    return (
+                        <RichText
+                            rootClassName="px-0"
+                            content={data.value}
+                        />
+                    );
+                }
+            })}
+
+        </div>
+    )
+
+
+    const dataTabs =
+        [
+            {
+                id: 'product-detail',
+                title: 'Description',
+                content: <ProductDescription />
+            },
+            {
+                id: 'product-more-info',
+                title: 'Details',
+                content: <ProductMoreInfo />
+            },
+            {
+                id: 'product-tnc',
+                title: 'Term & Conditions',
+                content: <ProductTNC />
+            },
+            {
+                id: 'product-shipping-policy',
+                title: 'Shipping Policy',
+                content: <ShippingPolicy />
+            },
+            {
+                id: 'product-return-policy',
+                title: 'Return Policy',
+                content: <ReturnPolicy />
+            },
+            {
+                id: 'product-faq',
+                title: 'FAQ',
+                content: <ProductFAQ />
+            },
+            {
+                id: 'product-reviews',
+                title: 'Reviews',
+                content: <ProductReviews className={cn(contentContainerClass)} />
+            }
+        ];
+
+    return (
+        <Fragment>
+            {breadcrumbs}
+            <Form
+                className={classes.root}
+                data-cy="ProductFullDetail-root"
+                onSubmit={handleAddToCart}
+            >
+                <section className={cn(classes.leftContainer, 'relative')}>
+                    <ProductLabel item={productDetails} />
+                    <Carousel images={mediaGalleryEntries} />
+                    <div className='product_group-actions flex gap-x-[18px] gap-y-4 justify-center items-center mt-2 lg_mt-5 mb-6 lg_mb-0'>
+                        <Suspense fallback={null}>
+                            <WishlistButton
+                                classes={{
+                                    root: cn(
+                                        'button_share border border-solid border-gray-100 p-2.5',
+                                        'rounded-full flex justify-center items-center h-fitContent min-w-min'
+                                    )
+                                }}
+                                {...wishlistButtonProps}
+                                buttonText={''}
+                            />
+                        </Suspense>
+                        <Divider className="w-[1px] !h-[40px]" />
+                        <Share />
+                    </div>
+                </section>
+                <section className={classes.rightContainer}>
+                    <div
+                        className={cn(
+                            classes.title,
+                            'mb-[30px]',
+                        )}
+                    >
+                        <h1
+                            aria-live="polite"
+                            className={cn(
+                                classes.productName,
+                                '!font-medium leading-[normal] mb-4 line-clamp-2'
+                            )}
+                            data-cy="ProductFullDetail-productName"
+                        >
+                            {productDetails.name}
+                        </h1>
+                        <div className='product_review-container flex items-center gap-x-2'>
+                            <div className='product_rating leading-[14px] flex items-center gap-x-[5px]'>
+                                <span className="w-3.5 h-3.5 relative">
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                </span>
+                                <span className='text-gray-200 text-sm'>
+                                    {rating_value}
+                                </span>
+                            </div>
+                            <div className='before_block before_w-[1px] before_bg-gray-200 before_h-full before_relative w-[1px] h-[14px]'></div>
+                            <span className='review_count text-gray-200 text-base leading-[14px]'>
+                                {review_count} Reviews
+                            </span>
+                        </div>
+                    </div>
+                    <div
+                        className={cn(
+                            'product_short_description',
+                            'mb-[30px]',
+                        )}
+                    >
+                        {shortDescription}
+                    </div>
+                    {/* <div className='product_brand-container mb-[30px] leading-[18px]'>
+                        <div className='text-sm'>
+                            Brand : <span className='text-blue-700'><Link to="">Bandai Namco</Link></span>
+                        </div>
+                    </div> */}
+                    <Divider />
+                    <div
+                        className={cn(
+                            'product_price_container',
+                            'py-[30px] flex justify-between flex-wrap gap-y-5'
+                        )}
+                    >
+                        <div className='flex flex-col gap-y-5 max-w-[448px]'>
+                            <div className='flex flex-col gap-y-3'>
+                                <p
+                                    data-cy="ProductFullDetail-productPrice"
+                                    className={cn(
+                                        classes.productPrice,
+                                        'text-[32px] font-medium leading-[32px] mb-0',
+                                    )}
+                                >
+                                    <Price
+                                        currencyCode={productDetails.price.currency}
+                                        value={productDetails.price.value}
+                                    />
+                                </p>
+                                <p
+                                    data-cy="ProductFullDetail-productOldPrice"
+                                    className={cn(
+                                        classes.productPrice,
+                                        'text-lg font-normal leading-none text-gray-400 mb-0 line-through',
+                                    )}
+                                >
+                                    <Price
+                                        currencyCode={productDetails.price.currency}
+                                        value={productDetails.price.value}
+                                    />
+                                </p>
+                            </div>
+                            <AuctionDetail className="auction_detail-container" />
+                            <PreorderDetail className={'preorder_detail-container'} />
+                            <small className='shipping-calculation-notes text-gray-200 text-xs'>
+                                Shipping method is calculated on checkout
+                            </small>
+                        </div>
+                        <div>
+                            <p className='text-gray-200 text-[14px]'>
+                                SKU : {productDetails.sku}
+                            </p>
+                        </div>
+                    </div>
+                    <Divider />
+                    <FormError
+                        classes={{
+                            root: classes.formErrors
+                        }}
+                        errors={errors.get('form') || []}
+                    />
+                    <section className={classes.options}>{options}</section>
+                    <section className={cn(classes.quantity, 'py-[30px] !border-none')}>
+                        {/* <span
+                            data-cy="ProductFullDetail-quantityTitle"
+                            className={classes.quantityTitle}
+                        >
+                            <FormattedMessage
+                                id={'global.quantity'}
+                                defaultMessage={'Quantity'}
+                            />
+                        </span> */}
+                        <QuantityStepper
+                            min={1}
+                            message={errors.get('quantity')}
+                        />
+
+                        <div className='product_shipping-information mb-[30px] leading-[18px] mt-[25px]'>
+                            {sellerDetails &&
+                                <div className='text-xs'>
+                                    Ship From <span className='font-medium'>{sellerDetails.country}</span>
+                                </div>}
+                            <div className='text-xs'>
+                                Ship To <span className='font-medium'>Yishun</span>
+                            </div>
+                            <div className='text-xs'>
+                                Shiping Method <span className='font-medium'>Store Pick Up | Meet Up</span>
+                            </div>
+                        </div>
+
+                        <div className='product_actions-wrapper'>
+                            {cartActionContent}
+                        </div>
+                    </section>
+                    <Divider />
+                    <section className={cn(classes.quantity, 'py-[30px] !border-none')}>
+                        <RFQ />
+                    </section>
+                    <Divider />
+                    <section className='product_from-other-platform py-[30px]'>
+                        <div className='text-sm flex mb-5'>
+                            Also available in
+                        </div>
+                        <div className='platform-container flex gap-x-2.5'>
+                            <Link
+                                className='platform_logo-wrapper rounded-md px-5 py-2.5 border border-gray-100 flex items-center'
+                                to=""
+                            >
+                                <img
+                                    alt="tokopedia"
+                                    width={60}
+                                    height={30}
+                                    src={'https://upload.wikimedia.org/wikipedia/commons/a/a7/Tokopedia.svg'}
+                                />
+                            </Link>
+                            <Link
+                                className='platform_logo-wrapper rounded-md px-5 py-2.5 border border-gray-100 flex items-center'
+                                to=""
+                            >
+                                <img
+                                    alt="shopee"
+                                    width={60}
+                                    height={30}
+                                    src={'https://upload.wikimedia.org/wikipedia/commons/f/fe/Shopee.svg'}
+                                />
+                            </Link>
+                        </div>
+                    </section>
+                    <Divider />
+                    <section className='seller-information py-[30px]'>
+                        <div className='flex xs_flex-col md_flex-row xs_items-center md_items-start items-start gap-[15px] relative'>
+                            <div className='flex flex-row justify-between relative w-full'>
+                                <div className='flex flex-col xs_items-center md_items-start gap-[6px] relative'>
+                                    <div className="gap-x-[10px] gap-y-1 flex xs_flex-col md_flex-row xs_items-center md_items-start relative">
+                                        <div className="text-sm">
+                                            {sellerDetails ? sellerDetails.name : ''}
+                                        </div>
+                                        <div className="flex items-center relative">
+                                            <Verify variant='Bold' color='#f76b1c' size={20} />
+                                        </div>
+                                    </div>
+                                    <div class="relative w-fit font-normal text-[#999999] text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">
+                                        {sellerDetails ? sellerDetails.city + ', ' + sellerDetails.country : ''}
+                                    </div>
+                                </div>
+                                <div className='flex flex-wrap items-start gap-4 relative'>
+                                    <Link to='/' class="flex items-center justify-center gap-[5px] py-1 px-5 relative bg-white rounded-[30px] border border-solid border-[#f76b1c]">
+                                        <div class="flex items-center justify-center gap-[10px] relative">
+                                            <Sms color="#f76b1c" size={14} variant="Outline" className='stroke-[#f76b1c]' />
+                                            <div class="relative xs_hidden lg_flex w-fit font-medium text-[#f76b1c] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
+                                                Message
+                                            </div>
+                                        </div>
+                                    </Link>
+                                    <Link to='/' class="flex items-center justify-center gap-[5px] py-1 px-5 relative bg-[#280135] rounded-[30px] border border-solid border-[#280135]">
+                                        <div class="flex items-center justify-center gap-[10px] relative">
+                                            <Message color='#FFFFFF' size={14} variant="Outline" className='stroke-[#FFFFFF]' />
+                                            <div class="relative xs_hidden lg_flex w-fit font-medium text-[#fff] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
+                                                Chat With Seller
+                                            </div>
+                                        </div>
+                                    </Link>
+                                    <Link to={"/seller/"+sellerDetails.url_key} class="flex items-center justify-center gap-[5px] py-1 px-5 relative bg-white rounded-[30px] border border-solid border-[#f76b1c]">
+                                        <div class="flex items-center justify-center gap-[10px] relative">
+                                            <Shop color="#f76b1c" size={14} variant="Outline" className='stroke-[#f76b1c]' />
+                                            <div class="relative xs_hidden lg_flex w-fit font-medium text-[#f76b1c] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
+                                                Visit Store
+                                            </div>
+                                        </div>
+                                    </Link>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                    <Divider />
+                </section>
+            </Form>
+            <section className='section_product-details-container mt-8 mb-10'>
+                <div className='hidden lg_block'>
+                    <Tabs
+                        data={dataTabs}
+                        tabContentWrapperClassName='!p-0'
+                        hasContent
+                        tabWrapperClassName='xl_gap-x-[60px] justify-center'
+                    />
+                </div>
+                <div className='block lg_hidden'>
+                    <ProductDetailsCollapsible data={dataTabs} />
+                </div>
+                <Tabs
+                    data={dataTabs}
+                    tabContentWrapperClassName='!p-0'
+                    hasContent
+                    tabWrapperClassName='xl_gap-x-[60px] justify-center'
+                />
+            </section>
+
+            <section className='pt-8 lg_pt-10'>
+                <RelatedProduct />
+            </section>
+
+            <section className='w-[calc(100vw-9px)] relative left-1/2 right-1/2 ml-[-50vw] mr-[-50vw] bg-gray-50 py-[30px] px-0 mb-10'>
+                <div className='lg_max-w-[1200px] px-2.5 mx-auto relative max-w-screen-md'>
+                    <CrossSeller />
+                </div>
+            </section>
+        </Fragment>
+    );
+};
+
+ProductFullDetail.propTypes = {
+    classes: shape({
+        cartActions: string,
+        description: string,
+        descriptionTitle: string,
+        details: string,
+        detailsPageBuilder: string,
+        detailsPageBuilderList: string,
+        detailsTitle: string,
+        imageCarousel: string,
+        options: string,
+        productName: string,
+        productPrice: string,
+        quantity: string,
+        quantityTitle: string,
+        quantityRoot: string,
+        root: string,
+        title: string,
+        unavailableContainer: string
+    }),
+    product: shape({
+        __typename: string,
+        id: number,
+        stock_status: string,
+        sku: string.isRequired,
+        price: shape({
+            regularPrice: shape({
+                amount: shape({
+                    currency: string.isRequired,
+                    value: number.isRequired
+                })
+            }).isRequired
+        }).isRequired,
+        media_gallery_entries: arrayOf(
+            shape({
+                uid: string,
+                label: string,
+                position: number,
+                disabled: bool,
+                file: string.isRequired
+            })
+        ),
+        description: string,
+        short_description: shape({
+            html: string,
+            __typename: string
+        })
+    }).isRequired
+};
+
+export default ProductFullDetail;