@riosst100/pwa-marketplace 2.1.4 → 2.1.5

package/src/overwrites/peregrine/lib/talons/RootComponents/Category/categoryFragments.gql.js

@@ -72,6 +72,19 @@ export const ProductsFragment = gql`
                         amount_off
                     }
                 }
+                minimum_price {
+                    final_price {
+                        currency
+                        value
+                    }
+                    regular_price {
+                        currency
+                        value
+                    }
+                    discount {
+                        amount_off
+                    }
+                }
             }
             sku
             small_image {

package/src/overwrites/peregrine/lib/talons/RootComponents/Product/productDetailFragment.gql.js

@@ -10,6 +10,7 @@ export const ProductDetailsFragment = gql`
                 category_uid
             }
         }
+        link_to_other_stores
         seller {
             name
             url_key
@@ -59,6 +60,19 @@ export const ProductDetailsFragment = gql`
                     amount_off
                 }
             }
+            minimum_price {
+                final_price {
+                    currency
+                    value
+                }
+                regular_price {
+                    currency
+                    value
+                }
+                discount {
+                    amount_off
+                }
+            }
         }
         sku
         auction_data {
@@ -196,6 +210,15 @@ export const ProductDetailsFragment = gql`
                                 amount_off
                             }
                         }
+                        minimum_price {
+                            final_price {
+                                currency
+                                value
+                            }
+                            discount {
+                                amount_off
+                            }
+                        }
                     }
                     custom_attributes {
                         selected_attribute_options {

package/src/overwrites/venia-ui/lib/RootComponents/Category/categoryContent.js

@@ -251,9 +251,6 @@ const CategoryContent = props => {
 
     let isSingles = false;
 
-    // console.log(allActiveFilters)
-
-    // console.log(virtualCategoryFilters)
     const urlKey = category?.url_key;
 
     if (allActiveFilters && allActiveFilters.size > 0) {
@@ -281,9 +278,6 @@ const CategoryContent = props => {
 
     const currentFilter = activeFilters && activeFilters.length ? activeFilters[activeFilters.length - 1].label : '';
 
-    // console.log(activeFilters.length)
-    // console.log(activeFilters.map(u => u.label).join(' - '))
-
     let title = activeFilters && activeFilters.length ? (
         activeFilters.length > 1 ? 
             activeFilters[activeFilters.length - 1].label

package/src/overwrites/venia-ui/lib/components/AccountInformationPage/accountInformationPage.js

@@ -34,7 +34,6 @@ const AccountInformationPage = props => {
         recaptchaWidgetProps,
         setShouldShowNewPassword,
     } = talonProps;
-    console.log("🚀 ~ AccountInformationPage ~ talonProps:", talonProps)
     const { formatMessage } = useIntl();
 
     const errorMessage = loadDataError ? (

package/src/overwrites/venia-ui/lib/components/AccountInformationPage/editForm.js

@@ -30,7 +30,6 @@ const EditForm = props => {
 
     const [showNewPassword, setShowNewPassword] = React.useState(false);
     const handleChange = (event) => {
-        console.log("🚀 ~ handleChange ~ event:", event)
         setShowNewPassword(event.target.checked);
     }
 

package/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs.js

@@ -74,15 +74,12 @@ const Breadcrumbs = props => {
         );
     }
 
-    // console.log(currentFilter)
-
     const filterBreadcrumbsElement = [];
 
     const lastIndex = currentFilter ? currentFilter.length - 1 : 0;
     // const filterpath = ;
     
     currentFilter && currentFilter.length && currentFilter.map((filter, index) => {
-        console.log(filter)
         currentProduct ? (
             filterBreadcrumbsElement.push(
                 <>

package/src/overwrites/venia-ui/lib/components/CheckoutPage/OrderSummary/orderSummary.js

@@ -7,7 +7,6 @@ import defaultClasses from './orderSummary.module.css';
 
 const OrderSummary = props => {
     const classes = useStyle(defaultClasses, props.classes);
-    console.log("🚀 ~ OrderSummary ~ props:", props)
     return (
         <div data-cy="OrderSummary-root" className={classes.root}>
             <h2 aria-live="polite" className="text-[16px] font-medium mb-4">

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
     });