@riosst100/pwa-marketplace 1.5.2 → 1.5.3

package/src/overwrites/venia-ui/lib/RootComponents/Category/categoryContent.js

@@ -28,6 +28,9 @@ import SubCategory from '@riosst100/pwa-marketplace/src/components/SubCategory/s
 import AttributesBlock from '@riosst100/pwa-marketplace/src/components/AttributesBlock/attributesBlock';
 
 import BrandSlider from '@riosst100/pwa-marketplace/src/components/BrandSlider';
+import CollectibleGameSets from '@riosst100/pwa-marketplace/src/components/CollectibleGameSets/collectibleGameSets';
+import { useLocation } from 'react-router-dom';
+import { getFiltersFromSearch } from '@magento/peregrine/lib/talons/FilterModal/helpers';
 
 const FilterModal = React.lazy(() => import('@magento/venia-ui/lib/components/FilterModal'));
 const FilterSidebar = React.lazy(() =>
@@ -170,6 +173,9 @@ const CategoryContent = props => {
 
     const categoryTitle = categoryName ? categoryName : <Shimmer width={5} />;
 
+    const { search } = useLocation();
+    const activeFilters = getFiltersFromSearch(search);
+
     return (
         <Fragment>
             <Breadcrumbs categoryId={categoryId} />
@@ -186,39 +192,47 @@ const CategoryContent = props => {
                     </h1>
                     {categoryDescriptionElement}
                 </div>
-                {/* <SubCategory filters={filters} children={children} /> */}
-                <FilterTop filters={filters} category={category} />
-                {/* <AttributesBlock category={category} attributesBlock={attributesBlock} /> */}
-                {/* <section className='category_brand-slider my-5'>
-                    <BrandSlider />
-                </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}
+                {activeFilters.size <= 0 && category && category.custom_landing_page ? (
+                    <>
+                        <SubCategory customLandingPage={category.custom_landing_page} />
+                    </>
+                ) : (
+                    <>
+                        {/* <SubCategory filters={filters} children={children} /> */}
+                        <FilterTop filters={filters} category={category} />
+                        {/* <AttributesBlock category={category} attributesBlock={attributesBlock} /> */}
+                        {/* <section className='category_brand-slider my-5'>
+                            <BrandSlider />
+                        </section> */}
+                        <div className={classes.contentWrapper}>
+                            <div ref={sidebarRef} className={classes.sidebar}>
+                                <Suspense fallback={<FilterSidebarShimmer />}>
+                                    {shouldRenderSidebarContent ? sidebar : null}
+                                </Suspense>
                             </div>
-                            {maybeSortContainer}
-                        </div>
-                        <div className={cn(classes.heading)}>
-                            <div
-                                data-cy="CategoryContent-categoryInfo"
-                                className={classes.categoryInfo}
-                            >
-                                {categoryResultsHeading}
+                            <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>
-                        {content}
-                        <Suspense fallback={null}>{filtersModal}</Suspense>
-                    </div>
-                </div>
+                    </>
+                )}
             </article>
         </Fragment>
     );

package/src/overwrites/venia-ui/lib/components/Button/button.module.css

@@ -47,14 +47,16 @@
     composes: root;
 
     composes: bg-transparent from global;
-    composes: border-gray-700 from global;
-    composes: text-gray-700 from global;
+    composes: border-blue-600 from global;
+    composes: text-blue-600 from global;
 
-    composes: active_border-gray-800 from global;
-    composes: active_text-gray-800 from global;
+    /* composes: active_border-blue-600 from global;
+    composes: active_text-gray-800 from global; */
 
-    composes: hover_border-gray-800 from global;
-    composes: hover_text-gray-800 from global;
+    /* composes: hover_border-blue-600 from global; */
+    composes: hover_bg-blue-600 from global;
+    composes: hover_text-white from global;
+    composes: focus_shadow-none from global;
 }
 
 .root_normalPriority {
@@ -69,6 +71,7 @@
 
     composes: hover_border-brand-darkest from global;
     composes: hover_text-brand-darkest from global;
+    composes: focus_shadow-none from global;
 }
 
 .root_highPriority {
@@ -85,6 +88,7 @@
     composes: hover_bg-brand-darkest from global;
     composes: hover_border-brand-darkest from global;
     composes: hover_text-white from global;
+    composes: focus_shadow-none from global;
 }
 
 .root_lowPriorityNegative,

