@riosst100/pwa-marketplace 2.0.9 → 2.1.0

package/src/components/BecomeSellerLink/becomeSellerLink.js

@@ -6,7 +6,6 @@ import { Link } from 'react-router-dom';
 import { shape, string } from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useBecomeSellerLink } from '@riosst100/pwa-marketplace/src/talons/BecomeSellerLink/useBecomeSellerLink';
-
 import { BrowserPersistence } from '@magento/peregrine/lib/util';
 
 const storage = new BrowserPersistence();
@@ -35,6 +34,7 @@ const BecomeSellerLink = props => {
         <div className={classes.root} data-cy="BecomeSellerLink-root">
             <Link
                 to={resourceUrl('/become-seller')}
+                className='text-base leading-[16px]'
             >{formatMessage({
                 id: 'becomeSellerPage.title',
                 defaultMessage: 'Become a Seller'

package/src/components/BecomeSellerLink/becomeSellerLink.module.css

@@ -2,12 +2,8 @@
     composes: grid from global;
     composes: items-center from global;
     composes: justify-items-start from global;
-    composes: max-w-site from global;
     composes: mx-auto from global;
     composes: my-0 from global;
-    composes: px-xs from global;
-    composes: py-2xs from global;
     composes: relative from global;
-
     composes: sm_justify-items-end from global;
 }

package/src/components/BecomeSellerPage/becomeSellerPage.js

@@ -8,6 +8,7 @@ import BecomeSeller from '@riosst100/pwa-marketplace/src/components/BecomeSeller
 import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
 import defaultClasses from './becomeSellerPage.module.css';
 
+
 const BecomeSellerPage = props => {
     const classes = useStyle(defaultClasses, props.classes);
     const { becomeSellerProps } = useBecomeSellerPage(props);
@@ -23,7 +24,7 @@ const BecomeSellerPage = props => {
                     defaultMessage: 'Become a Seller'
                 })}
             </StoreTitle>
-            <div className={classes.contentContainer}>
+            <div className="lg_border-2 lg_border-solid lg_border-subtle lg_pb-md lg_rounded-md !border !border-gray-100 !rounded-lg">
                 <BecomeSeller {...becomeSellerProps} />
             </div>
         </div>

package/src/components/BecomeSellerPage/becomeSellerPage.module.css

@@ -5,17 +5,9 @@
     composes: px-0 from global;
     composes: py-md from global;
     composes: text-center from global;
-    grid-template-columns: minmax(auto, 512px);
+    grid-template-columns: minmax(auto, 100%);
 }
 
 .header {
     composes: font-serif from global;
-}
-
-.contentContainer {
-    composes: lg_border-2 from global;
-    composes: lg_border-solid from global;
-    composes: lg_border-subtle from global;
-    composes: lg_pb-md from global;
-    composes: lg_rounded-md from global;
-}
+}

package/src/components/BrandLandingPage/brandInfo.js

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

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

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

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

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

@@ -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