@riosst100/pwa-marketplace 2.0.7 → 2.0.9

package/src/components/BrandLandingPage/brandInfo.js

@@ -1,93 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import { Share } from 'iconsax-react';
-import { X } from 'react-feather';
-import Modal from '@riosst100/pwa-marketplace/src/components/Modal';
-import SocialShare from '@riosst100/pwa-marketplace/src/components/SocialMediaShare';
-import { primary900 } from '@riosst100/pwa-marketplace/src/theme/vars'
-
-const brandInfo = () => {
-
-    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;
-    }
-
-    const [open, setOpen] = React.useState(false)
-
-    return (
-        <>
-            <Modal
-                open={open}
-                setOpen={setOpen}
-                className={cn(
-                    'max-w-max !min-h-auto px-[30px] pt-[30px] pb-10',
-                )}
-            >
-                <div className='social_share-container flex flex-col gap-y-7'>
-                    <div className='flex justify-between'>
-                        <div className='text-lg font-medium'>
-                            Share to your friends
-                        </div>
-                        <button onClick={() => { setOpen(!open) }} >
-                            <X size={24} color={primary900} />
-                        </button>
-                    </div>
-                    <div className='flex flex-row border border-gray-100 rounded-md px-5 py-2.5 gap-x-2.5 items-center'>
-                        <div
-                            className={cn(
-                                'bg-darkblue-900 text-white uppercase text-lg font-bold leading-5',
-                                'p-2 rounded-md relative w-12 h-12 text-center flex items-center justify-center'
-                            )}
-                        >
-                            {initialName('Bandai Namco')}
-                        </div>
-                        <div className='flex flex-col'>
-                            <div className='text-[14px] font-normal'>
-                                Bandai Namco.TCG
-                            </div>
-                            <div className='text-[12px] font-normal text-gray-200'>
-                                bandainamco-tcg.link
-                            </div>
-                        </div>
-                    </div>
-                    <SocialShare rootClassName="justify-center" />
-                </div>
-            </Modal>
-            <div className='flex justify-between items-center border border-gray-100 p-5 rounded-md mt-[30px] mb-8'>
-                <div className='brand_name-wrapper flex gap-x-[15px] items-center'>
-                    <div
-                        className={cn(
-                            'bg-darkblue-900 text-white uppercase text-lg font-bold leading-5',
-                            'p-5 rounded-md relative w-[100px] h-[100px] text-center flex items-center justify-center'
-                        )}
-                    >
-                        {initialName('Bandai Namco')}
-                    </div>
-                    <div className='text-lg font-medium'>
-                        Bandai Namco
-                    </div>
-                </div>
-                <div
-                    className='share-wrapper border border-blue-600 rounded-md p-2 group cursor-pointer'
-                    onClick={() => { setOpen(!open) }}
-                >
-                    <Share
-                        size="15"
-                        className='text-blue-600 group-hover_text-blue-800'
-                    />
-                </div>
-            </div>
-        </>
-    )
-}
-
-export default brandInfo

package/src/components/BrandLandingPage/brandLanding.js