package/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.js

@@ -124,7 +124,7 @@ const FilterSidebar = props => {
                     filterState={filterState}
                     onRemove={handleApplyFilter}
                 />
-                {clearAll}
+                {/* {clearAll} */}
                 <ul className={classes.blocks}>{filtersList}</ul>
             </div>
         </aside>

package/src/overwrites/venia-ui/lib/components/MegaMenu/customSubmenuColumn.js

@@ -5,6 +5,7 @@ import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
 
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import defaultClasses from './customSubmenuColumn.module.css';
+import cn from 'classnames';
 
 const CustomSubmenuColumn = props => {
     const {
@@ -15,7 +16,7 @@ const CustomSubmenuColumn = props => {
         customMenuItems,
         toggleCustomMenu
     } = props;
-    
+
     const classes = useStyle(defaultClasses, props.classes);
 
     let children = null;
@@ -29,7 +30,7 @@ const CustomSubmenuColumn = props => {
             );
 
             return (
-                <li key={index} className={classes.submenuChildItem}>
+                <li key={index} className={cn(classes.submenuChildItem, 'mb-1.5')}>
                     <Link
                         className={classes.link}
                         data-cy="MegaMenu-CustomSubmenuColumn-link"
@@ -46,7 +47,7 @@ const CustomSubmenuColumn = props => {
             );
         });
 
-        children = <ul className={classes.submenuChild}>{childrenItems}</ul>;
+        children = <ul className={cn(classes.submenuChild, 'pt-1')}>{childrenItems}</ul>;
     }
 
     return children;

package/src/overwrites/venia-ui/lib/components/MegaMenu/customSubmenuColumn.module.css

@@ -1,5 +1,5 @@
 .customSubmenuColumn {
-    composes: max-w-[235px] from global;
+    /* composes: max-w-[235px] from global; */
     composes: p-2 from global;
 }
 
@@ -26,4 +26,4 @@
 
 .submenuChildItem {
     composes: mb-0 from global;
-}
+}

package/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenuItem.js

@@ -87,9 +87,9 @@ const MegaMenuItem = props => {
         categoryUrlSuffix,
         onNavigate
     ]);
