@riosst100/pwa-marketplace 2.0.7 → 2.0.9

package/src/overwrites/pagebuilder/lib/utils.js

@@ -1,224 +0,0 @@
-/**
- * Retrieve background images from a master format node
- *
- * @param node
- * @returns {{mobileImage: null, desktopImage: null}}
- */
-export function getBackgroundImages(node) {
-    const images = node.getAttribute('data-background-images');
-    const response = {
-        desktopImage: null,
-        mobileImage: null,
-        backgroundSize: node.style.backgroundSize,
-        backgroundPosition: node.style.backgroundPosition,
-        backgroundAttachment: node.style.backgroundAttachment,
-        backgroundRepeat: node.style.backgroundRepeat || 'repeat'
-    };
-
-    if (images) {
-        const imagesStructure = JSON.parse(images.replace(/\\"/g, '"'));
-        if (imagesStructure.desktop_image) {
-            response.desktopImage = imagesStructure.desktop_image;
-        }
-        if (imagesStructure.mobile_image) {
-            response.mobileImage = imagesStructure.mobile_image;
-        }
-    }
-
-    return response;
-}
-
-const alignmentToFlex = {
-    top: 'flex-start',
-    middle: 'center',
-    bottom: 'flex-end'
-};
-
-/**
- * Retrieve vertical alignment from a master format node
- *
- * @param node
- * @returns {{verticalAlignment: null}}
- */
-export function getVerticalAlignment(node) {
-    let verticalAlignment = null;
-    if (node.style.justifyContent) {
-        verticalAlignment = flexToVerticalAlignment(node.style.justifyContent);
-    }
-
-    return {
-        verticalAlignment
-    };
-}
-
-/**
- * Convert vertical alignment values to flex values
- *
- * @param alignment
- * @returns {*}
- */
-export function verticalAlignmentToFlex(alignment) {
-    return alignmentToFlex[alignment];
-}
-
-/**
- * Convert flex to vertical alignment values
- *
- * @param flex
- * @returns {*}
- */
-export function flexToVerticalAlignment(flex) {
-    const flexToAlignment = Object.assign(
-        {},
-        ...Object.entries(alignmentToFlex).map(([a, b]) => ({ [b]: a }))
-    );
-    return flexToAlignment[flex];
-}
-
-/**
- * Retrieve advanced props from content type node
- *
- * @param node
- * @returns {{border: (string|string[]|string), marginRight: (*|string), borderColor: *, paddingBottom: (*|number|string), borderRadius: *, borderWidth: *, paddingRight: (*|number|string), marginBottom: (*|string), paddingTop: (*|string), paddingLeft: (*|string), marginTop: (*|string), marginLeft: (*|string|{get}|number)}}
- */
-export function getAdvanced(node) {
-    return {
-        ...getPadding(node),
-        ...getMargin(node),
-        ...getBorder(node),
-        ...getTextAlign(node),
-        ...getCssClasses(node),
-        ...getIsHidden(node)
-    };
-}
-
-/**
- * Retrieve the padding from a content type node
- *
- * @param node
- * @returns {{paddingBottom: *, paddingRight: *, paddingTop: *, paddingLeft: *}}
- */
-export function getPadding(node) {
-    return {
-        paddingTop: node.style.paddingTop,
-        paddingRight: node.style.paddingRight,
-        paddingBottom: node.style.paddingBottom,
-        paddingLeft: node.style.paddingLeft
-    };
-}
-
-/**
- * Retrieve the margin from a content type node
- *
- * @param node
- * @returns {{marginRight: *, marginBottom: *, marginTop: *, marginLeft: *}}
- */
-export function getMargin(node) {
-    return {
-        marginTop: node.style.marginTop,
-        marginRight: node.style.marginRight,
-        marginBottom: node.style.marginBottom,
-        marginLeft: node.style.marginLeft
-    };
-}
-
-/**
- * Retrieve the border from a content type node
- *
- * @param node
- * @returns {{border: (string|string), borderColor: *, borderRadius: *, borderWidth: *}}
- */
-export function getBorder(node) {
-    return {
-        border: node.style.borderStyle,
-        borderColor: node.style.borderColor,
-        borderWidth: node.style.borderWidth,
-        borderRadius: node.style.borderRadius
-    };
-}
-
-/**
- * Retrieve the text align from a content type node
- *
- * @param node
- * @returns {{textAlign: *}}
- */
-export function getTextAlign(node) {
-    return {
-        textAlign: node.style.textAlign
-    };
-}
-
-/**
- * Retrieve the CSS classes from a content type node
- * @param node
- * @returns {{cssClasses: any}}
- */
-export function getCssClasses(node) {
-    return {
-        cssClasses: node.getAttribute('class')
-            ? node.getAttribute('class').split(' ')
-            : []
-    };
-}
-
-/**
- * Retrieve if CSS display property is set to none from a content type node
- *
- * @param node
- * @returns {{isHidden: boolean}}
- */
-export function getIsHidden(node) {
-    return {
-        isHidden: node.style.display === 'none'
-    };
-}
-
-/**
- * Converts a CSS string style into a JSX object inline style
- *
- * @param {String} style
- * @returns {Object}
- */
-export function cssToJSXStyle(style) {
-    const toCamelCase = str => str.replace(/-(.)/g, (_, p) => p.toUpperCase());
-    const result = {};
-    style.split(';').forEach(el => {
-        const [prop, value] = el.split(':');
-        if (prop) {
-            result[toCamelCase(prop.trim())] = value.trim();
-        }
-    });
-
-    return result;
-}
-
-/**
- * Retrieve media queries from a master format node
- *
- * @param node
- * @param {Array} mediaQueries
- *
- * @returns {{mediaQueries: {media: string, style: string}}}
- */
-export function getMediaQueries(node) {
-    const response = [];
-    const dataset = Object.keys(node.dataset);
-
-    const medias = dataset
-        .filter(key => key.match(/media-/))
-        .map(key => node.dataset[key]);
-
-    const styles = dataset
-        .filter(key => key.match(/mediaStyle/))
-        .map(key => node.dataset[key]);
-
-    medias.forEach((media, i) => {
-        response.push({
-            media,
-            style: cssToJSXStyle(styles[i])
-        });
-    });
-
-    return { mediaQueries: response };
-}

package/src/overwrites/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs.js

@@ -1,100 +0,0 @@
-import { useMemo } from 'react';
-import { useQuery } from '@apollo/client';
-import { useInternalLink } from '@magento/peregrine/lib/hooks/useInternalLink';
-
-import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
-
-import DEFAULT_OPERATIONS from '@magento/peregrine/lib/talons/Breadcrumbs/breadcrumbs.gql';
-
-// Just incase the data is unsorted, lets sort it.
-
-/* CUSTOM: Fix sorting */
-const sortCrumbs = (a, b) => a.category_level - b.category_level;
-
-// Generates the path for the category.
-const getPath = (path, suffix) => {
-    if (path) {
-        return `/${path}${suffix || ''}`;
-    }
-
-    // If there is no path this is just a dead link.
-    return '#';
-};
-
-/**
- * Returns props necessary to render a Breadcrumbs component.
- *
- * @param {object} props
- * @param {object} props.query - the breadcrumb query
- * @param {string} props.categoryId - the id of the category for which to generate breadcrumbs
- * @return {{
- *   currentCategory: string,
- *   currentCategoryPath: string,
- *   isLoading: boolean,
- *   normalizedData: array,
- *   handleClick: function
- * }}
- */
-export const useBreadcrumbs = props => {
-    const { categoryId } = props;
-
-    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
-    const { getBreadcrumbsQuery, getStoreConfigQuery } = operations;
-
-    const { data, loading, error } = useQuery(getBreadcrumbsQuery, {
-        variables: { category_id: categoryId },
-        fetchPolicy: 'cache-and-network',
-        nextFetchPolicy: 'cache-first'
-    });
-
-    const { data: storeConfigData } = useQuery(getStoreConfigQuery, {
-        fetchPolicy: 'cache-and-network'
-    });
-
-    const categoryUrlSuffix = useMemo(() => {
-        if (storeConfigData) {
-            return storeConfigData.storeConfig.category_url_suffix;
-        }
-    }, [storeConfigData]);
-
-    // When we have breadcrumb data sort and normalize it for easy rendering.
-    const normalizedData = useMemo(() => {
-        if (!loading && data && data.categories.items.length) {
-            const breadcrumbData = data.categories.items[0].breadcrumbs;
-
-            return (
-                breadcrumbData &&
-                breadcrumbData
-                    .map(category => ({
-                        category_level: category.category_level,
-                        text: category.category_name,
-                        path: getPath(
-                            category.category_url_path,
-                            categoryUrlSuffix
-                        )
-                    }))
-                    .sort(sortCrumbs)
-            );
-        }
-    }, [categoryUrlSuffix, data, loading]);
-
-    const { setShimmerType } = useInternalLink('category');
-
-    return {
-        currentCategory:
-            (data &&
-                data.categories.items.length &&
-                data.categories.items[0].name) ||
-            '',
-        currentCategoryPath:
-            (data &&
-                data.categories.items.length &&
-                `${data.categories.items[0].url_path}${categoryUrlSuffix ||
-                    ''}`) ||
-            '#',
-        isLoading: loading,
-        hasError: !!error,
-        normalizedData: normalizedData || [],
-        handleClick: setShimmerType
-    };
-};

package/src/overwrites/peregrine/lib/talons/FilterModal/useFilterList.js

@@ -1,62 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useAppContext } from '@magento/peregrine/lib/context/app';
-
-export const useFilterList = props => {
-    const { filterState, items, itemCountToShow } = props;
-
-    const [{ overlay }, { toggleDrawer }] = useAppContext();
-
-    const hasSelected = useMemo(
-        () =>
-            items.some((item, index) => {
-                return (
-                    filterState &&
-                    filterState.has(item) &&
-                    index >= itemCountToShow
-                );
-            }),
-        [filterState, itemCountToShow, items]
-    );
-
-    // const hasSelected2 = useMemo(
-    //     () =>
-    //         items.some((item, index) => {
-    //             return (
-    //                 filterState &&
-    //                 filterState.has(item)
-    //             );
-    //         }),
-    //     [filterState, items]
-    // );
-
-    const [isListExpanded, setExpanded] = useState(hasSelected);
-    const [activeFilter, setActiveFilter] = useState(false);
-    // const [isShowAllOptions, setShowAllOptions] = useState(hasSelected);
-
-    const handleListToggle = useCallback(() => {
-        setExpanded(value => !value);
-    }, [setExpanded]);
-
-    const handleShowMore = useCallback(() => {
-        setActiveFilter(true);
-        toggleDrawer('filterOptionModal.show');
-    }, [setActiveFilter, toggleDrawer]);
-
-    useEffect(() => {
-        if (!overlay) {
-            setActiveFilter(false)
-        }
-    }, [overlay])
-
-    // const handleShowMore = useCallback(() => {
-    //     handleShowAllOptions();
-    // }, [handleShowAllOptions]);
-
-    return {
-        setActiveFilter,
-        activeFilter,
-        handleShowMore,
-        handleListToggle,
-        isListExpanded
-    };
-};

package/src/overwrites/peregrine/lib/talons/FilterSidebar/useFilterSidebar.js

@@ -1,312 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useQuery } from '@apollo/client';
-import { useHistory, useLocation } from 'react-router-dom';
-
-import { useAppContext } from '@magento/peregrine/lib/context/app';
-
-import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
-import { useFilterState } from '@magento/peregrine/lib/talons/FilterModal';
-import {
-    getSearchFromState,
-    getStateFromSearch,
-    sortFiltersArray,
-    stripHtml
-} from '@magento/peregrine/lib/talons/FilterModal/helpers';
-
-import DEFAULT_OPERATIONS from '@magento/peregrine/lib/talons/FilterModal/filterModal.gql';
-
-const DRAWER_NAME = 'filter';
-
-export const useFilterSidebar = props => {
-    const { filters } = props;
-
-    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
-    const { getFilterInputsQuery } = operations;
-
-    const [isApplying, setIsApplying] = useState(false);
-    const [{ drawer }, { toggleDrawer, closeDrawer }] = useAppContext();
-    const [filterState, filterApi] = useFilterState();
-    const prevDrawer = useRef(null);
-    const isOpen = drawer === DRAWER_NAME;
-
-    const history = useHistory();
-    const { pathname, search } = useLocation();
-
-    const { data: introspectionData } = useQuery(getFilterInputsQuery);
-
-    const attributeCodes = useMemo(
-        () => filters.map(({ attribute_code }) => attribute_code),
-        [filters]
-    );
-
-    // Create a set of disabled filters.
-    const DISABLED_FILTERS = useMemo(() => {
-        const disabled = new Set();
-        // Disable category filtering when not on a search page.
-        if (pathname !== '/search.html') {
-            disabled.add('category_id');
-            disabled.add('category_uid');
-        }
-
-        return disabled;
-    }, [pathname]);
-
-    // Get "allowed" filters by intersection of filter attribute codes and
-    // schema input field types. This restricts the displayed filters to those
-    // that the api will understand.
-    const possibleFilters = useMemo(() => {
-        const nextFilters = new Set();
-        const inputFields = introspectionData
-            ? introspectionData.__type.inputFields
-            : [];
-
-        // perform mapping and filtering in the same cycle
-        for (const { name } of inputFields) {
-            const isValid = attributeCodes.includes(name);
-            const isEnabled = !DISABLED_FILTERS.has(name);
-
-            if (isValid && isEnabled) {
-                nextFilters.add(name);
-            }
-        }
-
-        return nextFilters;
-    }, [DISABLED_FILTERS, attributeCodes, introspectionData]);
-
-    const isBooleanFilter = options => {
-        const optionsString = JSON.stringify(options);
-        return (
-            options.length <= 2 &&
-            (optionsString.includes(
-                JSON.stringify({
-                    __typename: 'AggregationOption',
-                    label: '0',
-                    value: '0'
-                })
-            ) ||
-                optionsString.includes(
-                    JSON.stringify({
-                        __typename: 'AggregationOption',
-                        label: '1',
-                        value: '1'
-                    })
-                ))
-        );
-    };
-
-    // iterate over filters once to set up all the collections we need
-    const [
-        filterNames,
-        filterKeys,
-        filterItems,
-        filterFrontendInput
-    ] = useMemo(() => {
-        const names = new Map();
-        const keys = new Set();
-        const frontendInput = new Map();
-        const itemsByGroup = new Map();
-
-        const sortedFilters = sortFiltersArray([...filters]);
-
-        for (const filter of sortedFilters) {
-            const { options, label: name, attribute_code: group } = filter;
-
-            // If this aggregation is not a possible filter, just back out.
-            if (possibleFilters.has(group)) {
-                const items = [];
-
-                // add filter name
-                names.set(group, name);
-
-                // add filter key permutations
-                keys.add(`${group}[filter]`);
-
-                // TODO: Get all frontend input type from gql if other filter input types are needed
-                // See https://github.com/magento-commerce/magento2-pwa/pull/26
-                if (isBooleanFilter(options)) {
-                    frontendInput.set(group, 'boolean');
-                    // add items
-                    items.push({
-                        title: 'No',
-                        value: '0',
-                        label: name + ':' + 'No'
-                    });
-                    items.push({
-                        title: 'Yes',
-                        value: '1',
-                        label: name + ':' + 'Yes'
-                    });
-                } else {
-                    // Add frontend input type
-                    frontendInput.set(group, null);
-                    // add items
-                    for (const { label, value, path } of options) {
-                        items.push({ title: stripHtml(label), value, path });
-                    }
-                }
-                itemsByGroup.set(group, items);
-            }
-        }
-
-        const productTabs = [
-            {
-                'label': 'All Products',
-                'value': 'all',
-                'path': '',
-                'options': [
-                    {'value':'0','label':'No','title':'No'},
-                    {'value':'1','label':'Yes','title':'Yes'}
-                ]
-            },
-            {
-                'label': 'Sale',
-                'value': 'special_price',
-                'path': '',
-                'options': [
-                    {'value':'0','label':'No','title':'No'},
-                    {'value':'1','label':'Yes','title':'Yes'}
-                ]
-            },
-            {
-                'label': 'Preorder',
-                'value': 'lof_preorder',
-                'path': '',
-                'options': [
-                    {'value':'0','label':'No','title':'No'},
-                    {'value':'1','label':'Yes','title':'Yes'}
-                ]
-            },
-            {
-                'label': 'Auction',
-                'value': 'auction',
-                'path': '',
-                'options': [
-                    {'value':'0','label':'No','title':'No'},
-                    {'value':'1','label':'Yes','title':'Yes'}
-                ]
-            }
-        ];
-
-        if (productTabs) {
-            productTabs.map(({ value, options }, index) => {
-                
-
-                const items = [];
-
-                names.set(value, '');
-                frontendInput.set(value, null);
-
-                // add filter key permutations
-                keys.add(`${value}[filter]`);
-
-                // add items
-                for (const { label, value, path } of options) {
-                    items.push({ title: stripHtml(label), value, path });
-                }
-
-                itemsByGroup.set(value, items);
-            })
-        }
-
-        return [names, keys, itemsByGroup, frontendInput];
-    }, [filters, possibleFilters]);
-
-    // on apply, write filter state to location
-    useEffect(() => {
-        if (isApplying) {
-            const nextSearch = getSearchFromState(
-                search,
-                filterKeys,
-                filterState
-            );
-
-            // write filter state to history
-            history.push({ pathname, search: nextSearch });
-
-            // mark the operation as complete
-            setIsApplying(false);
-        }
-    }, [filterKeys, filterState, history, isApplying, pathname, search]);
-
-    const handleOpen = useCallback(() => {
-        toggleDrawer(DRAWER_NAME);
-    }, [toggleDrawer]);
-
-    const handleClose = useCallback(() => {
-        closeDrawer();
-    }, [closeDrawer]);
-
-    const handleApply = useCallback(() => {
-        setIsApplying(true);
-        handleClose();
-    }, [handleClose]);
-
-    const handleReset = useCallback(() => {
-        filterApi.clear();
-        setIsApplying(true);
-    }, [filterApi, setIsApplying]);
-
-    const handleKeyDownActions = useCallback(
-        event => {
-            // do not handle keyboard actions when the modal is closed
-            if (!isOpen) {
-                return;
-            }
-
-            switch (event.keyCode) {
-                // when "Esc" key fired -> close the modal
-                case 27:
-                    handleClose();
-                    break;
-            }
-        },
-        [isOpen, handleClose]
-    );
-
-    useEffect(() => {
-        const justOpened =
-            prevDrawer.current === null && drawer === DRAWER_NAME;
-        const justClosed =
-            prevDrawer.current === DRAWER_NAME && drawer === null;
-
-        // on drawer toggle, read filter state from location
-        if (justOpened || justClosed) {
-            const nextState = getStateFromSearch(
-                search,
-                filterKeys,
-                filterItems
-            );
-
-            filterApi.setItems(nextState);
-        }
-
-        // on drawer close, update the modal visibility state
-        if (justClosed) {
-            handleClose();
-        }
-
-        prevDrawer.current = drawer;
-    }, [drawer, filterApi, filterItems, filterKeys, search, handleClose]);
-
-    useEffect(() => {
-        const nextState = getStateFromSearch(search, filterKeys, filterItems);
-
-        filterApi.setItems(nextState);
-    }, [filterApi, filterItems, filterKeys, search]);
-
-    return {
-        filterApi,
-        filterItems,
-        filterKeys,
-        filterNames,
-        filterFrontendInput,
-        filterState,
-        handleApply,
-        handleClose,
-        handleKeyDownActions,
-        handleOpen,
-        handleReset,
-        isApplying,
-        isOpen
-    };
-};