@riosst100/pwa-marketplace 2.1.3 → 2.1.5

package/src/overwrites/venia-ui/lib/components/Gallery/item.js

@@ -81,7 +81,8 @@ const GalleryItem = props => {
 
     // fallback to regular price when final price is unavailable
     const priceSource =
-        price_range.maximum_price.final_price ||
+        price_range.minimum_price?.final_price ||
+        price_range.minimum_price?.regular_price || price_range.maximum_price.final_price ||
         price_range.maximum_price.regular_price;
 
     // Hide the Rating component until it is updated with the new look and feel (PWA-2512).
@@ -144,12 +145,12 @@ const GalleryItem = props => {
                                 currencyCode={priceSource.currency}
                             />
                         </p>
-                        <p className='old-price text-gray-400 text-xs line-through font-normal !mb-0'>
+                        {/* <p className='old-price text-gray-400 text-xs line-through font-normal !mb-0'>
                             <Price
                                 value={priceSource.value}
                                 currencyCode={priceSource.currency}
                             />
-                        </p>
+                        </p> */}
                     </div>
 
                     <div data-cy="GalleryItem-Rating" className={cn('flex gap-[5px] items-center mb-2')}>
@@ -212,6 +213,19 @@ GalleryItem.propTypes = {
                 discount: shape({
                     amount_off: number.isRequired
                 }).isRequired
+            }).isRequired,
+            minimum_price: shape({
+                final_price: shape({
+                    value: number.isRequired,
+                    currency: string.isRequired
+                }),
+                regular_price: shape({
+                    value: number.isRequired,
+                    currency: string.isRequired
+                }).isRequired,
+                discount: shape({
+                    amount_off: number.isRequired
+                }).isRequired
             }).isRequired
         }).isRequired
     }),

package/src/overwrites/venia-ui/lib/components/Price/price.js

@@ -0,0 +1,113 @@
+import React, { Fragment } from 'react';
+import { number, string, shape } from 'prop-types';
+import { useIntl } from 'react-intl';
+import patches from '@magento/peregrine/lib/util/intlPatches';
+
+/**
+ * The **Price** component is used anywhere a price needs to be displayed.
+ *
+ * Formatting of prices and currency symbol selection is handled entirely by the ECMAScript Internationalization API available in modern browsers.
+ *
+ * A [polyfill][] is required for any JavaScript runtime that does not have [Intl.NumberFormat.prototype.formatToParts][].
+ *
+ * [polyfill]: https://www.npmjs.com/package/intl
+ * [Intl.NumberFormat.prototype.formatToParts]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/formatToParts
+ */
+
+const Price = props => {
+    const { locale } = useIntl();
+    const { value, currencyCode, classes } = props;
+
+    // Check if the value contains " - "
+    if (typeof value === 'string' && value.includes(" - ")) {
+        const explodedValues = value.split(" - ");
+        const parts = patches.toParts.call(
+            new Intl.NumberFormat(locale, {
+                style: 'currency',
+                currency: currencyCode
+            }),
+            explodedValues[0]
+        );
+
+        const children = parts.map((part, i) => {
+            const partClass = classes[part.type];
+            const key = `${i}-${part.value}`;
+    
+            return (
+                <span key={key} className={partClass}>
+                    {part.value}
+                </span>
+            );
+        });
+
+        const parts2 = patches.toParts.call(
+            new Intl.NumberFormat(locale, {
+                style: 'currency',
+                currency: currencyCode
+            }),
+            explodedValues[1]
+        );
+
+        const children2 = parts2.map((part, i) => {
+            const partClass = classes[part.type];
+            const key = `${i}-${part.value}`;
+    
+            return (
+                <span key={key} className={partClass}>
+                    {part.value}
+                </span>
+            );
+        });
+
+        return <Fragment>{children} - {children2}</Fragment>;
+    } else {
+        const parts = patches.toParts.call(
+            new Intl.NumberFormat(locale, {
+                style: 'currency',
+                currency: currencyCode
+            }),
+            value
+        );
+
+        const children = parts.map((part, i) => {
+            const partClass = classes[part.type];
+            const key = `${i}-${part.value}`;
+    
+            return (
+                <span key={key} className={partClass}>
+                    {part.value}
+                </span>
+            );
+        });
+
+        return <Fragment>{children}</Fragment>;
+    }
+
+    return null;
+};
+
+Price.propTypes = {
+    /**
+     * Class names to use when styling this component
+     */
+    classes: shape({
+        currency: string,
+        integer: string,
+        decimal: string,
+        fraction: string
+    }),
+    /**
+     * The numeric price
+     */
+    value: number.isRequired,
+    /**
+     * A string with any of the currency code supported by Intl.NumberFormat
+     */
+    currencyCode: string.isRequired
+};
+
+Price.defaultProps = {
+    classes: {}
+};
+
+export default Price;

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

@@ -71,7 +71,7 @@ const AuctionDetail = (props) => {
     }
     };
 
-    console.log(auctionData)
+    // console.log(auctionData)
 
     const endDate = auctionData && auctionData.stop_auction_time ? new Date(auctionData.stop_auction_time) : null;
 

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,6 +36,7 @@ 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';
 
 // Correlate a GQL error message to a field. GQL could return a longer error
@@ -87,22 +88,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 +228,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,43 +383,60 @@ 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;
+    }
 
     return (
         <Fragment>
@@ -447,7 +448,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 +470,7 @@ const ProductFullDetail = props => {
                     <div
                         className={cn(
                             classes.title,
-                            'mb-[30px]',
+                            'mb-xs',
                         )}
                     >
                         <h1
@@ -500,7 +501,7 @@ const ProductFullDetail = props => {
                     <div
                         className={cn(
                             'product_short_description',
-                            'mb-[30px]',
+                            'mb-xs',
                         )}
                     >
                         {shortDescription}
@@ -514,7 +515,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 +529,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 +544,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 +566,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 +581,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 +592,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 +617,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;