@riosst100/pwa-marketplace 2.5.7 → 2.5.9

package/src/overwrites/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.js

@@ -9,7 +9,7 @@ import Trigger from '@magento/venia-ui/lib/components/Trigger';
 import defaultClasses from './currentFilter.module.css';
 
 const CurrentFilter = props => {
-    const { group, item, removeItem, onRemove } = props;
+    const { group, item, removeItem, onRemove, filterNames } = props;
     const classes = useStyle(defaultClasses, props.classes);
     const { formatMessage } = useIntl();
 
@@ -30,17 +30,27 @@ const CurrentFilter = props => {
         }
     );
 
+    const groupName = filterNames.get(group);
+
     return (
         <span className={classes.root} data-cy="CurrentFilter-root">
             <Trigger
                 action={handleClick}
+                style={{
+                    "width":"30px"
+                }}
                 aria-label={ariaLabel}
                 data-cy="CurrentFilter-trigger"
             >
                 <Icon size={14} src={Remove} />
             </Trigger>
             <span className={classes.text}>
-                {item.label ? item.label : item.title}
+                <div style={{
+                    "fontSize": "10px",
+                    "color": "grey",
+                    "fontWeight": "normal"
+                }}>{groupName}</div>
+                <div>{item.label ? item.label : item.title}</div>
             </span>
         </span>
     );

package/src/overwrites/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.module.css

@@ -5,14 +5,15 @@
     composes: font-medium from global;
     composes: gap-2xs from global;
     composes: grid-flow-col from global;
-    composes: inline-grid from global;
+    composes: inline-flex from global;
     composes: items-center from global;
-    composes: justify-center from global;
-    composes: px-2 from global;
+    composes: justify-left from global;
+    composes: px-1 from global;
     composes: py-1 from global;
     composes: rounded-md from global;
     /* composes: text-white from global; */
     composes: text-base from global;
+    composes: w-full from global;
 }
 
 /* TODO @TW: cannot compose */

package/src/overwrites/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilters.js

@@ -7,7 +7,7 @@ import CurrentFilter from './currentFilter';
 import defaultClasses from './currentFilters.module.css';
 
 const CurrentFilters = props => {
-    const { filterApi, filterState, onRemove } = props;
+    const { filterApi, filterState, onRemove, filterNames } = props;
     const { removeItem } = filterApi;
     const classes = useStyle(defaultClasses, props.classes);
     const { formatMessage } = useIntl();
@@ -27,6 +27,7 @@ const CurrentFilters = props => {
                         <li key={key} className={classes.item}>
                             <CurrentFilter
                                 group={group}
+                                filterNames={filterNames}
                                 item={item}
                                 removeItem={removeItem}
                                 onRemove={onRemove}

package/src/overwrites/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilters.module.css

@@ -4,7 +4,9 @@
     composes: overflow-auto from global;
     composes: flex from global;
     composes: flex-wrap from global;
-    composes: gap-2 from global;
+    composes: gap-0 from global;
+    composes: flex-col from global;
+    composes: items-start from global;
 }
 
 /* TODO @TW: cannot compose */
@@ -14,8 +16,9 @@
 
 .item {
     composes: float-left from global;
-    composes: pb-0 from global;
+    composes: pt-0 from global;
     composes: pl-0 from global;
-    composes: pr-2 from global;
-    composes: pt-2 from global;
+    /* composes: pr-2 from global; */
+    composes: pb-2 from global;
+    composes: w-full from global;
 }

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterList.js

@@ -9,6 +9,7 @@ import FilterItem from './filterItem';
 import defaultClasses from './filterList.module.css';
 import FilterItemRadioGroup from './filterItemRadioGroup';
 import SubFilterItemRadioGroup from './subFilterItemRadioGroup';
+import { Link, useLocation } from 'react-router-dom';
 
 const labels = new WeakMap();
 const labels2 = new WeakMap();
@@ -256,6 +257,8 @@ const FilterList = props => {
         classes
     ]);
 
