@riosst100/pwa-marketplace 1.8.0 → 1.8.2

package/src/overwrites/venia-ui/lib/components/RadioGroup/radio.module.css

@@ -1,70 +1,70 @@
-.root {
-    composes: gap-1 from global;
-    composes: grid from global;
-    composes: grid-flow-col from global;
-    composes: items-center from global;
-    composes: justify-items-center from global;
-    composes: leading-normal from global;
-    composes: m-0 from global;
-    composes: text-colorDefault from global;
-    grid-template-areas: 'input label';
-    grid-template-columns: min-content 1fr;
-}
-
-.input {
-    composes: appearance-none from global;
-    composes: bg-clip-content from global;
-    composes: bg-transparent from global;
-    composes: border-8 from global;
-    composes: border-solid from global;
-    composes: border-transparent from global;
-    composes: h-[1.5rem] from global;
-    composes: m-0 from global;
-    composes: rounded-full from global;
-    composes: w-[1.5rem] from global;
-    composes: z-foreground from global;
-    grid-area: input;
-
-    composes: active_outline-none from global;
-    /* composes: active_shadow-radioActive from global; */
-
-    composes: checked_bg-brand-dark from global;
-
-    composes: focus_outline-none from global;
-    /* composes: focus_shadow-radioFocus from global; */
-}
-
-.icon {
-    composes: h-[14px] from global;
-    composes: w-[14px] from global;
-    composes: z-surface from global;
-    grid-area: input;
-}
-
-/* TODO @TW: cannot compose */
-.icon svg {
-    /* composes: stroke-gray-600 from global; */
-    stroke: rgb(var(--venia-global-color-gray-600));
-    width: 14px;
-    height: 14px;
-}
-
-.label {
-    composes: justify-self-start from global;
-    composes: text-base from global;
-    grid-area: label;
-}
-
-/* TODO @TW: cannot compose */
-.input:checked + .icon svg {
-    /* composes: stroke-brand-base from global; */
-    stroke: rgb(var(--venia-brand-color-1-700));
-}
-
-.input_shimmer {
-    composes: h-[14px] from global;
-    composes: m-0 from global;
-    composes: rounded-full from global;
-    composes: w-[14px] from global;
-    composes: z-foreground from global;
-}
+.root {
+    composes: gap-1 from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: justify-items-center from global;
+    composes: leading-normal from global;
+    composes: m-0 from global;
+    composes: text-colorDefault from global;
+    grid-template-areas: 'input label';
+    grid-template-columns: min-content 1fr;
+}
+
+.input {
+    composes: appearance-none from global;
+    composes: bg-clip-content from global;
+    composes: bg-transparent from global;
+    composes: border-8 from global;
+    composes: border-solid from global;
+    composes: border-transparent from global;
+    composes: h-[1.5rem] from global;
+    composes: m-0 from global;
+    composes: rounded-full from global;
+    composes: w-[1.5rem] from global;
+    composes: z-foreground from global;
+    grid-area: input;
+
+    composes: active_outline-none from global;
+    /* composes: active_shadow-radioActive from global; */
+
+    composes: checked_bg-brand-dark from global;
+
+    composes: focus_outline-none from global;
+    /* composes: focus_shadow-radioFocus from global; */
+}
+
+.icon {
+    composes: h-[14px] from global;
+    composes: w-[14px] from global;
+    composes: z-surface from global;
+    grid-area: input;
+}
+
+/* TODO @TW: cannot compose */
+.icon svg {
+    /* composes: stroke-gray-600 from global; */
+    stroke: rgb(var(--venia-global-color-gray-600));
+    width: 14px;
+    height: 14px;
+}
+
+.label {
+    composes: justify-self-start from global;
+    composes: text-base from global;
+    grid-area: label;
+}
+
+/* TODO @TW: cannot compose */
+.input:checked + .icon svg {
+    /* composes: stroke-brand-base from global; */
+    stroke: rgb(var(--venia-brand-color-1-700));
+}
+
+.input_shimmer {
+    composes: h-[14px] from global;
+    composes: m-0 from global;
+    composes: rounded-full from global;
+    composes: w-[14px] from global;
+    composes: z-foreground from global;
+}

