@riosst100/pwa-marketplace 1.4.5 → 1.4.7

package/src/components/BrandListPage/index.js

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import Content from './brandList';
+
+const index = () => {
+
+    const [active, setActive] = useState('all')
+    const letters = Array.from({ length: 26 }, (_, i) => String.fromCharCode(i + 65));
+
+    const brands = [
+        { id: 1, name: "Bandai" },
+        { id: 2, name: "Hasbro" },
+        { id: 3, name: "Mattel" },
+        { id: 4, name: "NECA" },
+        { id: 5, name: "Beast Kingdom" },
+        { id: 5, name: "Beast Kingdom" },
+        { id: 5, name: "Beast Kingdom" },
+        { id: 5, name: "Beast Kingdom" },
+        { id: 5, name: "Beast Kingdom" },
+        { id: 5, name: "Beast Kingdom" },
+        { id: 5, name: "Beast Kingdom" },
+        { id: 5, name: "Beast Kingdom" },
+        { id: 5, name: "Beast Kingdom" },
+        { id: 6, name: "McFarlane Toys" },
+        { id: 7, name: "Good Smile Company" },
+        { id: 8, name: "Evolution Toy" },
+    ];
+
+    const groupBrandsByFirstLetter = (brands) => {
+        return brands.reduce((acc, brand) => {
+            const firstLetter = brand.name.charAt(0).toUpperCase();
+            acc[firstLetter] = acc[firstLetter] || [];
+            acc[firstLetter].push(brand);
+            return acc;
+        }, {});
+    }
+
+    const groupedBrands = groupBrandsByFirstLetter(brands);
+    const availableLetter = Object.keys(groupedBrands).sort();
+
+    const handleActive = (val) => {
+        setActive(val);
+    }
+
+    const contentProps = {
+        letters,
+        groupedBrands,
+        availableLetter,
+        active,
+        handleActive,
+    };
+
+    return (
+        <Content {...contentProps} />
+    )
+}
+
+export default index

package/src/components/BrandSlider/brandSlider.js

