@riosst100/pwa-marketplace 2.0.7 → 2.0.9

package/src/overwrites/pagebuilder/lib/ContentTypes/Products/Carousel/useCarousel.js

@@ -1,25 +0,0 @@
-import { useQuery } from '@apollo/client';
-
-import { useCustomerWishlistSkus } from '@magento/peregrine/lib/hooks/useCustomerWishlistSkus/useCustomerWishlistSkus';
-
-import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
-import defaultOperations from './carousel.gql';
-
-/**
- * This is a duplicate of @magento/peregrine/lib/talons/Gallery/useGallery.js
- */
-export const useCarousel = (props = {}) => {
-    const operations = mergeOperations(defaultOperations, props.operations);
-
-    useCustomerWishlistSkus();
-
-    const { data: storeConfigData } = useQuery(operations.getStoreConfigQuery, {
-        fetchPolicy: 'cache-and-network'
-    });
-
-    const storeConfig = storeConfigData ? storeConfigData.storeConfig : null;
-
-    return {
-        storeConfig
-    };
-};

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

@@ -1,26 +0,0 @@
-import { getAdvanced } from '../../utils';
-
-export default (node, props) => {
-    const forms = node.querySelectorAll(
-        '.product-item-details > .product-item-name > a.product-item-link'
-    );
-    let carouselConfig = {};
-
-    if (props.appearance === 'carousel') {
-        carouselConfig = {
-            autoplay: node.getAttribute('data-autoplay') === 'true',
-            autoplaySpeed: parseInt(node.getAttribute('data-autoplay-speed')),
-            infinite: node.getAttribute('data-infinite-loop') === 'true',
-            arrows: node.getAttribute('data-show-arrows') === 'true',
-            dots: node.getAttribute('data-show-dots') === 'true',
-            carouselMode: node.getAttribute('data-carousel-mode'),
-            centerPadding: node.getAttribute('data-center-padding')
-        };
-    }
-
-    return {
-        pathNames: [...forms].map(form => form.getAttribute('href')),
-        ...carouselConfig,
-        ...getAdvanced(node)
-    };
-};

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

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

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

@@ -1,369 +0,0 @@
-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

@@ -1,103 +0,0 @@
-.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

@@ -1,17 +0,0 @@
-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

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