package/src/talons/AttributesBlock/attributesBlock.gql.js

@@ -1,15 +1,15 @@
-import { gql } from '@apollo/client';
-
-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 {
-    getStoreConfigQuery: GET_STORE_CONFIG_DATA
-};
+import { gql } from '@apollo/client';
+
+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 {
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
+};

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

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

@@ -19,7 +19,7 @@ import {
 } from '@magento/peregrine/lib/talons/FilterModal/helpers';
 
 export const useCustomFilters = props => {
-    const { filters } = props;
+    const { filters, category } = props;
 
     const [isApplying, setIsApplying] = useState(false);
     const [filterState, filterApi] = useFilterState();
@@ -68,6 +68,8 @@ export const useCustomFilters = props => {
         return typeMap;
     }, [introspectionData]);
 
+    console.log(category)
+
     useEffect(() => {
 
         if (!filterTypeMap.size) {
@@ -94,7 +96,8 @@ export const useCustomFilters = props => {
     }, [
         runQuery,
         filterTypeMap,
-        search
+        search,
+        category
     ]);
 
     const customFiltersData = customFiltersLoading && !data ? null : (data ? data.customSubFilters : null);

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

@@ -1,45 +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
-};
+import { gql } from '@apollo/client';
+
+export const GET_CUSTOM_FILTERS = gql`
+    query GetCustomFilters($category: String!, $filters: ProductAttributeFilterInput!) {
+        customSubFilters(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

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

package/src/talons/FilterTop/useFilterTop.js

@@ -21,7 +21,7 @@ import DEFAULT_OPERATIONS from './filterTop.gql';
 const DRAWER_NAME = 'filter';
 
 export const useFilterTop = props => {
-    const { filters } = props;
+    const { filters, category } = props;
 
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
     const { getFilterInputsQuery, getCustomFilters } = operations;
@@ -40,6 +40,10 @@ export const useFilterTop = props => {
     const history = useHistory();
     const { pathname, search } = useLocation();
 
+    const pathnameArr = pathname.split('/');
+
+    // const categoryUrlKey = pathnameArr[pathnameArr.length - 1].replace('.html','');
+
     const { data: introspectionData } = useQuery(getFilterInputsQuery);
 
     const filterTypeMap = useMemo(() => {
@@ -72,13 +76,15 @@ export const useFilterTop = props => {
 
         runQuery({
             variables: {
-                filters: newFilters
+                filters: newFilters,
+                category: category?.url_path
             }
         });
     }, [
         runQuery,
         filterTypeMap,
-        search
+        search,
+        category
     ]);
 
     const attributeCodes = useMemo(

package/src/talons/Header/websiteSwitcher.gql.js

@@ -1,45 +1,45 @@
-import { gql } from '@apollo/client';
-
-export const GET_STORE_CONFIG_DATA = gql`
-    query getStoreConfigData {
-        # eslint-disable-next-line @graphql-eslint/require-id-when-available
-        storeConfig {
-            store_code
-            store_name
-            store_group_name
-            website_name
-        }
-    }
-`;
-
-export const GET_ROUTE_DATA = gql`
-    query getRouteData($url: String!) {
-        route(url: $url) {
-            relative_url
-        }
-    }
-`;
-
-export const GET_AVAILABLE_WEBSITES_DATA = gql`
-    query availableStoresByUserIp {
-        # eslint-disable-next-line @graphql-eslint/require-id-when-available
-        availableStoresByUserIp {
-            default_display_currency_code
-            locale
-            secure_base_media_url
-            store_code
-            store_group_code
-            store_group_name
-            store_name
-            store_sort_order
-            website_name
-            website_code
-        }
-    }
-`;
-
-export default {
-    getStoreConfigData: GET_STORE_CONFIG_DATA,
-    getRouteData: GET_ROUTE_DATA,
-    getAvailableWebsitesData: GET_AVAILABLE_WEBSITES_DATA
-};
+import { gql } from '@apollo/client';
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query getStoreConfigData {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            store_name
+            store_group_name
+            website_name
+        }
+    }
+`;
+
+export const GET_ROUTE_DATA = gql`
+    query getRouteData($url: String!) {
+        route(url: $url) {
+            relative_url
+        }
+    }
+`;
+
+export const GET_AVAILABLE_WEBSITES_DATA = gql`
+    query availableStoresByUserIp {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        availableStoresByUserIp {
+            default_display_currency_code
+            locale
+            secure_base_media_url
+            store_code
+            store_group_code
+            store_group_name
+            store_name
+            store_sort_order
+            website_name
+            website_code
+        }
+    }
+`;
+
+export default {
+    getStoreConfigData: GET_STORE_CONFIG_DATA,
+    getRouteData: GET_ROUTE_DATA,
+    getAvailableWebsitesData: GET_AVAILABLE_WEBSITES_DATA
+};

package/src/talons/LegoSets/legoSets.gql.js

@@ -12,8 +12,8 @@ export const GET_STORE_CONFIG_DATA = gql`
 `;
 
 export const GET_LEGO_SETS_QUERY = gql`
-    query getLegoSets($categoryUrlKey: String!, $setType: String, $filters: ProductAttributeFilterInput!) {
-        legoSets(categoryUrlKey: $categoryUrlKey, setType: $setType, filters: $filters) {
+    query getLegoSets($categoryUrlKey: String!, $activeTab: String, $filters: ProductAttributeFilterInput!) {
+        legoSets(categoryUrlKey: $categoryUrlKey, activeTab: $activeTab, filters: $filters) {
             group
             sets {
                 set_name

package/src/talons/LegoSets/useLegoSets.js

@@ -138,44 +138,8 @@ export const useLegoSets = props => {
             return null;
         }
 
-        const sortbyData = [];
-        // if (activeTab == 'year') {
-
-            // console.log(legoSets)
-            if (legoSets) {
-            legoSets.map((setRelease, index) => {
-                const { group, sets } = setRelease;
-                if (sets.length) {
-                    sets.map((set, index) => {
-                        const { release_year, sc_league } = set;
-                        if (sc_league) {
-                            if (!availableLeagues.includes(sc_league)) {
-                                availableLeagues.push(sc_league);
-                            }
-                        }
-                        // if (release_year) {
-                        //     // groupingSetsByYear.splice(release_year, 0, set);
-                            // const result = sortbyData.find(item => item.group === release_year);
-
-                        //     // groupingSetsByYear[release_year] = set;
-                        //     if (result) {
-                        //         result.sets.push(set)
-                        //     } else {
-                        //         // if (sortby == "date" || sortby == "newest" && sortbyData.length < 2) {
-                        //             sortbyData.push({
-                        //                 'group': release_year,
-                        //                 'sets': [set]
-                        //             })
-                        //         // }
-                        //     }
-                        // }
-                    })
-                }
-            })
-        }
-
         return legoSets.slice().sort((a, b) =>a.group.toLowerCase().localeCompare(b.group.toLowerCase()));
-    }, [queryResponse, activeTab]);
+    }, [queryResponse]);
 
     const availableGroups = legoSets && legoSets.length ? legoSets.map(({ group }) => group) : [];
 
@@ -192,7 +156,9 @@ export const useLegoSets = props => {
 
         if (searchQuery) {
 
-            setActive('all')
+            // useEffect(() => {
+            //     setActive('all')
+            // }, [active]);
 
             legoSets.map(({ group, sets }, index) => {
                 const newSets = sets.filter(function(set) {
@@ -209,24 +175,8 @@ export const useLegoSets = props => {
             })
         }
 
-        if (activeFilter && activeFilter  != "all") {
-            legoSets.map(({ group, sets }, index) => {
-                const newSets = sets.filter(function(set) {
-                    return set.sc_league == activeFilter;
-                    // return set.set_name.includes(searchQuery);
-                });
-
-                if (newSets && newSets.length) {
-                    filteredSets.push({
-                        'group': group,
-                        'sets': newSets
-                    })
-                }
-            })
-        }
-
-        return searchQuery || activeFilter ? filteredSets : legoSets;
-    }, [legoSets, searchQuery, sortby, activeFilter]);
+        return searchQuery ? filteredSets : legoSets;
+    }, [legoSets, searchQuery]);
 
     // useEffect(() => {
     //     setPageLoading(isBackgroundLoading);