@riosst100/pwa-marketplace 1.4.6 → 1.4.8

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

@@ -30,7 +30,7 @@ const CustomFilters = props => {
     // create elements and params at the same time for efficiency
     const filterElements = useMemo(() => {
         const elements = [];
-        customFiltersData.map((filter, index) => {
+        customFiltersData && customFiltersData.map((filter, index) => {
             const { label, attribute_code, options } = filter || {};
 
             if (options.length) {
@@ -43,17 +43,19 @@ const CustomFilters = props => {
                     // );
                     // const keyAttr = `${attribute_code}[filter]`;
 
-                    Object.keys(params).forEach(function(key, index) {
-                        if (index > 1) {
-                            delete params[key];
-                        }
-                    });
+                    if (params) {
+                        Object.keys(params).forEach(function(key, index) {
+                            if (index > 1) {
+                                delete params[key];
+                            }
+                        });
+                    }
 
                     if (value != "all") {
                         params[`${attribute_code}[filter]`] = `${label},${value}`;
                     }
 
-                    const finalParams = Object.keys(params).map(key => `${key}=${params[key]}`).join('&');
+                    const finalParams = params ? Object.keys(params).map(key => `${key}=${params[key]}`).join('&') : '';
 
                     // console.log(params)
 

package/src/components/FilterTop/filterTop.js

@@ -1,139 +1,13 @@
-import React, { useMemo, useCallback, useRef } from 'react';
-import { FormattedMessage } from 'react-intl';
-import { array, arrayOf, shape, string, number } from 'prop-types';
-import { useFilterSidebar } from '@magento/peregrine/lib/talons/FilterSidebar';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import LinkButton from '@magento/venia-ui/lib/components/LinkButton';
+import React from 'react';
 import CustomFilters from './CustomFilters';
-import FilterBlock from '@magento/venia-ui/lib/components/FilterModal/filterBlock';
-import defaultClasses from './filterTop.module.css';
-
-import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
-
-import { Link } from 'react-router-dom';
-import CurrentFilters from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/FilterModal/CurrentFilters';
-
-const SCROLL_OFFSET = 150;
 
-/**
- * A view that displays applicable and applied filters.
- *
- * @param {Object} props.filters - filters to display
- */
 const FilterTop = props => {
-    const { filters, filterCountToOpen, category } = props;
-    const talonProps = useFilterSidebar({ filters });
-    const {
-        filterApi,
-        filterItems,
-        filterNames,
-        filterFrontendInput,
-        filterState,
-        handleApply,
-        handleReset
-    } = talonProps;
-
-    const filterRef = useRef();
-    const classes = useStyle(defaultClasses, props.classes);
-
-    const handleApplyFilter = useCallback(
-        (...args) => {
-            const filterElement = filterRef.current;
-            if (
-                filterElement &&
-                typeof filterElement.getBoundingClientRect === 'function'
-            ) {
-                const filterTop = filterElement.getBoundingClientRect().top;
-                const windowScrollY =
-                    window.scrollY + filterTop - SCROLL_OFFSET;
-                window.scrollTo(0, windowScrollY);
-            }
-
-            handleApply(...args);
-        },
-        [handleApply, filterRef]
-    );
-
-    const filtersList = useMemo(
-        () =>
-            Array.from(filterItems, ([group, items], iteration) => {
-                const blockState = filterState.get(group);
-                const groupName = filterNames.get(group);
-                const frontendInput = filterFrontendInput.get(group);
-                return (
-                    <FilterBlock
-                        key={group}
-                        filterApi={filterApi}
-                        filterState={blockState}
-                        filterFrontendInput={frontendInput}
-                        group={group}
-                        items={items}
-                        name={groupName}
-                        onApply={handleApplyFilter}
-                        initialOpen={iteration < filterCountToOpen}
-                    />
-                );
-            }),
-        [
-            filterApi,
-            filterItems,
-            filterNames,
-            filterFrontendInput,
-            filterState,
-            filterCountToOpen,
-            handleApplyFilter
-        ]
-    );
-
-    const clearAll = filterState.size ? (
-        <div className={classes.action}>
-            <LinkButton
-                type="button"
-                onClick={handleReset}
-                data-cy="FilterSidebar-clearButton"
-            >
-                <FormattedMessage
-                    id={'filterModal.all'}
-                    defaultMessage={'All'}
-                />
-            </LinkButton>
-        </div>
-    ) : null;
-
+    const { category } = props;
     return (
         <CustomFilters
-            filterApi={filterApi}
-            filterNames={filterNames}
-            filterState={filterState}
-            clearAll={clearAll}
             category={category}
-            onRemove={handleApplyFilter}
         />
     );
 };
 
-FilterTop.defaultProps = {
-    filterCountToOpen: 3
-};
-
-FilterTop.propTypes = {
-    classes: shape({
-        action: string,
-        blocks: string,
-        body: string,
-        header: string,
-        headerTitle: string,
-        root: string,
-        root_open: string
-    }),
-    filters: arrayOf(
-        shape({
-            attribute_code: string,
-            items: array
-        })
-    ),
-    filterCountToOpen: number
-};
-
 export default FilterTop;

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