@@ -1,255 +0,0 @@
-import React, { Fragment, Suspense, useMemo, useRef } from 'react';
-import { FormattedMessage } from 'react-intl';
-import { array, number, shape, string } from 'prop-types';
-
-import { useIsInViewport } from '@magento/peregrine/lib/hooks/useIsInViewport';
-import { useCategoryContent } from '@magento/peregrine/lib/talons/RootComponents/Category';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import Breadcrumbs from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Breadcrumbs';
-import FilterModalOpenButton, {
-    FilterModalOpenButtonShimmer
-} from '@magento/venia-ui/lib/components/FilterModalOpenButton';
-import { FilterSidebarShimmer } from '@magento/venia-ui/lib/components/FilterSidebar';
-import Gallery, { GalleryShimmer } from '@magento/venia-ui/lib/components/Gallery';
-import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
-import Pagination from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Pagination';
-import ProductSort, { ProductSortShimmer } from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/ProductSort';
-import RichContent from '@magento/venia-ui/lib/components/RichContent';
-import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
-import SortedByContainer, {
-    SortedByContainerShimmer
-} from '@magento/venia-ui/lib/components/SortedByContainer';
-import defaultClasses from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/RootComponents/Category/category.module.css';
-import NoProductsFound from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/RootComponents/Category/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 ProductLineSlider from '@riosst100/pwa-marketplace/src/components/ProductLineSlider';
-import BrandMenu from './menu';
-import BrandInfo from './brandInfo';
-
-const FilterModal = React.lazy(() => import('@magento/venia-ui/lib/components/FilterModal'));
-const FilterSidebar = React.lazy(() =>
-    import('@magento/venia-ui/lib/components/FilterSidebar')
-);
-
-const CategoryContent = props => {
-    const {
-        categoryId,
-        data,
-        isLoading,
-        pageControl,
-        sortProps,
-        pageSize
-    } = props;
-    const [currentSort] = sortProps;
-
-    const talonProps = useCategoryContent({
-        categoryId,
-        data,
-        pageSize
-    });
-
-    const {
-        availableSortMethods,
-        categoryName,
-        categoryDescription,
-        filters,
-        items,
-        children,
-        totalCount,
-        totalPagesFromData,
-        attributesBlock,
-        category
-    } = talonProps;
-
-    const sidebarRef = useRef(null);
-    const classes = useStyle(defaultClasses, props.classes);
-    const shouldRenderSidebarContent = useIsInViewport({
-        elementRef: sidebarRef
-    });
-
-    const shouldShowFilterButtons = filters && filters.length;
-    const shouldShowFilterShimmer = filters === null;
-
-    // If there are no products we can hide the sort button.
-    const shouldShowSortButtons = totalPagesFromData && availableSortMethods;
-    const shouldShowSortShimmer = !totalPagesFromData && isLoading;
-
-    const maybeFilterButtons = shouldShowFilterButtons ? (
-        <FilterModalOpenButton filters={filters} />
-    ) : shouldShowFilterShimmer ? (
-        <FilterModalOpenButtonShimmer />
-    ) : null;
-
-    const filtersModal = shouldShowFilterButtons ? (
-        <FilterModal filters={filters} />
-    ) : null;
-
-    const sidebar = shouldShowFilterButtons ? (
-        <FilterSidebar filters={filters} />
-    ) : shouldShowFilterShimmer ? (
-        <FilterSidebarShimmer />
-    ) : null;
-
-    const maybeSortButton = shouldShowSortButtons ? (
-        <ProductSort
-            sortProps={sortProps}
-            availableSortMethods={availableSortMethods}
-        />
-    ) : shouldShowSortShimmer ? (
-        <ProductSortShimmer />
-    ) : null;
-
-    const shouldShowProductListTab = totalPagesFromData;
-    const shouldShowProductListTabShimmer = !totalPagesFromData && isLoading;
-
-    const maybeSortContainer = shouldShowSortButtons ? (
-        <SortedByContainer currentSort={currentSort} />
-    ) : shouldShowSortShimmer ? (
-        <SortedByContainerShimmer />
-    ) : null;
-
-    const maybeProductsTabContainer = shouldShowProductListTab ? (
-        <ProductListTab />
-    ) : shouldShowProductListTabShimmer ? (
-        <ProductListTabShimmer />
-    ) : null;
-
-    const categoryResultsHeading =
-        totalCount > 0 ? (
-            <FormattedMessage
-                id={'categoryContent.resultCount'}
-                values={{
-                    count: totalCount
-                }}
-                defaultMessage={'{count} Results'}
-            />
-        ) : isLoading ? (
-            <Shimmer width={5} />
-        ) : null;
-
-    const categoryDescriptionElement = categoryDescription ? (
-        <RichContent html={categoryDescription} />
-    ) : null;
-
-    const content = useMemo(() => {
-        if (!totalPagesFromData && !isLoading) {
-            return <NoProductsFound categoryId={categoryId} />;
-        }
-
-        const gallery = totalPagesFromData ? (
-            <Gallery items={items} />
-        ) : (
-            <GalleryShimmer items={items} />
-        );
-
-        const pagination = totalPagesFromData ? (
-            <Pagination pageControl={pageControl} />
-        ) : null;
-
-        return (
-            <Fragment>
-                <section className={classes.gallery}>{gallery}</section>
-                <div className={classes.pagination}>{pagination}</div>
-            </Fragment>
-        );
-    }, [
-        categoryId,
-        classes.gallery,
-        classes.pagination,
-        isLoading,
-        items,
-        pageControl,
-        totalPagesFromData
-    ]);
-
-    const categoryTitle = categoryName ? categoryName : <Shimmer width={5} />;
-
-    return (
-        <Fragment>
-            {/* <Breadcrumbs categoryId={categoryId} /> */}
-            <StoreTitle>{categoryName}</StoreTitle>
-            <article className={classes.root} data-cy="CategoryContent-root">
-                <section className={classes.categoryHeader}>
-                    {/* <h1 aria-live="polite" className={classes.title}>
-                        <span
-                            className={classes.categoryTitle}
-                            data-cy="CategoryContent-categoryTitle"
-                        >
-                            {categoryTitle}
-                        </span>
-                    </h1>
-                    {categoryDescriptionElement} */}
-                    <BrandInfo />
-                </section>
-                {/* <SubCategory children={children} /> */}
-                <AttributesBlock category={category} attributesBlock={attributesBlock} />
-                <section
-                    className={cn(
-                        'category_brand-slider my-5 before_absolute before_bg-[#F8F8F8]',
-                        'before_min-h-[120px] before_w-full before_left-0 before_!block before_z-[-1] before_mt-[-15px]'
-                    )}
-                >
-                    <ProductLineSlider />
-                </section>
-                <section className='brand_menu'>
-                    <BrandMenu />
-                </section>
-                <div className={classes.contentWrapper}>
-                    <div ref={sidebarRef} className={classes.sidebar}>
-                        <Suspense fallback={<FilterSidebarShimmer />}>
-                            {shouldRenderSidebarContent ? sidebar : null}
-                        </Suspense>
-                    </div>
-                    <div className={classes.categoryContent}>
-                        <div className={cn(classes.heading)}>
-                            {maybeProductsTabContainer}
-                            <div className={classes.headerButtons}>
-                                {maybeFilterButtons}
-                                {maybeSortButton}
-                            </div>
-                            {maybeSortContainer}
-                        </div>
-                        <div className={cn(classes.heading)}>
-                            <div
-                                data-cy="CategoryContent-categoryInfo"
-                                className={classes.categoryInfo}
-                            >
-                                {categoryResultsHeading}
-                            </div>
-                        </div>
-                        {content}
-                        <Suspense fallback={null}>{filtersModal}</Suspense>
-                    </div>
-                </div>
-            </article>
-        </Fragment>
-    );
-};
-
-export default CategoryContent;
-
-CategoryContent.propTypes = {
-    classes: shape({
-        gallery: string,
-        pagination: string,
-        root: string,
-        categoryHeader: string,
-        title: string,
-        categoryTitle: string,
-        sidebar: string,
-        categoryContent: string,
-        heading: string,
-        categoryInfo: string,
-        headerButtons: string
-    }),
-    // sortProps contains the following structure:
-    // [{sortDirection: string, sortAttribute: string, sortText: string},
-    // React.Dispatch<React.SetStateAction<{sortDirection: string, sortAttribute: string, sortText: string}]
-    sortProps: array,
-    pageSize: number
-};

