@riosst100/pwa-marketplace 2.1.4 → 2.1.6

package/src/components/SellerDetail/sellerDetail.js

@@ -76,6 +76,23 @@ const SellerDetail = props => {
         
     }
 
+    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 (
         <div className=' py-8'>
             <Slider seller={seller} rootClassname='mb-[30px]' />
@@ -106,7 +123,7 @@ const SellerDetail = props => {
                                 </div>
                             </div>
                             <div class="relative w-fit font-normal text-[#999999] text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">
-                                {seller ? seller.city + ', ' + seller.country : ''}
+                                {seller ? getSellerAddressDisplay(seller) : ''}
                             </div>
                         </div>
                         <div className='flex flex-wrap items-start gap-4 relative'>

package/src/components/SellerInformation/sellerInformation.js

@@ -3,6 +3,7 @@ import SellerLocation from '../SellerLocation';
 import { Location, ShopAdd } from 'iconsax-react';
 import OperatingHours from '@riosst100/pwa-marketplace/src/components/OperatingHours';
 import SellerAddressCard from '@riosst100/pwa-marketplace/src/components/Seller/sellerAddressCard';
+import SellerSocialMedia from '@riosst100/pwa-marketplace/src/components/SellerSocialMedia';
 
 const SellerInformation = ({ seller }) => {
     return (
@@ -59,10 +60,11 @@ const SellerInformation = ({ seller }) => {
                                 {seller ? seller.term_and_conditions : ''}
                             </div>
                         </div>
-                    </div >
-                </div >
+                    </div>
+                </div>
+                <SellerSocialMedia seller={seller} />
                 {seller ? <SellerLocation storeLocators={seller.store_locators} /> : ''}
-            </div >
+            </div>
         </>
     )
 }

package/src/components/SellerSocialMedia/index.js

@@ -0,0 +1,96 @@
+import React from 'react';
+
+const SellerSocialMedia = (props) => {
+
+    const { seller } = props;
+
+    const { twitter_id, facebook_id, youtube_id, instagram_id, linkedin_id } = seller;
+
+    const socialMediaLinks = [
+        {
+            code: 'X',
+            link: twitter_id
+        },
+        {
+            code: 'Facebook',
+            link: facebook_id
+        },
+        {
+            code: 'Youtube',
+            link: youtube_id
+        },
+        {
+            code: 'Instagram',
+            link: instagram_id
+        },
+        {
+            code: 'LinkedIn',
+            link: linkedin_id
+        }
+    ];
+
+    const getLogo = (code) => {
+        let img = '';
+        if (code == "X") {
+            img = 'https://upload.wikimedia.org/wikipedia/commons/5/53/X_logo_2023_original.svg';
+        }
+        if (code == "Facebook") {
+            img = 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Facebook_f_logo_%282019%29.svg/1280px-Facebook_f_logo_%282019%29.svg.png';
+        }
+        if (code == "Youtube") {
+            img = 'https://cdn3.iconfinder.com/data/icons/social-network-30/512/social-06-512.png';
+        }
+        if (code == "Instagram") {
+            img = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Instagram_logo_2022.svg/768px-Instagram_logo_2022.svg.png';
+        }
+        if (code == "LinkedIn") {
+            img = 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/LinkedIn_icon.svg/1024px-LinkedIn_icon.svg.png';
+        }
+
+        return img;
+    }
+
+    let sellerSocialMediaResult = [];
+
+    if (socialMediaLinks && socialMediaLinks.length) {
+        socialMediaLinks.forEach((socialMedia) => {
+            if (socialMedia.code && socialMedia.link) {
+                const logo = getLogo(socialMedia.code);
+                sellerSocialMediaResult.push(
+                    <a href={socialMedia.link} className='platform_logo-wrapper rounded-md px-5 py-2.5 border border-gray-100 flex items-center' target="_blank">
+                        {logo ? <img
+                            alt={socialMedia.code}
+                            // width="auto"
+                            // height={30}
+                            src={logo}
+                            style={{
+                                "height":"20px"
+                            }}
+                        /> : socialMedia.code}
+                    </a>
+                )
+            }
+        })
+    }
+
+    return sellerSocialMediaResult && sellerSocialMediaResult.length ? <>
+        <div class="flex items-start relative self-stretch w-full flex-[0_0_auto]">
+            <div class="flex flex-col items-start gap-[15px] relative flex-1 grow">
+                <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Social Media</div>
+                <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
+                    <div class="flex flex-col items-start gap-[10px]" style={
+                        {
+                            "display": "flex",
+                            "flex-direction": "row",
+                            "align-items": "center"
+                        }
+                    }>
+                        {sellerSocialMediaResult}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </> : '';
+}
+
+export default SellerSocialMedia;

package/src/overwrites/pagebuilder/lib/ContentTypes/Products/products.js

@@ -335,6 +335,19 @@ export const GET_PRODUCTS_BY_URL_KEY = 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/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,9 +193,24 @@ const getConfigPrice = (product, optionCodes, optionSelections) => {
             variants
         });
 
-        value = item
+        const minPrice = product.price_range?.minimum_price.final_price.value;
+        const maxPrice = product.price_range?.maximum_price.final_price.value;
+
+        let val = minPrice;
+        if (minPrice != maxPrice) {
+            val = minPrice + ' - ' + maxPrice;
+        }
+
+        const priceRange = {
+            final_price: {
+                value: val,
+                currency: product.price_range?.minimum_price.final_price.currency
+            }
+        };
+
+        value = optionsSelected && item
             ? item.product.price_range?.maximum_price
-            : product.price_range?.maximum_price;
+            : priceRange;
     }
 
     return value;
@@ -242,7 +271,8 @@ export const useProductFullDetail = props => {
     const {
         addConfigurableProductToCartMutation,
         addSimpleProductToCartMutation,
-        product
+        product,
+        isPreview
     } = props;
 
     const [, { dispatch }] = useEventingContext();
@@ -368,6 +398,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 +590,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,
@@ -621,7 +657,7 @@ export const useProductFullDetail = props => {
         isEverythingOutOfStock,
         outOfStockVariants,
         isAddToCartDisabled:
-            isOutOfStock ||
+            isPreview || isOutOfStock ||
             isEverythingOutOfStock ||
             isMissingOptions ||
             isAddConfigurableLoading ||
@@ -629,6 +665,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
+    };
+};