@riosst100/pwa-marketplace 1.2.6 → 1.2.8

package/src/components/SortBy/index.js

@@ -1,13 +1,21 @@
 import React from 'react';
-import { ArrowDown2 } from 'iconsax-react';
+import { ArrowDown2, Filter } from 'iconsax-react';
 
 const Sort = () => {
     return (
         <>
-            <div class="inline-flex flex-col items-start gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-white rounded-[30px] border border-solid border-[#e6e9ea]">
-                <div class="inline-flex items-center gap-[20px] relative flex-[0_0_auto]">
-                    <div class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Most relevant</div>
-                    <ArrowDown2 color="#292D32" size={14} variant="Outline" className='stroke-[#292D32]' />
+            <div className='x-container xs_flex xs_justify-between xs_w-full xl_w-fit'>
+                <div class="xs_flex xl_hidden flex-col items-start gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-white rounded-[30px] border border-solid border-gray-100">
+                    <div class="inline-flex items-center gap-[20px] relative flex-[0_0_auto]">
+                        <Filter color="#292D32" size={14} variant="Outline" className='stroke-[#292D32]' />
+                        <div class="relative w-fit text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Filter</div>
+                    </div>
+                </div>
+                <div class="inline-flex flex-col items-start gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-white rounded-[30px] border border-solid border-gray-100">
+                    <div class="inline-flex items-center gap-[20px] relative flex-[0_0_auto]">
+                        <div class="relative w-fit text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Most relevant</div>
+                        <ArrowDown2 color="#292D32" size={14} variant="Outline" className='stroke-[#292D32]' />
+                    </div>
                 </div>
             </div>
         </>

package/src/components/commons/Tabs/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import cx from 'classnames';
+import cn from 'classnames';
 
 const Tabs = (props) => {
     const {
@@ -11,14 +11,16 @@ const Tabs = (props) => {
         tabContentContainerClassName = '',
         tabContentWrapperClassName = '',
         tabActiveClassName = '',
+        tabWrapperClassName = '',
     } = props
 
     const [activeTabs, setActiveTabs] = React.useState(0);
-    const rootClass = cx('mb-4 border-b border-gray-200 dark:border-gray-700', rootClassName);
-    const tabTitleClass = cx('inline-block p-4 rounded-t-lg', tabTitleClassName);
-    const tabContainerClass = cx('tab-content-container', tabContentContainerClassName);
-    const tabContentWrapperClass = cx('tab-content-wrapper', tabContentWrapperClassName);
-    const tabActiveClass = cx('border-solid border-b-2', tabActiveClassName)
+    const rootClass = cn('mb-4 border-b border-gray-100', rootClassName);
+    const tabTitleClass = cn('inline-block p-[10px] rounded-t-lg text-[16px] font-semibold', tabTitleClassName);
+    const tabContainerClass = cn('tab-content-container', tabContentContainerClassName);
+    const tabContentWrapperClass = cn('tab-content-wrapper', tabContentWrapperClassName);
+    const tabActiveClass = cn('border-solid border-b-2', tabActiveClassName);
+    const tabWrapperClass = cn('flex flex-wrap -mb-px text-sm font-medium text-center gap-4', tabWrapperClassName);
 
     const handleSwicthTab = (index) => {
         setActiveTabs(index);
@@ -27,11 +29,11 @@ const Tabs = (props) => {
     return (
         <>
             <div className={rootClass}>
-                <ul className='flex flex-wrap -mb-px text-sm font-medium text-center' role='tablist'>
+                <ul className={tabWrapperClass} role='tablist'>
                     {data.map((item, index) => (
                         <li className='me-2' role='presentation'>
                             <button
-                                className={cx(tabTitleClass, index === activeTabs ? tabActiveClass : '')}
+                                className={cn(tabTitleClass, index === activeTabs ? tabActiveClass : '')}
                                 id={item.id}
                                 role='tab'
                                 aria-controls={`${item.id}-tab`}
@@ -50,7 +52,7 @@ const Tabs = (props) => {
             {hasContent ? (
                 <div className={tabContainerClass}>
                     {data.map((item, index) => (
-                        <div className={cx(index !== activeTabs ? 'hidden' : '', tabContentWrapperClass)} role='tabpanel' aria-labelledby={`${item.id}-tab`}>
+                        <div className={cn(index !== activeTabs ? 'hidden' : '', tabContentWrapperClass)} role='tabpanel' aria-labelledby={`${item.id}-tab`}>
                             {item.content}
                         </div>
                     ))}

package/src/overwrites/venia-ui/lib/components/Header/header.js

@@ -19,8 +19,9 @@ import BecomeSellerLink from '@riosst100/pwa-marketplace/src/components/BecomeSe
 import MegaMenu from '@magento/venia-ui/lib/components/MegaMenu';
 import PageLoadingIndicator from '@magento/venia-ui/lib/components/PageLoadingIndicator';
 import { useIntl } from 'react-intl';
-
-const SearchBar = React.lazy(() => import('@magento/venia-ui/lib/components/SearchBar'));
+import cn from 'classnames';
+// const SearchBar = React.lazy(() => import('@magento/venia-ui/lib/components/SearchBar'));
+const SearchBar = React.lazy(() => import('@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/SearchBar'));
 
 const Header = props => {
     const {
@@ -45,19 +46,20 @@ const Header = props => {
             </div>
         </div>
     );
-    const searchBar = isSearchOpen ? (
-        <Suspense fallback={searchBarFallback}>
-            <Route>
-                <SearchBar isOpen={isSearchOpen} ref={searchRef} />
-            </Route>
-        </Suspense>
-    ) : null;
+    // const searchBar = isSearchOpen ? (
+    //     <Suspense fallback={searchBarFallback}>
+    //         <Route>
+    //             <SearchBar isOpen={true} ref={searchRef} />
+    //         </Route>
+    //     </Suspense>
+    // ) : null;
 
     const { formatMessage } = useIntl();
     const title = formatMessage({ id: 'logo.title', defaultMessage: 'Venia' });
 
     return (
         <Fragment>
+            <PageLoadingIndicator absolute />
             <div className={classes.switchersContainer}>
                 <div className={classes.switchers} data-cy="Header-switchers">
                     <BecomeSellerLink />
@@ -66,33 +68,43 @@ const Header = props => {
                     <CurrencySwitcher />
                 </div>
             </div>
-            <header className={rootClass} data-cy="Header-root">
-                <div className={classes.toolbar}>
-                    <div className={classes.primaryActions}>
-                        <NavTrigger />
-                    </div>
-
-                    <Link
-                        aria-label={title}
-                        to={resourceUrl('/')}
-                        className={classes.logoContainer}
-                        data-cy="Header-logoContainer"
-                    >
-                        <div><b>TCG Collective</b></div>
-                        <small>Toys | Card | Games</small>
-                    </Link>
-                    <MegaMenu />
-                    <div className={classes.secondaryActions}>
-                        <SearchTrigger
-                            onClick={handleSearchTriggerClick}
-                            ref={searchTriggerRef}
-                        />
-                        <AccountTrigger />
-                        <CartTrigger />
+            <header className={cn(rootClass, '!flex flex-col !px-0 border-gray-100 ')} data-cy="Header-root">
+                <div className={cn('middle-header border-b border-gray-100')}>
+                    <div className={cn('w-full max-w-[1210px] px-[15px] py-[20px] mx-[auto] flex justify-between items-center')}>
+                        <div className='flex'>
+                            <NavTrigger />
+                            <Link
+                                aria-label={title}
+                                to={resourceUrl('/')}
+                                className={''}
+                                data-cy="Header-logoContainer"
+                            >
+                                <div><b>TCG Collective</b></div>
+                                <small>Toys | Card | Games</small>
+                            </Link>
+                        </div>
+                        <div className='flex'>
+                            <Suspense fallback={searchBarFallback}>
+                                <Route>
+                                    <SearchBar isOpen={true} ref={searchRef} />
+                                </Route>
+                            </Suspense>
+                        </div>
+                        <div className={classes.secondaryActions}>
+                            {/* <SearchTrigger
+                                onClick={handleSearchTriggerClick}
+                                ref={searchTriggerRef}
+                            /> */}
+                            <AccountTrigger />
+                            <CartTrigger />
+                        </div>
                     </div>
                 </div>
-                {searchBar}
-                <PageLoadingIndicator absolute />
+                <MegaMenu
+                    rootClassName={cn('nav-menu w-full max-w-[1210px] px-[15px] mx-[auto] flex-row gap-x-[40px]')}
+                    megaMenuItemClassname={cn('px-0 py-[15px] leading-[20px]')}
+                    titleClassName={cn('font-medium leading-[20px]')}
+                />
             </header>
             <OnlineIndicator
                 hasBeenOffline={hasBeenOffline}

package/src/components/SellerPage/core.js

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

package/src/talons/SellerProducts/useSellerProducts.js

@@ -1,129 +0,0 @@
-import { useEffect } from 'react';
-import { useLazyQuery, useQuery } from '@apollo/client';
-
-import mergeOperations from '../../../util/shallowMerge';
-import { useEventingContext } from '../../../context/eventing';
-
-import DEFAULT_OPERATIONS from './categoryContent.gql';
-
-/**
- * Returns props necessary to render the categoryContent component.
- *
- * @param {object} props.data - The results of a getCategory GraphQL query.
- *
- * @returns {object} result
- * @returns {string} result.categoryDescription - This category's description.
- * @returns {string} result.categoryName - This category's name.
- * @returns {object} result.filters - The filters object.
- * @returns {object} result.items - The items in this category.
- * @returns {number} result.totalPagesFromData - The total amount of pages for the query.
- */
-export const useSellerProducts = props => {
-    const { categoryId, data, pageSize = 6 } = props;
-
-    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
-
-    const {
-        getSellerProductsQuery,
-        getProductFiltersByCategoryQuery,
-        getCategoryAvailableSortMethodsQuery
-    } = operations;
-
-    const placeholderItems = Array.from({ length: pageSize }).fill(null);
-
-    const [getFilters, { data: filterData }] = useLazyQuery(
-        getProductFiltersByCategoryQuery,
-        {
-            fetchPolicy: 'cache-and-network',
-            nextFetchPolicy: 'cache-first'
-        }
-    );
-
-    const [getSortMethods, { data: sortData }] = useLazyQuery(
-        getCategoryAvailableSortMethodsQuery,
-        {
-            fetchPolicy: 'cache-and-network',
-            nextFetchPolicy: 'cache-first'
-        }
-    );
-
-    const { data: categoryData, loading: categoryLoading } = useQuery(
-        getSellerProductsQuery,
-        {
-            fetchPolicy: 'cache-and-network',
-            nextFetchPolicy: 'cache-first',
-            skip: !categoryId,
-            variables: {
-                id: categoryId
-            }
-        }
-    );
-
-    const [, { dispatch }] = useEventingContext();
-
-    useEffect(() => {
-        if (categoryId) {
-            getFilters({
-                variables: {
-                    categoryIdFilter: {
-                        eq: categoryId
-                    }
-                }
-            });
-        }
-    }, [categoryId, getFilters]);
-
-    useEffect(() => {
-        if (categoryId) {
-            getSortMethods({
-                variables: {
-                    categoryIdFilter: {
-                        in: categoryId
-                    }
-                }
-            });
-        }
-    }, [categoryId, getSortMethods]);
-
-    const filters = filterData ? filterData.products.aggregations : null;
-    const items = data ? data.products.items : placeholderItems;
-    const totalPagesFromData = data
-        ? data.products.page_info.total_pages
-        : null;
-    const totalCount = data ? data.products.total_count : null;
-    const categoryName =
-        categoryData && categoryData.categories.items.length
-            ? categoryData.categories.items[0].name
-            : null;
-    const categoryDescription =
-        categoryData && categoryData.categories.items.length
-            ? categoryData.categories.items[0].description
-            : null;
-    const availableSortMethods = sortData
-        ? sortData.products.sort_fields.options
-        : null;
-
-    useEffect(() => {
-        if (!categoryLoading && categoryData.categories.items.length > 0) {
-            dispatch({
-                type: 'CATEGORY_PAGE_VIEW',
-                payload: {
-                    id: categoryData.categories.items[0].uid,
-                    name: categoryData.categories.items[0].name,
-                    url_key: categoryData.categories.items[0].url_key,
-                    url_path: categoryData.categories.items[0].url_path
-                }
-            });
-        }
-    }, [categoryData, dispatch, categoryLoading]);
-
-    return {
-        availableSortMethods,
-        categoryName,
-        categoryDescription,
-        filters,
-        items,
-        totalCount,
-        totalPagesFromData
-    };
-};