package/src/components/BrandLandingPage/index.js

@@ -1,94 +0,0 @@
-import React, { Fragment } from 'react';
-import { shape, string } from 'prop-types';
-import { useCategory } from '@magento/peregrine/lib/talons/RootComponents/Category';
-import { useStyle } from '@magento/venia-ui/lib/classify';
-
-import CategoryContent from './brandLanding';
-import defaultClasses from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/RootComponents/Category/category.module.css';
-import { Meta } from '@magento/venia-ui/lib/components/Head';
-import { GET_PAGE_SIZE } from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/RootComponents/Category/category.gql';
-import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
-import { useIntl } from 'react-intl';
-
-const MESSAGES = new Map().set(
-    'NOT_FOUND',
-    "Looks like the category you were hoping to find doesn't exist. Sorry about that."
-);
-
-const Category = props => {
-    const { uid } = props;
-    const { formatMessage } = useIntl();
-
-    const cat_id = "NTI=";
-
-    const talonProps = useCategory({
-        id: cat_id,
-        queries: {
-            getPageSize: GET_PAGE_SIZE
-        }
-    });
-
-
-    const {
-        error,
-        metaDescription,
-        loading,
-        categoryData,
-        pageControl,
-        sortProps,
-        pageSize,
-        categoryNotFound
-    } = talonProps;
-
-    const classes = useStyle(defaultClasses, props.classes);
-
-    if (!categoryData) {
-        if (error && pageControl.currentPage === 1) {
-            if (process.env.NODE_ENV !== 'production') {
-                console.error(error);
-            }
-
-            return <ErrorView />;
-        }
-    }
-    if (categoryNotFound) {
-        return (
-            <ErrorView
-                message={formatMessage({
-                    id: 'category.notFound',
-                    defaultMessage: MESSAGES.get('NOT_FOUND')
-                })}
-            />
-        );
-    }
-
-    return (
-        <Fragment>
-            <Meta name="description" content={metaDescription} />
-            <CategoryContent
-                categoryId={cat_id}
-                classes={classes}
-                data={categoryData}
-                isLoading={loading}
-                pageControl={pageControl}
-                sortProps={sortProps}
-                pageSize={pageSize}
-            />
-        </Fragment>
-    );
-};
-
-Category.propTypes = {
-    classes: shape({
-        gallery: string,
-        root: string,
-        title: string
-    }),
-    uid: string
-};
-
-Category.defaultProps = {
-    uid: 'Mg=='
-};
-
-export default Category;

