@riosst100/pwa-marketplace 2.0.9 → 2.1.0

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

@@ -0,0 +1,224 @@
+/**
+ * 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

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

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

@@ -0,0 +1,312 @@
+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
+    };
+};