-
-    const maybeDownArrowIcon = category.children.length || category.name == "Lego" ? (
-        <ArrowDown2 className='ml-2 stroke-current' size="14" color={textPrimary} variant="Outline" />
+    
+    const maybeDownArrowIcon = category.children.length ? (
+        <ArrowDown2 className='ml-2' size={12} color={textPrimary} variant="Outline" />
     ) : null;
 
     const linkAttributes = category.children.length
@@ -125,7 +125,8 @@ const MegaMenuItem = props => {
                 onKeyDown={handleKeyDown}
                 className={cn(
                     isActive ? classes.megaMenuLinkActive : classes.megaMenuLink,
-                    titleClassName
+                    titleClassName,
+                    'flex items-center'
                 )}
                 data-cy="MegaMenu-MegaMenuItem-link"
                 to={categoryUrl}

package/src/overwrites/venia-ui/lib/components/MegaMenu/shopByColumn.module.css

@@ -1,5 +1,5 @@
 .submenuColumn {
-    composes: max-w-[235px] from global;
+    /* composes: max-w-[235px] from global; */
     composes: p-5 from global;
 }
 
@@ -23,4 +23,4 @@
 
 .submenuChildItem {
     composes: mb-3 from global;
-}
+}

package/src/overwrites/venia-ui/lib/components/MegaMenu/submenu.js

@@ -7,6 +7,7 @@ import { useStyle } from '@magento/venia-ui/lib/classify';
 import defaultClasses from './submenu.module.css';
 import SubmenuColumn from './submenuColumn';
 import ShopByColumn from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/MegaMenu/shopByColumn';
+import cn from 'classnames';
 
 /**
  * The Submenu component displays submenu in mega menu
@@ -91,9 +92,17 @@ const Submenu = props => {
 
     return (
         <div className={subMenuClassname}>
-            <div className={classes.submenuContainer}>
+            <div
+                className={cn(
+                    classes.submenuContainer,
+                    // 'grid grid-cols-4'
+                )}
+            >
                 <div
-                    className={classes.submenuItems}
+                    className={cn(
+                        classes.submenuItems,
+                        'grid grid-cols-4',
+                    )}
                 >
                     {subMenus}
                 </div>

package/src/overwrites/venia-ui/lib/components/MegaMenu/submenu.module.css

@@ -12,11 +12,10 @@
 .submenuContainer {
     composes: w-full from global;
     composes: max-w-[1210px] from global;
-    composes: flex-wrap from global;
-    composes: justify-start from global;
     composes: mx-[auto] from global;
-    composes: flex from global;
     composes: gap-[15px] from global;
+    composes: max-h-[50vh] from global;
+    composes: overflow-y-auto from global;
 }
 
 /* TODO @TW: cannot compose */
@@ -41,9 +40,8 @@
 }
 
 .submenuItems {
-    composes: flex from global;
-    composes: flex-wrap from global;
-    composes: gap-[30px] from global;
+    composes: grid from global;
+    composes: grid-cols-4 from global;
     /* composes: justify-between from global; */
     /* composes: ml-auto from global; */
     /* composes: mr-auto from global; */

package/src/overwrites/venia-ui/lib/components/MegaMenu/submenuColumn.js

@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 import { ArrowDown2 } from 'iconsax-react';
 import { textPrimary } from '@riosst100/pwa-marketplace/src/theme/vars';
 import CustomSubmenuColumn from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/MegaMenu/customSubmenuColumn';
+import cn from 'classnames';
 
 /**
  * The SubmenuColumn component displays columns with categories in submenu
@@ -24,7 +25,7 @@ const SubmenuColumn = props => {
         handleCloseSubMenu,
         arrow
     } = props;
-    
+
     const classes = useStyle(defaultClasses, props.classes);
 
     const categoryUrl = resourceUrl(
@@ -62,18 +63,18 @@ const SubmenuColumn = props => {
             }
 
             const customSubMenus = customMenuItems.length ? (
-                <CustomSubmenuColumn 
-                categoryUrlSuffix={categoryUrlSuffix}
-                onNavigate={onNavigate}
-                handleCloseSubMenu={handleCloseSubMenu}
-                category={subCategory} 
-                customMenuItems={customMenuItems}
-                toggleCustomMenu={toggleCustomMenu}
+                <CustomSubmenuColumn
+                    categoryUrlSuffix={categoryUrlSuffix}
+                    onNavigate={onNavigate}
+                    handleCloseSubMenu={handleCloseSubMenu}
+                    category={subCategory}
+                    customMenuItems={customMenuItems}
+                    toggleCustomMenu={toggleCustomMenu}
                 />
             ) : '';
 
             return (
-                <li key={index} className={classes.submenuChildItem}>
+                <li key={index} className={cn(classes.submenuChildItem, 'mt-4')}>
                     {customMenuItems.length ? (
                         <>
                             <Link
@@ -88,16 +89,6 @@ const SubmenuColumn = props => {
                             >
                                 {name}
                             </Link>
-                            <span
-                                className={isActive ? classes.linkActive : classes.link}
-                                data-cy="MegaMenu-SubmenuColumn-link"
-                                onClick={() => {
-                                    toggleCustomMenu();
-                                }}
-                            >
-                                {arrow}
-                            </span>
-                            {showCustomMenu ? customSubMenus : ''}
                         </>
                     ) : (
                         <Link

package/src/overwrites/venia-ui/lib/components/MegaMenu/submenuColumn.module.css

@@ -1,5 +1,5 @@
 .submenuColumn {
-    composes: max-w-[235px] from global;
+    /* composes: max-w-[235px] from global; */
     composes: p-2 from global;
 }
 
@@ -30,4 +30,4 @@
 
 .submenuChildItem {
     composes: mb-0 from global;
-}
+}

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/CustomAttributes/customAttributes.js

@@ -5,6 +5,7 @@ import { useStyle } from '@magento/venia-ui/lib/classify';
 
 import AttributeType from './AttributeType';
 import defaultClasses from './customAttributes.module.css';
