@riosst100/pwa-marketplace 2.1.4 → 2.1.6

package/src/overwrites/peregrine/lib/talons/ProductOptions/useTile.js

@@ -0,0 +1,47 @@
+import { useCallback, useMemo } from 'react';
+
+export const useTile = props => {
+    const { onClick, value_index, itemVariant, setHoveredMedia } = props;
+
+    const handleClick = useCallback(() => {
+        onClick(value_index);
+    }, [value_index, onClick]);
+    
+    const handleMouseEnter = useCallback(() => {
+        var variantMedia = itemVariant
+        ? itemVariant[0].product.media_gallery_entries
+        : null;
+
+        setHoveredMedia(variantMedia);
+    }, [setHoveredMedia, itemVariant, value_index]);
+
+    const handleMouseLeave = useCallback(() => {
+        setHoveredMedia(null);
+    }, [setHoveredMedia]);
+
+    const variantImg = useMemo(() => {
+        let variantImg = '';
+        if (itemVariant) {
+            if (itemVariant.length > 0) {
+                const firstVariant = itemVariant[0];
+            
+                // Accessing media_gallery_entries
+                const mediaGalleryEntries = firstVariant.product.media_gallery_entries;
+            
+                // Extracting file paths
+                const mediaFiles = mediaGalleryEntries.map(entry => entry.file);
+                variantImg = mediaFiles[0];
+            }
+        }
+        return variantImg;
+    }, [itemVariant]);
+
+    // const variantImg = "https://down-sg.img.susercontent.com/file/sg-11134207-7rbk0-lkkqr1dahoah2c";
+
+    return {
+        handleClick,
+        handleMouseEnter,
+        handleMouseLeave,
+        variantImg
+    };
+};

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/product.gql.js

@@ -13,8 +13,11 @@ export const GET_STORE_CONFIG_DATA = gql`
 `;
 
 export const GET_PRODUCT_DETAIL_QUERY = gql`
-    query getProductDetailForProductPage($urlKey: String!) {
-        products(filter: { url_key: { eq: $urlKey } }) {
+    query getProductDetailForProductPage($urlKey: String!, $productPreviewToken: String) {
+        products(
+            product_preview_token: $productPreviewToken,
+            filter: { url_key: { eq: $urlKey } }
+        ) {
             items {
                 id
                 uid

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/peregrine/lib/talons/RootComponents/Product/useProduct.js

@@ -0,0 +1,121 @@
+import { useQuery } from '@apollo/client';
+import { useEffect, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useAppContext } from '@magento/peregrine/lib/context/app';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './product.gql';
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
+
+/**
+ * A [React Hook]{@link https://reactjs.org/docs/hooks-intro.html} that
+ * controls the logic for the Product Root Component.
+ *
+ * @kind function
+ *
+ * @param {object}      props
+ * @param {Function}    props.mapProduct - A function for updating products to the proper shape.
+ * @param {GraphQLAST}  props.queries.getStoreConfigData - Fetches storeConfig product url suffix using a server query
+ * @param {GraphQLAST}  props.queries.getProductQuery - Fetches product using a server query
+ *
+ * @returns {object}    result
+ * @returns {Bool}      result.error - Indicates a network error occurred.
+ * @returns {Bool}      result.loading - Indicates the query is in flight.
+ * @returns {Bool}      result.product - The product's details.
+ */
+export const useProduct = props => {
+    const { mapProduct } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getStoreConfigData, getProductDetailQuery } = operations;
+    const { pathname, search } = useLocation();
+    const [
+        ,
+        {
+            actions: { setPageLoading }
+        }
+    ] = useAppContext();
+
+    const { data: storeConfigData } = useQuery(getStoreConfigData, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const slug = pathname.split('/').pop();
+    const productUrlSuffix = storeConfigData?.storeConfig?.product_url_suffix;
+    const urlKey = productUrlSuffix ? slug.replace(productUrlSuffix, '') : slug;
+
+    const params = new URLSearchParams(search);
+    const productPreviewToken = params.get('preview');
+
+    const { error, loading, data } = useQuery(getProductDetailQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
+        skip: !storeConfigData,
+        variables: {
+            urlKey,
+            productPreviewToken
+        }
+    });
+
+    const isBackgroundLoading = !!data && loading;
+
+    const product = useMemo(() => {
+        if (!data) {
+            // The product isn't in the cache and we don't have a response from GraphQL yet.
+            return null;
+        }
+
+        // Note: if a product is out of stock _and_ the backend specifies not to
+        // display OOS items, the items array will be empty.
+
+        // Only return the product that we queried for.
+        const product = data.products.items.find(
+            item => item.url_key === urlKey
+        );
+
+        if (!product) {
+            return null;
+        }
+
+        return mapProduct(product);
+    }, [data, mapProduct, urlKey]);
+
+    const [, { dispatch }] = useEventingContext();
+
+    // Update the page indicator if the GraphQL query is in flight.
+    useEffect(() => {
+        setPageLoading(isBackgroundLoading);
+    }, [isBackgroundLoading, setPageLoading]);
+
+    useEffect(() => {
+        if (!error && !loading && product) {
+            dispatch({
+                type: 'PRODUCT_PAGE_VIEW',
+                payload: {
+                    id: product.id,
+                    name: product.name,
+                    sku: product.sku,
+                    currency_code:
+                        product?.price_range?.maximum_price?.final_price
+                            ?.currency,
+                    price: product.price,
+                    price_range: {
+                        maximum_price: {
+                            final_price:
+                                product?.price_range?.maximum_price?.final_price
+                                    ?.value
+                        }
+                    },
+                    url_key: product.url_key
+                }
+            });
+        }
+    }, [error, loading, product, dispatch]);
+
+    return {
+        error,
+        loading,
+        product
+    };
+};

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;