@riosst100/pwa-marketplace 2.1.4 → 2.1.6

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

@@ -1,4 +1,4 @@
-import React, { useMemo, Fragment, Suspense } from 'react';
+import React, { useState, useMemo, Fragment, Suspense } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { arrayOf, bool, number, shape, string } from 'prop-types';
 import { Form } from 'informed';
@@ -36,7 +36,9 @@ 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 LinkToOtherStores from '@riosst100/pwa-marketplace/src/components/LinkToOtherStores';
 import Collapsible from '@riosst100/pwa-marketplace/src/components/commons/Collapsible';
+import { useLocation } from 'react-router-dom';
 
 // 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
@@ -74,7 +76,12 @@ const ProductDetailsCollapsible = (props) => {
 const ProductFullDetail = props => {
     const { product } = props;
 
-    const talonProps = useProductFullDetail({ product });
+    const { search } = useLocation();
+
+    const params = new URLSearchParams(search);
+    const isPreview = params.get('preview');
+
+    const talonProps = useProductFullDetail({ product, isPreview });
 
     const {
         breadcrumbCategoryId,
@@ -87,22 +94,26 @@ const ProductFullDetail = props => {
         isAddToCartDisabled,
         isSupportedProductType,
         mediaGalleryEntries,
+        selectedMedia,
         productDetails,
         customAttributes,
         wishlistButtonProps,
         sellerDetails
     } = talonProps;
-    console.log("🚀 ~ ProductFullDetail ~ talonProps:", talonProps)
 
     const { formatMessage } = useIntl();
 
     const classes = useStyle(defaultClasses, props.classes);
 
+    const [hoveredMedia, setHoveredMedia] = useState(null);
+
     const options = isProductConfigurable(product) ? (
         <Suspense fallback={<ProductOptionsShimmer />}>
             <Options
                 onSelectionChange={handleSelectionChange}
                 options={product.configurable_options}
+                setHoveredMedia={setHoveredMedia}
+                variants={product.variants}
                 isEverythingOutOfStock={isEverythingOutOfStock}
                 outOfStockVariants={outOfStockVariants}
             />
@@ -223,28 +234,7 @@ const ProductFullDetail = props => {
     // 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>
-
+            <RFQ disabled={isAddToCartDisabled} />
             <Button
                 data-cy="ProductFullDetail-addToCartButton"
                 disabled={isAddToCartDisabled}
@@ -399,47 +389,87 @@ const ProductFullDetail = props => {
 
 
     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)} />
-            }
-        ];
+    [
+        {
+            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)} />
+        }
+    ];
+
+    const getSellerAddressDisplay = (seller) => {
+        let city = seller?.city;
+        let country = seller?.country;
+
+        let result = '';
+        if (city && country) {
+            result = `${city}, ${country}`;
+        }
+        if (city && !country) {
+            result = `${city}`;
+        }
+        if (!city && country) {
+            result = `${country}`;
+        }        
+        return result;
+    }
+
+    const productPreviewMessages = isPreview ? (
+        <div
+        style={{
+            backgroundColor: "white", // Light gray background
+            border: "1px solid rgb(242 101 102)", // Subtle border
+            borderRadius: "5px", // Rounded corners
+            padding: "10px 15px", // Space inside the box
+            margin: "10px 0px 20px 0", // Space outside the box
+            fontSize: "14px", // Readable text size
+            color: "rgb(242 101 102)", // Dark gray text
+        }}
+        >
+            <span
+                style={{
+                fontWeight: "500", // Slightly bold text
+                }}
+            >
+                This is a preview of your product. Only you can see this page.
+            </span>
+        </div>
+    ) : null;
 
     return (
         <Fragment>
             {breadcrumbs}
+            {productPreviewMessages}
             <Form
                 className={classes.root}
                 data-cy="ProductFullDetail-root"
@@ -447,7 +477,7 @@ const ProductFullDetail = props => {
             >
                 <section className={cn(classes.leftContainer, 'relative')}>
                     <ProductLabel item={productDetails} />
-                    <Carousel images={mediaGalleryEntries} />
+                    <Carousel images={mediaGalleryEntries} hoveredMedia={hoveredMedia} selectedMedia={selectedMedia}/>
                     <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
@@ -469,7 +499,7 @@ const ProductFullDetail = props => {
                     <div
                         className={cn(
                             classes.title,
-                            'mb-[30px]',
+                            'mb-xs',
                         )}
                     >
                         <h1
@@ -500,7 +530,7 @@ const ProductFullDetail = props => {
                     <div
                         className={cn(
                             'product_short_description',
-                            'mb-[30px]',
+                            'mb-xs',
                         )}
                     >
                         {shortDescription}
@@ -514,7 +544,7 @@ const ProductFullDetail = props => {
                     <div
                         className={cn(
                             'product_price_container',
-                            'py-[30px] flex justify-between flex-wrap gap-y-5'
+                            'py-xs flex justify-between flex-wrap gap-y-5'
                         )}
                     >
                         <div className='flex flex-col gap-y-5 max-w-[448px]'>
@@ -528,10 +558,11 @@ const ProductFullDetail = props => {
                                 >
                                     <Price
                                         currencyCode={productDetails.price.currency}
+                                        priceRange={productDetails.price_range}
                                         value={productDetails.price.value}
                                     />
                                 </p>
-                                <p
+                                {/* <p
                                     data-cy="ProductFullDetail-productOldPrice"
                                     className={cn(
                                         classes.productPrice,
@@ -542,7 +573,7 @@ const ProductFullDetail = props => {
                                         currencyCode={productDetails.price.currency}
                                         value={productDetails.price.value}
                                     />
-                                </p>
+                                </p> */}
                             </div>
                             <AuctionDetail className="auction_detail-container" />
                             <PreorderDetail className={'preorder_detail-container'} />
@@ -564,7 +595,7 @@ const ProductFullDetail = props => {
                         errors={errors.get('form') || []}
                     />
                     <section className={classes.options}>{options}</section>
-                    <section className={cn(classes.quantity, 'py-[30px] !border-none')}>
+                    <section className={cn(classes.quantity, 'py-xs !border-none')}>
                         {/* <span
                             data-cy="ProductFullDetail-quantityTitle"
                             className={classes.quantityTitle}
@@ -579,7 +610,7 @@ const ProductFullDetail = props => {
                             message={errors.get('quantity')}
                         />
 
-                        <div className='product_shipping-information mb-[30px] leading-[18px] mt-[25px]'>
+                        {/* <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>
@@ -590,48 +621,19 @@ const ProductFullDetail = props => {
                             <div className='text-xs'>
                                 Shiping Method <span className='font-medium'>Store Pick Up | Meet Up</span>
                             </div>
-                        </div>
+                        </div> */}
 
                         <div className='product_actions-wrapper'>
                             {cartActionContent}
                         </div>
                     </section>
-                    <Divider />
+                    {/* <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>
+                    </section> */}
                     <Divider />
-                    <section className='seller-information py-[30px]'>
+                    <LinkToOtherStores productDetails={productDetails} />
+                    <section className='seller-information py-xs'>
                         <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'>
@@ -644,7 +646,7 @@ const ProductFullDetail = props => {
                                         </div>
                                     </div>
                                     <div class="relative w-fit font-normal text-[#999999] text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">
-                                        {sellerDetails ? sellerDetails.city + ', ' + sellerDetails.country : ''}
+                                        {sellerDetails ? getSellerAddressDisplay(sellerDetails) : ''}
                                     </div>
                                 </div>
                                 <div className='flex flex-wrap items-start gap-4 relative'>

package/src/overwrites/venia-ui/lib/components/ProductImageCarousel/carousel.js

@@ -32,10 +32,12 @@ const IMAGE_WIDTH = 495;
  * @returns {React.Element} React carousel component that displays a product image
  */
 const ProductImageCarousel = props => {
-    const { images } = props;
+    const { images, selectedMedia, hoveredMedia } = props;
     const { formatMessage } = useIntl();
     const talonProps = useProductImageCarousel({
         images,
+        selectedMedia,
+        hoveredMedia,
         imageWidth: IMAGE_WIDTH
     });
 

package/src/overwrites/venia-ui/lib/components/ProductOptions/option.js

@@ -0,0 +1,112 @@
+import React, { useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
+import {
+    arrayOf,
+    func,
+    number,
+    object,
+    oneOfType,
+    shape,
+    string
+} from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import getOptionType from '@magento/venia-ui/lib/components/ProductOptions/getOptionType';
+import SwatchList from '@magento/venia-ui/lib/components/ProductOptions/swatchList';
+import TileList from './tileList';
+import defaultClasses from './option.module.css';
+import { useOption } from '@magento/peregrine/lib/talons/ProductOptions/useOption';
+
+const getItemKey = ({ value_index }) => value_index;
+
+// TODO: get an explicit field from the API
+// that identifies an attribute as a swatch
+const getListComponent = (attribute_code, values) => {
+    const optionType = getOptionType({ attribute_code, values });
+
+    return optionType === 'swatch' ? SwatchList : TileList;
+};
+
+const Option = props => {
+    const {
+        attribute_code,
+        attribute_id,
+        label,
+        onSelectionChange,
+        selectedValue,
+        values,
+        variants,
+        setHoveredMedia,
+        isEverythingOutOfStock,
+        outOfStockVariants
+    } = props;
+
+    const talonProps = useOption({
+        attribute_id,
+        attribute_code,
+        label,
+        variants,
+        onSelectionChange,
+        selectedValue,
+        values
+    });
+
+    const {
+        handleSelectionChange,
+        initialSelection,
+        selectedValueDescription,
+        filteredVariants
+    } = talonProps;
+
+    const ValueList = useMemo(() => getListComponent(attribute_code, values), [
+        attribute_code,
+        values
+    ]);
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <div className={classes.root} data-cy="ProductOptions-Option-root">
+            <span className={classes.title}>{label}</span>
+            <ValueList
+                getItemKey={getItemKey}
+                selectedValue={initialSelection}
+                items={values}
+                setHoveredMedia={setHoveredMedia}
+                onSelectionChange={handleSelectionChange}
+                isEverythingOutOfStock={isEverythingOutOfStock}
+                outOfStockVariants={outOfStockVariants}
+                filteredVariants={filteredVariants}
+                attributeLabel={label}
+            />
+            <dl className={classes.selection} style={{ display: 'none' }}>
+                <dt
+                    data-cy="ProductOptions-Option-selectedLabel"
+                    className={classes.selectionLabel}
+                >
+                    <FormattedMessage
+                        id="productOptions.selectedLabel"
+                        defaultMessage="Selected {label}:"
+                        values={{ label }}
+                    />
+                </dt>
+                <dd>{selectedValueDescription}</dd>
+            </dl>
+        </div>
+    );
+};
+
+Option.propTypes = {
+    attribute_code: string.isRequired,
+    attribute_id: string,
+    classes: shape({
+        root: string,
+        title: string
+    }),
+    label: string.isRequired,
+    onSelectionChange: func,
+    selectedValue: oneOfType([number, string]),
+    values: arrayOf(object).isRequired
+};
+
+export default Option;

package/src/overwrites/venia-ui/lib/components/ProductOptions/option.module.css

@@ -0,0 +1,30 @@
+.root {
+    composes: border-b from global;
+    composes: border-solid from global;
+    /* composes: border-subtle from global; */
+    /* composes: mx-sm from global; */
+    composes: my-0 from global;
+    composes: px-0 from global;
+    composes: py-xs from global;
+
+    border-color: rgb(230 233 234);
+}
+
+.title {
+    composes: block from global;
+    composes: font-semibold from global;
+    composes: leading-normal from global;
+    composes: mb-xs from global;
+    composes: text-colorDefault from global;
+}
+
+.selection {
+    composes: flex from global;
+    composes: leading-normal from global;
+    composes: mt-xs from global;
+    composes: text-colorDefault from global;
+}
+
+.selectionLabel {
+    composes: mr-xs from global;
+}

package/src/overwrites/venia-ui/lib/components/ProductOptions/options.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { array, func } from 'prop-types';
+
+import Option from './option';
+import { useOptions } from '@magento/peregrine/lib/talons/ProductOptions/useOptions';
+
+const Options = props => {
+    const {
+        classes,
+        onSelectionChange,
+        options,
+        variants,
+        setHoveredMedia,
+        selectedValues = [],
+        isEverythingOutOfStock,
+        outOfStockVariants
+    } = props;
+
+    const talonProps = useOptions({
+        onSelectionChange,
+        selectedValues,
+        options
+    });
+
+    const { handleSelectionChange, selectedValueMap } = talonProps;
+
+    // Render a list of options passing in any pre-selected values.
+    return options.map(option => (
+        <Option
+            {...option}
+            classes={classes}
+            key={option.attribute_id}
+            variants={variants}
+            setHoveredMedia={setHoveredMedia}
+            onSelectionChange={handleSelectionChange}
+            selectedValue={selectedValueMap.get(option.label)}
+            isEverythingOutOfStock={isEverythingOutOfStock}
+            outOfStockVariants={outOfStockVariants}
+        />
+    ));
+};
+
+Options.propTypes = {
+    onSelectionChange: func,
+    options: array.isRequired,
+    selectedValues: array
+};
+
+export default Options;

package/src/overwrites/venia-ui/lib/components/ProductOptions/tile.js

@@ -0,0 +1,118 @@
+import React from 'react';
+import { bool, func, number, oneOfType, shape, string } from 'prop-types';
+import { useIntl } from 'react-intl';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './tile.module.css';
+import { useTile } from '@magento/peregrine/lib/talons/ProductOptions/useTile';
+import Image from '@magento/venia-ui/lib/components/Image';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+
+const getClassName = (
+    name,
+    isSelected,
+    hasFocus,
+    isOptionOutOfStock,
+    isEverythingOutOfStock
+) =>
+    `${name}${isSelected ? '_selected' : ''}${hasFocus ? '_focused' : ''}${
+        isEverythingOutOfStock || isOptionOutOfStock ? '_outOfStock' : ''
+    }`;
+
+const Tile = props => {
+    const {
+        hasFocus,
+        isSelected,
+        item: { label, value_index },
+        onClick,
+        isEverythingOutOfStock,
+        isOptionOutOfStock,
+        setHoveredMedia,
+        itemVariant
+    } = props;
+
+    const talonProps = useTile({
+        onClick,
+        itemVariant,
+        setHoveredMedia,
+        value_index
+    });
+
+    const { handleMouseLeave, handleMouseEnter, handleClick, variantImg } = talonProps;
+    const classes = useStyle(defaultClasses, props.classes);
+    const className =
+        classes[
+            getClassName(
+                'root',
+                isSelected,
+                hasFocus,
+                isOptionOutOfStock,
+                isEverythingOutOfStock
+            )
+        ];
+    const { formatMessage } = useIntl();
+    const ariaLabelView = formatMessage(
+        {
+            id: 'ProductOptions.productSize',
+            defaultMessage: 'Fashion size {label}'
+        },
+        { label: label }
+    );
+
+    const ariaLabelSelected = formatMessage(
+        {
+            id: 'productOptions.selectedSize',
+            defaultMessage: 'Fashion size {label} button Selected'
+        },
+        { label: label }
+    );
+
+    const result = isSelected ? ariaLabelSelected : ariaLabelView;
+
+    // variantImg
+    let image = (
+        <Image
+            alt=''
+            classes={{
+                root: classes.variantImageSwatch
+            }}
+            resource={variantImg}
+            width={24}
+        />
+    );
+
+    return (
+        <button
+            className={className}
+            onClick={handleClick}
+            onMouseEnter={handleMouseEnter}
+            onFocus={handleMouseEnter}
+            onTouchStart={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            title={label}
+            type="button"
+            data-cy="Tile-button"
+            aria-label={result}
+            disabled={isEverythingOutOfStock || isOptionOutOfStock}
+        >
+            {image}
+            <span className={classes.label}>{label}</span>
+        </button>
+    );
+};
+
+export default Tile;
+
+Tile.propTypes = {
+    hasFocus: bool,
+    isSelected: bool,
+    item: shape({
+        label: string.isRequired,
+        value_index: oneOfType([number, string]).isRequired
+    }).isRequired,
+    onClick: func.isRequired
+};
+
+Tile.defaultProps = {
+    hasFocus: false,
+    isSelected: false
+};