@riosst100/pwa-marketplace 2.3.9 → 2.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "2.3.9",
+  "version": "2.4.0",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

package/src/componentOverrideMapping.js

@@ -14,6 +14,7 @@ module.exports = componentOverrideMapping = {
     [`@magento/peregrine/lib/talons/SignIn/useSignIn.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/SignIn/useSignIn.js',
     [`@magento/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js',
     [`@magento/peregrine/lib/talons/MegaMenu/megaMenu.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/MegaMenu/megaMenu.gql.js',
+    [`@magento/peregrine/lib/talons/FilterModal/filterModal.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/FilterModal/filterModal.gql.js',
     [`@magento/peregrine/lib/talons/RootComponents/Product/productDetailFragment.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/RootComponents/Product/productDetailFragment.gql.js',
     [`@magento/peregrine/lib/talons/RootComponents/Product/useProduct.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/RootComponents/Product/useProduct.js',
     [`@magento/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js',

package/src/components/ProductContent/productContent.js

@@ -191,7 +191,6 @@ const ProductContent = props => {
     ]);
 
     return <><span>OK</span></>;
-
     return (
         <>
             <div className='w-full mb-[30px]'>

package/src/overwrites/peregrine/lib/talons/FilterModal/filterModal.gql.js

@@ -0,0 +1,31 @@
+import { gql } from '@apollo/client';
+
+export const GET_FILTER_INPUTS = gql`
+    query GetFilterInputsForModal {
+        __type(name: "ProductAttributeFilterInput") {
+            inputFields {
+                name
+                type {
+                    name
+                }
+            }
+        }
+    }
+`;
+
+export const GET_SUB_FILTERS = gql`
+    query GetSubFilters {
+        subFilters {
+            attribute_code
+            options {
+                option_label
+                sub_option_labels
+            }
+        }
+    }
+`;
+
+export default {
+    getFilterInputsQuery: GET_FILTER_INPUTS,
+    getSubFiltersQuery: GET_SUB_FILTERS
+};

package/src/overwrites/peregrine/lib/talons/FilterModal/useFilterList.js

@@ -10,9 +10,7 @@ export const useFilterList = props => {
         () =>
             items.some((item, index) => {
                 return (
-                    filterState &&
-                    filterState.has(item) &&
-                    index >= itemCountToShow
+                    filterState && filterState.has(item) && index >= itemCountToShow
                 );
             }),
         [filterState, itemCountToShow, items]
@@ -46,7 +44,7 @@ export const useFilterList = props => {
         if (!overlay) {
             setActiveFilter(false)
         }
-    }, [overlay])
+    }, [overlay]);
 
     // const handleShowMore = useCallback(() => {
     //     handleShowAllOptions();

package/src/overwrites/peregrine/lib/talons/FilterSidebar/useFilterSidebar.js

@@ -12,7 +12,7 @@ import {
     sortFiltersArray,
     stripHtml
 } from '@magento/peregrine/lib/talons/FilterModal/helpers';
-
+import { getFiltersFromSearch } from '@magento/peregrine/lib/talons/FilterModal/helpers';
 import DEFAULT_OPERATIONS from '@magento/peregrine/lib/talons/FilterModal/filterModal.gql';
 
 const DRAWER_NAME = 'filter';
@@ -21,7 +21,7 @@ export const useFilterSidebar = props => {
     const { filters } = props;
 
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
-    const { getFilterInputsQuery } = operations;
+    const { getFilterInputsQuery, getSubFiltersQuery } = operations;
 
     const [isApplying, setIsApplying] = useState(false);
     const [{ drawer }, { toggleDrawer, closeDrawer }] = useAppContext();
@@ -32,8 +32,20 @@ export const useFilterSidebar = props => {
     const history = useHistory();
     const { pathname, search } = useLocation();
 
+    const allActiveFilters = getFiltersFromSearch(search);
+
     const { data: introspectionData } = useQuery(getFilterInputsQuery);
 
+    const {
+        called: subFilterItemsCalled,
+        data: subFilterItems,
+        loading: subFilterItemsLoading
+    } = useQuery(getSubFiltersQuery,
+    {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
     const attributeCodes = useMemo(
         () => filters.map(({ attribute_code }) => attribute_code),
         [filters]
@@ -236,10 +248,34 @@ export const useFilterSidebar = props => {
         closeDrawer();
     }, [closeDrawer]);
 
-    const handleApply = useCallback(() => {
+    const handleApply = useCallback((...args) => {
+        const group = args[0];
+        const item = args[1]; 
+
+        // REMOVE ACTIVE FILTER
+        if (group.includes('card_release')) {
+            const subFilter = group.replace("card_release", "card_set");
+            filterApi.removeGroup({ group: subFilter });
+        }
+
+        if (group.includes('card_set')) {
+            const subFilter = group.replace("card_set", "card_release");
+            filterApi.removeGroup({ group: subFilter });
+        }
+
+        if (group.includes('card_game')) {
+            if (allActiveFilters && allActiveFilters.size > 0) {
+                allActiveFilters.forEach((value, key) => {
+                    if (key !== 'card_game') {
+                        filterApi.removeGroup({ group: key });
+                    }
+                });
+            }
+        }
+
         setIsApplying(true);
         handleClose();
-    }, [handleClose]);
+    }, [handleClose, filterApi, allActiveFilters]);
 
     const handleReset = useCallback(() => {
         filterApi.clear();
@@ -298,6 +334,7 @@ export const useFilterSidebar = props => {
         filterApi,
         filterItems,
         filterKeys,
+        subFilterItems,
         filterNames,
         filterFrontendInput,
         filterState,

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

@@ -13,10 +13,10 @@ import RadioGroup from '@magento/venia-ui/lib/components/RadioGroup';
 import FilterItemRadio from './filterItemRadio';
 import { useFieldApi } from 'informed';
 import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
+import FilterBlock from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/FilterModal/filterBlock';
 
 const FilterItemRadioGroup = props => {
-    const { filterApi, filterState, group, isSubFilter, items, onApply, labels,isListExpanded = true, itemCountToShow = 5 } = props;
-
+    const { filterApi, subFilterItems, allowedSubFilters, subFilter, filterState, group, isSubFilter, items, onApply, labels,isListExpanded = true, itemCountToShow = 5 } = props;
     const radioItems = useMemo(() => {
         return items.map((item,index) => {
             if (!isListExpanded && index >= itemCountToShow) {
@@ -24,19 +24,57 @@ const FilterItemRadioGroup = props => {
             }
 
             const code = `item-${group}-${item.value}`;
+
+            if (allowedSubFilters.length && !allowedSubFilters.includes(item.title)) {
+                return '';
+            }
+
+            let newAllowedSubFilters = [];
+            
+            if (subFilter && subFilterItems) {
+                const result = subFilterItems.find(item => item.attribute_code === "card_release");
+
+                
+
+                // Ambil options jika ditemukan
+                const options = result ? result.options : [];
+                const option = options ? options.find(option => option.option_label === item.title) : [];
+                if (option) {
+                    newAllowedSubFilters = option.sub_option_labels;
+                }
+
+            }
+            
             return (
-                <FilterItemRadio
-                    key={code}
-                    filterApi={filterApi}
-                    filterState={filterState}
-                    group={group}
-                    item={item}
-                    onApply={onApply}
-                    labels={labels}
-                />
+                <>
+                    <FilterItemRadio
+                        key={code}
+                        filterApi={filterApi}
+                        filterState={filterState}
+                        group={group}
+                        item={item}
+                        onApply={onApply}
+                        labels={labels}
+                    />
+                    {subFilter && <FilterBlock
+                        key={subFilter.key}
+                        filterApi={subFilter.filterApi}
+                        filterState={subFilter.filterState}
+                        filterFrontendInput={subFilter.filterFrontendInput}
+                        group={subFilter.group}
+                        allowedSubFilters={newAllowedSubFilters}
+                        subFilterItems={subFilterItems}
+                        isSubFilter={true}
+                        items={subFilter.items}
+                        name={''}
+                        onApply={subFilter.onApply}
+                        initialOpen={true}
+                    />}
+                    {/* {subFilterBlock} */}
+                </>
             );
         });
-    }, [filterApi, filterState, group, items, labels, onApply,isListExpanded,itemCountToShow]);
+    }, [filterApi, allowedSubFilters, subFilter, filterState, group, items, labels, onApply,isListExpanded,itemCountToShow]);
 
     const fieldValue = useMemo(() => {
         if (filterState) {

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

@@ -22,7 +22,9 @@ const FilterList = props => {
         filterFrontendInput,
         isSubFilter,
         filterItems,
-        subFilterBlock,
+        subFilterItems,
+        allowedSubFilters,
+        subFilter,
         name,
         group,
         itemCountToShow,
@@ -152,6 +154,8 @@ const FilterList = props => {
             const key = `item-${group}`;
 
             const cardSetGroup = group.replace('card_release', 'card_set');
+
+            // const mewSubFilterBlock = subFilterBlock;
             
             return (
                 <li
@@ -164,6 +168,9 @@ const FilterList = props => {
                         filterState={filterState}
                         group={group}
                         name={name}
+                        subFilterItems={subFilterItems}
+                        subFilter={subFilter}
+                        allowedSubFilters={allowedSubFilters}
                         isSubFilter={isSubFilter}
                         items={items}
                         onApply={onApply}
@@ -171,7 +178,6 @@ const FilterList = props => {
                         isListExpanded={isListExpanded}
                         itemCountToShow={itemCountToShow}
                     />
-                    {group.includes('card_release') && subFilterBlock}
                 </li>
             );
         // }

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

@@ -20,7 +20,9 @@ const FilterBlock = props => {
         filterState,
         filterFrontendInput,
         filterItems,
-        subFilterBlock,
+        subFilter,
+        subFilterItems,
+        allowedSubFilters,
         isSubFilter,
         group,
         items,
@@ -76,8 +78,10 @@ const FilterBlock = props => {
                 filterState={filterState}
                 name={name}
                 isSubFilter={isSubFilter}
-                subFilterBlock={subFilterBlock}
+                subFilter={subFilter}
+                allowedSubFilters={allowedSubFilters}
                 filterItems={filterItems}
+                subFilterItems={subFilterItems}
                 filterFrontendInput={filterFrontendInput}
                 group={group}
                 items={items}

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

@@ -49,6 +49,7 @@ const FilterModal = props => {
                     <FilterBlock
                         key={group}
                         filterApi={filterApi}
+                        allowedSubFilters={[]}
                         filterState={blockState}
                         filterFrontendInput={frontendInput}
                         group={group}

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

@@ -28,6 +28,7 @@ const FilterSidebar = props => {
         filterItems,
         filterNames,
         filterFrontendInput,
+        subFilterItems,
         filterState,
         handleApply,
         handleReset
@@ -102,25 +103,26 @@ const FilterSidebar = props => {
                     if (!hideFilters.includes(group) && groupName) {
                     
                     // if (!allowedFiltersArr?.length && group != "category_uid" || allowedFiltersArr?.length && allowedFiltersArr.includes(group)) {
-                        let subFilterBlock = '';
+                        let subFilter = null;
                         if (group.includes('card_release')) {
                             const subGroup = group.replace('card_release', 'card_set');
                             const subBlockState = filterState.get(subGroup);
                             const subFrontendInput = filterFrontendInput.get(subGroup);
                             const subFilterItems = filterItems.get(subGroup);
 
-                            subFilterBlock = <FilterBlock
-                                key={subGroup}
-                                filterApi={filterApi}
-                                filterState={subBlockState}
-                                filterFrontendInput={subFrontendInput}
-                                group={subGroup}
-                                isSubFilter={true}
-                                items={subFilterItems}
-                                name={''}
-                                onApply={handleApplyFilter}
-                                initialOpen={true}
-                            />;
+                            subFilter = {
+                                key: subGroup,
+                                filterApi: filterApi,
+                                filterState: subBlockState,
+                                filterFrontendInput: subFrontendInput,
+                                group: subGroup,
+                                isSubFilter: true,
+                                items: subFilterItems,
+                                name: '',
+                                onApply: handleApplyFilter,
+                                initialOpen: true
+                            };
+
                         }
 
                         return (
@@ -128,10 +130,12 @@ const FilterSidebar = props => {
                                 key={group}
                                 filterApi={filterApi}
                                 filterState={blockState}
+                                allowedSubFilters={[]}
                                 filterFrontendInput={frontendInput}
                                 group={group}
+                                subFilterItems={subFilterItems?.subFilters}
                                 filterItems={filterItems}
-                                subFilterBlock={subFilterBlock}
+                                subFilter={subFilter}
                                 items={items}
                                 name={groupName}
                                 onApply={group == "category_uid" ? handleCategoryApplyFilter : handleApplyFilter}
@@ -147,6 +151,7 @@ const FilterSidebar = props => {
             filterNames,
             filterFrontendInput,
             filterState,
+            subFilterItems,
             filterCountToOpen,
             handleApplyFilter
         ]