@riosst100/pwa-marketplace 1.3.9 → 1.4.1

package/package.json

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

package/src/componentOverrideMapping.js

@@ -35,5 +35,8 @@ module.exports = componentOverrideMapping = {
     [`@magento/venia-ui/lib/components/ProductFullDetail/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/ProductFullDetail/index.js',
     [`@magento/venia-ui/lib/components/ProductImageCarousel/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/ProductImageCarousel/index.js',
     [`@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/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/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',
 };

package/src/components/AttributesBlock/attributesBlock.js

@@ -0,0 +1,54 @@
+import { useAttributesBlock } from '@riosst100/pwa-marketplace/src/talons/AttributesBlock/useAttributesBlock';
+import React from 'react';
+import { Link } from 'react-router-dom';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import defaultClasses from './attributesBlock.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+const AttributesBlock = props => {
+    const { attributesBlock, category } = props;
+
+    const talonProps = useAttributesBlock({ attributesBlock });
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const {
+        categoryUrlSuffix,
+        getPath
+    } = talonProps;
+    
+    const result = [];
+    
+    attributesBlock && attributesBlock.map(({ label, code, items }, index) => {
+
+        const itemsResult = [];
+
+        items && items.map(({ label, value }, index) => {
+            const path = resourceUrl(
+                `/${category.url_path}${categoryUrlSuffix || ''}?${code}[filter]=${label},${value}`
+            );
+
+            itemsResult.push(
+                <>
+                    <Link
+                            key={index}
+                            to={path}
+                        >
+                        <li className={classes.item}>{label}</li>
+                    </Link>
+                </>
+            )
+        });
+
+        result.push(
+            <>
+                <div className={classes.title}>{label}</div>
+                <ul className={classes.root}>{itemsResult}</ul>
+            </>
+        )
+    });
+
+    return result;
+};
+
+export default AttributesBlock;

package/src/components/AttributesBlock/attributesBlock.module.css

@@ -0,0 +1,28 @@
+.root {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: mt-3 from global;
+    composes: gap-[15px] from global;
+    margin-bottom: 30px;
+}
+
+.item {
+    composes: px-4 from global;
+    composes: py-2 from global;
+    composes: transition-colors from global;
+    composes: duration-150 from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: leading-normal from global;
+    composes: text-base from global;
+    composes: text-colorDefault from global;
+    composes: bg-white from global;
+    composes: border-gray-100 from global;
+    border-radius: 5px;
+}
+
+.title {
+    composes: pb-3 from global;
+    composes: font-bold from global;
+    composes: text-[14px] from global;
+}

package/src/components/BrandSlider/brandSlider.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import Slider from "react-slick";
+import { ArrowLeft2, ArrowRight2 } from 'iconsax-react';
+import cn from 'classnames';
+import Item from './item';
+import { primary900 } from '@riosst100/pwa-marketplace/src/theme/vars';
+
+const CustomArrow = (props) => {
+    const { isNext = true, onClick, className } = props;
+    return (
+        <span
+            className={cn(
+                className,
+                'custom_arrow rounded-full w-10 h-10 p-2.5 bg-white hover_!bg-white z-[1] !border !border-solid !border-gray-100 before_hidden',
+                isNext ? 'right-2 lg_right-4' : 'left-2 lg_left-4',
+            )}
+            onClick={onClick}
+        >
+            {isNext ? (
+                <ArrowRight2 className='' size="20" color={primary900} />
+            ) : (
+                <ArrowLeft2 size="20" color={primary900} />
+            )}
+        </span>
+    )
+}
+
+const brandSlider = (props) => {
+
+    const settings = {
+        dots: false,
+        infinite: false,
+        speed: 500,
+        slidesToShow: 5,
+        slidesToScroll: 1,
+        nextArrow: <CustomArrow />,
+        prevArrow: <CustomArrow isNext={false} />,
+        centerPadding: "60px",
+        responsive: [
+            {
+                breakpoint: 1023,
+                settings: {
+                    slidesToShow: 4,
+                    slidesToScroll: 1,
+                }
+            },
+            {
+                breakpoint: 767,
+                settings: {
+                    slidesToShow: 3,
+                    slidesToScroll: 1,
+                }
+            },
+            {
+                breakpoint: 576,
+                settings: {
+                    slidesToShow: 2,
+                    slidesToScroll: 1
+                }
+            }
+        ]
+    };
+    return (
+        <div className='brand_items-container flex flex-col gap-x-4 gap-y-5'>
+            <div className='text-[18px] font-medium'>
+                Shop by brands
+            </div>
+            <Slider {...settings}>
+                {[...Array(9)].map(() => {
+                    return (
+                        <Item />
+                    )
+                })}
+            </Slider>
+            <style global jsx>
+                {`
+                    .brand_items-container .slick-slider {
+                        margin: 0 -8px;
+                    }
+                    @media only screen and (min-width: 1024px) {
+                        .brand_items-container .slick-slider {
+                            margin: 0 -16px;
+                        }
+                    }
+                `}
+            </style>
+        </div>
+    )
+}
+
+export default brandSlider

package/src/components/BrandSlider/index.js

@@ -0,0 +1 @@
+export { default } from './brandSlider';

package/src/components/BrandSlider/item.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import cn from 'classnames';
+
+const Item = () => {
+    return (
+        <div className='brand-item-container px-2 lg_px-4'>
+            <div
+                className={cn(
+                    'm-auto flex flex-col',
+                    'w-full max-w-[250px]',
+                    'relative rounded-lg border border-gray-100',
+                )}
+            >
+                <div className="brand_logo-wrapper w-full min-h-[120px] rounded-t-lg">
+
+                </div>
+                <div
+                    className={cn(
+                        'bg-darkblue-900 text-white uppercase text-lg font-bold leading-5 absolute',
+                        'p-5 rounded-md top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2'
+                    )}
+                >
+                    TN
+                </div>
+                <div className='brand_name-wrapper flex items-center justify-center w-full min-h-[110px]'>
+                    <span className='text-base font-medium'>
+                        Tamashii Nations
+                    </span>
+                </div>
+                <style global jsx>
+                    {`
+                        .brand_logo-wrapper {
+                            background: rgb(217, 217, 217);
+                            background: linear-gradient(180deg, rgb(217, 217, 217) 0%, rgba(217, 217, 217, 0) 100%);
+                        }
+                    `}
+                </style>
+            </div>
+        </div>
+    )
+}
+
+export default Item;

package/src/components/CollectibleGameSets/collectibleGameSets.js

@@ -0,0 +1,52 @@
+import React, { Fragment } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useSeller } from '@riosst100/pwa-marketplace/src/talons/Seller/useSeller';
+import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
+import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
+import { useCollectibleGameSets } from '@riosst100/pwa-marketplace/src/talons/CollectibleGameSets/useCollectibleGameSets';
+
+const CollectibleGameSets = props => {
+    const talonProps = useCollectibleGameSets();
+
+    const { error, loading, collectibleGameSets } = talonProps;
+
+    if (loading && !collectibleGameSets)
+        return '';
+    // return <SellerShimmer />;
+    if (error && !collectibleGameSets) return <ErrorView />;
+
+    if (!collectibleGameSets) {
+        return (
+            <h1>
+                <FormattedMessage
+                    id={'seller.notFound'}
+                    defaultMessage={
+                        'Seller Not Found.'
+                    }
+                />
+            </h1>
+        );
+    }
+
+    // console.log('SIPPPPPPPPPPPPPPPPPPP')
+    // console.log(collectibleGameSets)
+
+    const sets = collectibleGameSets.map((set, index) => {
+        const { card_set } = set;
+        return (
+            <>
+                <div><b>{card_set}</b></div>
+            </>
+        );
+    });
+
+
+    return (
+        <Fragment>
+            <StoreTitle>Magic: The Gathering | All Sets</StoreTitle>
+            <div>{sets}</div>
+        </Fragment>
+    );
+};
+
+export default CollectibleGameSets;

package/src/components/CollectibleGameSets/index.js

@@ -0,0 +1 @@
+export { default } from './collectibleGameSets';

package/src/components/CollectibleGameSetsPage/collectibleGameSetsPage.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import CollectibleGameSets from '@riosst100/pwa-marketplace/src/components/CollectibleGameSets/collectibleGameSets';
+
+const CollectibleGameSetsPage = () => {
+    return (
+        <CollectibleGameSets />
+    )
+}
+
+export default CollectibleGameSetsPage;

package/src/components/CollectibleGameSetsPage/index.js

@@ -0,0 +1 @@
+export { default } from './collectibleGameSetsPage';

package/src/components/Divider/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import cn from 'classnames';
+
+const Divider = (props) => {
+    const { className } = props
+    return (
+        <div className={cn('w-full h-[1px] bg-gray-100', className)} />
+    )
+}
+
+export default Divider

package/src/components/SellerDetail/sellerDetail.js

@@ -29,7 +29,7 @@ const SellerDetail = props => {
 
     if (loading && !seller)
         return '';
-        // return <SellerShimmer />;
+    // return <SellerShimmer />;
     if (error && !seller) return <ErrorView />;
     if (!seller) {
         return (

package/src/components/SellerReviewItem/sellerReviewItem.js

@@ -3,61 +3,61 @@ import { Star1 } from 'iconsax-react';
 
 const SellerReviewItem = ({ review }) => {
     const rate1 = [];
-    if (review.rate1) {
-        for (let i = 1; i < review.rate1+1; i++) {
-            rate1.push({
-                'num': i,
-                'star': true
-            });
-        }
-
-        if (review.rate1 < 5) {
-            for (let i = review.rate1+1; i < 5+1; i++) {
-                rate1.push({
-                    'num': i,
-                    'star': false
-                });
-            }
-        }
-    }
+    // if (review.rate1) {
+    //     for (let i = 1; i < review.rate1+1; i++) {
+    //         rate1.push({
+    //             'num': i,
+    //             'star': true
+    //         });
+    //     }
+
+    //     if (review.rate1 < 5) {
+    //         for (let i = review.rate1+1; i < 5+1; i++) {
+    //             rate1.push({
+    //                 'num': i,
+    //                 'star': false
+    //             });
+    //         }
+    //     }
+    // }
 
     const rate2 = [];
-    if (review.rate2) {
-        for (let i = 1; i < review.rate2+1; i++) {
-            rate2.push({
-                'num': i,
-                'star': true
-            });
-        }
-
-        if (review.rate2 < 5) {
-            for (let i = review.rate2+1; i < 5+1; i++) {
-                rate2.push({
-                    'num': i,
-                    'star': false
-                });
-            }
-        }
-    }
+    // if (review.rate2) {
+    //     for (let i = 1; i < review.rate2+1; i++) {
+    //         rate2.push({
+    //             'num': i,
+    //             'star': true
+    //         });
+    //     }
+
+    //     if (review.rate2 < 5) {
+    //         for (let i = review.rate2+1; i < 5+1; i++) {
+    //             rate2.push({
+    //                 'num': i,
+    //                 'star': false
+    //             });
+    //         }
+    //     }
+    // }
 
     const rate3 = [];
-    if (review.rate3) {
-        for (let i = 1; i < review.rate3+1; i++) {
-            rate3.push({
-                'num': i,
-                'star': true
-            });
-        }
-
-        if (review.rate3 < 5) {
-            for (let i = review.rate3+1; i < 5+1; i++) {
-                rate3.push({
-                    'num': i,
-                    'star': false
-                });
-            }
-        }
-    }
+    // if (review.rate3) {
+    //     for (let i = 1; i < review.rate3+1; i++) {
+    //         rate3.push({
+    //             'num': i,
+    //             'star': true
+    //         });
+    //     }
+
+    //     if (review.rate3 < 5) {
+    //         for (let i = review.rate3+1; i < 5+1; i++) {
+    //             rate3.push({
+    //                 'num': i,
+    //                 'star': false
+    //             });
+    //         }
+    //     }
+    // }
 
     const formatDate = (date) => {
         const isoFormattedDate = date.replace(' ', 'T');

package/src/components/SubCategory/subCategory.js

@@ -29,7 +29,7 @@ const SubCategory = props => {
         )
     });
 
-    return <ul className={classes.root}>{subCategory}</ul>;
+    return subCategory.length ? <ul className={classes.root}>{subCategory}</ul> : '';
 };
 
 export default SubCategory;

package/src/intercept.js

@@ -96,6 +96,13 @@ module.exports = targets => {
       path: require.resolve("./components/SellerPage/index.js"),
       authed: false,
     },
+    {
+      exact: true,
+      name: "CollectibleGameSetsPage",
+      pattern: "/games/collectible-game/:urlKey/sets",
+      path: require.resolve("./components/CollectibleGameSetsPage/index.js"),
+      authed: false,
+    },
   ];
 
   // Apply DefinePlugin using the results of the asynchronous operation

package/src/overwrites/peregrine/lib/talons/MegaMenu/megaMenu.gql.js

@@ -22,6 +22,14 @@ export const GET_MEGA_MENU = gql`
                 name
                 position
                 url_path
+                custom_submenu {
+                    name
+                    attribute {
+                        code
+                        value
+                    }
+                    path
+                }
                 shop_by {
                     name
                     code
@@ -38,6 +46,14 @@ export const GET_MEGA_MENU = gql`
                     name
                     position
                     url_path
+                    custom_submenu {
+                        name
+                        attribute {
+                            code
+                            value
+                        }
+                        path
+                    }
                     shop_by {
                         name
                         items {
@@ -52,6 +68,14 @@ export const GET_MEGA_MENU = gql`
                         name
                         position
                         url_path
+                        custom_submenu {
+                            name
+                            attribute {
+                                code
+                                value
+                            }
+                            path
+                        }
                         shop_by {
                             name
                             items {

package/src/overwrites/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js

@@ -29,6 +29,14 @@ export const GET_CATEGORY_CONTENT = gql`
                 description
                 url_key
                 url_path
+                attributes_block {
+                    label
+                    code
+                    items {
+                      label
+                      value
+                    }
+                }
                 parent {
                     uid
                     name

package/src/overwrites/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js

@@ -91,6 +91,9 @@ export const useCategoryContent = props => {
         categoryData && categoryData.categories.items.length
             ? categoryData.categories.items[0].children
             : null;
+    const attributesBlock = categoryData && categoryData.categories.items.length
+    ? categoryData.categories.items[0].attributes_block
+    : null;
     const parent =
     categoryData && categoryData.categories.items.length
         ? categoryData.categories.items[0].parent
@@ -99,6 +102,10 @@ export const useCategoryContent = props => {
         ? data.products.page_info.total_pages
         : null;
     const totalCount = data ? data.products.total_count : null;
+    const category =
+        categoryData && categoryData.categories.items.length
+            ? categoryData.categories.items[0]
+            : null;
     const categoryName =
         categoryData && categoryData.categories.items.length
             ? categoryData.categories.items[0].name
@@ -134,6 +141,8 @@ export const useCategoryContent = props => {
         totalCount,
         totalPagesFromData,
         children,
-        parent
+        parent,
+        attributesBlock,
+        category
     };
 };

package/src/overwrites/venia-ui/lib/RootComponents/Category/category.module.css

@@ -20,6 +20,7 @@
 
 .categoryTitle {
     composes: font-semibold from global;
+    composes: text-[20px] from global;
 }
 
 .heading {

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

@@ -25,6 +25,9 @@ import NoProductsFound from './NoProductsFound';
 import cn from 'classnames';
 import ProductListTab, { ProductListTabShimmer } from '@riosst100/pwa-marketplace/src/components/ProductListTab';
 import SubCategory from '@riosst100/pwa-marketplace/src/components/SubCategory/subCategory';
+import AttributesBlock from '@riosst100/pwa-marketplace/src/components/AttributesBlock/attributesBlock';
+
+import BrandSlider from '@riosst100/pwa-marketplace/src/components/BrandSlider';
 
 const FilterModal = React.lazy(() => import('@magento/venia-ui/lib/components/FilterModal'));
 const FilterSidebar = React.lazy(() =>
@@ -56,7 +59,9 @@ const CategoryContent = props => {
         items,
         children,
         totalCount,
-        totalPagesFromData
+        totalPagesFromData,
+        attributesBlock,
+        category
     } = talonProps;
 
     const sidebarRef = useRef(null);
@@ -179,6 +184,10 @@ const CategoryContent = props => {
                     {categoryDescriptionElement}
                 </div>
                 <SubCategory children={children} />
+                <AttributesBlock category={category} attributesBlock={attributesBlock} />
+                <section className='category_brand-slider my-5'>
+                    <BrandSlider />
+                </section>
                 <div className={classes.contentWrapper}>
                     <div ref={sidebarRef} className={classes.sidebar}>
                         <Suspense fallback={<FilterSidebarShimmer />}>