@riosst100/pwa-marketplace 2.0.9 → 2.1.1

package/src/talons/CollectibleGameSets/useCollectibleGameSets.js

@@ -0,0 +1,134 @@
+import { useQuery } from '@apollo/client';
+import { useEffect, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useAppContext } from '@magento/peregrine/lib/context/app';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './collectibleGameSets.gql';
+
+export const useCollectibleGameSets = props => {
+
+    const { searchQuery, setActive, currentSort, shopby } = props
+
+    const { value: sortby } = currentSort
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, null);
+    const { getStoreConfigData, getCollectibleGameQuery } = operations;
+    const { pathname } = useLocation();
+    const [
+        ,
+        {
+            actions: { setPageLoading }
+        }
+    ] = useAppContext();
+
+    const { data: storeConfigData } = useQuery(getStoreConfigData, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const pathnameArr = pathname.split('/');
+
+    const categoryUrlKey = pathnameArr[pathnameArr.length - 1].replace('.html','');
+    const productType = shopby;
+    
+    const categoryUrlSuffix = storeConfigData?.storeConfig?.category_url_suffix;
+
+    const { error, loading, data } = useQuery(getCollectibleGameQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
+        skip: !storeConfigData,
+        variables: {
+            categoryUrlKey: categoryUrlKey,
+            productType: productType
+        }
+    });
+
+    const isBackgroundLoading = !!data && loading;
+
+    const collectibleGameSets = useMemo(() => {
+        if (!data) {
+            return null;
+        }
+        
+        const collectibleGameSets = data.collectibleGameSets;
+        if (!collectibleGameSets) {
+            return null;
+        }
+
+        const sortbyData = [];
+        if (sortby != 'all') {
+            collectibleGameSets.map((setRelease, index) => {
+                const { release_type, sets } = setRelease;
+                if (sets.length) {
+                    sets.map((set, index) => {
+                        const { release_year } = set;
+                        if (release_year) {
+                            // groupingSetsByYear.splice(release_year, 0, set);
+                            const result = sortbyData.find(item => item.release_type === release_year);
+
+                            // groupingSetsByYear[release_year] = set;
+                            if (result) {
+                                result.sets.push(set)
+                            } else {
+                                if (sortby == "date" || sortby == "newest" && sortbyData.length < 2) {
+                                    sortbyData.push({
+                                        'release_type': release_year,
+                                        'sets': [set]
+                                    })
+                                }
+                            }
+                        }
+                    })
+                }
+            })
+        }
+
+        return sortby != "all" ? sortbyData && sortbyData.length ? sortbyData.sort((a, b) => b.release_type.toLowerCase().localeCompare(a.release_type.toLowerCase())) : sortbyData : collectibleGameSets.slice().sort((a, b) => a.release_type.toLowerCase().localeCompare(b.release_type.toLowerCase()));
+    }, [data, sortby]);
+
+    const availableGroups = collectibleGameSets && collectibleGameSets.length ? collectibleGameSets.map(({ release_type }) => release_type) : [];
+
+    const filteredCollectibleGameSets = useMemo(() => {
+        if (!collectibleGameSets) {
+            return null;
+        }
+
+        const filteredSets = [];
+
+        if (searchQuery) {
+
+            setActive('all')
+
+            collectibleGameSets.map(({ release_type, sets }, index) => {
+                const newSets = sets.filter(function(set) {
+                    return set.set_name.search(new RegExp(searchQuery, "i")) != -1 || set.set_abbreviation.search(new RegExp(searchQuery, "i")) != -1 || release_type.search(new RegExp(searchQuery, "i")) != -1;
+                });
+
+                if (newSets && newSets.length) {
+                    filteredSets.push({
+                        'release_type': release_type,
+                        'sets': newSets
+                    })
+                }
+            })
+        }
+
+        return searchQuery ? filteredSets : collectibleGameSets;
+    }, [collectibleGameSets, searchQuery, sortby]);
+
+    useEffect(() => {
+        setPageLoading(isBackgroundLoading);
+    }, [isBackgroundLoading, setPageLoading]);
+
+    return {
+        error,
+        loading,
+        collectibleGameSets,
+        filteredCollectibleGameSets,
+        categoryUrlSuffix,
+        categoryUrlKey,
+        productType,
+        availableGroups
+    };
+};

