@riosst100/pwa-marketplace 1.6.7 → 1.6.9

package/package.json

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

package/src/components/ShopBy/shopBy.js

@@ -120,6 +120,14 @@ const ShopBy = props => {
 
     const newAvailableGroups = searchQuery ? filteredAvailableGroups : availableGroups;
 
+    const splitToNChunks = (array, n) => {
+        let result = [];
+        for (let i = n; i > 0; i--) {
+            result.push(array.splice(0, Math.ceil(array.length / i)));
+        }
+        return result;
+    }
+
     const setRelases = newAvailableGroups.map((group, index) => {
         const optionsResult = [];
 
@@ -138,15 +146,28 @@ const ShopBy = props => {
                 </li>)
             })
 
+            let optionsResultSplitted = [];
+            if (active == group) {
+                optionsResultSplitted = splitToNChunks(optionsResult, 3);
+            }
+
             return (
                 <>
-                    {optionsResult ?
-                    <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                    {optionsResult && active == "all" ?
+                    <div className={cn('singles_group-wrapper mb-4 px-2 inline-block', classes.singlesGroupWrapper)}>
                         <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' >
                             {group}
                         </div>
                         <div className={cn('singles_item-list flex flex-col')}>{optionsResult}</div>
                     </div> : ''}
+                    {active == group ? optionsResultSplitted && optionsResultSplitted.length && optionsResultSplitted.map((optionsResult, index) =>
+                        <div key={index} className={cn('singles_group-wrapper mb-4 px-2 inline-block', classes.singlesGroupWrapper)}>
+                            {index == 0 ? <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2'>{group}</div> : 
+                            <div className='singles_item_group_letter text-xl font-semibold pb-1 mb-2' style={{"marginTop":"35px"}}></div>}
+                            <div className={cn('singles_item-list flex flex-col')}>{optionsResult}</div>
+                        </div>
+                    )
+                    : ''}
                 </>
             );
         }

package/src/components/ShopBy/shopBy.module.css

@@ -31,16 +31,24 @@
 
 .singlesWrapper {
     column-count: 1;
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    flex-direction: row;
+}
+
+.singlesGroupWrapper {
+    width: 100%;
 }
 
 @media screen and (min-width: 768px) {
-    .singlesWrapper {
-        column-count: 2;
+    .singlesGroupWrapper {
+        width: 50%;
     }
 }
 
 @media screen and (min-width: 1023px) {
-    .singlesWrapper {
-        column-count: 3;
+    .singlesGroupWrapper {
+        width: 33.33%;
     }
 }

package/src/components/ShopBySets/shopBySets.js

@@ -84,6 +84,14 @@ const ShopBySets = props => {
         }
     // }, [collectibleGameSets])
 
+    const splitToNChunks = (array, n) => {
+        let result = [];
+        for (let i = n; i > 0; i--) {
+            result.push(array.splice(0, Math.ceil(array.length / i)));
+        }
+        return result;
+    }
+
     const setRelases = newCollectibleGameSets.length && newCollectibleGameSets.map((setRelease, index) => {
         const { release_type, sets } = setRelease;
 
@@ -104,16 +112,30 @@ const ShopBySets = props => {
                 </li>)
             })
         }
+
+        // console.log('setsResult: '+setsResult.length);
+        let setsResultSplitted = [];
+        if (active == release_type || newCollectibleGameSets.length == 1) {
+            setsResultSplitted = splitToNChunks(setsResult, 3);
+        }
         
         return (
             <>
-                {active == "all" || active == release_type ?
-                <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                {active == "all" && newCollectibleGameSets.length > 1 ?
+                <div className={cn('singles_group-wrapper mb-4 px-2 inline-block', classes.singlesGroupWrapper)}>
                     <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' >
                         {release_type}
                     </div>
                     <div className={cn('singles_item-list flex flex-col')}>{setsResult}</div>
                 </div> : ''}
+                {active == release_type || newCollectibleGameSets.length == 1 ? setsResultSplitted && setsResultSplitted.length && setsResultSplitted.map((setsResult, index) =>
+                    <div key={index} className={cn('singles_group-wrapper mb-4 px-2 inline-block', classes.singlesGroupWrapper)}>
+                        {index == 0 ? <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2'>{release_type}</div> : 
+                        <div className='singles_item_group_letter text-xl font-semibold pb-1 mb-2' style={{"marginTop":"35px"}}></div>}
+                        <div className={cn('singles_item-list flex flex-col')}>{setsResult}</div>
+                    </div>
+                )
+                 : ''}
             </>
         );
     });

package/src/components/ShopBySets/shopBySets.module.css

@@ -53,16 +53,24 @@
 
 .singlesWrapper {
     column-count: 1;
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    flex-direction: row;
+}
+
+.singlesGroupWrapper {
+    width: 100%;
 }
 
 @media screen and (min-width: 768px) {
-    .singlesWrapper {
-        column-count: 2;
+    .singlesGroupWrapper {
+        width: 50%;
     }
 }
 
 @media screen and (min-width: 1023px) {
-    .singlesWrapper {
-        column-count: 3;
+    .singlesGroupWrapper {
+        width: 33.33%;
     }
 }

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

@@ -115,8 +115,6 @@ const CategoryContent = props => {
         [items, activeLetter]
     });
 
-    console.log(galleryItems)
-
     const sidebarRef = useRef(null);
     const classes = useStyle(defaultClasses, props.classes);
     const shouldRenderSidebarContent = useIsInViewport({
@@ -141,7 +139,7 @@ const CategoryContent = props => {
     ) : null;
 
     const sidebar = shouldShowFilterButtons ? (
-        <FilterSidebar children={children} filters={filters} allowedFilters={category ? category.allowed_filters : []} />
+        <FilterSidebar hideFilters={category && category.hide_filters ? true : false} children={children} filters={filters} allowedFilters={category ? category.allowed_filters : []} />
     ) : shouldShowFilterShimmer ? (
         <FilterSidebarShimmer />
     ) : null;

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

@@ -21,7 +21,7 @@ const SCROLL_OFFSET = 150;
  * @param {Object} props.filters - filters to display
  */
 const FilterSidebar = props => {
-    const { filters, filterCountToOpen, allowedFilters } = props;
+    const { filters, filterCountToOpen, allowedFilters, hideFilters } = props;
     const talonProps = useFilterSidebar({ filters });
     const {
         filterApi,
@@ -154,14 +154,14 @@ const FilterSidebar = props => {
                         <Filter size={15} className='text-gray-900' />
                     </h2>
                 </div>
+                {hideFilters ? <ul className={classes.blocks}>No filters available.</ul> : <>
                 <CurrentFilters
                     filterApi={filterApi}
                     filterNames={filterNames}
                     filterState={filterState}
                     onRemove={handleApplyFilter}
                 />
-                {/* {clearAll} */}
-                <ul className={classes.blocks}>{filtersList}</ul>
+                <ul className={classes.blocks}>{filtersList}</ul></>}
             </div>
         </aside>
     );