@riosst100/pwa-marketplace 2.1.3 → 2.1.5

package/src/overwrites/peregrine/lib/talons/MagentoRoute/magentoRoute.gql.js

@@ -0,0 +1,27 @@
+import { gql } from '@apollo/client';
+
+export const RESOLVE_URL = gql`
+    query ResolveURL($url: String!, $product_preview_token: String) {
+        route(url: $url, product_preview_token: $product_preview_token) {
+            relative_url
+            redirect_code
+            type
+            ... on CmsPage {
+                identifier
+            }
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            ... on ProductInterface {
+                uid
+                __typename
+            }
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            ... on CategoryInterface {
+                uid
+            }
+        }
+    }
+`;
+
+export default {
+    resolveUrlQuery: RESOLVE_URL
+};

package/src/overwrites/peregrine/lib/talons/MagentoRoute/useMagentoRoute.js

@@ -0,0 +1,193 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { useLazyQuery } from '@apollo/client';
+import { useRootComponents } from '@magento/peregrine/lib/context/rootComponents';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import { getComponentData } from '@magento/peregrine/lib/util/magentoRouteData';
+import { useAppContext } from '@magento/peregrine/lib/context/app';
+
+import { getRootComponent, isRedirect } from '@magento/peregrine/lib/talons/MagentoRoute/helpers';
+import DEFAULT_OPERATIONS from './magentoRoute.gql';
+
+import { useParams } from 'react-router-dom';
+
+const getInlinedPageData = () => {
+    return globalThis.INLINED_PAGE_TYPE && globalThis.INLINED_PAGE_TYPE.type
+        ? globalThis.INLINED_PAGE_TYPE
+        : null;
+};
+
+const resetInlinedPageData = () => {
+    globalThis.INLINED_PAGE_TYPE = false;
+};
+
+export const useMagentoRoute = (props = {}) => {
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { resolveUrlQuery } = operations;
+    const { replace } = useHistory();
+    const { pathname, search } = useLocation();
+    // const { preview } = useParams();
+    const [componentMap, setComponentMap] = useRootComponents();
+
+    const initialized = useRef(false);
+    const fetchedPathname = useRef(null);
+
+    const [appState, appApi] = useAppContext();
+    const { actions: appActions } = appApi;
+    const { nextRootComponent } = appState;
+    const { setNextRootComponent, setPageLoading } = appActions;
+
+    const setComponent = useCallback(
+        (key, value) => {
+            setComponentMap(prevMap => new Map(prevMap).set(key, value));
+        },
+        [setComponentMap]
+    );
+
+    const component = componentMap.get(pathname);
+
+    const [runQuery, queryResult] = useLazyQuery(resolveUrlQuery);
+    // destructure the query result
+    const { data, error, loading } = queryResult;
+    const { route } = data || {};
+
+    // redirect to external url
+    useEffect(() => {
+        if (route) {
+            const external_URL = route.relative_url;
+            if (external_URL && external_URL.startsWith('http')) {
+                window.location.replace(external_URL);
+            }
+        }
+    }, [route]);
+
+    useEffect(() => {
+        if (initialized.current || !getInlinedPageData()) {
+            const params = new URLSearchParams(search);
+            const previewToken = params.get('preview');
+
+            runQuery({
+                fetchPolicy: 'cache-and-network',
+                nextFetchPolicy: 'cache-first',
+                variables: { url: pathname, product_preview_token: previewToken }
+            });
+            fetchedPathname.current = pathname;
+        }
+    }, [initialized, pathname, search]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    useEffect(() => {
+        if (component) {
+            return;
+        }
+
+        (async () => {
+            const { type, ...routeData } = route || {};
+            const { id, identifier, uid } = routeData || {};
+            const isEmpty = !id && !identifier && !uid;
+
+            if (!type || isEmpty) {
+                return;
+            }
+
+            try {
+                const rootComponent = await getRootComponent(type);
+                setComponent(pathname, {
+                    component: rootComponent,
+                    ...getComponentData(routeData),
+                    type
+                });
+            } catch (error) {
+                if (process.env.NODE_ENV !== 'production') {
+                    console.error(error);
+                }
+
+                setComponent(pathname, error);
+            }
+        })();
+    }, [route]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const { id, identifier, uid, redirect_code, relative_url, type } =
+        route || {};
+
+    // evaluate both results and determine the response type
+    const empty = !route || !type || (!id && !identifier && !uid);
+    const redirect = isRedirect(redirect_code);
+    const fetchError = component instanceof Error && component;
+    const routeError = fetchError || error;
+    const isInitialized = initialized.current || !getInlinedPageData();
+
+    let showPageLoader = false;
+    let routeData;
+
+    if (component && !fetchError) {
+        // FOUND
+        routeData = component;
+    } else if (routeError) {
+        // ERROR
+        routeData = { hasError: true, routeError };
+    } else if (empty && fetchedPathname.current === pathname && !loading) {
+        // NOT FOUND
+        routeData = { isNotFound: true };
+    } else if (nextRootComponent) {
+        // LOADING with full page shimmer
+        showPageLoader = true;
+        routeData = { isLoading: true, shimmer: nextRootComponent };
+    } else if (redirect) {
+        // REDIRECT
+        routeData = {
+            isRedirect: true,
+            relativeUrl: relative_url.startsWith('/')
+                ? relative_url
+                : '/' + relative_url
+        };
+    } else {
+        // LOADING
+        const isInitialLoad = !isInitialized;
+        routeData = { isLoading: true, initial: isInitialLoad };
+    }
+
+    useEffect(() => {
+        (async () => {
+            const inlinedData = getInlinedPageData();
+            if (inlinedData) {
+                try {
+                    const componentType = inlinedData.type;
+                    const rootComponent = await getRootComponent(componentType);
+                    setComponent(pathname, {
+                        component: rootComponent,
+                        type: componentType,
+                        ...getComponentData(inlinedData)
+                    });
+                } catch (error) {
+                    setComponent(pathname, error);
+                }
+            }
+            initialized.current = true;
+        })();
+
+        return () => {
+            // Unmount
+            resetInlinedPageData();
+        };
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    // perform a redirect if necesssary
+    useEffect(() => {
+        if (routeData && routeData.isRedirect) {
+            replace(routeData.relativeUrl);
+        }
+    }, [pathname, replace, routeData]);
+
+    useEffect(() => {
+        if (component) {
+            // Reset loading shimmer whenever component resolves
+            setNextRootComponent(null);
+        }
+    }, [component, pathname, setNextRootComponent]);
+
+    useEffect(() => {
+        setPageLoading(showPageLoader);
+    }, [showPageLoader, setPageLoading]);
+
+    return routeData;
+};

package/src/overwrites/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js

@@ -107,14 +107,28 @@ const getMediaGalleryEntries = (product, optionCodes, optionSelections) => {
     const { media_gallery_entries, variants } = product;
     const isConfigurable = isProductConfigurable(product);
 
+    value = isConfigurable && variants && variants.length > 0
+    ? [
+        ...variants.flatMap(variant => variant.product.media_gallery_entries || []),
+        ...media_gallery_entries
+    ]
+    : media_gallery_entries;
+
+    return value;
+};
+
+const getSelectedMedia = (product, optionCodes, optionSelections) => {
+    let valueSelected = [];
+
+    const { media_gallery_entries, variants } = product;
+    const isConfigurable = isProductConfigurable(product);
+
     // Selections are initialized to "code => undefined". Once we select a value, like color, the selections change. This filters out unselected options.
     const optionsSelected =
         Array.from(optionSelections.values()).filter(value => !!value).length >
         0;
 
-    if (!isConfigurable || !optionsSelected) {
-        value = media_gallery_entries;
-    } else {
+    if (isConfigurable && optionsSelected) {
         // If any of the possible variants matches the selection add that
         // variant's image to the media gallery. NOTE: This _can_, and does,
         // include variants such as size. If Magento is configured to display
@@ -125,12 +139,12 @@ const getMediaGalleryEntries = (product, optionCodes, optionSelections) => {
             variants
         });
 
-        value = item
-            ? [...item.product.media_gallery_entries, ...media_gallery_entries]
+        valueSelected = item
+            ? item.product.media_gallery_entries
             : media_gallery_entries;
     }
 
-    return value;
+    return valueSelected;
 };
 
 // We only want to display breadcrumbs for one category on a PDP even if a
@@ -170,7 +184,7 @@ const getConfigPrice = (product, optionCodes, optionSelections) => {
         Array.from(optionSelections.values()).filter(value => !!value).length >
         0;
 
-    if (!isConfigurable || !optionsSelected) {
+    if (!isConfigurable) {
         value = product.price_range?.maximum_price;
     } else {
         const item = findMatchingVariant({
@@ -179,11 +193,21 @@ const getConfigPrice = (product, optionCodes, optionSelections) => {
             variants
         });
 
-        value = item
+        const priceRange = {
+            final_price: {
+                value: product.price_range?.minimum_price.final_price.value + ' - ' + product.price_range?.maximum_price.final_price.value,
+                currency: product.price_range?.minimum_price.final_price.currency
+            }
+        };
+
+        value = optionsSelected && item
             ? item.product.price_range?.maximum_price
-            : product.price_range?.maximum_price;
+            : priceRange;
     }
 
+    console.log('value----=====')
+    console.log(value)
+
     return value;
 };
 
@@ -368,6 +392,11 @@ export const useProductFullDetail = props => {
         [product, optionCodes, optionSelections]
     );
 
+    const selectedMedia = useMemo(
+        () => getSelectedMedia(product, optionCodes, optionSelections),
+        [product, optionCodes, optionSelections]
+    );
+
     const customAttributes = useMemo(
         () => getCustomAttributes(product, optionCodes, optionSelections),
         [product, optionCodes, optionSelections]
@@ -555,6 +584,7 @@ export const useProductFullDetail = props => {
         price_range: product?.price_range,
         sku: product.sku,
         term_and_conditions: product.term_and_conditions,
+        link_to_other_stores: product.link_to_other_stores,
         shipping_policy: product.shipping_policy,
         return_policy: product.return_policy,
         preorder: product.preorder,
@@ -629,6 +659,7 @@ export const useProductFullDetail = props => {
             isAddProductLoading,
         isSupportedProductType,
         mediaGalleryEntries,
+        selectedMedia,
         shouldShowWishlistButton:
             isSignedIn &&
             storeConfigData &&

package/src/overwrites/peregrine/lib/talons/ProductImageCarousel/useProductImageCarousel.js

@@ -0,0 +1,77 @@
+import { useCallback, useEffect } from 'react';
+import { useCarousel } from '@magento/peregrine';
+import { generateUrlFromContainerWidth } from '@magento/peregrine/lib/util/imageUtils';
+import {
+    MESSAGE_TYPES,
+    VALID_SERVICE_WORKER_ENVIRONMENT,
+    sendMessageToSW
+} from '@magento/peregrine/lib/util/swUtils';
+
+export const useProductImageCarousel = props => {
+    const { images, hoveredMedia, selectedMedia, type, imageWidth } = props;
+    const [carouselState, carouselApi] = useCarousel(images);
+    const { activeItemIndex, sortedImages } = carouselState;
+    const { handlePrevious, handleNext, setActiveItemIndex } = carouselApi;
+
+    const handleThumbnailClick = useCallback(
+        index => {
+            setActiveItemIndex(index);
+        },
+        [setActiveItemIndex]
+    );
+
+    // Whenever the incoming images changes reset the active item to the first.
+    useEffect(() => {
+        if (hoveredMedia || selectedMedia && selectedMedia.length) {
+
+            // Extract the uid from the first element of selectedMedia
+            const selectedMediaUid = hoveredMedia ? hoveredMedia[0].uid : selectedMedia[0].uid; // Get the uid from selectedMedia
+
+            // Find the index of the image with the matching uid
+            const selectedMediaIndex = sortedImages.findIndex(image => {
+                return image.uid === selectedMediaUid;
+            });
+
+            if (selectedMediaIndex) {
+                setActiveItemIndex(selectedMediaIndex);
+            } else {
+                setActiveItemIndex(0);
+            }
+        } else {
+            setActiveItemIndex(0);
+        }
+    }, [sortedImages, selectedMedia, hoveredMedia, setActiveItemIndex]);
+
+    useEffect(() => {
+        if (VALID_SERVICE_WORKER_ENVIRONMENT) {
+            const urls = images.map(
+                ({ file }) =>
+                    new URL(
+                        generateUrlFromContainerWidth(file, imageWidth, type),
+                        location.origin
+                    ).href
+            );
+            sendMessageToSW(MESSAGE_TYPES.PREFETCH_IMAGES, {
+                urls
+            }).catch(err => {
+                console.error(
+                    'Unable to send PREFETCH_IMAGES message to SW',
+                    err
+                );
+            });
+        }
+    }, [images, imageWidth, type]);
+
+    const currentImage = sortedImages[activeItemIndex] || {};
+    const altText = currentImage.label || 'image-product';
+
+    return {
+        currentImage,
+        activeItemIndex,
+        altText,
+        handleNext,
+        handlePrevious,
+        handleThumbnailClick,
+        sortedImages
+    };
+};

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

@@ -0,0 +1,59 @@
+import { useCallback, useMemo, useState } from 'react';
+
+/**
+ * Talon for Option.
+ *
+ * @param {number} props.attribute_id the id of the option
+ * @param {function} props.onSelectionChange callback handler for when the option is clicked
+ * @param {string} props.selectedValue the label of the selected option
+ * @param {array} props.values an array containing possible values
+ */
+export const useOption = props => {
+    const { attribute_id, attribute_code, onSelectionChange, selectedValue, values, variants } = props;
+    const [selection, setSelection] = useState(null);
+    const initialSelection = useMemo(() => {
+        let initialSelection = {};
+        const searchValue = selection || selectedValue;
+        if (searchValue) {
+            initialSelection =
+                values.find(value => value.default_label === searchValue) || {};
+        }
+        return initialSelection;
+    }, [selectedValue, selection, values]);
+
+    const filteredVariants = useMemo(() => {
+        let filteredVariants = {};
+        if (attribute_code) {
+            filteredVariants = variants.filter(variant => {
+                return variant.attributes.some(attribute => attribute.code === attribute_code);
+            });
+        }
+        return filteredVariants;
+    }, [attribute_code, variants]);
+
+    const valuesMap = useMemo(() => {
+        return new Map(
+            values.map(value => [value.value_index, value.store_label])
+        );
+    }, [values]);
+
+    const selectedValueDescription =
+        selection || initialSelection.default_label || 'None';
+
+    const handleSelectionChange = useCallback(
+        selection => {
+            setSelection(valuesMap.get(selection));
+
+            if (onSelectionChange) {
+                onSelectionChange(attribute_id, selection);
+            }
+        },
+        [attribute_id, onSelectionChange, valuesMap]
+    );
+    return {
+        handleSelectionChange,
+        initialSelection,
+        selectedValueDescription,
+        filteredVariants
+    };
+};

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/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/category.js

@@ -18,7 +18,7 @@ import SportCardsSets from '@riosst100/pwa-marketplace/src/components/SportCards
 import NonSportCardsSets from '@riosst100/pwa-marketplace/src/components/NonSportCardsSets/nonSportCardsSets';
 import LegoSets from '@riosst100/pwa-marketplace/src/components/LegoSets/legoSets';
 import TrainsSets from '@riosst100/pwa-marketplace/src/components/TrainsSets/trainsSets';
-import ShopByBrands from '@riosst100/pwa-marketplace/src/components/ShopByBrands/shopByBrands';
+import SetsData from '@riosst100/pwa-marketplace/src/components/SetsData/setsData';
 
 const MESSAGES = new Map().set(
     'NOT_FOUND',
@@ -81,6 +81,8 @@ const Category = props => {
         );
     }
 
+    const allowedShopby = ['card_artist'];
+
     return (
         <Fragment>
             <Meta name="description" content={metaDescription} />
@@ -89,7 +91,13 @@ const Category = props => {
                 categoryId={uid}
                 isLoading={loading} />
             ) : (
-                shopby == "singles" || shopby == "lego_set_name" && parentCategoryUrlKey == "lego" ? <LegoSets
+                allowedShopby.includes(shopby) ? <ShopBy
+                categoryId={uid}
+                shopby={shopby}
+                isLoading={loading} /> : shopby == "release_year" || shopby == "expansion_sets" || shopby == "sets" ? <SetsData
+                categoryId={uid}
+                shopby={shopby}
+                isLoading={loading} /> : shopby == "singles" || shopby == "lego_set_name" && parentCategoryUrlKey == "lego" ? <LegoSets
                 categoryId={uid}
                 shopby={shopby}
                 isLoading={loading} /> : shopby && parentCategoryUrlKey == "non-sports-cards" ? <NonSportCardsSets
@@ -98,7 +106,7 @@ const Category = props => {
                 isLoading={loading} /> : shopby == "sc_baseball_players" || shopby == "sc_baseball_teams" || shopby == "release" && parentCategoryUrlKey == "sport-cards" ? <SportCardsSets
                 categoryId={uid}
                 shopby={shopby}
-                isLoading={loading} /> : shopby == "sets" || shopby == "expansion_sets" || shopby == "release_year" ? <ShopBySets
+                isLoading={loading} /> : shopby == "release_year" ? <ShopBySets
                 categoryId={uid}
                 shopby={shopby}
                 isLoading={loading} /> : shopby == "card" ? <ShopByCard

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">