@@ -40,7 +40,7 @@ const brandSlider = (props) => {
             {
                 breakpoint: 1023,
                 settings: {
-                    slidesToShow: 4,
+                    slidesToShow: 3,
                     slidesToScroll: 1,
                 }
             },
@@ -68,7 +68,7 @@ const brandSlider = (props) => {
             <Slider {...settings}>
                 {[...Array(9)].map(() => {
                     return (
-                        <Item />
+                        <Item {...props} />
                     )
                 })}
             </Slider>

package/src/components/BrandSlider/item.js

@@ -1,14 +1,32 @@
 import React from 'react';
 import cn from 'classnames';
 
-const Item = () => {
+const Item = (props) => {
+    const {
+        name = 'Tamashii Nations', rootClassName, onClick = () => { },
+        className = "",
+    } = props;
+
+    const initialName = (name) => {
+        if (!name) return ""; // Handle empty names
+
+        const words = name.split(" ");
+        let initials = "";
+
+        for (const word of words) {
+            initials += word.charAt(0).toUpperCase();
+        }
+
+        return initials;
+    }
     return (
-        <div className='brand-item-container px-2 lg_px-4'>
+        <div className={cn('brand-item-container px-2 lg_px-4', rootClassName)} onClick={onClick}>
             <div
                 className={cn(
                     'm-auto flex flex-col',
                     'w-full max-w-[250px]',
-                    'relative rounded-lg border border-gray-100',
+                    'relative rounded-lg border border-gray-100 bg-white',
+                    className,
                 )}
             >
                 <div className="brand_logo-wrapper w-full min-h-[120px] rounded-t-lg">
@@ -16,15 +34,15 @@ const Item = () => {
                 </div>
                 <div
                     className={cn(
-                        'bg-darkblue-900 text-white uppercase text-lg font-bold leading-5 absolute',
+                        'bg-darkblue-900 text-white uppercase text-lg font-bold leading-5 absolute min-w-[60px] text-center',
                         'p-5 rounded-md top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2'
                     )}
                 >
-                    TN
+                    {initialName(name)}
                 </div>
                 <div className='brand_name-wrapper flex items-center justify-center w-full min-h-[110px]'>
                     <span className='text-base font-medium'>
-                        Tamashii Nations
+                        {name}
                     </span>
                 </div>
                 <style global jsx>

package/src/components/CollectibleGameSets/collectibleGameSets.js

@@ -40,7 +40,8 @@ const CollectibleGameSets = props => {
 
     return (
         <Fragment>
-            <StoreTitle>Magic: The Gathering | All Sets</StoreTitle>
+            <StoreTitle>Magic: The Gathering | Sets & Expansions</StoreTitle>
+            <h3>Sets & Expansions</h3>
             <div>{sets}</div>
         </Fragment>
     );

package/src/components/FilterTop/CustomFilters/customFilters.js

@@ -49,7 +49,7 @@ const CustomFilters = props => {
                         }
                     });
 
-                    if (value == "all") {
+                    if (value != "all") {
                         params[`${attribute_code}[filter]`] = `${label},${value}`;
                     }
 

package/src/components/Modal/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Content from './modal';
+
+const index = (props) => {
+    return (
+        <Content {...props} />
+    )
+}
+
+export default index

package/src/components/Modal/modal.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import cn from 'classnames';
+import { blackTransparent } from '@riosst100/pwa-marketplace/src/theme/vars'
+
+const modal = (props) => {
+    const {
+        open = false, setOpen = () => { }, children = null,
+        rootClassName = '', className = '', closeOutside = false,
+    } = props;
+
+
+    return (
+        <>
+            {open && (
+                <div
+                    className={cn(
+                        'block overflow-hidden fixed top-0 right-0 left-0 z-dialog',
+                        'justify-center items-center w-full h-full bg-[#11182780]',
+                        rootClassName,
+                    )}
+                    onClick={() => {
+                        closeOutside ? setOpen(!open) : '';
+                    }}
+                >
+                    <div
+                        className={cn(
+                            'relative p-4 w-full min-h-[360px] max-w-md max-h-full',
+                            'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg',
+                            className
+                        )}
+                    >
+
+                        {children}
+                    </div>
+                    <style global jsx>
+                        {`
+                            body {
+                                overflow: hidden !important;
+                            }
+                        `}
+                    </style>
+                </div>
+            )}
+        </>
+    )
+}
+
+export default modal

package/src/components/ProductLineSlider/index.js

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

package/src/components/ProductLineSlider/item.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import cn from 'classnames';
+import Image from '@magento/venia-ui/lib/components/Image';
+import NendroidImage from './nendroid-image.png';
+import NendroidLogo from './logo_nendoroid.png';
+
+const Item = (props) => {
+    const {
+        name = 'Nendroid Series', rootClassName, onClick = () => { },
+        className = "",
+    } = props;
+
+    return (
+        <div className={cn('brand-item-container px-2 lg_px-4', rootClassName)} onClick={onClick}>
+            <div
+                className={cn(
+                    'm-auto flex flex-row justify-center items-center',
+                    'w-full max-w-[300px] px-5 py-2.5',
+                    'relative rounded-lg border border-gray-100 bg-white',
+                    className,
+                )}
+            >
+                <Image
+                    alt='image'
+                    className="relative"
+                    src={NendroidImage}
+                />
+                <Image
+                    alt='logo'
+                    className="relative"
+                    src={NendroidLogo}
+                />
+            </div>
+        </div>
+    )
+}
+
+export default Item;

package/src/components/ProductLineSlider/productLineSlider.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 productSlider = (props) => {
+
+    const settings = {
+        dots: false,
+        infinite: false,
+        speed: 500,
+        slidesToShow: 4,
+        slidesToScroll: 1,
+        nextArrow: <CustomArrow />,
+        prevArrow: <CustomArrow isNext={false} />,
+        centerPadding: "60px",
+        responsive: [
+            {
+                breakpoint: 1023,
+                settings: {
+                    slidesToShow: 3,
+                    slidesToScroll: 1,
+                }
+            },
+            {
+                breakpoint: 767,
+                settings: {
+                    slidesToShow: 3,
+                    slidesToScroll: 1,
+                }
+            },
+            {
+                breakpoint: 576,
+                settings: {
+                    slidesToShow: 2,
+                    slidesToScroll: 1
+                }
+            }
+        ]
+    };
+    return (
+        <div className='product_line_items-container flex flex-col gap-x-4 gap-y-5 '>
+            <div className='text-[18px] font-medium'>
+                Product Line
+            </div>
+            <Slider {...settings}>
+                {[...Array(9)].map(() => {
+                    return (
+                        <Item {...props} />
+                    )
+                })}
+            </Slider>
+            <style global jsx>
+                {`
+                    .product_line_items-container .slick-slider {
+                        margin: 0 -8px;
+                    }
+                    @media only screen and (min-width: 1024px) {
+                        .product_line_items-container .slick-slider {
+                            margin: 0 -16px;
+                        }
+                    }
+                `}
+            </style>
+        </div>
+    )
+}
+
+export default productSlider

package/src/components/SocialMediaShare/index.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import Content from './share';
+import { useToasts } from '@magento/peregrine';
+import { Info } from 'react-feather';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+
+const index = (props) => {
+
+    const [, { addToast }] = useToasts();
+
+    const InfoIcon = <Icon size={20} src={Info} />;
+
+    const location = window.location.href;
+    const encodedUrl = encodeURIComponent(location);
+    const subject = "Check out this awesome product!";
+    const messageCopyContent = "Link has been copied.";
+
+    const loginToastProps = {
+        type: 'info',
+        message: messageCopyContent,
+        timeout: 5000
+    }
+
+    const handleShareLink = (type) => {
+        switch (type) {
+            case 'wa':
+                window.open(`https://wa.me/?text=${encodedUrl}`);
+                break;
+            case 'fb':
+                window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(encodedUrl)}`);
+                break;
+            case 'email':
+                window.open(`mailto:?subject=${subject}&body=${encodedUrl}`);
+                break;
+            case 'link':
+                navigator.clipboard.writeText(location).then(() => {
+                    addToast({ ...loginToastProps, icon: InfoIcon });
+                }, (err) => {
+                    console.error('Failed to copy content:', err);
+                });
+                break;
+            default:
+                break;
+        }
+    }
+    return (
+        <Content handleShareLink={handleShareLink} {...props} />
+    )
+}
+
+export default index

package/src/components/SocialMediaShare/share.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import {
+    Sms, Whatsapp, Facebook, Link as LinkIcon
+} from 'iconsax-react';
+import cn from 'classnames';
+
+const share = (props) => {
+    const { rootClassName, className, handleShareLink } = props
+    return (
+        <>
+            <div className={cn('button_share_group flex flex-wrap gap-4', rootClassName)}>
+                <button
+                    type='button'
+                    className={cn(
+                        'button_share border border-solid border-gray-100 p-2.5',
+                        'rounded-full flex justify-center items-center h-fitContent',
+                        className
+                    )}
+                    onClick={() => {
+                        handleShareLink('wa')
+                    }}
+                >
+                    <Whatsapp
+                        size="20"
+                        color="#25D366"
+                    />
+                </button>
+                {/* <button
+                    type='button'
+                    className={cn(
+                        'button_share border border-solid border-gray-100 p-2.5',
+                        'rounded-full flex justify-center items-center h-fitContent',
+                        className
+                    )}
+                >
+                    <Instagram
+                        size="20"
+                        color="#ee2a7b"
+                    />
+                </button> */}
+                <button
+                    type='button'
+                    className={cn(
+                        'button_share border border-solid border-gray-100 p-2.5',
+                        'rounded-full flex justify-center items-center h-fitContent',
+                        className
+                    )}
+                    onClick={() => {
+                        handleShareLink('fb')
+                    }}
+                >
+                    <Facebook
+                        size="20"
+                        color="#4267B2"
+                    />
+                </button>
+                <button
+                    type='button'
+                    className={cn(
+                        'button_share border border-solid border-gray-100 p-2.5',
+                        'rounded-full flex justify-center items-center h-fitContent',
+                        className
+                    )}
+                    onClick={() => {
+                        handleShareLink('email')
+                    }}
+                >
+                    <Sms
+                        size="20"
+                        color="#005947"
+                    />
+                </button>
+                <button
+                    type='button'
+                    className={cn(
+                        'button_share border border-solid border-gray-100 p-2.5',
+                        'rounded-full flex justify-center items-center h-fitContent',
+                        className
+                    )}
+                    onClick={() => {
+                        handleShareLink('link')
+                    }}
+                >
+                    <LinkIcon
+                        size="20"
+                        color="#999999"
+                    />
+                </button>
+            </div>
+        </>
+    )
+}
+
+export default share

package/src/intercept.js

@@ -23,38 +23,38 @@ module.exports = targets => {
 
   // Tap into webpackCompiler
   targets.of('@magento/pwa-buildpack').webpackCompiler.tap(compiler => {
-      // Check if the LocalizationPlugin is present
-      if (compiler.options.plugins) {
-        const localizationPlugin = compiler.options.plugins.find(
-            plugin => plugin instanceof LocalizationPlugin
-        );
+    // Check if the LocalizationPlugin is present
+    if (compiler.options.plugins) {
+      const localizationPlugin = compiler.options.plugins.find(
+        plugin => plugin instanceof LocalizationPlugin
+      );
 
-        // Check if LocalizationPlugin is found
-        if (localizationPlugin) {
-            // Store the original mergeLocales function
-            const originalMergeLocales = localizationPlugin.mergeLocales;
+      // Check if LocalizationPlugin is found
+      if (localizationPlugin) {
+        // Store the original mergeLocales function
+        const originalMergeLocales = localizationPlugin.mergeLocales;
 
-            // Define your custom hook
-            function myCustomMergeLocalesHook(current, update) {
-                // Modify the mergedLocales data here
-                Object.keys(update).forEach(key => {
-                  if (typeof current[key] === 'undefined') {
-                      current[key] = [];
-                  }
-                  if (Array.isArray(current[key]) && Array.isArray(update[key])) {
-                    if (update[key].toString().includes("venia-ui")) {
-                      delete update[key];
-                    }
-                  }
-              });
-
-                // Return the modified mergedLocales
-                return originalMergeLocales.call(localizationPlugin, current, update);
+        // Define your custom hook
+        function myCustomMergeLocalesHook(current, update) {
+          // Modify the mergedLocales data here
+          Object.keys(update).forEach(key => {
+            if (typeof current[key] === 'undefined') {
+              current[key] = [];
+            }
+            if (Array.isArray(current[key]) && Array.isArray(update[key])) {
+              if (update[key].toString().includes("venia-ui")) {
+                delete update[key];
+              }
             }
+          });
 
-            // Override mergeLocales with your custom hook
-            localizationPlugin.mergeLocales = myCustomMergeLocalesHook;
+          // Return the modified mergedLocales
+          return originalMergeLocales.call(localizationPlugin, current, update);
         }
+
+        // Override mergeLocales with your custom hook
+        localizationPlugin.mergeLocales = myCustomMergeLocalesHook;
+      }
     }
   });
 
@@ -103,6 +103,20 @@ module.exports = targets => {
       path: require.resolve("./components/CollectibleGameSetsPage/index.js"),
       authed: false,
     },
+    {
+      exact: true,
+      name: "BrandListPage",
+      pattern: "/brands",
+      path: require.resolve("./components/BrandListPage/index.js"),
+      authed: false,
+    },
+    {
+      exact: true,
+      name: "BrandLandingPage",
+      pattern: "/brand",
+      path: require.resolve("./components/BrandLandingPage/index.js"),
+      authed: false,
+    },
   ];
 
   // Apply DefinePlugin using the results of the asynchronous operation

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

@@ -37,7 +37,7 @@ const CurrentFilter = props => {
                 aria-label={ariaLabel}
                 data-cy="CurrentFilter-trigger"
             >
-                <Icon size={15} src={Remove} />
+                <Icon size={14} src={Remove} />
             </Trigger>
             <span className={classes.text}>
                 {item.label ? item.label : item.title}

package/src/overwrites/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.module.css

@@ -1,14 +1,15 @@
 .root {
     min-height: 24px;
-    composes: bg-blue-700 from global;
-    /* composes: font-semibold from global; */
+    composes: border from global;
+    composes: border-gray-100 from global;
+    composes: font-semibold from global;
     composes: gap-2xs from global;
     composes: grid-flow-col from global;
     composes: inline-grid from global;
     composes: items-center from global;
     composes: justify-center from global;
     composes: px-2 from global;
-    composes: py-2 from global;
+    composes: py-1 from global;
     composes: rounded-md from global;
     /* composes: text-white from global; */
     composes: text-base from global;
@@ -17,5 +18,5 @@
 /* TODO @TW: cannot compose */
 .root svg {
     /* composes: stroke-white from global; */
-    stroke: white;
+    stroke: rgb(var(--venia-global-color-gray-600));
 }

package/src/overwrites/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilters.module.css

@@ -2,7 +2,9 @@
     composes: px-[10px] from global;
     composes: py-2 from global;
     composes: overflow-auto from global;
-    composes: text-white from global;
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: gap-2 from global;
 }
 
 /* TODO @TW: cannot compose */