@riosst100/pwa-marketplace 1.6.9 → 1.7.1

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

@@ -0,0 +1,369 @@
+import React, { useMemo } from 'react';
+import { gql, useQuery } from '@apollo/client';
+import { arrayOf, bool, number, oneOf, shape, string } from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Gallery from '@magento/venia-ui/lib/components/Gallery';
+import Carousel from './Carousel/carousel';
+import defaultClasses from './products.module.css';
+import { ArrowLeft2, ArrowRight2 } from 'iconsax-react';
+import cn from 'classnames';
+import { primary900 } from '@riosst100/pwa-marketplace/src/theme/vars';
+
+/**
+ * Sort products based on the original order
+ *
+ * @param {Array} urlKeys
+ * @param {Array} products
+ * @returns {Array}
+ */
+const restoreSortOrder = (urlKeys, products) => {
+    const productsByOriginalOrder = new Map();
+    products.forEach(product => {
+        productsByOriginalOrder.set(product.url_key, product);
+    });
+    return urlKeys
+        .map(urlKey => productsByOriginalOrder.get(urlKey))
+        .filter(Boolean);
+};
+
+// Custom Arrow
+const CustomArrow = (props) => {
+    const { isNext = true, onClick, className } = props;
+    return (
+        <span
+            className={cn(
+                className,
+                'custom_arrow rounded-full w-10 h-10 p-2.5 bg-white hover_!bg-white z-[1] !border !border-solid !border-gray-100 before_hidden',
+                isNext ? 'right-2 lg_right-4' : 'left-2 lg_left-4',
+            )}
+            onClick={onClick}
+        >
+            {isNext ? (
+                <ArrowRight2 className='' size="20" color={primary900} />
+            ) : (
+                <ArrowLeft2 size="20" color={primary900} />
+            )}
+        </span>
+    )
+}
+
+/**
+ * Page Builder Products component.
+ *
+ * This component is part of the Page Builder / PWA integration. It can be consumed without Page Builder.
+ *
+ * @typedef Products
+ * @kind functional component
+ *
+ * @param {props} props React component props
+ *
+ * @returns {React.Element} A React component that displays a Products based on a number of products
+ */
+const Products = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const {
+        appearance,
+        autoplay,
+        autoplaySpeed,
+        infinite,
+        arrows,
+        dots,
+        draggable = false,
+        carouselMode,
+        centerPadding,
+        pathNames = [],
+        textAlign,
+        border,
+        borderColor,
+        borderWidth,
+        borderRadius,
+        marginTop,
+        marginRight,
+        marginBottom,
+        marginLeft,
+        paddingTop,
+        paddingRight,
+        paddingBottom,
+        paddingLeft,
+        cssClasses = [],
+        slidesToShow = 5,
+        slidesToShowMedium = 3,
+        slidesToShowSmall = 2,
+        slidesToShowSmallCenterMode = 1
+    } = props;
+
+    const dynamicStyles = {
+        textAlign,
+        border,
+        borderColor,
+        borderWidth,
+        borderRadius,
+        marginTop,
+        marginRight,
+        marginBottom,
+        marginLeft,
+        paddingTop,
+        paddingRight,
+        paddingBottom,
+        paddingLeft
+    };
+
+    const { data: storeConfigData } = useQuery(GET_STORE_CONFIG_DATA, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const productUrlSuffix = useMemo(() => {
+        if (storeConfigData) {
+            return storeConfigData.storeConfig.product_url_suffix;
+        }
+    }, [storeConfigData]);
+
+    const urlKeys = pathNames.map(pathName => {
+        const slug = pathName.split('/').pop();
+        return productUrlSuffix ? slug.replace(productUrlSuffix, '') : slug;
+    });
+
+    const { loading, error, data } = useQuery(GET_PRODUCTS_BY_URL_KEY, {
+        variables: { url_keys: urlKeys, pageSize: urlKeys.length },
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    if (loading) return null;
+
+    if (error || data.products.items.length === 0) {
+        return null;
+    }
+
+    const items = restoreSortOrder(urlKeys, data.products.items);
+
+    if (appearance === 'carousel') {
+        //Settings conditions was made due to react-slick issues
+        const carouselCenterMode =
+            carouselMode === 'continuous' && items.length > slidesToShow;
+        const carouselSmallCenterMode =
+            carouselMode === 'continuous' &&
+            items.length > slidesToShowSmallCenterMode;
+        const carouselSettings = {
+            slidesToShow: items.length > 5 ? slidesToShow : items.length,
+            slidesToScroll: 1,//slidesToShow,
+            draggable,
+            nextArrow: <CustomArrow />,
+            prevArrow: <CustomArrow isNext={false} />,
+            autoplay,
+            autoplaySpeed,
+            arrows: items.length > 5 ? arrows : false,
+            dots,
+            centerMode: carouselCenterMode,
+            adaptiveHeight: true,
+            responsive: [
+                // {
+                //     breakpoint: 640,
+                //     settings: {
+                //         slidesToShow: carouselSmallCenterMode
+                //             ? slidesToShowSmallCenterMode
+                //             : slidesToShowSmall,
+                //         slidesToScroll: carouselSmallCenterMode
+                //             ? slidesToShowSmallCenterMode
+                //             : slidesToShowSmall,
+                //         centerMode: carouselSmallCenterMode,
+                //         ...(carouselSmallCenterMode && { centerPadding }),
+                //         ...{
+                //             infinite:
+                //                 items.length > slidesToShowSmall && infinite
+                //         }
+                //     }
+                // },
+                // {
+                //     breakpoint: 960,
+                //     settings: {
+                //         slidesToShow: slidesToShowSmall + 1,
+                //         slidesToScroll: slidesToShowSmall + 1
+                //     }
+                // },
+                {
+                    breakpoint: 1023,
+                    settings: {
+                        slidesToShow: slidesToShowMedium,
+                        slidesToScroll: 1
+                    }
+                },
+                {
+                    breakpoint: 576,
+                    settings: {
+                        slidesToShow: slidesToShowSmall,
+                        slidesToScroll: 1
+                    }
+                }
+            ],
+            ...(carouselCenterMode && { centerPadding }),
+            infinite: items.length > 5 ? infinite : false,
+        };
+
+        const centerModeClass = carouselCenterMode ? classes.centerMode : null;
+        const centerModeSmallClass = carouselSmallCenterMode
+            ? classes.centerModeSmall
+            : null;
+
+        return (
+            <div
+                style={dynamicStyles}
+                className={[
+                    classes.carousel,
+                    ...cssClasses,
+                    centerModeClass,
+                    centerModeSmallClass
+                ].join(' ')}
+            >
+                <Carousel settings={carouselSettings} items={items} />
+            </div>
+        );
+    }
+
+    return (
+        <div
+            style={dynamicStyles}
+            className={[classes.root, ...cssClasses].join(' ')}
+        >
+            <Gallery items={items} classes={{ items: classes.galleryItems }} />
+        </div>
+    );
+};
+
+/**
+ * Props for {@link Products}
+ *
+ * @typedef props
+ *
+ * @property {Object} classes An object containing the class names for the Products
+ * @property {String} classes.root CSS class for products
+ * @property {String} classes.carousel CSS class for products carousel appearance
+ * @property {String} classes.centerMode CSS class for products carousel appearance with center mode
+ * @property {String} classes.centerModeSmall CSS class for products carousel appearance with center mode on small screen
+ * @property {String} classes.galleryItems CSS class to modify child gallery items
+ * @property {String} classes.error CSS class for displaying fetch errors
+ * @property {String} appearance Sets products appearance
+ * @property {Boolean} autoplay Whether the carousel should autoplay
+ * @property {Number} autoplaySpeed The speed at which the autoplay should move the slide on
+ * @property {Boolean} infinite Whether to infinitely scroll the carousel
+ * @property {Boolean} arrows Whether to show arrows on the slide for navigation
+ * @property {Boolean} dots Whether to show navigation dots at the bottom of the carousel
+ * @property {Boolean} draggable Enable scrollable via dragging on desktop
+ * @property {String} carouselMode Carousel mode
+ * @property {String} centerPadding Horizontal padding in centerMode
+ * @property {Array} pathNames List of Url path names to load into product list
+ * @property {String} textAlign Alignment of content within the products list
+ * @property {String} border CSS border property
+ * @property {String} borderColor CSS border color property
+ * @property {String} borderWidth CSS border width property
+ * @property {String} borderRadius CSS border radius property
+ * @property {String} marginTop CSS margin top property
+ * @property {String} marginRight CSS margin right property
+ * @property {String} marginBottom CSS margin bottom property
+ * @property {String} marginLeft CSS margin left property
+ * @property {String} paddingTop CSS padding top property
+ * @property {String} paddingRight CSS padding right property
+ * @property {String} paddingBottom CSS padding bottom property
+ * @property {String} paddingLeft CSS padding left property
+ * @property {Array} cssClasses List of CSS classes to be applied to the component
+ * @property {Number} slidesToShow # of slides to show at a time
+ * @property {Number} slidesToShowMedium # of slides to show at a time on medium sized screens
+ * @property {Number} slidesToShowSmall # of slides to show at a time on small screen
+ * @property {Number} slidesToShowSmallCenterMode # of slides to show at a time on small screen in centerMode
+ */
+Products.propTypes = {
+    classes: shape({
+        root: string,
+        carousel: string,
+        centerMode: string,
+        centerModeSmall: string,
+        galleryItems: string,
+        error: string
+    }),
+    appearance: oneOf(['grid', 'carousel']),
+    autoplay: bool,
+    autoplaySpeed: number,
+    infinite: bool,
+    arrows: bool,
+    dots: bool,
+    draggable: bool,
+    carouselMode: oneOf(['default', 'continuous']),
+    centerPadding: string,
+    pathNames: arrayOf(string),
+    textAlign: string,
+    border: string,
+    borderColor: string,
+    borderWidth: string,
+    borderRadius: string,
+    marginTop: string,
+    marginRight: string,
+    marginBottom: string,
+    marginLeft: string,
+    paddingTop: string,
+    paddingRight: string,
+    paddingBottom: string,
+    paddingLeft: string,
+    cssClasses: arrayOf(string),
+    slidesToShow: number,
+    slidesToShowMedium: number,
+    slidesToShowSmall: number,
+    slidesToShowSmallCenterMode: number
+};
+
+export default Products;
+
+export const GET_PRODUCTS_BY_URL_KEY = gql`
+    query getProductsByUrlKey($url_keys: [String], $pageSize: Int!) {
+        products(filter: { url_key: { in: $url_keys } }, pageSize: $pageSize) {
+            items {
+                id
+                uid
+                name
+                price_range {
+                    maximum_price {
+                        final_price {
+                            currency
+                            value
+                        }
+                        regular_price {
+                            currency
+                            value
+                        }
+                        discount {
+                            amount_off
+                        }
+                    }
+                }
+                sku
+                small_image {
+                    url
+                }
+                stock_status
+                __typename
+                url_key
+            }
+            total_count
+            filters {
+                name
+                filter_items_count
+                request_var
+                filter_items {
+                    label
+                    value_string
+                }
+            }
+        }
+    }
+`;
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query getStoreConfigData {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            product_url_suffix
+        }
+    }
+`;

package/src/overwrites/pagebuilder/lib/ContentTypes/Slider/banner.module.css

@@ -0,0 +1,103 @@
+.root {
+}
+a.link {
+    text-decoration: none;
+}
+.wrapper {
+    background-clip: padding-box;
+    border-radius: inherit;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    overflow: hidden;
+}
+.overlay {
+    padding: 30px;
+    transition: background-color 500ms ease;
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    position: relative;
+}
+
+.videoOverlay {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 0;
+}
+
+.viewportElement {
+    height: 100%;
+    width: 1px;
+    position: absolute;
+    left: var(--leftViewportElement);
+    top: 0;
+    z-index: -100;
+    -webkit-transform: translate3d(0, 0, 0);
+}
+
+.content {
+    min-height: 50px;
+    width: 100%;
+}
+.button {
+    margin: 20px 0 0 0;
+    max-width: 100%;
+    text-align: inherit;
+    transition: opacity 500ms ease;
+    word-break: break-word;
+    width: 100%;
+}
+.root:hover .buttonHover {
+    opacity: 1;
+}
+.buttonHover {
+    composes: button;
+    opacity: 0;
+}
+.posterOverlay {
+    composes: overlay;
+    align-content: center;
+    justify-content: center;
+}
+.posterOverlayHover {
+    composes: posterOverlay;
+    background-color: transparent !important;
+}
+.collageLeftOverlay {
+    composes: overlay;
+    margin-right: auto;
+    max-width: 540px;
+}
+.collageLeftOverlayHover {
+    composes: collageLeftOverlay;
+    background-color: transparent !important;
+}
+.collageCenteredOverlay {
+    composes: overlay;
+    margin-right: auto;
+    margin-left: auto;
+    max-width: 540px;
+}
+.collageCenteredOverlayHover {
+    composes: collageCenteredOverlay;
+    background-color: transparent !important;
+}
+.collageRightOverlay {
+    composes: overlay;
+    margin-left: auto;
+    max-width: 540px;
+}
+.collageRightOverlayHover {
+    composes: collageRightOverlay;
+    background-color: transparent !important;
+}
+
+.root :global [id*='jarallax-container'] video,
+.root :global [id*='jarallax-container'] iframe,
+.root :global [id*='jarallax-container'] img {
+    margin: auto !important;
+    transform: none !important;
+}

package/src/overwrites/pagebuilder/lib/ContentTypes/Slider/configAggregator.js

@@ -0,0 +1,17 @@
+import { getAdvanced, getMediaQueries } from '../../utils';
+
+export default node => {
+    const autoplaySpeed = parseInt(node.getAttribute('data-autoplay-speed'));
+
+    return {
+        minHeight: node.style.minHeight,
+        autoplay: node.getAttribute('data-autoplay') === 'true',
+        fade: node.getAttribute('data-fade') === 'true',
+        infinite: node.getAttribute('data-infinite-loop') === 'true',
+        showArrows: node.getAttribute('data-show-arrows') === 'true',
+        showDots: node.getAttribute('data-show-dots') === 'true',
+        ...(!isNaN(autoplaySpeed) && { autoplaySpeed }),
+        ...getAdvanced(node),
+        ...getMediaQueries(node)
+    };
+};

package/src/overwrites/pagebuilder/lib/ContentTypes/Slider/index.js

@@ -0,0 +1,2 @@
+export { default } from './slider';
+export { default as SliderShimmer } from './slider.shimmer';