@riosst100/pwa-marketplace 2.3.3 → 2.3.5

package/src/components/ShopBySets/shopBySets.js

@@ -168,8 +168,8 @@ const ShopBySets = props => {
         // alpha = availableGroups;
     }
 
-    console.log('==productType')
-    console.log(productType)
+    // console.log('==productType')
+    // console.log(productType)
 
     let title = "A2ll Sets";
     if (productType == "expansion_sets") {

package/src/overwrites/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js

@@ -2,9 +2,9 @@ import { gql } from '@apollo/client';
 
 export const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
     query getProductFiltersByCategory(
-        $categoryIdFilter: FilterEqualTypeInput!
+        $filters: ProductAttributeFilterInput!
     ) {
-        products(filter: { category_uid: $categoryIdFilter }) {
+        products(filter: $filters) {
             aggregations {
                 label
                 count
@@ -89,10 +89,33 @@ export const GET_STORE_CONFIG_DATA = gql`
     }
 `;
 
+export const GET_FILTER_INPUTS = gql`
+    query GetFilterInputsForCategory {
+        __type(name: "ProductAttributeFilterInput") {
+            inputFields {
+                name
+                type {
+                    name
+                }
+            }
+        }
+    }
+`;
+
+export const GET_MASTER_ATTRIBUTES = gql`
+    query GetMasterAttributes {
+        masterAttributes {
+            attribute_code
+        }
+    }
+`;
+
 
 export default {
     getCategoryContentQuery: GET_CATEGORY_CONTENT,
     getProductFiltersByCategoryQuery: GET_PRODUCT_FILTERS_BY_CATEGORY,
     getCategoryAvailableSortMethodsQuery: GET_CATEGORY_AVAILABLE_SORT_METHODS,
-    getStoreConfigQuery: GET_STORE_CONFIG_DATA
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA,
+    getFilterInputsQuery: GET_FILTER_INPUTS,
+    getMasterAttributesQuery: GET_MASTER_ATTRIBUTES
 };

package/src/overwrites/peregrine/lib/talons/RootComponents/Category/useCategory.js

@@ -107,9 +107,9 @@ export const useCategory = props => {
         loading: introspectionLoading
     } = useQuery(getFilterInputsQuery);
 
-    console.log(introspectionCalled)
-    console.log(introspectionLoading)
-    console.log(introspectionData)
+    // console.log(introspectionCalled)
+    // console.log(introspectionLoading)
+    // console.log(introspectionData)
 
     // Create a type map we can reference later to ensure we pass valid args
     // to the graphql query.

package/src/overwrites/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js

@@ -3,8 +3,12 @@ import { useLazyQuery, useQuery } from '@apollo/client';
 
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
-
+import { useLocation } from 'react-router-dom';
 import DEFAULT_OPERATIONS from './categoryContent.gql';
+import {
+    getFiltersFromSearch,
+    getFilterInput
+} from '@magento/peregrine/lib/talons/FilterModal/helpers';
 
 /**
  * Returns props necessary to render the categoryContent component.
@@ -27,7 +31,9 @@ export const useCategoryContent = props => {
         getCategoryContentQuery,
         getProductFiltersByCategoryQuery,
         getCategoryAvailableSortMethodsQuery,
-        getStoreConfigQuery
+        getStoreConfigQuery,
+        getFilterInputsQuery,
+        getMasterAttributesQuery
     } = operations;
 
     const placeholderItems = Array.from({ length: pageSize }).fill(null);
@@ -72,18 +78,75 @@ export const useCategoryContent = props => {
     );
 
     const [, { dispatch }] = useEventingContext();
+    const { 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]);
+
+    // MASTER ATTRIBUTES
+    const {
+        called: masterAttributesCalled,
+        data: masterAttributesData,
+        loading: masterAttributesLoading
+    } = useQuery(getMasterAttributesQuery,
+    {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const masterAttributes = useMemo(() => {
+        const masterAttributes = [];
+        
+        if (masterAttributesData) {
+            masterAttributesData.masterAttributes.forEach(({ attribute_code }) => {
+                masterAttributes.push(attribute_code);
+            });
+        }
+
+        return masterAttributes;
+    }, [masterAttributesData]);
+    
 
     useEffect(() => {
         if (categoryId) {
+
+            // categoryIdFilter: {
+            //     eq: categoryId
+            // }
+            if (!filterTypeMap.size) {
+                return;
+            }
+    
+            const filters = getFiltersFromSearch(search);
+    
+            // Construct the filter arg object.
+            const newFilters = {};
+            filters.forEach((values, key) => {
+                if (masterAttributes.includes(key)) {
+                    newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
+                }
+            });
+
             getFilters({
                 variables: {
-                    categoryIdFilter: {
-                        eq: categoryId
-                    }
+                    filters: newFilters
                 }
             });
         }
-    }, [categoryId, getFilters]);
+    }, [categoryId, getFilters, filterTypeMap, search, masterAttributes]);
 
     useEffect(() => {
         if (categoryId) {
@@ -97,6 +160,9 @@ export const useCategoryContent = props => {
         }
     }, [categoryId, getSortMethods]);
 
+    // console.log('filterData')
+    // console.log(filterData)
+
     const rawFilters = filterData ? filterData.products.aggregations : null;
     const items = data ? data.products.items : placeholderItems;
     const category =
@@ -110,8 +176,14 @@ export const useCategoryContent = props => {
 
     const filters = [];
 
+    // console.log('rawFilters')
+    // console.log(rawFilters)
+
     rawFilters && rawFilters.map((filter, index) => {
 
+    //     console.log('filter')
+    // console.log(filter)
+
         const filterOptions = [];
         let label = filter.label;
         if (filter.attribute_code == "category_uid") {

package/src/overwrites/venia-ui/lib/RootComponents/Category/categoryContent.js

@@ -163,6 +163,12 @@ const CategoryContent = props => {
         <FilterModal filters={filters} />
     ) : null;
 
+    // console.log('filters')
+    // console.log(filters)
+
+    // console.log('shouldShowFilterButtons')
+    // console.log(shouldShowFilterButtons)
+
     const sidebar = shouldShowFilterButtons ? (
         <FilterSidebar hideFilters={category && category.hide_filters ? true : false} children={children} filters={filters} allowedFilters={category ? category.allowed_filters : []} />
     ) : shouldShowFilterShimmer ? (

package/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.js

@@ -33,6 +33,12 @@ const FilterSidebar = props => {
         handleReset
     } = talonProps;
 
+    // console.log('RIO')
+    // console.log('filters')
+    // console.log(filters)
+    // console.log('filterCountToOpen'+filterCountToOpen)
+    // console.log('hideFilters'+hideFilters)
+
     const filterRef = useRef();
     const classes = useStyle(defaultClasses, props.classes);
 
@@ -80,9 +86,9 @@ const FilterSidebar = props => {
 
     const allowedFiltersArr = [];
 
-    // allowedFilters?.length && allowedFilters.map((val, index) => {
-    //     allowedFiltersArr.push(val.code);
-    // });
+    allowedFilters?.length && allowedFilters.map((val, index) => {
+        allowedFiltersArr.push(val.code);
+    });
 
     const filtersList = useMemo(
         () =>
@@ -92,24 +98,26 @@ const FilterSidebar = props => {
                 const frontendInput = filterFrontendInput.get(group);
 
                 const hideFilters = ['trains','trains_locomotives','trains_supplies_type','lof_preorder','auction','special_price','sc_baseball_inserts','sc_baseball_parallel','sale','sc_set_type','sc_brands'];
-                if (!hideFilters.includes(group) && groupName) {
+                if (!allowedFiltersArr?.length || filterState.size && allowedFiltersArr.length || !filterState.size && allowedFiltersArr.length && allowedFiltersArr.includes(group)) {
+                    if (!hideFilters.includes(group) && groupName) {
                     
-                // if (!allowedFiltersArr?.length && group != "category_uid" || allowedFiltersArr?.length && allowedFiltersArr.includes(group)) {
-
-
-                    return (
-                        <FilterBlock
-                            key={group}
-                            filterApi={filterApi}
-                            filterState={blockState}
-                            filterFrontendInput={frontendInput}
-                            group={group}
-                            items={items}
-                            name={groupName}
-                            onApply={group == "category_uid" ? handleCategoryApplyFilter : handleApplyFilter}
-                            initialOpen={true}
-                        />
-                    );
+                    // if (!allowedFiltersArr?.length && group != "category_uid" || allowedFiltersArr?.length && allowedFiltersArr.includes(group)) {
+
+
+                        return (
+                            <FilterBlock
+                                key={group}
+                                filterApi={filterApi}
+                                filterState={blockState}
+                                filterFrontendInput={frontendInput}
+                                group={group}
+                                items={items}
+                                name={groupName}
+                                onApply={group == "category_uid" ? handleCategoryApplyFilter : handleApplyFilter}
+                                initialOpen={true}
+                            />
+                        );
+                    }
                 }
             }),
         [

package/src/talons/CollectibleGameSets/useCollectibleGameSets.js

@@ -91,8 +91,8 @@ export const useCollectibleGameSets = props => {
     // const availableReleaseYears = collectibleGameSets && collectibleGameSets.length ? collectibleGameSets.map(({ data }) => data.release_year) : [];
     const availableReleaseYears = [];
 
-    console.log('collectibleGameSets')
-    console.log(collectibleGameSets)
+    // console.log('collectibleGameSets')
+    // console.log(collectibleGameSets)
 
     const filteredCollectibleGameSets = useMemo(() => {
         if (!collectibleGameSets) {

package/src/talons/ProductContent/index.js

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

package/src/talons/ProductContent/productContent.gql.js

@@ -0,0 +1,98 @@
+import { gql } from '@apollo/client';
+
+export const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
+    query getProductFiltersByCategory(
+        $categoryIdFilter: FilterEqualTypeInput!
+    ) {
+        products(filter: { category_uid: $categoryIdFilter }) {
+            aggregations {
+                label
+                count
+                attribute_code
+                options {
+                    label
+                    value
+                }
+                position
+            }
+        }
+    }
+`;
+
+export const GET_CATEGORY_CONTENT = gql`
+    query getCategoryData($id: String!) {
+        categories(filters: { category_uid: { in: [$id] } }) {
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            items {
+                uid
+                name
+                description
+                url_key
+                url_path
+                hide_filters
+                allowed_filters {
+                    code
+                }
+                custom_subcategory {
+                    name
+                    path
+                }
+                attributes_block {
+                    label
+                    code
+                    items {
+                      label
+                      value
+                    }
+                }
+                parent {
+                    uid
+                    name
+                    position
+                    url_path
+                    # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                }
+                children {
+                    uid
+                    name
+                    position
+                    url_path
+                    # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                }
+            }
+        }
+    }
+`;
+
+export const GET_CATEGORY_AVAILABLE_SORT_METHODS = gql`
+    query getCategoryAvailableSortMethods(
+        $categoryIdFilter: FilterEqualTypeInput!
+    ) {
+        products(filter: { category_uid: $categoryIdFilter }) {
+            sort_fields {
+                options {
+                    label
+                    value
+                }
+            }
+        }
+    }
+`;
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query GetStoreConfigForBreadcrumbs {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            custommarketplace_plp_filters_virtualcategory
+        }
+    }
+`;
+
+
+export default {
+    getCategoryContentQuery: GET_CATEGORY_CONTENT,
+    getProductFiltersByCategoryQuery: GET_PRODUCT_FILTERS_BY_CATEGORY,
+    getCategoryAvailableSortMethodsQuery: GET_CATEGORY_AVAILABLE_SORT_METHODS,
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
+};

package/src/talons/ProductContent/useProductContent.js

@@ -0,0 +1,192 @@
+import { useEffect, useMemo } from 'react';
+import { useLazyQuery, useQuery } from '@apollo/client';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
+
+import DEFAULT_OPERATIONS from './productContent.gql';
+
+/**
+ * Returns props necessary to render the categoryContent component.
+ *
+ * @param {object} props.data - The results of a getCategory GraphQL query.
+ *
+ * @returns {object} result
+ * @returns {string} result.categoryDescription - This category's description.
+ * @returns {string} result.categoryName - This category's name.
+ * @returns {object} result.filters - The filters object.
+ * @returns {object} result.items - The items in this category.
+ * @returns {number} result.totalPagesFromData - The total amount of pages for the query.
+ */
+export const useProductContent = props => {
+    const { categoryId, data, pageSize = 6 } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+
+    const {
+        getCategoryContentQuery,
+        getProductFiltersByCategoryQuery,
+        getCategoryAvailableSortMethodsQuery,
+        getStoreConfigQuery
+    } = operations;
+
+    const placeholderItems = Array.from({ length: pageSize }).fill(null);
+    
+    const { data: storeConfigData } = useQuery(getStoreConfigQuery, {
+        fetchPolicy: 'cache-and-network'
+    });
+
+    const virtualCategoryFilters = useMemo(() => {
+        if (storeConfigData) {
+            const data = storeConfigData.storeConfig.custommarketplace_plp_filters_virtualcategory;
+            return data ? data.split(',') : [];
+        }
+    }, [storeConfigData]);
+
+    const [getFilters, { data: filterData }] = useLazyQuery(
+        getProductFiltersByCategoryQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first'
+        }
+    );
+
+    const [getSortMethods, { data: sortData }] = useLazyQuery(
+        getCategoryAvailableSortMethodsQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first'
+        }
+    );
+
+    const { data: categoryData, loading: categoryLoading } = useQuery(
+        getCategoryContentQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first',
+            skip: !categoryId,
+            variables: {
+                id: categoryId
+            }
+        }
+    );
+
+    const [, { dispatch }] = useEventingContext();
+
+    useEffect(() => {
+        if (categoryId) {
+            getFilters({
+                variables: {
+                    categoryIdFilter: {
+                        eq: categoryId
+                    }
+                }
+            });
+        }
+    }, [categoryId, getFilters]);
+
+    useEffect(() => {
+        if (categoryId) {
+            getSortMethods({
+                variables: {
+                    categoryIdFilter: {
+                        in: categoryId
+                    }
+                }
+            });
+        }
+    }, [categoryId, getSortMethods]);
+
+    const rawFilters = filterData ? filterData.products.aggregations : null;
+    const items = data ? data.products.items : placeholderItems;
+    const category =
+        categoryData && categoryData.categories.items.length
+            ? categoryData.categories.items[0]
+            : null;
+    const children =
+        categoryData && categoryData.categories.items.length
+            ? categoryData.categories.items[0].children
+            : null;
+
+    const filters = [];
+
+    rawFilters && rawFilters.map((filter, index) => {
+
+        const filterOptions = [];
+        let label = filter.label;
+        if (filter.attribute_code == "category_uid") {
+            children && children.map((category, index) => {
+                filterOptions.push({
+                    'label': category.name,
+                    'value': category.uid,
+                    'path': category.url_path
+                });
+            });
+
+            label = category ? category.name : label;
+        }
+
+        const newFilter = {
+            attribute_code: filter.attribute_code,
+            count: filter.count,
+            label: label,
+            position: filter.position,
+            options: filterOptions.length ? filterOptions : filter.options
+        };
+
+        filters.push(newFilter);
+    });
+
+    const attributesBlock = categoryData && categoryData.categories.items.length
+    ? categoryData.categories.items[0].attributes_block
+    : null;
+    const parent =
+    categoryData && categoryData.categories.items.length
+        ? categoryData.categories.items[0].parent
+        : null;
+    const totalPagesFromData = data
+        ? data.products.page_info.total_pages
+        : null;
+    const totalCount = data ? data.products.total_count : null;
+    
+    const categoryName =
+        categoryData && categoryData.categories.items.length
+            ? categoryData.categories.items[0].name
+            : null;
+    const categoryDescription =
+        categoryData && categoryData.categories.items.length
+            ? categoryData.categories.items[0].description
+            : null;
+    const availableSortMethods = sortData
+        ? sortData.products.sort_fields.options
+        : null;
+
+    useEffect(() => {
+        if (!categoryLoading && categoryData.categories.items.length > 0) {
+            dispatch({
+                type: 'CATEGORY_PAGE_VIEW',
+                payload: {
+                    id: categoryData.categories.items[0].uid,
+                    name: categoryData.categories.items[0].name,
+                    url_key: categoryData.categories.items[0].url_key,
+                    url_path: categoryData.categories.items[0].url_path
+                }
+            });
+        }
+    }, [categoryData, dispatch, categoryLoading]);
+
+    return {
+        availableSortMethods,
+        categoryName,
+        categoryDescription,
+        filters,
+        items,
+        totalCount,
+        totalPagesFromData,
+        children,
+        parent,
+        attributesBlock,
+        category,
+        virtualCategoryFilters
+    };
+};

package/src/talons/SellerProducts/categoryFragments.gql.js

@@ -0,0 +1,103 @@
+import { gql } from '@apollo/client';
+
+export const CategoryFragment = gql`
+    # eslint-disable-next-line @graphql-eslint/require-id-when-available
+    fragment CategoryFragment on CategoryTree {
+        uid
+        meta_title
+        meta_keywords
+        meta_description
+    }
+`;
+
+export const ProductsFragment = gql`
+    fragment ProductsFragment on Products {
+        items {
+            id
+            uid
+            name
+            preorder {
+                is_preorder
+                preorder_notes
+                preorder_availability
+            }
+            auction_data {
+                is_auction
+            }
+            seller {
+                name
+            }
+            custom_attributes {
+                selected_attribute_options {
+                    attribute_option {
+                        uid
+                        label
+                        is_default
+                    }
+                }
+                entered_attribute_value {
+                    value
+                }
+                attribute_metadata {
+                    uid
+                    code
+                    label
+                    attribute_labels {
+                        store_code
+                        label
+                    }
+                    data_type
+                    is_system
+                    entity_type
+                    ui_input {
+                        ui_input_type
+                        is_html_allowed
+                    }
+                    ... on ProductAttributeMetadata {
+                        used_in_components
+                    }
+                }
+            }
+            price_range {
+                maximum_price {
+                    final_price {
+                        currency
+                        value
+                    }
+                    regular_price {
+                        currency
+                        value
+                    }
+                    discount {
+                        amount_off
+                    }
+                }
+                minimum_price {
+                    final_price {
+                        currency
+                        value
+                    }
+                    regular_price {
+                        currency
+                        value
+                    }
+                    discount {
+                        amount_off
+                    }
+                }
+            }
+            sku
+            small_image {
+                url
+            }
+            stock_status
+            rating_summary
+            __typename
+            url_key
+        }
+        page_info {
+            total_pages
+        }
+        total_count
+    }
+`;