+import cn from 'classnames';
 
 export const IS_VISIBLE_ON_FRONT = 'PRODUCT_DETAILS_PAGE';
 
@@ -23,7 +24,7 @@ const CustomAttributes = props => {
                     const attributeContent = (
                         <li
                             key={currentAttribute.attribute_metadata.uid}
-                            className={classes.listItem}
+                            className={cn(classes.listItem, '!text-[14px]')}
                         >
                             <AttributeType
                                 showLabels={showLabels}

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/CustomAttributes/customAttributes.module.css

@@ -1,9 +1,8 @@
-.root {
-}
+.root {}
 
 .list {
-    composes: list-disc from global;
-    composes: mb-4 from global;
-    composes: mt-4 from global;
-    composes: pl-6 from global;
-}
+    composes: list-none from global;
+    composes: mb-2 from global;
+    composes: mt-2 from global;
+    composes: pl-2 from global;
+}

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/components/auctionDetail.js

@@ -0,0 +1,173 @@
+import React, { useState } from 'react';
+import cn from 'classnames';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+import Button from '@magento/venia-ui/lib/components/Button';
+import Modal from '@riosst100/pwa-marketplace/src/components/Modal';
+import BidList from './bidList';
+import { X } from 'react-feather';
+import { primary900 } from '@riosst100/pwa-marketplace/src/theme/vars';
+import Field from '@magento/venia-ui/lib/components/Field';
+import TextInput from '@magento/venia-ui/lib/components/TextInput';
+import { isRequired } from '@magento/venia-ui/lib/util/formValidators';
+import Checkbox from '@magento/venia-ui/lib/components/Checkbox';
+import { Form } from 'informed';
+
+const AuctionDetail = (props) => {
+
+    const { className } = props;
+    const [open, setOpen] = useState(false)
+
+    return (
+        <>
+            <Modal
+                open={open}
+                className='!p-[30px] md_min-w-[550px] modal_bid'
+            >
+                <div className='modal_bid-content'>
+                    <div className='header_title-modal flex justify-between mb-10'>
+                        <div className='text-lg text-black font-semibold'>
+                            Place bid
+                        </div>
+                        <button onClick={() => { setOpen(!open) }} >
+                            <X size={24} color={primary900} />
+                        </button>
+                    </div>
+
+                    <div className='flex flex-col gap-y-[25px]'>
+                        <div className='current_bid flex flex-col gap-y-2.5'>
+                            <span className='text-[14px] font-bold text-gray-500'>
+                                Current bid
+                            </span>
+                            <span className='text-2xl font-semibold'>
+                                $102.50
+                            </span>
+                        </div>
+
+                        <BidList expanded />
+
+                        <Form
+                            data-cy="form_bid"
+                            className="flex flex-col gap-y-5"
+                            initialValues={{}}
+                            onSubmit={() => { }}
+                            onChange={() => { }}
+                        >
+                            <Field
+                                id="bid_amount_field"
+                                label={'Bid Amount'}
+                            >
+                                <TextInput
+                                    id="bid_amout"
+                                    field="bid_amount"
+                                    validate={isRequired}
+                                    validateOnBlur
+                                    mask={value => value && value.trim()}
+                                    maskOnBlur={true}
+                                    data-cy="bid_amount"
+                                    aria-label={'bid_amount'}
+                                    placeholder={'$10.00'}
+                                />
+                                <small className='helpet-text text-[12px] font-normal text-gray-200 mt-1'>
+                                    Enter $103.50 or more
+                                </small>
+                            </Field>
+
+                            <Checkbox
+                                field="auto_bid"
+                                id="auto_bid"
+                                label={'Place Bid As Automatic'}
+                            />
+
+                            <div className='actions flex justify-end gap-x-2.5'>
+                                <Button
+                                    priority='low'
+                                    classes={{
+                                        content: 'capitalize text-[16px] font-semibold'
+                                    }}
+                                    onClick={() => setOpen(false)}
+                                >
+                                    Cancel
+                                </Button>
+                                <Button
+                                    priority='high'
+                                    classes={{
+                                        content: 'capitalize text-[16px] font-semibold'
+                                    }}
+                                >
+                                    Place Bid
+                                </Button>
+                            </div>
+                        </Form>
+                    </div>
+                </div>
+            </Modal>
+            <div
+                className={cn(
+                    'flex flex-col border border-gray-100 rounded-lg px-5 py-[30px] gap-x-2.5 gap-y-5',
+                    className
+                )}
+            >
+                <div className='flex flex-row justify-between'>
+                    <div className='flex flex-col gap-2.5'>
+                        <div className='text-[16px] font-bold text-gray-500'>
+                            Starting Price
+                        </div>
+                        <div className='text-[40px] font-semibold text-colorDefault'>
+                            $87.50
+                        </div>
+                    </div>
+                    <Divider className="w-[1px] !h-[105px]" />
+                    <div className='flex flex-col gap-2.5'>
+                        <div className='text-[16px] font-bold text-gray-500'>
+                            Auction ends in
+                        </div>
+                        <div className='flex flex-row gap-8'>
+                            <div className='flex flex-col'>
+                                <div className='text-[40px] leading-[normal] font-semibold'>
+                                    5
+                                </div>
+                                <div className='text-[14px] font-bold'>
+                                    days
+                                </div>
+                            </div>
+                            <div className='flex flex-col'>
+                                <div className='text-[40px] leading-[normal] font-semibold'>
+                                    16
+                                </div>
+                                <div className='text-[14px] font-bold'>
+                                    hours
+                                </div>
+                            </div>
+                            <div className='flex flex-col'>
+                                <div className='text-[40px] leading-[normal] font-semibold'>
+                                    36
+                                </div>
+                                <div className='text-[14px] font-bold'>
+                                    minutes
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className='text-gray-800 font-bold text-[20px]'>
+                    Ends at January 12, 2024 10:15 AM
+                </div>
+
+                <Button
+                    priority='high'
+                    classes={{
+                        content: 'capitalize text-[16px] font-semibold'
+                    }}
+                    onClick={() => setOpen(true)}
+                >
+                    Place Bid
+                </Button>
+
+                <BidList {...props} />
+            </div>
+        </>
+    )
+}
+
+export default AuctionDetail;

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/components/bidList.js

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { ArrowDown2 } from 'iconsax-react';
+import cn from 'classnames';
+
+const bidList = (props) => {
+    const {
+        rootClassName,
+        expanded = false,
+    } = props
+    const [expand, setExpand] = useState(expanded);
+
+    return (
+        <>
+            <div className={cn('bid_list-container w-full', rootClassName)}>
+                <div
+                    className={cn(
+                        'bid_title flex justify-between items-center border-t border-b border-gray-100',
+                        'px-2.5 py-[18px] cursor-pointer'
+                    )}
+                    onClick={() => setExpand(!expand)}
+                >
+                    <span className='text-[16px] font-semibold'>
+                        Previous bids (5)
+                    </span>
+                    <ArrowDown2
+                        className={cn(
+                            'transition-all',
+                            expand ? 'rotate-180' : 'rotate-0',
+                        )}
+                        size={16}
+                    />
+                </div>
+                <div
+                    className={cn(
+                        'bid_list-wrapper transition-all mt-2.5 duration-300 ease-in-out overflow-hidden',
+                        'max-h-[250px] overflow-y-auto',
+                        expand ? 'h-auto opacity-100' : 'h-0 opacity-0'
+                    )}
+                >
+                    <table className='bid_list w-full' >
+                        {[...Array(5)].map(() => (
+                            <tr className='border-b border-dashed border-gray-100'>
+                                <td className='p-2.5'>
+                                    <span className='text-[14px] font-medium'>
+                                        $102.00
+                                    </span>
+                                </td>
+                                <td className='p-2.5'>
+                                    <span className='text-[14px] font-medium'>
+                                        Jan 7, 2024 11:18:08 AM
+                                    </span>
+                                </td>
+                                <td className='p-2.5'>
+                                    <span className='text-[14px] font-medium'>
+                                        by Ale****
+                                    </span>
+                                </td>
+                            </tr>
+                        ))}
+                    </table>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default bidList