@riosst100/pwa-marketplace 2.2.9 → 2.3.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "2.2.9",
+  "version": "2.3.1",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

package/src/componentOverrideMapping.js

@@ -39,6 +39,7 @@ module.exports = componentOverrideMapping = {
     [`@magento/venia-ui/lib/components/ProductSort/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/ProductSort/index.js',
     [`@magento/venia-ui/lib/components/ProductFullDetail/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/ProductFullDetail/index.js',
     [`@magento/venia-ui/lib/components/ProductImageCarousel/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/ProductImageCarousel/index.js',
+    [`@magento/venia-ui/lib/components/Image/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Image/index.js',
     [`@magento/venia-ui/lib/components/QuantityStepper/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/QuantityStepper/index.js',
     // [`@magento/venia-ui/lib/components/RichContent/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/RichContent/index.js',
     [`@magento/venia-ui/lib/components/RadioGroup/radio.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/RadioGroup/radio.js',

package/src/overwrites/peregrine/lib/talons/Header/useStoreSwitcher.js

@@ -156,7 +156,7 @@ export const useStoreSwitcher = (props = {}) => {
                     newPath = routeData.route.relative_url;
                 }
             }
-            return newPath.startsWith('/') ? newPath.substr(1) : newPath;
+            return newPath?.startsWith('/') ? newPath.substr(1) : newPath;
         },
         [pathname, fetchRouteData, internalRoutes]
     );

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

@@ -136,7 +136,7 @@ export const useMagentoRoute = (props = {}) => {
         // REDIRECT
         routeData = {
             isRedirect: true,
-            relativeUrl: relative_url.startsWith('/')
+            relativeUrl: relative_url?.startsWith('/')
                 ? relative_url
                 : '/' + relative_url
         };

package/src/overwrites/venia-ui/lib/components/Gallery/gallery.module.css

@@ -12,7 +12,7 @@
     composes: grid from global;
     composes: mb-6 from global;
     grid-area: items;
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(5, 1fr);
 }
 
 @media only screen and (max-width: 1023px) {

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

@@ -102,7 +102,7 @@ const GalleryItem = props => {
                 data-cy="GalleryItem-root"
                 className={cn(
                     classes.root,
-                    'border border-gray-100 rounded-lg hover_shadow-type-1 bg-white min-h-[388px]'
+                    'border border-gray-100 rounded-lg hover_shadow-type-1 bg-white min-h-[300px]'
                 )}
                 ref={itemRef}
             >
@@ -129,7 +129,7 @@ const GalleryItem = props => {
                         {ratingAverage}
                     </Link>
                 </div>
-                <div className={cn('item-info px-[15px] pt-[15px] pb-[20px]')}>
+                <div className={cn('item-info px-[15px] pb-[20px]')}>
                     <Link
                         onClick={handleLinkClick}
                         to={productLink}
@@ -139,7 +139,7 @@ const GalleryItem = props => {
                         <span>{name}</span>
                     </Link>
                     <div data-cy="GalleryItem-price" className={cn(classes.price, 'mb-2.5 pt-2.5')}>
-                        <p className='font-medium text-colorDefault !mb-1 !leading-[14px]'>
+                        <p className='font-medium !text-[#f76b1c] text-[1.1rem] !mb-1 !leading-[14px]'>
                             <Price
                                 value={priceSource.value}
                                 currencyCode={priceSource.currency}

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

@@ -2,7 +2,7 @@
     composes: content-start from global;
     composes: grid from global;
     /* composes: gap-y-2xs from global; */
-    composes: max-w-[315px] from global;
+    /* composes: max-w-[315px] from global; */
 }
 
 .images {
@@ -14,9 +14,11 @@
 .imageContainer {
     grid-area: main;
     composes: max-h-[215px] from global;
+    /* composes: bg-[#f7f7f8] from global; */
 }
 
 .image {
+    composes: p-[16px] from global;
     composes: block from global;
     composes: h-full from global;
     composes: object-contain from global;

package/src/overwrites/venia-ui/lib/components/Image/image.js

@@ -0,0 +1,168 @@
+import React from 'react';
+import PropTypes, {
+    bool,
+    func,
+    instanceOf,
+    number,
+    oneOfType,
+    shape,
+    string
+} from 'prop-types';
+import { useImage } from '@magento/peregrine/lib/talons/Image/useImage';
+import { DEFAULT_WIDTH_TO_HEIGHT_RATIO } from '@magento/peregrine/lib/util/imageUtils';
+
+import PlaceholderImage from './placeholderImage';
+import ResourceImage from './resourceImage';
+import SimpleImage from './simpleImage';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import defaultClasses from './image.module.css';
+/**
+ * The Image component renders a placeholder until the image is loaded.
+ *
+ * @param {object}   props.classes any classes to apply to this component
+ * @param {bool}     props.displayPlaceholder whether or not to display a placeholder while the image loads or if it errors on load.
+ * @param {number}   props.height the intrinsic height of the image & the height to request for the fallback image for browsers that don't support srcset / sizes.
+ * @param {function} props.onError callback for error loading image
+ * @param {function} props.onLoad callback for when image loads successfully
+ * @param {string}   props.placeholder the placeholder source to display while the image loads or if it errors on load
+ * @param {string}   props.resource the Magento path to the image ex: /v/d/vd12-rn_main_2.jpg
+ * @param {string}   props.src the source of the image, ready to use in an img element
+ * @param {string}   props.type the Magento image type ("image-category" / "image-product"). Used to build the resource URL.
+ * @param {number}   props.width the intrinsic width of the image & the width to request for the fallback image for browsers that don't support srcset / sizes.
+ * @param {number}   props.ratio is the image width to height ratio. Defaults to `DEFAULT_WIDTH_TO_HEIGHT_RATIO` from `util/images.js`.
+ * @param {Map}      props.widths a map of breakpoints to possible widths used to create the img's sizes attribute.
+ */
+const Image = props => {
+    const {
+        alt,
+        classes: propsClasses,
+        displayPlaceholder,
+        height,
+        onError,
+        onLoad,
+        placeholder,
+        resource,
+        src,
+        type,
+        width,
+        widths,
+        ratio,
+        ...rest
+    } = props;
+
+    const talonProps = useImage({
+        onError,
+        onLoad,
+        width,
+        widths,
+        height,
+        ratio
+    });
+
+    const {
+        handleError,
+        handleImageLoad,
+        hasError,
+        isLoaded,
+        resourceWidth: talonResourceWidth,
+        resourceHeight: talonResourceHeight
+    } = talonProps;
+
+    const classes = useStyle(defaultClasses, propsClasses);
+    const containerClass = `${classes.root} ${classes.container}`;
+    const isLoadedClass = isLoaded ? classes.loaded : classes.notLoaded;
+    const imageClass = `${classes.image} ${isLoadedClass}`;
+
+    // If we have a src, use it directly. If not, assume this is a resource image.
+    const actualImage = src ? (
+        <SimpleImage
+            alt={alt}
+            className={imageClass}
+            handleError={handleError}
+            handleLoad={handleImageLoad}
+            height={talonResourceHeight}
+            src={src}
+            width={width}
+            {...rest}
+        />
+    ) : (
+        <ResourceImage
+            alt={alt}
+            className={imageClass}
+            handleError={handleError}
+            handleLoad={handleImageLoad}
+            height={talonResourceHeight}
+            resource={resource}
+            type={type}
+            width={talonResourceWidth}
+            widths={widths}
+            ratio={ratio}
+            {...rest}
+        />
+    );
+
+    return (
+        <div className={containerClass}>
+            <PlaceholderImage
+                alt={alt}
+                classes={classes}
+                displayPlaceholder={displayPlaceholder}
+                height={height}
+                imageHasError={hasError}
+                imageIsLoaded={isLoaded}
+                src={placeholder}
+                width={talonResourceWidth}
+                {...rest}
+            />
+            {actualImage}
+        </div>
+    );
+};
+
+const conditionallyRequiredString = (props, propName, componentName) => {
+    // This component needs one of src or resource to be provided.
+    if (!props.src && !props.resource) {
+        return new Error(
+            `Missing both 'src' and 'resource' props in ${componentName}. ${componentName} needs at least one of these to be provided.`
+        );
+    }
+
+    return PropTypes.checkPropTypes(
+        {
+            resource: string,
+            src: string
+        },
+        props,
+        propName,
+        componentName
+    );
+};
+
+Image.propTypes = {
+    alt: string.isRequired,
+    classes: shape({
+        container: string,
+        loaded: string,
+        notLoaded: string,
+        root: string
+    }),
+    displayPlaceholder: bool,
+    height: oneOfType([number, string]),
+    onError: func,
+    onLoad: func,
+    placeholder: string,
+    resource: conditionallyRequiredString,
+    src: conditionallyRequiredString,
+    type: string,
+    width: oneOfType([number, string]),
+    widths: instanceOf(Map),
+    ratio: number
+};
+
+Image.defaultProps = {
+    displayPlaceholder: true,
+    ratio: DEFAULT_WIDTH_TO_HEIGHT_RATIO
+};
+
+export default Image;

package/src/overwrites/venia-ui/lib/components/Image/image.module.css

@@ -0,0 +1,62 @@
+.root {
+    /*
+     * For customization, we provide an empty root.
+     * These styles will be applied to the image container.
+     */
+}
+
+.container {
+    composes: relative from global;
+}
+
+.image {
+    /*
+     * For customization, we provide an empty image class.
+     * These styles will be applied directly to the image itself.
+     */
+}
+
+.loaded {
+    composes: absolute from global;
+    composes: left-0 from global;
+    composes: top-0 from global;
+
+    /* TODO @TW: review (B6) */
+    /* composes: visible from global; */
+    visibility: visible;
+}
+
+.notLoaded {
+    composes: loaded;
+
+    /* TODO @TW: review (B6) */
+    /* composes: invisible from global; */
+    visibility: hidden;
+}
+
+.placeholder {
+    composes: bg-transparent from global;
+    composes: left-0 from global;
+    composes: relative from global;
+    composes: top-0 from global;
+}
+
+.placeholder_layoutOnly {
+    composes: placeholder;
+
+    composes: bg-transparent from global;
+}
+
+.placeholder_product {
+    composes: bg-transparent from global;
+    composes: left-0 from global;
+    composes: relative from global;
+    composes: top-0 from global;
+    composes: w-[70%] from global;
+}
+
+.placeholder_layoutOnly_product {
+    composes: placeholder;
+
+    composes: bg-transparent from global;
+}

package/src/overwrites/venia-ui/lib/components/Image/index.js

@@ -0,0 +1 @@
+export { default } from './image';

package/src/overwrites/venia-ui/lib/components/Image/placeholderImage.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { bool, number, oneOfType, shape, string } from 'prop-types';
+import { transparentPlaceholder } from '@magento/peregrine/lib/util/images';
+import { usePlaceholderImage } from '@magento/peregrine/lib/talons/Image/usePlaceholderImage';
+
+import SimpleImage from './simpleImage';
+
+/**
+ * A placeholder to use until the actual image is loaded.
+ * This is used both for user experience and layout purposes.
+ * Callers can disable the "user experience" part by setting displayPlaceholder to false.
+ *
+ * @param {string}   props.alt the alt attribute to apply to the image.
+ * @param {object}   props.classes the pre-merged classes to apply to this component.
+ * @param {bool}     props.displayPlaceholder whether or not to display a visual placeholder.
+ * @param {number}   props.height the intrinsic height of the image.
+ * @param {string}   props.imageHasError there was an error loading the actual image.
+ * @param {string}   props.imageIsLoaded the actual image is loaded.
+ * @param {string}   props.src the actual src of the placeholder image.
+ * @param {number}   props.width the intrinsic width of the image.
+ */
+const PlaceholderImage = props => {
+    const {
+        alt,
+        classes,
+        displayPlaceholder,
+        height,
+        imageHasError,
+        imageIsLoaded,
+        src,
+        width,
+        ...rest
+    } = props;
+
+    const talonProps = usePlaceholderImage({
+        displayPlaceholder,
+        imageHasError,
+        imageIsLoaded
+    });
+
+    const { shouldRenderPlaceholder } = talonProps;
+
+    const placeholderClass = shouldRenderPlaceholder
+        ? classes.placeholder
+        : classes.placeholder_layoutOnly;
+
+    const productPlaceholderClass = alt == "image-product" ? "!w-[70%]" : "";
+
+    const placeholderFullClass = `${classes.image} ${placeholderClass} ${productPlaceholderClass}`;
+
+    // Note: Attributes that are allowed to be overridden must appear before the spread of `rest`.
+    return (
+        <SimpleImage
+            loading="eager"
+            aria-hidden="true"
+            height={height}
+            width={width}
+            {...rest}
+            alt={alt}
+            className={placeholderFullClass}
+            src={src}
+        />
+    );
+};
+
+PlaceholderImage.propTypes = {
+    alt: string.isRequired,
+    classes: shape({
+        image: string,
+        placeholder: string,
+        placeholder_layoutOnly: string
+    }).isRequired,
+    displayPlaceholder: bool,
+    height: oneOfType([number, string]),
+    imageHasError: bool,
+    imageIsLoaded: bool,
+    src: string,
+    width: oneOfType([number, string])
+};
+
+PlaceholderImage.defaultProps = {
+    src: transparentPlaceholder
+};
+
+export default PlaceholderImage;

package/src/overwrites/venia-ui/lib/components/Image/resourceImage.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import { func, instanceOf, number, oneOfType, string } from 'prop-types';
+import { useResourceImage } from '@magento/peregrine/lib/talons/Image/useResourceImage';
+import {
+    generateSrcset,
+    generateUrl
+} from '@magento/peregrine/lib/util/imageUtils';
+
+/**
+ * Renders a Magento resource image.
+ *
+ * @param {string}   props.alt the alt attribute to apply to the image.
+ * @param {string}   props.className the class to apply to this image.
+ * @param {Func}     props.handleError the function to call if the image fails to load.
+ * @param {Func}     props.handleLoad the function to call if the image successfully loads.
+ * @param {number}   props.height the height to request for the fallback image for browsers that don't support srcset / sizes.
+ * @param {string}   props.resource the Magento path to the image ex: /v/d/vd12-rn_main_2.jpg
+ * @param {string}   props.type the Magento image type ("image-category" / "image-product"). Used to build the resource URL.
+ * @param {number}   props.width the intrinsic width of the image & the width to request for the fallback image for browsers that don't support srcset / sizes.
+ * @param {Map}      props.widths a map of breakpoints to possible widths used to create the img's sizes attribute.
+ * @param {number}   props.ratio is the image width to height ratio. Defaults to 4/5.
+ */
+const ResourceImage = props => {
+    const {
+        alt,
+        className,
+        handleError,
+        handleLoad,
+        height,
+        resource,
+        type,
+        width,
+        widths,
+        ratio,
+        ...rest
+    } = props;
+
+    const talonProps = useResourceImage({
+        generateSrcset,
+        generateUrl,
+        height,
+        resource,
+        type,
+        width,
+        widths,
+        ratio
+    });
+
+    const { sizes, src, srcSet } = talonProps;
+    const dimensionAttributes = {};
+    if (typeof height !== 'undefined') {
+        dimensionAttributes['--height'] = height + 'px';
+    }
+    if (typeof width !== 'undefined') {
+        dimensionAttributes['--width'] = width + 'px';
+    }
+    // Note: Attributes that are allowed to be overridden must appear before the spread of `rest`.
+    return (
+        <img
+            loading="lazy"
+            style={dimensionAttributes}
+            {...rest}
+            alt={alt}
+            className={className}
+            onError={handleError}
+            onLoad={handleLoad}
+            sizes={sizes}
+            src={src}
+            srcSet={srcSet}
+            width={width}
+        />
+    );
+};
+
+ResourceImage.propTypes = {
+    alt: string.isRequired,
+    className: string,
+    handleError: func,
+    handleLoad: func,
+    resource: string.isRequired,
+    height: oneOfType([number, string]),
+    type: string,
+    width: oneOfType([number, string]),
+    widths: instanceOf(Map)
+};
+
+ResourceImage.defaultProps = {
+    type: 'image-product'
+};
+
+export default ResourceImage;

package/src/overwrites/venia-ui/lib/components/Image/simpleImage.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { func, number, oneOfType, string } from 'prop-types';
+
+/**
+ * Renders an img element directly using the supplied src.
+ *
+ * @param {String}  props.alt - The alt attribute for the img element.
+ * @param {String}  props.className - The class name to apply to the img element.
+ * @param {Func}    props.handleError - The function to call if the image fails to load.
+ * @param {Func}    props.handleLoad - The function to call if the image successfully loads.
+ * @param {Number}  props.height - The height of the img element.
+ * @param {String}  props.src - The src attribute for the img element.
+ * @param {Number}  props.width - The width of the img element.
+ */
+const SimpleImage = props => {
+    const {
+        alt,
+        className,
+        handleError,
+        handleLoad,
+        height,
+        src,
+        width,
+        ...rest
+    } = props;
+    const dimensionAttributes = {};
+    if (typeof height !== 'undefined') {
+        dimensionAttributes['--height'] = height + 'px';
+    }
+    if (typeof width !== 'undefined') {
+        dimensionAttributes['--width'] = width + 'px';
+    }
+    // Note: Attributes that are allowed to be overridden must appear before the spread of `rest`.
+    return (
+        <img
+            loading="lazy"
+            style={dimensionAttributes}
+            {...rest}
+            alt={alt}
+            className={className}
+            height={height}
+            onError={handleError}
+            onLoad={handleLoad}
+            src={src}
+            width={width}
+        />
+    );
+};
+
+SimpleImage.propTypes = {
+    alt: string.isRequired,
+    className: string,
+    handleError: func,
+    handleLoad: func,
+    height: oneOfType([number, string]),
+    src: string.isRequired,
+    width: oneOfType([number, string])
+};
+
+export default SimpleImage;

package/src/overwrites/venia-ui/lib/components/ProductImageCarousel/carousel.js

@@ -58,6 +58,7 @@ const ProductImageCarousel = props => {
                 <Thumbnail
                     key={item.uid}
                     item={item}
+                    alt={altText}
                     itemIndex={index}
                     isActive={activeItemIndex === index}
                     onClickHandler={handleThumbnailClick}

package/src/overwrites/venia-ui/lib/components/ProductImageCarousel/carousel.module.css

@@ -23,21 +23,25 @@
 
 .imageContainer {
     composes: w-full from global;
+    grid-area: 1 / 1 / 2 / 4;
 }
 
 .currentImage {
     composes: block from global;
     composes: h-full from global;
     composes: object-center from global;
-    composes: object-cover from global;
+    composes: object-contain from global;
     composes: w-full from global;
 
     composes: lg_object-top from global;
 }
 
+.carouselContainer {
+    composes: flex items-center justify-center p-4 bg-[#f7f7f8] rounded-md max-h-[660px] from global;
+}
+
 .currentImage_placeholder {
     composes: currentImage;
-
     composes: bg-subtle from global;
 }
 

package/src/overwrites/venia-ui/lib/components/ProductImageCarousel/thumbnail.js

@@ -30,7 +30,8 @@ const Thumbnail = props => {
         isActive,
         item: { file, label },
         onClickHandler,
-        itemIndex
+        itemIndex,
+        alt = ''
     } = props;
 
     const talonProps = useThumbnail({
@@ -50,7 +51,7 @@ const Thumbnail = props => {
 
         return file ? (
             <Image
-                alt={label}
+                alt={alt}
                 classes={{ image: classes.image }}
                 height={DEFAULT_THUMBNAIL_HEIGHT}
                 resource={file}
@@ -58,12 +59,12 @@ const Thumbnail = props => {
             />
         ) : (
             <Image
-                alt={label}
+                alt={alt}
                 classes={{ image: classes.image }}
                 src={transparentPlaceholder}
             />
         );
-    }, [file, isDesktop, label, classes.image]);
+    }, [file, isDesktop, alt, classes.image]);
 
     return (
         <button

package/src/overwrites/venia-ui/lib/components/ProductImageCarousel/thumbnail.module.css

@@ -15,6 +15,7 @@
     composes: lg_h-auto from global;
     composes: lg_w-auto from global;
     composes: hidden from global;
+    composes: bg-[#e6e9ea] from global;
     box-shadow: 0 0 0 1px #E6E9EA;
 }
 
@@ -32,7 +33,7 @@
     composes: lg_block from global;
     composes: lg_h-full from global;
     composes: lg_object-center from global;
-    composes: lg_object-cover from global;
+    composes: lg_object-contain from global;
     composes: rounded-[4px] from global;
     composes: lg_w-full from global;
 }

package/src/talons/Header/useWebsiteSwitcher.js

@@ -156,7 +156,7 @@ export const useWebsiteSwitcher = (props = {}) => {
                     newPath = routeData.route.relative_url;
                 }
             }
-            return newPath.startsWith('/') ? newPath.substr(1) : newPath;
+            return newPath?.startsWith('/') ? newPath.substr(1) : newPath;
         },
         [pathname, fetchRouteData, internalRoutes]
     );

package/src/talons/WebsiteSwitcher/useWebsiteSwitcher.js

@@ -156,7 +156,7 @@ export const useWebsiteSwitcher = (props = {}) => {
                     newPath = routeData.route.relative_url;
                 }
             }
-            return newPath.startsWith('/') ? newPath.substr(1) : newPath;
+            return newPath?.startsWith('/') ? newPath.substr(1) : newPath;
         },
         [pathname, fetchRouteData, internalRoutes]
     );