@riosst100/pwa-marketplace 2.0.9 → 2.1.0

package/src/components/CustomSortBy/productSort.module.css

@@ -0,0 +1,65 @@
+.root {
+    composes: relative from global;
+    composes: ml-2xs from global;
+}
+
+.menu {
+    composes: absolute from global;
+    composes: bg-clip-padding from global;
+    composes: bg-white from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-gray-100 from global;
+    composes: list-none from global;
+    composes: mb-0 from global;
+    composes: min-w-[10rem] from global;
+    composes: mt-0.5 from global;
+    composes: mx-0 from global;
+    composes: right-0 from global;
+    composes: rounded from global;
+    composes: shadow-menu from global;
+    composes: text-colorDefault from global;
+    composes: text-left from global;
+    composes: top-[110%] from global;
+    composes: z-menu from global;
+    composes: p-2.5 from global;
+}
+
+.menuItem {
+    composes: hover_bg-gray-100 from global;
+    composes: rounded-[5px] from global;
+    composes: relative from global;
+}
+
+.sortButton {
+    composes: rounded-[5px] from global;
+    composes: p-2.5 from global;
+
+    composes: min-w-[154px] from global;
+}
+
+.desktopText {
+    composes: hidden from global;
+
+    composes: lg_inline-flex from global;
+}
+
+.sortText {
+    composes: leading-normal from global;
+    composes: text-colorDefault from global;
+    composes: text-base from global;
+}
+
+.desktopIconWrapper {
+    transform: translateX(10px);
+}
+
+.desktopIcon {
+    /* composes: icon from '../Icon/icon.module.css'; */
+
+    composes: stroke-gray-500 from global;
+}
+
+.mobileText {
+    composes: lg_hidden from global;
+}

package/src/components/CustomSortBy/productSort.shimmer.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+import defaultClasses from './productSort.shimmer.module.css';
+
+const ProductSortShimmer = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <div className={classes.root} aria-live="polite" aria-busy="true">
+            <Shimmer
+                classes={{ root_button: classes.sortButtonShimmer }}
+                type="button"
+            />
+        </div>
+    );
+};
+
+ProductSortShimmer.propTypes = {
+    classes: shape({
+        root: string,
+        sortButtonShimmer: string
+    })
+};
+
+export default ProductSortShimmer;

package/src/components/CustomSortBy/productSort.shimmer.module.css

@@ -0,0 +1,10 @@
+.root {
+    composes: root from './productSort.module.css';
+}
+
+.sortButtonShimmer {
+    /* composes: root_button from '../Shimmer/shimmer.module.css'; */
+    composes: sortButton from './productSort.module.css';
+
+    composes: lg_min-w-[12rem] from global;
+}

package/src/components/CustomSubCategory/subCategory.js

@@ -0,0 +1,36 @@
+import { useSubCategory } from '@riosst100/pwa-marketplace/src/talons/SubCategory/useSubCategory';
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import defaultClasses from './subCategory.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+const SubCategory = props => {
+    const { children } = props;
+
+    const talonProps = useSubCategory({ children });
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const {
+        normalizedData
+    } = talonProps;
+    
+    const subCategory = [];
+    
+    if (normalizedData && normalizedData.length) {
+        normalizedData.map(({ text, path }, index) => {
+            subCategory.push(
+                <Link
+                    key={index}
+                    to={path}
+                >
+                    <li className={classes.item}>{text}</li>
+                </Link>
+            )
+        });
+    }
+
+    return subCategory.length ? <ul className={classes.root}>{subCategory}</ul> : '';
+};
+
+export default SubCategory;

package/src/components/CustomSubCategory/subCategory.module.css

@@ -0,0 +1,22 @@
+.root {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: mt-3 from global;
+    composes: gap-[15px] from global;
+    margin-bottom: 10px;
+}
+
+.item {
+    composes: px-4 from global;
+    composes: py-2 from global;
+    composes: transition-colors from global;
+    composes: duration-150 from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: leading-normal from global;
+    composes: text-base from global;
+    composes: text-colorDefault from global;
+    composes: bg-white from global;
+    composes: border-gray-100 from global;
+    border-radius: 5px;
+}