+    const { pathname, search } = useLocation();
+
     const showMoreItem = useMemo(() => {
         if (items.length <= itemCountToShow) {
             return null;
@@ -266,15 +269,22 @@ const FilterList = props => {
             defaultMessage: 'View All'
         });
 
+        const params = search ? JSON.parse('{"' + decodeURI(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}') : {};
+
+        params[`filterby`] = `${group}`;
+
+        const finalParams = params ? Object.keys(params).map(key => `${key}=${params[key]}`).join('&') : '';
+        const path = pathname + finalParams;
+
         return (
             <li className={classes.showMoreLessItem}>
-                <button
-                    onClick={handleShowMore}
+                <Link
+                    to={path}
                     className={classes.showMoreLessButton}
                     data-cy="FilterList-showMoreLessButton"
                 >
                     {label}
-                </button>
+                </Link>
             </li>
         );
     }, [

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

@@ -34,8 +34,6 @@ const FilterSidebar = props => {
         handleReset
     } = talonProps;
 
-    console.log('subFilterItems')
-    console.log(subFilterItems)
     // console.log(filters)
     // console.log('filterCountToOpen'+filterCountToOpen)
     // console.log('hideFilters'+hideFilters)
@@ -100,7 +98,6 @@ const FilterSidebar = props => {
 
                 const hideFilters = ['card_game','bricks_categories','sc_sports_categories','trains','trains_locomotives','trains_supplies_type','lof_preorder','auction','special_price','sc_baseball_inserts','sc_baseball_parallel','sale','sc_set_type','sc_brands'];
                 if (!allowedFiltersArr?.length || filterState.size && allowedFiltersArr.length || !filterState.size && allowedFiltersArr.length && allowedFiltersArr.includes(group)) {
-                    console.log(group)
                     if (!hideFilters.includes(group) && groupName && !group.includes('card_release') && !group.includes('card_set') && !group.includes('sc_set_name')) {
                     
                     // if (!allowedFiltersArr?.length && group != "category_uid" || allowedFiltersArr?.length && allowedFiltersArr.includes(group)) {

package/src/overwrites/venia-ui/lib/components/OrderHistoryPage/OrderDetails/item.js

@@ -76,7 +76,6 @@ const Item = props => {
             <Button
                 onClick={() => {
                     // TODO will be implemented in PWA-979
-                    console.log('Buying Again');
                 }}
                 className={classes.buyAgainButton}
             >

package/src/overwrites/venia-ui/lib/components/OrderHistoryPage/OrderDetails/orderDetails.js

@@ -76,7 +76,6 @@ const OrderDetails = props => {
                 className={classes.printButton}
                 onClick={() => {
                     // TODO will be implemented in PWA-978
-                    console.log('Printing Receipt');
                 }}
             >
                 <Icon src={Printer} />

package/src/talons/FilterContent/useFilterContent.js

@@ -0,0 +1,291 @@
+import { useEffect, useMemo } from 'react';
+import { useLazyQuery, useQuery } from '@apollo/client';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import { useLocation } from 'react-router-dom';
+import DEFAULT_OPERATIONS from '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/RootComponents/Category/categoryContent.gql';
+import {
+    getFiltersFromSearch,
+    getFilterInput
+} from '@magento/peregrine/lib/talons/FilterModal/helpers';
+
+export const useFilterContent = props => {
+    const { searchQuery, activeFilter, active, setActive, currentSort, filterby, categoryId, data, pageSize = 6 } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+
+    const {
+        getProductFiltersByCategoryQuery,
+        getCategoryContentQuery,
+        getFilterInputsQuery,
+        getStoreConfigQuery,
+        getMasterAttributesQuery
+    } = operations;
+
+    const placeholderItems = Array.from({ length: pageSize }).fill(null);
+
+    const { data: storeConfigData } = useQuery(getStoreConfigQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const [getFilters, { data: filtersDataResponse }] = useLazyQuery(
+        getProductFiltersByCategoryQuery,
+        {
+            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 { 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]);
+
+    // 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) {
+            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: {
+                    filters: newFilters
+                }
+            });
+        }
+    }, [categoryId, getFilters, filterTypeMap, search, masterAttributes]);
+
+    const rawFilters = filtersDataResponse ? filtersDataResponse.products.aggregations : null;
+    const items = data ? data.products.items : placeholderItems;
+    const category =
+        categoryData && categoryData.categories.items.length
+            ? categoryData.categories.items[0]
+            : null;
+
+    let filterData = [];
+    let title = '';
+
+    rawFilters && rawFilters.map((filter, index) => {
+
+        if (filter.attribute_code == filterby) {
+            let label = filter.label;
+
+            const filterOptions = filter.options.filter(function({ count }) {
+                return count > 0;
+            })
+
+            const newFilter = {
+                attribute_code: filter.attribute_code,
+                count: filter.count,
+                label: label,
+                position: filter.position,
+                options: filterOptions
+            };
+
+            filterData = newFilter;
+            title = label;
+        }
+    });
+
+    const { value: sortby } = currentSort
+
+    // const [runQuery, queryResponse] = useLazyQuery(getShopByDataQuery, {
+    //     fetchPolicy: 'cache-and-network',
+    //     nextFetchPolicy: 'cache-first'
+    // });
+
+    
+
+    const pathnameArr = pathname.split('/');
+    
+    const categoryUrlKey = pathnameArr[pathnameArr.length - 1].replace('.html','');
+    
+    const categoryUrlSuffix = storeConfigData ? storeConfigData?.storeConfig?.category_url_suffix : '';
+    // const categoryUrlSuffix = 'html';
+
+    // const { data: introspectionData } = useQuery(getFilterInputsQuery);
+
+    const activeFilters = [];
+
+    const filters = getFiltersFromSearch(search);
+
+    // Construct the filter arg object.
+    const newFilters = {};
+    filters.forEach((values, key) => {
+        if (filterTypeMap.get(key)) {
+            newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
+            
+            if (key == "sc_baseball_release") {
+                for(let item of values) {
+                    if(item) {
+                        const data = search.split('&');
+                        data.pop();
+                        activeFilters.push(
+                            {
+                                'label': item.split(',')[0],
+                                'path': data
+                            }
+                        )
+                    }   
+                }
+            }
+        }
+    });
+
+    const alpha = ['#', 'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
+
+    const originalDataResult = useMemo(() => {
+        if (!filterData) {
+            return null;
+        }
+        
+        const options = filterData?.options;
+        if (!options) {
+            return null;
+        }
+
+        const mappingData = options.reduce((acc, item) => {
+            let firstLetter = item.label? item.label.charAt(0).toUpperCase() : '';
+            if (!alpha.includes(firstLetter)) {
+                firstLetter = '#';
+            }
+            if (filterby == "vehicles_year" || filterby == "trains_gauge" || filterby == "vehicles_scale" || filterby == "lego_theme" || filterby == "lego_subtheme" || filterby == "lego_interest") {
+                firstLetter = '#';
+            }
+            acc[firstLetter] = acc[firstLetter] || [];
+            acc[firstLetter].push(item);
+            return acc;
+        }, {});
+
+        const sortbyData = [];
+
+        return sortby != "all" ? sortbyData && sortbyData.length ? sortbyData.sort((a, b) => b.release_type.toLowerCase().localeCompare(a.release_type.toLowerCase())) : sortbyData : mappingData;
+    }, [filterData, sortby]);
+
+    const filteredOptions = useMemo(() => {
+        if (!filterData) {
+            return null;
+        }
+        
+        const options = filterData?.options;
+        if (!options) {
+            return null;
+        }
+
+        if (searchQuery) {
+            if (active != "all") {
+                setActive('all');
+            }
+
+            return options.filter(function(option) {
+                return option.label.search(new RegExp(searchQuery, "i")) != -1;
+            });
+        }
+
+        return options;
+    }, [filterData, searchQuery]);
+
+    const dataResult = useMemo(() => {
+        if (filteredOptions) {
+            return filteredOptions.reduce((acc, item) => {
+                let firstLetter = item.label ? item.label.charAt(0).toUpperCase() : '';
+                if (!alpha.includes(firstLetter)) {
+                    firstLetter = '#';
+                }
+                if (filterby == "vehicles_year" || filterby == "trains_gauge" || filterby == "vehicles_scale" || filterby == "lego_theme" || filterby == "lego_subtheme" || filterby == "lego_interest") {
+                    firstLetter = '#';
+                }
+                acc[firstLetter] = acc[firstLetter] || [];
+                acc[firstLetter].push(item);
+                return acc;
+            }, {});
+        }
+
+        return filteredOptions;
+    }, [filteredOptions]);
+
+    let availableGroups = originalDataResult ? Object.keys(originalDataResult).sort() : [];
+
+    let filteredAvailableGroups = dataResult ? Object.keys(dataResult).sort() : [];
+    
+
+    console.log('dataResult', dataResult)
+    if (filterby == "vehicles_year" || filterby == "trains_gauge" || filterby == "vehicles_scale" || filterby == "lego_theme" || filterby == "lego_subtheme" || filterby == "lego_interest") {
+        availableGroups = ['#'];
+        filteredAvailableGroups = ['#'];
+    }
+
+    const attributeData = filterData;
+
+    return {
+        filterData,
+        title,
+        dataResult,
+        filteredAvailableGroups,
+        categoryUrlSuffix,
+        categoryUrlKey,
+        availableGroups,
+        alpha,
+        category,
+        activeFilters
+    };
+};

package/src/talons/FilterTop/useFilterTop.js

@@ -213,8 +213,6 @@ export const useFilterTop = props => {
     // on apply, write filter state to location
     useEffect(() => {
         if (isApplying) {
-            console.log('APPLY')
-            console.log(search)
             const nextSearch = getSearchFromState(
                 search,
                 filterKeys,

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

@@ -12,6 +12,7 @@ export const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
                 options {
                     label
                     value
+                    count
                 }
                 position
             }

package/src/talons/SellerProducts/useSellerProducts.js

@@ -144,8 +144,6 @@ export const useSellerProducts = props => {
     ]);
 
     const categoryId = useMemo(() => {
-        console.log('---===routerouterouterouteroute')
-        console.log(routeData)
         let uid = null;
         if (routeData) {
             const { route } = routeData || {};

package/src/talons/ShopBy/useShopBy.js

@@ -58,29 +58,24 @@ export const useShopBy = props => {
 
     const filters = getFiltersFromSearch(search);
 
-    console.log('filtersfilters')
-    console.log(filterTypeMap)
-
     // Construct the filter arg object.
     const newFilters = {};
     filters.forEach((values, key) => {
-        if (filterTypeMap.get(key)) {
-            newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
-            
-            if (key == "sc_baseball_release") {
-                for(let item of values) {
-                    if(item) {
-                        // console.log(item.split(',')[0])
-                        const data = search.split('&');
-                        data.pop();
-                        activeFilters.push(
-                            {
-                                'label': item.split(',')[0],
-                                'path': data
-                            }
-                        )
-                    }   
-                }
+        newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
+        
+        if (key == "sc_baseball_release") {
+            for(let item of values) {
+                if(item) {
+                    // console.log(item.split(',')[0])
+                    const data = search.split('&');
+                    data.pop();
+                    activeFilters.push(
+                        {
+                            'label': item.split(',')[0],
+                            'path': data
+                        }
+                    )
+                }   
             }
         }
     });