@riosst100/pwa-marketplace 1.4.0 → 1.4.1

package/package.json

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

package/src/componentOverrideMapping.js

@@ -35,6 +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/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/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/venia-ui/lib/RootComponents/Category/categoryContent.js

@@ -27,6 +27,8 @@ import ProductListTab, { ProductListTabShimmer } from '@riosst100/pwa-marketplac
 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(() =>
     import('@magento/venia-ui/lib/components/FilterSidebar')
@@ -183,6 +185,9 @@ const CategoryContent = props => {
                 </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 />}>

package/src/overwrites/venia-ui/lib/components/Button/button.js

@@ -0,0 +1,100 @@
+import React, { useRef } from 'react';
+import { useButton } from 'react-aria';
+import { oneOf, shape, string, bool } from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './button.module.css';
+import cn from 'classnames';
+
+const getRootClassName = (priority, negative) =>
+    `root_${priority}Priority${negative ? 'Negative' : ''}`;
+
+/**
+ * A component for buttons.
+ *
+ * @typedef Button
+ * @kind functional component
+ *
+ * @param {props} props React component props
+ *
+ * @returns {React.Element} A React component that displays a single button.
+ */
+const Button = props => {
+    const {
+        children,
+        classes: propClasses,
+        priority,
+        negative,
+        disabled,
+        onPress,
+        ...restProps
+    } = props;
+
+    const buttonRef = useRef();
+
+    const { buttonProps } = useButton(
+        {
+            isDisabled: disabled,
+            onPress,
+            ...restProps
+        },
+        buttonRef
+    );
+
+    const classes = useStyle(defaultClasses, propClasses);
+    const rootClassName = classes[getRootClassName(priority, negative)];
+
+    return (
+        <button
+            ref={buttonRef}
+            className={rootClassName}
+            {...buttonProps}
+            {...restProps}
+        >
+            <span className={cn(classes.content)}>{children}</span>
+        </button>
+    );
+};
+
+/**
+ * Props for {@link Button}
+ *
+ * @typedef props
+ *
+ * @property {Object} classes An object containing the class names for the
+ * Button component.
+ * @property {string} classes.content classes for the button content
+ * @property {string} classes.root classes for root container
+ * @property {string} classes.root_highPriority classes for Button if
+ * high priority.
+ * @property {string} classes.root_lowPriority classes for Button if
+ * low priority.
+ * @property {string} classes.root_normalPriority classes for Button if
+ * normal priority.
+ * @property {string} priority the priority/importance of the Button
+ * @property {string} type the type of the Button
+ * @property {bool} negative whether the button should be displayed in red for a negative action
+ * @property {bool} disabled is the button disabled
+ */
+Button.propTypes = {
+    classes: shape({
+        content: string,
+        root: string,
+        root_highPriority: string,
+        root_lowPriority: string,
+        root_normalPriority: string
+    }),
+    priority: oneOf(['high', 'low', 'normal']).isRequired,
+    type: oneOf(['button', 'reset', 'submit']).isRequired,
+    negative: bool,
+    disabled: bool
+};
+
+Button.defaultProps = {
+    priority: 'normal',
+    type: 'button',
+    negative: false,
+    disabled: false
+};
+
+export default Button;

package/src/overwrites/venia-ui/lib/components/Button/button.module.css

@@ -0,0 +1,128 @@
+.root {
+    composes: border from global;
+    composes: border-solid from global;
+    composes: cursor-pointer from global;
+    composes: font-bold from global;
+    composes: inline-flex from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: max-w-full from global;
+    composes: min-w-[10rem] from global;
+    composes: outline-none from global;
+    composes: pointer-events-auto from global;
+    composes: px-sm from global;
+    composes: rounded-full from global;
+    composes: text-center from global;
+    composes: text-sm from global;
+    composes: uppercase from global;
+    composes: py-2 from global;
+
+    transition-duration: 256ms;
+    transition-property: background-color, border-color, color;
+    transition-timing-function: var(--venia-global-anim-standard);
+
+    composes: disabled_bg-gray-400 from global;
+    composes: disabled_border-gray-400 from global;
+    composes: disabled_opacity-50 from global;
+    composes: disabled_pointer-events-none from global;
+    composes: disabled_text-white from global;
+
+    composes: focus_shadow-inputFocus from global;
+}
+
+.root:active {
+    transition-duration: 128ms;
+}
+
+/**
+ * Some browsers retain the :hover state after a click, this ensures if a button becomes disabled after
+ * being clicked it will be visually disabled.
+ */
+.root:hover:disabled {
+    /* TODO @TW: cannot compose. This may not be possible with two variants. */
+    pointer-events: none;
+}
+
+.root_lowPriority {
+    composes: root;
+
+    composes: bg-transparent from global;
+    composes: border-gray-700 from global;
+    composes: text-gray-700 from global;
+
+    composes: active_border-gray-800 from global;
+    composes: active_text-gray-800 from global;
+
+    composes: hover_border-gray-800 from global;
+    composes: hover_text-gray-800 from global;
+}
+
+.root_normalPriority {
+    composes: root;
+
+    composes: bg-transparent from global;
+    composes: border-brand-dark from global;
+    composes: text-brand-dark from global;
+
+    composes: active_border-brand-darkest from global;
+    composes: active_text-brand-darkest from global;
+
+    composes: hover_border-brand-darkest from global;
+    composes: hover_text-brand-darkest from global;
+}
+
+.root_highPriority {
+    composes: root;
+
+    composes: bg-brand-dark from global;
+    composes: border-brand-dark from global;
+    composes: text-white from global;
+
+    composes: active_bg-brand-darkest from global;
+    composes: active_border-brand-darkest from global;
+    composes: active_text-white from global;
+
+    composes: hover_bg-brand-darkest from global;
+    composes: hover_border-brand-darkest from global;
+    composes: hover_text-white from global;
+}
+
+.root_lowPriorityNegative,
+.root_normalPriorityNegative {
+    composes: root;
+
+    composes: bg-transparent from global;
+    composes: border-red-600 from global;
+    composes: text-red-600 from global;
+
+    composes: active_border-red-700 from global;
+    composes: active_text-red-700 from global;
+
+    composes: hover_border-red-700 from global;
+    composes: hover_text-red-700 from global;
+}
+
+.root_highPriorityNegative {
+    composes: root;
+
+    composes: bg-red-600 from global;
+    composes: border-red-600 from global;
+    composes: text-white from global;
+
+    composes: active_bg-red-700 from global;
+    composes: active_border-red-700 from global;
+    composes: active_text-white from global;
+
+    composes: hover_bg-red-700 from global;
+    composes: hover_border-red-700 from global;
+    composes: hover_text-white from global;
+}
+
+.content {
+    composes: gap-1.5 from global;
+    composes: grid-flow-col from global;
+    composes: inline-grid from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: justify-items-center from global;
+}

package/src/overwrites/venia-ui/lib/components/Button/index.js

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