package/src/components/BrandLandingPage/menu.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import { Link } from "react-router-dom";
-
-const menu = () => {
-
-    const menu = ['Action Figures', 'Anime', 'Nendoroid']
-    return (
-        <>
-            <div className="menu_brand-container border border-gray-100 rounded-lg flex flex-wrap gap-x-10 gap-y-5 px-10">
-                {menu.map((item, index) => (
-                    <Link to="/" key={index} className="text-base font-medium my-3">
-                        {item}
-                    </Link>
-                ))}
-            </div>
-        </>
-    )
-}
-
-export default menu

package/src/components/BrandListPage/brandList.js

@@ -1,88 +0,0 @@
-import React from 'react';
-import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
-import BrandItem from '@riosst100/pwa-marketplace/src/components/BrandSlider/item';
-import cn from 'classnames';
-import Image from '@magento/venia-ui/lib/components/Image';
-import bannerImage from './banner_brands.png';
-
-const brandList = (props) => {
-    const { letters, groupedBrands, active, handleActive, availableLetter } = props;
-
-    return (
-        <>
-            <section className='brand_banner-container mt-6'>
-                <Image
-                    alt='brand-banner'
-                    className="relative"
-                    src={bannerImage}
-                />
-            </section>
-            <section className='brands_list-indexing-container relative m-auto py-10'>
-                <ul className='flex gap-2 justify-center flex-wrap'>
-                    <li >
-                        <button
-                            className={cn(
-                                'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
-                                'leading-4 font-medium text-base hover_bg-gray-50'
-                            )}
-                            onClick={() => {
-                                handleActive('all')
-                            }}
-                        >
-                            All
-                        </button>
-                    </li>
-                    {letters.map((letter, index) => (
-                        <li key={index}>
-                            <button
-                                className={cn(
-                                    'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
-                                    'leading-4 font-medium text-base ',
-                                    !availableLetter.includes(letter) ? 'bg-gray-100' : 'hover_bg-gray-50',
-                                )}
-                                onClick={() => {
-                                    handleActive(letter)
-                                }}
-                                disabled={!availableLetter.includes(letter)}
-                            >
-                                {letter}
-                            </button>
-                        </li>
-                    ))}
-                </ul>
-            </section>
-            <Divider className="mb-10" />
-            <section className='brand_list-container'>
-                <div className='brand_list-wrapper'>
-                    {availableLetter.map((initialLetter, index) => (
-                        <>
-                            {active === 'all' || active === initialLetter ? (
-                                <div className='brand_group-wrapper mb-10' key={index}>
-                                    <div className='brand_item_group_letter text-xl font-medium mb-[30px]' >
-                                        {initialLetter}
-                                    </div>
-                                    <div
-                                        className={cn(
-                                            'brand_item-list grid grid-cols-2 sm_grid-cols-3 md_grid-cols-4 lg_grid-cols-5 -mx-2 lg_-mx-4 gap-y-4'
-                                        )}
-                                    >
-                                        {groupedBrands[initialLetter].map((brand, index) => (
-                                            <BrandItem
-                                                key={index}
-                                                name={brand.name}
-                                                className="cursor-pointer"
-                                                onClick={() => { alert(brand.name) }}
-                                            />
-                                        ))}
-                                    </div>
-                                </div>
-                            ) : null}
-                        </>
-                    ))}
-                </div>
-            </section>
-        </>
-    )
-}
-
-export default brandList

package/src/components/BrandListPage/index.js

@@ -1,57 +0,0 @@
-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