@riosst100/pwa-marketplace 2.3.7 → 2.3.9

package/package.json

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

package/src/componentOverrideMapping.js

@@ -43,6 +43,7 @@ module.exports = componentOverrideMapping = {
     [`@magento/venia-ui/lib/components/QuantityStepper/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/QuantityStepper/index.js',
     // [`@magento/venia-ui/lib/components/RichContent/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/RichContent/index.js',
     [`@magento/venia-ui/lib/components/RadioGroup/radio.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/RadioGroup/radio.js',
+    [`@magento/venia-ui/lib/components/RadioGroup/radioGroup.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/RadioGroup/radioGroup.js',
     [`@magento/venia-ui/lib/components/Button/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Button/index.js',
     [`@magento/venia-ui/lib/components/RichText/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/RichText/index.js',
     [`@magento/venia-ui/lib/components/Main/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Main/index.js',

package/src/components/SetsData/setsData.js

@@ -14,6 +14,7 @@ import ArraySearchInput from '@riosst100/pwa-marketplace/src/components/ArraySea
 import { useCustomSort } from '@riosst100/pwa-marketplace/src/hooks/useCustomSort';
 import Breadcrumbs from '@magento/venia-ui/lib/components/Breadcrumbs';
 import { useLocation } from 'react-router-dom';
+import { getFiltersFromSearch } from '@magento/peregrine/lib/talons/FilterModal/helpers';
 
 const SetsData = props => {
     const { categoryId } = props
@@ -232,10 +233,37 @@ const SetsData = props => {
         setSearchQuery('')
     }
 
+    const activeFilters = [];
+    
+    const allActiveFilters = getFiltersFromSearch(search);
+
+    if (allActiveFilters && allActiveFilters.size > 0) {
+        allActiveFilters.forEach((value, key) => {
+            value.forEach((value) => {
+                const filterArr = value.split(',');
+                
+                const label = filterArr[0];
+                const optionId = filterArr[1];
+                if (label == "Singles") {
+                    isSingles = true;
+                }
+                if (key == "card_game" || key == "product_line" && urlKey == "brands" || key == "product_line" && urlKey == "franchise" || key == "franchise" && urlKey == "brands" || key == "franchise" && urlKey == "franchise" || key == "brands" && urlKey == "franchise" || key == "brands" && urlKey == "brands" || virtualCategoryFilters && virtualCategoryFilters.includes(key)) {
+                    activeFilters.push(
+                        {
+                            'label': label,
+                            'code': key,
+                            'option_id': optionId
+                        }
+                    )
+                }
+            })
+        });
+    }
+
     return (
         <Fragment>
             <StoreTitle>{title}</StoreTitle>
-            <Breadcrumbs categoryId={categoryId} customPage={shopby == "singles" ? "Mini-Figures" : title} />
+            <Breadcrumbs categoryId={categoryId} currentFilter={activeFilters} customPage={shopby == "singles" ? "Mini-Figures" : title} />
             {/* <ul className={classes.nav}>
                 <li className={classes.nav_item}>
                     <button

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

@@ -199,14 +199,19 @@ const CategoryContent = props => {
         <ProductListTabShimmer />
     ) : null;
 
+    const formatNumber = (num) => {
+        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    }
+
     const categoryResultsHeading =
     galleryItems.length > 0 ? (
             <FormattedMessage
-                id={'categoryContent.resultCount'}
+                id={'categoryContent.resultAndTotalCount'}
                 values={{
-                    count: galleryItems.length
+                    count: galleryItems.length,
+                    total_count: formatNumber(totalCount)
                 }}
-                defaultMessage={'{count} Results'}
+                defaultMessage={"Showing {count} of {total_count} products"}
             />
         ) : isLoading ? (
             <Shimmer width={5} />

package/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs.js

@@ -1,4 +1,4 @@
-import React, { Fragment, useMemo } from 'react';
+import React, { Fragment, useMemo, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { string } from 'prop-types';
 import { Link } from 'react-router-dom';
@@ -78,6 +78,35 @@ const Breadcrumbs = props => {
 
     const lastIndex = currentFilter ? currentFilter.length - 1 : 0;
     // const filterpath = ;
+
+    const { search } = useLocation();
+
+    // const previousSearch = useRef(search);
+
+    console.log('search')
+    console.log(search)
+
+    const removeShopbyParam = (url) => {
+        const urlParts = url.split("?"); // Pisahkan URL sebelum dan sesudah tanda tanya
+        if (urlParts.length < 2) return url; // Jika tidak ada query string, kembalikan URL asli
+
+        const baseUrl = urlParts[0]; // Bagian URL sebelum query string
+        const queryString = urlParts[1]; // Bagian query string
+
+        // Pisahkan parameter menjadi array
+        const params = queryString.split("&").filter(param => !param.startsWith("shopby="));
+
+        // Gabungkan kembali parameter tanpa "shopby"
+        const newQueryString = params.join("&");
+
+        // Gabungkan URL dasar dengan query string yang telah dimodifikasi
+        return newQueryString ? `${baseUrl}?${newQueryString}` : baseUrl;
+    }
+
+    const params = removeShopbyParam(search);
+
+    console.log("paramsparamsparams")
+    console.log(params)
     
     currentFilter && currentFilter.length && currentFilter.map((filter, index) => {
         currentProduct ? (
@@ -102,7 +131,7 @@ const Breadcrumbs = props => {
                     <Link
                         key={index}
                         className={classes.link}
-                        to={resourceUrl('/'+currentCategoryPath)}
+                        to={resourceUrl('/'+currentCategoryPath+params)}
                         onClick={handleClick}
                     >
                         {filter.label}
@@ -119,7 +148,7 @@ const Breadcrumbs = props => {
                     <Link
                         key={index}
                         className={classes.link}
-                        to={resourceUrl('/'+currentCategoryPath+'?' + filter.code + '[filter]=' + filter.label + ',' + filter.option_id)}
+                        to={resourceUrl('/'+currentCategoryPath+params)}
                         onClick={handleClick}
                     >
                         {filter.label}

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

@@ -6,7 +6,7 @@ import { useStyle } from '@magento/venia-ui/lib/classify';
 import { useIntl } from 'react-intl';
 
 const FilterItemRadio = props => {
-    const { filterApi, group, item, onApply, labels } = props;
+    const { filterApi, group, item, isSubFilter, onApply, labels } = props;
     const { removeGroup, toggleItem } = filterApi;
     const { title, value } = item;
     const classes = useStyle(defaultClasses);
@@ -44,6 +44,7 @@ const FilterItemRadio = props => {
             classes={classes}
             id={`item-${group}-${value}`}
             label={title}
+            isSubFilter={isSubFilter}
             value={value}
             onChange={handleOnchange}
             data-cy="FilterDefault-radio"

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

@@ -15,7 +15,7 @@ import { useFieldApi } from 'informed';
 import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
 
 const FilterItemRadioGroup = props => {
-    const { filterApi, filterState, group, items, onApply, labels,isListExpanded = true, itemCountToShow = 5 } = props;
+    const { filterApi, filterState, group, isSubFilter, items, onApply, labels,isListExpanded = true, itemCountToShow = 5 } = props;
 
     const radioItems = useMemo(() => {
         return items.map((item,index) => {
@@ -61,7 +61,7 @@ const FilterItemRadioGroup = props => {
     }, [field, fieldApi, fieldState.value, fieldValue]);
 
     return (
-        <RadioGroup field={field} data-cy="FilterDefault-radioGroup">
+        <RadioGroup isSubFilter={isSubFilter} field={field} data-cy="FilterDefault-radioGroup">
             {radioItems}
         </RadioGroup>
     );

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

@@ -8,6 +8,7 @@ import { useStyle } from '@magento/venia-ui/lib/classify';
 import FilterItem from './filterItem';
 import defaultClasses from './filterList.module.css';
 import FilterItemRadioGroup from './filterItemRadioGroup';
+import SubFilterItemRadioGroup from './subFilterItemRadioGroup';
 
 const labels = new WeakMap();
 const labels2 = new WeakMap();
@@ -19,6 +20,9 @@ const FilterList = props => {
         filterApi,
         filterState,
         filterFrontendInput,
+        isSubFilter,
+        filterItems,
+        subFilterBlock,
         name,
         group,
         itemCountToShow,
@@ -99,12 +103,56 @@ const FilterList = props => {
         onApply
     ]);
 
+    // const subFilter = useMemo(
+    //     () =>
+    //         Array.from(filterItems, ([group, items], iteration) => {
+    //             // const blockState = filterState.get(group);
+    //             // const groupName = filterNames.get(group);
+    //             // const frontendInput = filterFrontendInput.get(group);
+
+    //             if (group.includes('card_set')) {
+    //                 return (
+    //                     // <FilterBlock
+    //                     //     key={group}
+    //                     //     filterApi={filterApi}
+    //                     //     filterState={blockState}
+    //                     //     filterFrontendInput={frontendInput}
+    //                     //     group={group}
+    //                     //     filterItems={filterItems}
+    //                     //     items={items}
+    //                     //     name={groupName}
+    //                     //     onApply={group == "category_uid" ? handleCategoryApplyFilter : handleApplyFilter}
+    //                     //     initialOpen={true}
+    //                     // />
+    //                     <SubFilterItemRadioGroup
+    //                         filterApi={filterApi}
+    //                         filterState={filterState}
+    //                         group={group}
+    //                         name={'Set Name'}
+    //                         items={items}
+    //                         onApply={onApply}
+    //                         labels={labels}
+    //                         isListExpanded={isListExpanded}
+    //                         itemCountToShow={itemCountToShow}
+    //                     />
+    //                 );
+    //             }
+    //         }),
+    //     [
+    //         filterApi,
+    //         filterItems
+    //     ]
+    // );
+
     // memoize item creation
     // search value is not referenced, so this array is stable
     const itemElements = useMemo(() => {
         // if (filterFrontendInput === 'boolean') {
             
             const key = `item-${group}`;
+
+            const cardSetGroup = group.replace('card_release', 'card_set');
+            
             return (
                 <li
                     key={key}
@@ -116,12 +164,14 @@ const FilterList = props => {
                         filterState={filterState}
                         group={group}
                         name={name}
+                        isSubFilter={isSubFilter}
                         items={items}
                         onApply={onApply}
                         labels={labels}
                         isListExpanded={isListExpanded}
                         itemCountToShow={itemCountToShow}
                     />
+                    {group.includes('card_release') && subFilterBlock}
                 </li>
             );
         // }
@@ -235,7 +285,7 @@ const FilterList = props => {
 
     return (
         <Fragment>
-            <ul className={classes.items}>
+            <ul className={isSubFilter ? classes.sub_items : classes.items}>
                 {itemElements}
                 {showMoreItem}
             </ul>

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

@@ -8,6 +8,15 @@
     composes: border-gray-100 from global;
 }
 
+.sub_items {
+    composes: gap-[15px] from global;
+    composes: grid from global;
+    /* composes: -ml-1.5 from global; */
+    composes: py-2.5 from global;
+    grid-template-columns: 100%;
+    composes: border-gray-100 from global;
+}
+
 .showMoreLessItem {
     composes: pl-1 from global;
 }

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

@@ -0,0 +1,91 @@
+import React, { useMemo, useEffect } from 'react';
+import {
+    arrayOf,
+    func,
+    number,
+    oneOfType,
+    shape,
+    string,
+    instanceOf
+} from 'prop-types';
+import setValidator from '@magento/peregrine/lib/validators/set';
+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';
+
+const SubFilterItemRadioGroup = props => {
+    const { filterApi, filterState, group, items, onApply, labels,isListExpanded = true, itemCountToShow = 5 } = props;
+
+    const radioItems = useMemo(() => {
+        return items.map((item,index) => {
+            if (!isListExpanded && index >= itemCountToShow) {
+                return null;
+            }
+
+            const code = `item-${group}-${item.value}`;
+            return (
+                <FilterItemRadio
+                    key={code}
+                    filterApi={filterApi}
+                    filterState={filterState}
+                    group={group}
+                    item={item}
+                    onApply={onApply}
+                    labels={labels}
+                />
+            );
+        });
+    }, [filterApi, filterState, group, items, labels, onApply,isListExpanded,itemCountToShow]);
+
+    const fieldValue = useMemo(() => {
+        if (filterState) {
+            for (const item of items) {
+                if (filterState.has(item)) {
+                    return item.value;
+                }
+            }
+        }
+
+        return null;
+    }, [filterState, items]);
+    const field = `item-${group}`;
+    const fieldApi = useFieldApi(field);
+    const fieldState = useFieldState(field);
+    useEffect(() => {
+        if (field && fieldValue === null) {
+            fieldApi.reset();
+        } else if (field && fieldValue !== fieldState.value) {
+            fieldApi.setValue(fieldValue);
+        }
+    }, [field, fieldApi, fieldState.value, fieldValue]);
+
+    return (
+        <RadioGroup isSubFilter={true} field={field} data-cy="FilterDefault-radioGroup">
+            {radioItems}
+        </RadioGroup>
+    );
+};
+
+SubFilterItemRadioGroup.defaultProps = {
+    onApply: null
+};
+
+SubFilterItemRadioGroup.propTypes = {
+    filterApi: shape({
+        toggleItem: func.isRequired
+    }).isRequired,
+    filterState: setValidator,
+    group: string.isRequired,
+    items: arrayOf(
+        shape({
+            title: string.isRequired,
+            value: oneOfType([number, string]).isRequired,
+            path: string
+        })
+    ).isRequired,
+    onApply: func,
+    labels: instanceOf(Map).isRequired
+};
+
+export default SubFilterItemRadioGroup;

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

@@ -19,6 +19,9 @@ const FilterBlock = props => {
         filterApi,
         filterState,
         filterFrontendInput,
+        filterItems,
+        subFilterBlock,
+        isSubFilter,
         group,
         items,
         name,
@@ -72,6 +75,9 @@ const FilterBlock = props => {
                 filterApi={filterApi}
                 filterState={filterState}
                 name={name}
+                isSubFilter={isSubFilter}
+                subFilterBlock={subFilterBlock}
+                filterItems={filterItems}
                 filterFrontendInput={filterFrontendInput}
                 group={group}
                 items={items}
@@ -86,7 +92,7 @@ const FilterBlock = props => {
             aria-label={itemAriaLabel}
             data-cy="FilterBlock-root"
         >
-            <button
+            {name && <button
                 className={classes.trigger}
                 onClick={handleClick}
                 data-cy="FilterBlock-triggerButton"
@@ -103,7 +109,7 @@ const FilterBlock = props => {
                         variant="Outline"
                     />
                 </span>
-            </button>
+            </button>}
             {list}
         </li>
     );

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

@@ -102,7 +102,26 @@ const FilterSidebar = props => {
                     if (!hideFilters.includes(group) && groupName) {
                     
                     // if (!allowedFiltersArr?.length && group != "category_uid" || allowedFiltersArr?.length && allowedFiltersArr.includes(group)) {
-
+                        let subFilterBlock = '';
+                        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}
+                            />;
+                        }
 
                         return (
                             <FilterBlock
@@ -111,6 +130,8 @@ const FilterSidebar = props => {
                                 filterState={blockState}
                                 filterFrontendInput={frontendInput}
                                 group={group}
+                                filterItems={filterItems}
+                                subFilterBlock={subFilterBlock}
                                 items={items}
                                 name={groupName}
                                 onApply={group == "category_uid" ? handleCategoryApplyFilter : handleApplyFilter}

package/src/overwrites/venia-ui/lib/components/RadioGroup/radioGroup.js

@@ -0,0 +1,77 @@
+import React, { Fragment } from 'react';
+import { arrayOf, number, node, oneOfType, shape, string } from 'prop-types';
+import { RadioGroup as InformedRadioGroup } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import { Message } from '@magento/venia-ui/lib/components/Field';
+import Radio from './radio';
+import defaultClasses from './radioGroup.module.css';
+
+const RadioGroup = props => {
+    const {
+        children,
+        classes: propClasses,
+        disabled,
+        field,
+        id,
+        items,
+        message,
+        isSubFilter,
+        ...rest
+    } = props;
+    const fieldState = useFieldState(field);
+    const classes = useStyle(defaultClasses, propClasses);
+
+    const options =
+        children ||
+        items.map(({ value, ...item }) => (
+            <Radio
+                data-cy=""
+                key={value}
+                disabled={disabled}
+                {...item}
+                classes={{
+                    label: classes.radioLabel,
+                    root: classes.radioContainer
+                }}
+                id={`${field}--${value}`}
+                value={value}
+            />
+        ));
+
+    return (
+        <Fragment>
+            <div data-cy="RadioGroup-root" className={isSubFilter ? classes.sub_root : classes.root}>
+                <InformedRadioGroup {...rest} field={field} id={id}>
+                    {options}
+                </InformedRadioGroup>
+            </div>
+            <Message className={classes.message} fieldState={fieldState}>
+                {message}
+            </Message>
+        </Fragment>
+    );
+};
+
+export default RadioGroup;
+
+RadioGroup.propTypes = {
+    children: node,
+    classes: shape({
+        message: string,
+        radioContainer: string,
+        radioLabel: string,
+        root: string
+    }),
+    field: string.isRequired,
+    id: string,
+    items: arrayOf(
+        shape({
+            key: oneOfType([number, string]),
+            label: node,
+            value: oneOfType([number, string])
+        })
+    ),
+    message: node
+};

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

@@ -0,0 +1,30 @@
+.root {
+    composes: gap-2xs from global;
+    composes: grid from global;
+}
+
+.sub_root {
+    composes: gap-2xs from global;
+    composes: grid from global;
+    composes: pl-5 from global;
+}
+
+.radioContainer {
+    composes: gap-3 from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: justify-center from global;
+    composes: leading-normal from global;
+    grid-template-areas: 'input label';
+    grid-template-columns: min-content 1fr;
+}
+
+.message {
+    composes: mt-xs from global;
+    composes: text-colorDefault from global;
+}
+
+/* TODO @TW: cannot compose */
+.message:empty {
+    display: none;
+}