package/src/talons/CustomFilters/customFilters.gql.js

@@ -0,0 +1,45 @@
+import { gql } from '@apollo/client';
+
+export const GET_CUSTOM_FILTERS = gql`
+    query GetCustomFilters($filters: ProductAttributeFilterInput!) {
+        customSubFilters(filters: $filters) {
+            label
+            count
+            attribute_code
+            options {
+                label
+                value
+            }
+            position
+        }
+    }
+`;
+
+export const GET_FILTER_INPUTS = gql`
+    query GetFilterInputsForCategory {
+        __type(name: "ProductAttributeFilterInput") {
+            inputFields {
+                name
+                type {
+                    name
+                }
+            }
+        }
+    }
+`;
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query GetStoreConfigForBreadcrumbs {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            category_url_suffix
+        }
+    }
+`;
+
+export default {
+    getFilterInputsQuery: GET_FILTER_INPUTS,
+    getCustomFilters: GET_CUSTOM_FILTERS,
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
+};

package/src/talons/CustomFilters/useCustomFilters.js

@@ -0,0 +1,258 @@
+import { useLazyQuery, useQuery } from '@apollo/client';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+
+import DEFAULT_OPERATIONS from './customFilters.gql';
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+
+
+import { useFilterState } from '@magento/peregrine/lib/talons/FilterModal';
+import {
+    getFiltersFromSearch,
+    getFilterInput,
+    getSearchFromState,
+    getStateFromSearch,
+    sortFiltersArray,
+    stripHtml
+} from '@magento/peregrine/lib/talons/FilterModal/helpers';
+
+export const useCustomFilters = props => {
+    const { filters, category } = props;
+
+    const [isApplying, setIsApplying] = useState(false);
+    const [filterState, filterApi] = useFilterState();
+
+    const attributeCodes = useMemo(
+        () => filters.map(({ attribute_code }) => attribute_code),
+        [filters]
+    );
+
+    const history = useHistory();
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS);
+    const { getCustomFilters, getFilterInputsQuery, getStoreConfigQuery } = operations;
+
+    const { data: storeConfigData } = useQuery(getStoreConfigQuery, {
+        fetchPolicy: 'cache-and-network'
+    });
+
+    const [runQuery, queryResponse] = useLazyQuery(getCustomFilters, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const {
+        called: called,
+        loading: customFiltersLoading,
+        error,
+        data
+    } = queryResponse;
+    
+    const { pathname, search } = useLocation();
+
+    const {
+        called: introspectionCalled,
+        data: introspectionData,
+        loading: introspectionLoading
+    } = useQuery(getFilterInputsQuery);
+
+    const filterTypeMap = useMemo(() => {
+        const typeMap = new Map();
+        if (introspectionData) {
+            introspectionData.__type.inputFields.forEach(({ name, type }) => {
+                typeMap.set(name, type.name);
+            });
+        }
+        return typeMap;
+    }, [introspectionData]);
+
+    console.log(category)
+
+    useEffect(() => {
+
+        if (!filterTypeMap.size) {
+            return;
+        }
+
+        const filters = getFiltersFromSearch(search);
+
+        // Construct the filter arg object.
+        const newFilters = {};
+        filters.forEach((values, key) => {
+            newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
+        });
+
+        // Use the category uid for the current category page regardless of the
+        // applied filters. Follow-up in PWA-404.
+        // newFilters['category_uid'] = { eq: id };
+
+        runQuery({
+            variables: {
+                filters: newFilters
+            }
+        });
+    }, [
+        runQuery,
+        filterTypeMap,
+        search,
+        category
+    ]);
+
+    const customFiltersData = customFiltersLoading && !data ? null : (data ? data.customSubFilters : null);
+
+    const categoryUrlSuffix = useMemo(() => {
+        if (storeConfigData) {
+            return storeConfigData.storeConfig.category_url_suffix;
+        }
+    }, [storeConfigData]);
+
+    // 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]);
+
+    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'
+                    })
+                ))
+        );
+    };
+
+    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);
+            }
+        }
+
+        return [names, keys, itemsByGroup, frontendInput];
+    }, [filters, possibleFilters]);
+
+    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 handleApply = useCallback(() => {
+        setIsApplying(true);
+    }, []);
+
+    const handleReset = useCallback(() => {
+        filterApi.clear();
+        setIsApplying(true);
+    }, [filterApi, setIsApplying]);
+
+    return {
+        customFiltersData: customFiltersData || [],
+        categoryUrlSuffix,
+        search,
+        pathname,
+        filterApi,
+        // filterItems,
+        // filterKeys,
+        // filterNames,
+        // filterFrontendInput,
+        filterState,
+        handleApply,
+        handleReset
+    };
+};

package/src/talons/FilterOption/useFilterOptionModal.js

@@ -0,0 +1,11 @@
+import { useAppContext } from '@magento/peregrine/lib/context/app';
+
+export const useFilterOptionModal = () => {
+    const [{ drawer }, { closeDrawer }] = useAppContext();
+    const isOpen = drawer === 'filterOptionModal.show';
+
+    return {
+        handleClose: closeDrawer,
+        isOpen
+    };
+};

package/src/talons/FilterOptionModal/useFilterOptionModal.js

@@ -0,0 +1,11 @@
+import { useAppContext } from '@magento/peregrine/lib/context/app';
+
+export const useFilterOptionModal = () => {
+    const [{ drawer }, { closeDrawer }] = useAppContext();
+    const isOpen = drawer === 'filterOptionModal.show';
+
+    return {
+        handleClose: closeDrawer,
+        isOpen
+    };
+};

package/src/talons/FilterTop/customFilters.gql.js

@@ -0,0 +1,45 @@
+import { gql } from '@apollo/client';
+
+export const GET_CUSTOM_FILTERS = gql`
+    query GetCustomFilters($filters: ProductAttributeFilterInput!) {
+        customSubFilters(filters: $filters) {
+            label
+            count
+            attribute_code
+            options {
+                label
+                value
+            }
+            position
+        }
+    }
+`;
+
+export const GET_FILTER_INPUTS = gql`
+    query GetFilterInputsForCategory {
+        __type(name: "ProductAttributeFilterInput") {
+            inputFields {
+                name
+                type {
+                    name
+                }
+            }
+        }
+    }
+`;
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query GetStoreConfigForBreadcrumbs {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            category_url_suffix
+        }
+    }
+`;
+
+export default {
+    getFilterInputsQuery: GET_FILTER_INPUTS,
+    getCustomFilters: GET_CUSTOM_FILTERS,
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
+};

package/src/talons/FilterTop/filterTop.gql.js

@@ -0,0 +1,45 @@
+import { gql } from '@apollo/client';
+
+export const GET_CUSTOM_FILTERS = gql`
+    query GetCustomFilters($search: String, $filterBy: String, $shopby: String, $category: String!, $filters: ProductAttributeFilterInput!) {
+        customSubFilters(search: $search, filterBy: $filterBy, shopby: $shopby, category: $category, filters: $filters) {
+            label
+            count
+            attribute_code
+            options {
+                label
+                value
+            }
+            position
+        }
+    }
+`;
+
+export const GET_FILTER_INPUTS = gql`
+    query GetFilterInputsForCategory {
+        __type(name: "ProductAttributeFilterInput") {
+            inputFields {
+                name
+                type {
+                    name
+                }
+            }
+        }
+    }
+`;
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query GetStoreConfigForBreadcrumbs {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            category_url_suffix
+        }
+    }
+`;
+
+export default {
+    getFilterInputsQuery: GET_FILTER_INPUTS,
+    getCustomFilters: GET_CUSTOM_FILTERS,
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
+};

package/src/talons/FilterTop/index.js

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