package/src/components/CustomSubCategoryPage/subCategoryPage.js

@@ -0,0 +1,136 @@
+import React, { Fragment, Suspense, useMemo, useRef, useState } from 'react';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import cn from 'classnames';
+import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
+import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
+import { Link } from 'react-router-dom';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import defaultClasses from './subCategoryPage.module.css';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+import { ShopByShimmer } from '@riosst100/pwa-marketplace/src/components/ShopBy';
+import CustomSortBy from '@riosst100/pwa-marketplace/src/components/CustomSortBy';
+import ArraySearchInput from '@riosst100/pwa-marketplace/src/components/ArraySearchInput';
+import { useSubCategoryPage } from '@riosst100/pwa-marketplace/src/talons/SubCategoryPage/useSubCategoryPage';
+import Breadcrumbs from '@magento/venia-ui/lib/components/Breadcrumbs';
+
+const SubCategoryPage = props => {
+    const { categoryId } = props;
+    const [active, setActive] = useState('all');
+    const [searchQuery, setSearchQuery] = useState('');
+
+    const classes = useStyle(defaultClasses);
+
+    const talonProps = useSubCategoryPage({ searchQuery, setActive, categoryId });
+
+    const { error, loading, dataResult, categoryUrlSuffix, filteredAvailableGroups, availableGroups, alpha, category } = talonProps;
+
+    if (loading && !dataResult)
+        return <ShopByShimmer />;
+    if (error && !dataResult) return <ErrorView />;
+
+    if (!dataResult && !loading && !error) {
+        return <ShopByShimmer />;
+    }
+
+    const newAvailableGroups = searchQuery ? filteredAvailableGroups : availableGroups;
+
+    const setRelases = newAvailableGroups.map((group, index) => {
+        const optionsResult = [];
+
+        if (active === 'all' || active === group) {
+            dataResult[group].map((option, index) => {
+                const { name, url_path } = option;
+
+                optionsResult.push(<li className='list-none'>
+                    <Link to={'/' + url_path + categoryUrlSuffix} className="hover_bg-darkblue-900 hover_text-white w-full block text-[14px] py-[2px] px-2">
+                        {name}
+                    </Link>
+                </li>)
+            })
+
+            return (
+                <>
+                    {optionsResult ?
+                    <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                        <div className='singles_item_group_letter text-xl font-medium border-b border-gray-100 pb-1 mb-2' >
+                            {group}
+                        </div>
+                        <div className={cn('singles_item-list flex flex-col')}>{optionsResult}</div>
+                    </div> : ''}
+                </>
+            );
+        }
+        
+        return null;
+    });
+
+    const handleActive = (val) => {
+        setActive(val);
+        setSearchQuery('')
+    }
+
+    const title = category ? 'All ' + category.parent[0].name : '';
+
+    return (
+        <Fragment>
+            <StoreTitle>{title}</StoreTitle>
+            <Breadcrumbs categoryId={categoryId} customPage={title} />
+            <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
+                {title}
+            </h1>
+            <div className='border border-gray-100 px-6'>
+                {dataResult ? (
+                    <div
+                        className={classes.toolbar}
+                    >
+                        <div style={{"width":"35%"}}><ArraySearchInput active={active} searchQuery={searchQuery} placeholder="Search sets..." isOpen={true} setSearchQuery={setSearchQuery} /></div>
+                    </div>
+                ) : ''}
+                <>
+                    <section className='single_list-indexing-container relative m-auto pt-5'>
+                        <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')
+                                    }}
+                                >
+                                    {active == 'all' ? <b>All</b> : 'All'}
+                                </button>
+                            </li>
+                            {alpha.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 ',
+                                            availableGroups.includes(letter) > 0 ? 'hover_bg-gray-50' : 'bg-gray-100 text-gray-400',
+                                        )}
+                                        onClick={() => {
+                                            handleActive(letter)
+                                        }}
+                                        disabled={availableGroups.includes(letter) > 0 ? false : true}
+                                    >
+                                        {active == letter ? <b>{letter}</b> : letter}
+                                    </button>
+                                </li>
+                            ))}
+                        </ul>
+                    </section>
+                </>
+                <Divider className="mb-5 px-4 mt-5" />
+                <section className='singles-container'>
+                    <div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>
+                        {Object.keys(dataResult).length != 0 ? setRelases : (searchQuery ? <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>No data found for <b>{searchQuery}</b> search query.</div> : <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>No data found.</div>)}
+                    </div>
+                </section>
+            </div>
+        </Fragment>
+    );
+};
+
+export default SubCategoryPage;

package/src/components/CustomSubCategoryPage/subCategoryPage.module.css

@@ -0,0 +1,46 @@
+.toolbar {
+    composes: relative from global;
+    composes: ml-2xs from global;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+}
+
+.tabs {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: mt-3 from global;
+    composes: gap-[15px] from global;
+    margin-bottom: 30px;
+}
+
+.tabs_item {
+    composes: px-4 from global;
+    composes: py-2 from global;
+    composes: transition-colors from global;
+    composes: duration-150 from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: leading-normal from global;
+    composes: text-base from global;
+    composes: text-colorDefault from global;
+    composes: bg-white from global;
+    composes: border-gray-100 from global;
+    border-radius: 5px;
+}
+
+.singlesWrapper {
+    column-count: 1;
+}
+
+@media screen and (min-width: 768px) {
+    .singlesWrapper {
+        column-count: 2;
+    }
+}
+
+@media screen and (min-width: 1023px) {
+    .singlesWrapper {
+        column-count: 3;
+    }
+}

package/src/components/Divider/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import cn from 'classnames';
+
+const Divider = (props) => {
+    const { className } = props
+    return (
+        <div className={cn('w-full h-[1px] bg-gray-100', className)} />
+    )
+}
+
+export default Divider

package/src/components/Dropdown/dropdown.js

@@ -0,0 +1,80 @@
+import React, { useEffect, useState, useRef } from 'react';
+import cn from 'classnames';
+import { ArrowDown2 } from 'iconsax-react';
+
+const Dropdown = (props) => {
+    const {
+        placeholder, options, onSelect, rootClassName, className,
+        optionsClassName, optionItemClassName,
+    } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    const [selected, setSelected] = useState('');
+    const dropdownRef = useRef(null);
+
+    const toggleDropdown = () => setIsOpen(!isOpen);
+
+    const handleClick = (option) => {
+        onSelect(option);
+        setSelected(option.label)
+        setIsOpen(false);
+    };
+
+    const handleClickOutside = (event) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+            setIsOpen(false);
+        }
+    };
+
+    useEffect(() => {
+        const listener = document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [isOpen]);
+
+    return (
+        <div className={cn('dropdown relative', rootClassName)} ref={dropdownRef}>
+            <button
+                onClick={toggleDropdown}
+                className={cn(
+                    'text-base text-gray-400 flex justify-between items-center gap-x-4 border',
+                    'border-gray-100 border-solid rounded-md min-w-max px-2.5 py-2',
+                    className
+                )}
+                style={{
+                    "paddingLeft":"1rem"
+                }}
+            >
+                {selected ? selected : placeholder}
+                <ArrowDown2
+                    size={14}
+                    className={cn(
+                        ' text-gray-400 transition-all',
+                        isOpen ? 'rotate-180' : 'rotate-0',
+                    )}
+                />
+            </button>
+            {isOpen && (
+                <ul
+                    className={cn(
+                        'absolute rounded-md bg-white w-full p-2.5 mt-2 border border-gray-100',
+                        optionsClassName,
+                    )}
+                >
+                    {options.map((option) => (
+                        <li
+                            className={cn(
+                                'cursor-pointer px-3 py-1.5 hover_bg-gray-100 rounded-md',
+                                optionItemClassName
+                            )}
+                            key={option.value}
+                            onClick={() => handleClick(option)}
+                        >
+                            {option.label}
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
+};
+
+export default Dropdown;

package/src/components/Dropdown/index.js

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

package/src/components/FavoriteSeller/favoriteSeller.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
+import { useIntl } from 'react-intl';
+import Item from './item';
+
+const favoriteSeller = () => {
+
+    const { formatMessage } = useIntl();
+    const PAGE_TITLE = formatMessage({
+        id: 'favoriteSellerPage.pageTitleText',
+        defaultMessage: 'Favorite Seller'
+    });
+
+    return (
+        <div className='relative'>
+            <StoreTitle>{PAGE_TITLE}</StoreTitle>
+            <div aria-live="polite" className="text-xl font-medium text-left mb-[30px]">
+                {PAGE_TITLE}
+            </div>
+
+            <div className='flex flex-col gap-5'>
+                {
+                    [...Array(5)].map(() => (
+                        <Item />
+                    ))
+                }
+            </div>
+        </div>
+    )
+}
+
+export default favoriteSeller

package/src/components/FavoriteSeller/index.js

@@ -0,0 +1,14 @@
+import FavoriteSeller from './favoriteSeller'
+import AccountLayout from '@riosst100/pwa-marketplace/src/components/AccountLayout';
+
+import React from 'react'
+
+const index = () => {
+    return (
+        <AccountLayout>
+            <FavoriteSeller />
+        </AccountLayout>
+    )
+}
+
+export default index

package/src/components/FavoriteSeller/item.js

@@ -0,0 +1,140 @@
+import React from 'react';
+import { Form } from 'informed';
+import Button from '@magento/venia-ui/lib/components/Button';
+import Image from '@magento/venia-ui/lib/components/Image';
+import Verify from '@riosst100/pwa-marketplace/src/components/CrossSeller/verifyIcon';
+import Star from '@riosst100/pwa-marketplace/src/components/CrossSeller/starIcon';
+import logoImage from '@riosst100/pwa-marketplace/src/components/CrossSeller/logo_seller.png';
+import { Share, Trash } from 'iconsax-react';
+import SocialShare from '@riosst100/pwa-marketplace/src/components/SocialMediaShare';
+import { X } from 'react-feather';
+import Modal from '@riosst100/pwa-marketplace/src/components/Modal';
+import cn from 'classnames';
+import { primary900 } from '@riosst100/pwa-marketplace/src/theme/vars';
+import { FormattedMessage } from 'react-intl';
+
+const item = () => {
+    const [open, setOpen] = React.useState(false);
+
+    const handleRemoveFromFavorite = () => {
+        alert('remove fav seller')
+    }
+
+    const handleGoToSellerPage = () => {
+        alert('to seller page')
+    }
+
+    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='flex flex-col'>
+                            <div className='text-[14px] font-normal'>
+                                Zen Market.TCG
+                            </div>
+                            <div className='text-[12px] font-normal text-gray-200'>
+                                zenmarket-tcg.link
+                            </div>
+                        </div>
+                    </div>
+                    <SocialShare rootClassName="justify-center" />
+                </div>
+            </Modal>
+            <div className='border border-gray-100 rounded-md p-5 flex flex-col md_flex-row justify-between gap-y-4'>
+                <div className='seller_info-container flex flex-row gap-x-[15px]'>
+                    <div className='logo_wrapper w-[100px] h-[100px]'>
+                        <Image
+                            alt='seller name'
+                            className="relative mt-[-5px]"
+                            src={logoImage}
+                        />
+                    </div>
+                    <div className='flex flex-col gap-y-[15px]'>
+                        <div className='flex flex-col gap-[6px]'>
+                            <div className='seller_summary-wrapper flex flex-row gap-x-2.5 items-center'>
+                                <div className='seller_name text-lg font-medium leading-6'>
+                                    Zen Market
+                                </div>
+                                <div className='seller_badge flex flex-row gap-x-[5px] items-center leading-6'>
+                                    <Verify />
+                                    <span className='text-xs font-medium text-gray-600-transparent capitalize'>
+                                        Verified
+                                    </span>
+                                </div>
+                            </div>
+                            <div className='flex flex-row gap-x-[5px] items-center'>
+                                <span className='font-normal text-[12px] text-gray-200 '>
+                                    Jurong West
+                                </span>
+                            </div>
+                        </div>
+                        <div className='flex gap-4'>
+                            <Button
+                                classes={{
+                                    content: 'gap-1.5 grid-flow-col inline-grid items-center justify-center justify-items-center capitalize font-medium text-[14px]',
+                                    rootClass: 'py-[0px] h-9 hover_border-blue-700'
+                                }}
+                                onClick={handleGoToSellerPage}
+                            >
+                                <FormattedMessage
+                                    id={'favoriteSeller.visitStore'}
+                                    defaultMessage={'Visit Store'}
+                                />
+                            </Button>
+                            <div
+                                className='flex items-center justify-center gap-[5px] p-[9px] relative rounded-[30px] overflow-hidden border border-solid border-blue-600 hover_border-blue-700 cursor-pointer w-9 h-9'
+                                onClick={() => { setOpen(!open) }}
+                            >
+                                <Share
+                                    size="15"
+                                    className='text-blue-600 group-hover_text-blue-800 left-[-1px]'
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className='flex flex-row justify-between md_justify-center items-center gap-5'>
+                    <div className='flex flex-col gap-y-2'>
+                        <div className='rating_sales flex flex-row gap-x-[5px] items-center'>
+                            <Star width={18} height={18} />
+                            <p className='font-medium text-[18px] text-gray-600'>
+                                4.7
+                            </p>
+                        </div>
+                        <span className='text-gray-800 text-xs'>
+                            <FormattedMessage
+                                id={'favoriteSeller.RatingAndReviews'}
+                                defaultMessage={'Rating & Reviews'}
+                            />
+                        </span>
+
+                    </div>
+                    <Button
+                        data-cy="Product-Section-removeFavorite"
+                        onClick={handleRemoveFromFavorite}
+                        className="min-w-min border border-gray-200 rounded-full border-solid w-7 h-7 flex items-center justify-center hover_border-gray-600"
+                    >
+                        <Trash size="16" color="#999999" />
+                    </Button>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default item

package/src/components/Filter/index.js

@@ -6,7 +6,7 @@ const CatalogFilter = () => {
         <>
             <div className='inline-flex flex-col items-start gap-[10px] px-0 py-[10px] w-full rounded-[6px] overflow-hidden border border-solid border-[#e6e9ea] shadow-[0px_0px_7px_2px_#cdcdcd40]'>
                 <div class="flex h-[18px] items-center justify-between px-[10px] py-0 relative self-stretch w-full">
-                    <div class="relative w-fit text-[16px] tracking-[0] leading-[20px] whitespace-nowrap">
+                    <div class="relative w-fit text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
                         Filter
                     </div>
                     <Filter color="#292D32" size={16} variant="Outline" className='stroke-[#292D32]' />
@@ -14,7 +14,7 @@ const CatalogFilter = () => {
                 <div class="inline-flex flex-col items-start gap-[10px] bg-white relative flex-[0_0_auto]">
                     <div class="flex-col justify-center inline-flex items-center relative flex-[0_0_auto]">
                         <div class="flex w-full cursor-pointer items-center justify-between p-[10px] relative flex-[0_0_auto] bg-white">
-                            <div class="relative w-fit font-semibold text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Category</div>
+                            <div class="relative w-fit font-medium text-base tracking-[0] leading-[18px] whitespace-nowrap">Category</div>
                             <ArrowSquareUp color="#292D32" size={14} variant="Outline" />
                         </div>
                         <hr className='w-full h-[1px]' />