@riosst100/pwa-marketplace 1.2.6 → 1.2.7

package/src/overwrites/venia-ui/lib/components/Adapter/adapter.js

@@ -1,112 +1,112 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { ApolloProvider } from '@apollo/client';
-import { Provider as ReduxProvider } from 'react-redux';
-import { BrowserRouter } from 'react-router-dom';
-import { useAdapter } from '@magento/peregrine/lib/talons/Adapter/useAdapter';
-import App, { AppContextProvider } from '@magento/venia-ui/lib/components/App';
-import StoreCodeRoute from '@magento/venia-ui/lib/components/StoreCodeRoute';
-import { useWebsiteByIp } from '@riosst100/pwa-marketplace/src/talons/WebsiteByIp/useWebsiteByIp';
-import { BrowserPersistence } from '@magento/peregrine/lib/util';
-
-const storage = new BrowserPersistence();
-
-const Adapter = props => {
-    const [verifyUserIp, setVerifyUserIp] = useState(true);
-    const [newRouterProps, setNewRouterProps] = useState(true);
-
-    const talonProps = useAdapter(props);
-    let {
-        apolloProps,
-        initialized,
-        reduxProps,
-        routerProps
-    } = talonProps;
-
-    const websiteCodes = [];
-    const websiteStores = useMemo(() => ({}), []);
-    const storeCurrencies = useMemo(() => ({}), []);
-    const storeSecureBaseMediaUrl = useMemo(() => ({}), []);
-
-    AVAILABLE_WEBSITES.forEach(store => {
-        websiteCodes.push(store.website_code);
-        websiteStores[store.website_code] = store.store_code;
-        storeCurrencies[store.store_code] = store.default_display_currency_code;
-        storeSecureBaseMediaUrl[store.store_code] = store.secure_base_media_url;
-    });
-
-    websiteCodes.sort((a, b) => b.length - a.length);
-
-    const { location } = globalThis;
-    const match = location && location.pathname.split("/")[1];
-    let websiteCodeInUrl = websiteCodes.find((str) => str === match);
-
-    const { getWebsiteByUserIp } = useWebsiteByIp(websiteCodeInUrl);
-    
-    useEffect(() => {
-        if (websiteCodeInUrl) {
-            setVerifyUserIp(false);
-
-            storage.removeItem('access_base_website');
-
-            routerProps.basename = websiteCodeInUrl != process.env.WEBSITE_CODE ? '/'+websiteCodeInUrl : '/';
-
-            setNewRouterProps(routerProps);
-        }
-    }, [websiteCodeInUrl])
-
-    useEffect(() => {
-        if (!websiteCodeInUrl && getWebsiteByUserIp) {
-            setVerifyUserIp(false);
-            
-            const query = new URLSearchParams(location.search);
-            const isAccessBaseWebsite = query.get('access_base_website') || (
-                storage.getItem('access_base_website') || null
-            );
-
-            const websiteCode = getWebsiteByUserIp.countryCode && !isAccessBaseWebsite ? getWebsiteByUserIp.countryCode.toLowerCase() : process.env.WEBSITE_CODE;
-
-            if (websiteCodes.find((str) => str === websiteCode)) {
-                routerProps.basename = websiteCode != process.env.WEBSITE_CODE && !isAccessBaseWebsite ? '/'+websiteCode : '/';
-
-                setNewRouterProps(routerProps);
-
-                if (isAccessBaseWebsite) {
-                    storage.setItem('access_base_website', 1);
-                }
-
-                let storeCodeInUrl = websiteStores[websiteCode];
-
-                storage.setItem('store_view_code', storeCodeInUrl);
-                storage.setItem('website_code', websiteCode);
-                storage.setItem(
-                    'store_view_currency',
-                    storeCurrencies[storeCodeInUrl]
-                );
-                storage.setItem(
-                    'store_view_secure_base_media_url',
-                    storeSecureBaseMediaUrl[storeCodeInUrl]
-                );
-            }
-        }
-    }, [websiteCodeInUrl, getWebsiteByUserIp])
-
-    // TODO: Replace with app skeleton. See PWA-547.
-    if (!initialized) {
-        return null;
-    }
-
-    const children = props.children || <App />;
-
-    return !verifyUserIp && (
-        <ApolloProvider {...apolloProps}>
-            <ReduxProvider {...reduxProps}>
-                <BrowserRouter {...newRouterProps}>
-                    <StoreCodeRoute />
-                    <AppContextProvider>{children}</AppContextProvider>
-                </BrowserRouter>
-            </ReduxProvider>
-        </ApolloProvider>
-    );
-};
-
-export default Adapter;
+import React, { useEffect, useMemo, useState } from 'react';
+import { ApolloProvider } from '@apollo/client';
+import { Provider as ReduxProvider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { useAdapter } from '@magento/peregrine/lib/talons/Adapter/useAdapter';
+import App, { AppContextProvider } from '@magento/venia-ui/lib/components/App';
+import StoreCodeRoute from '@magento/venia-ui/lib/components/StoreCodeRoute';
+import { useWebsiteByIp } from '@riosst100/pwa-marketplace/src/talons/WebsiteByIp/useWebsiteByIp';
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
+
+const storage = new BrowserPersistence();
+
+const Adapter = props => {
+    const [verifyUserIp, setVerifyUserIp] = useState(true);
+    const [newRouterProps, setNewRouterProps] = useState(true);
+
+    const talonProps = useAdapter(props);
+    let {
+        apolloProps,
+        initialized,
+        reduxProps,
+        routerProps
+    } = talonProps;
+
+    const websiteCodes = [];
+    const websiteStores = useMemo(() => ({}), []);
+    const storeCurrencies = useMemo(() => ({}), []);
+    const storeSecureBaseMediaUrl = useMemo(() => ({}), []);
+
+    AVAILABLE_WEBSITES.forEach(store => {
+        websiteCodes.push(store.website_code);
+        websiteStores[store.website_code] = store.store_code;
+        storeCurrencies[store.store_code] = store.default_display_currency_code;
+        storeSecureBaseMediaUrl[store.store_code] = store.secure_base_media_url;
+    });
+
+    websiteCodes.sort((a, b) => b.length - a.length);
+
+    const { location } = globalThis;
+    const match = location && location.pathname.split("/")[1];
+    let websiteCodeInUrl = websiteCodes.find((str) => str === match);
+
+    const { getWebsiteByUserIp } = useWebsiteByIp(websiteCodeInUrl);
+    
+    useEffect(() => {
+        if (websiteCodeInUrl) {
+            setVerifyUserIp(false);
+
+            storage.removeItem('access_base_website');
+
+            routerProps.basename = websiteCodeInUrl != process.env.WEBSITE_CODE ? '/'+websiteCodeInUrl : '/';
+
+            setNewRouterProps(routerProps);
+        }
+    }, [websiteCodeInUrl])
+
+    useEffect(() => {
+        if (!websiteCodeInUrl && getWebsiteByUserIp) {
+            setVerifyUserIp(false);
+            
+            const query = new URLSearchParams(location.search);
+            const isAccessBaseWebsite = query.get('access_base_website') || (
+                storage.getItem('access_base_website') || null
+            );
+
+            const websiteCode = getWebsiteByUserIp.countryCode && !isAccessBaseWebsite ? getWebsiteByUserIp.countryCode.toLowerCase() : process.env.WEBSITE_CODE;
+
+            if (websiteCodes.find((str) => str === websiteCode)) {
+                routerProps.basename = websiteCode != process.env.WEBSITE_CODE && !isAccessBaseWebsite ? '/'+websiteCode : '/';
+
+                setNewRouterProps(routerProps);
+
+                if (isAccessBaseWebsite) {
+                    storage.setItem('access_base_website', 1);
+                }
+
+                let storeCodeInUrl = websiteStores[websiteCode];
+
+                storage.setItem('store_view_code', storeCodeInUrl);
+                storage.setItem('website_code', websiteCode);
+                storage.setItem(
+                    'store_view_currency',
+                    storeCurrencies[storeCodeInUrl]
+                );
+                storage.setItem(
+                    'store_view_secure_base_media_url',
+                    storeSecureBaseMediaUrl[storeCodeInUrl]
+                );
+            }
+        }
+    }, [websiteCodeInUrl, getWebsiteByUserIp])
+
+    // TODO: Replace with app skeleton. See PWA-547.
+    if (!initialized) {
+        return null;
+    }
+
+    const children = props.children || <App />;
+
+    return !verifyUserIp && (
+        <ApolloProvider {...apolloProps}>
+            <ReduxProvider {...reduxProps}>
+                <BrowserRouter {...newRouterProps}>
+                    <StoreCodeRoute />
+                    <AppContextProvider>{children}</AppContextProvider>
+                </BrowserRouter>
+            </ReduxProvider>
+        </ApolloProvider>
+    );
+};
+
+export default Adapter;

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

@@ -1,118 +1,130 @@
-import React, { Fragment, Suspense } from 'react';
-import { shape, string } from 'prop-types';
-import { Link, Route } from 'react-router-dom';
-
-import AccountTrigger from '@magento/venia-ui/lib/components/Header/accountTrigger';
-import CartTrigger from '@magento/venia-ui/lib/components/Header/cartTrigger';
-import NavTrigger from '@magento/venia-ui/lib/components/Header/navTrigger';
-import SearchTrigger from '@magento/venia-ui/lib/components/Header/searchTrigger';
-import OnlineIndicator from '@magento/venia-ui/lib/components/Header/onlineIndicator';
-import { useHeader } from '@magento/peregrine/lib/talons/Header/useHeader';
-import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import defaultClasses from '@magento/venia-ui/lib/components/Header/header.module.css';
-import StoreSwitcher from '@magento/venia-ui/lib/components/Header/storeSwitcher';
-import WebsiteSwitcher from '@riosst100/pwa-marketplace/src/components/WebsiteSwitcher/websiteSwitcher';
-import CurrencySwitcher from '@magento/venia-ui/lib/components/Header/currencySwitcher';
-import BecomeSellerLink from '@riosst100/pwa-marketplace/src/components/BecomeSellerLink/becomeSellerLink';
-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'));
-
-const Header = props => {
-    const {
-        handleSearchTriggerClick,
-        hasBeenOffline,
-        isOnline,
-        isSearchOpen,
-        searchRef,
-        searchTriggerRef
-    } = useHeader();
-
-    const classes = useStyle(defaultClasses, props.classes);
-    const rootClass = isSearchOpen ? classes.open : classes.closed;
-
-    const searchBarFallback = (
-        <div className={classes.searchFallback} ref={searchRef}>
-            <div className={classes.input}>
-                <div className={classes.loader}>
-                    <div className={classes.loaderBefore} />
-                    <div className={classes.loaderAfter} />
-                </div>
-            </div>
-        </div>
-    );
-    const searchBar = isSearchOpen ? (
-        <Suspense fallback={searchBarFallback}>
-            <Route>
-                <SearchBar isOpen={isSearchOpen} ref={searchRef} />
-            </Route>
-        </Suspense>
-    ) : null;
-
-    const { formatMessage } = useIntl();
-    const title = formatMessage({ id: 'logo.title', defaultMessage: 'Venia' });
-
-    return (
-        <Fragment>
-            <div className={classes.switchersContainer}>
-                <div className={classes.switchers} data-cy="Header-switchers">
-                    <BecomeSellerLink />
-                    <WebsiteSwitcher />
-                    <StoreSwitcher />
-                    <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 />
-                    </div>
-                </div>
-                {searchBar}
-                <PageLoadingIndicator absolute />
-            </header>
-            <OnlineIndicator
-                hasBeenOffline={hasBeenOffline}
-                isOnline={isOnline}
-            />
-        </Fragment>
-    );
-};
-
-Header.propTypes = {
-    classes: shape({
-        closed: string,
-        logo: string,
-        open: string,
-        primaryActions: string,
-        secondaryActions: string,
-        toolbar: string,
-        switchers: string,
-        switchersContainer: string
-    })
-};
-
-export default Header;
+import React, { Fragment, Suspense } from 'react';
+import { shape, string } from 'prop-types';
+import { Link, Route } from 'react-router-dom';
+
+import AccountTrigger from '@magento/venia-ui/lib/components/Header/accountTrigger';
+import CartTrigger from '@magento/venia-ui/lib/components/Header/cartTrigger';
+import NavTrigger from '@magento/venia-ui/lib/components/Header/navTrigger';
+import SearchTrigger from '@magento/venia-ui/lib/components/Header/searchTrigger';
+import OnlineIndicator from '@magento/venia-ui/lib/components/Header/onlineIndicator';
+import { useHeader } from '@magento/peregrine/lib/talons/Header/useHeader';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from '@magento/venia-ui/lib/components/Header/header.module.css';
+import StoreSwitcher from '@magento/venia-ui/lib/components/Header/storeSwitcher';
+import WebsiteSwitcher from '@riosst100/pwa-marketplace/src/components/WebsiteSwitcher/websiteSwitcher';
+import CurrencySwitcher from '@magento/venia-ui/lib/components/Header/currencySwitcher';
+import BecomeSellerLink from '@riosst100/pwa-marketplace/src/components/BecomeSellerLink/becomeSellerLink';
+import MegaMenu from '@magento/venia-ui/lib/components/MegaMenu';
+import PageLoadingIndicator from '@magento/venia-ui/lib/components/PageLoadingIndicator';
+import { useIntl } from 'react-intl';
+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 {
+        handleSearchTriggerClick,
+        hasBeenOffline,
+        isOnline,
+        isSearchOpen,
+        searchRef,
+        searchTriggerRef
+    } = useHeader();
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const rootClass = isSearchOpen ? classes.open : classes.closed;
+
+    const searchBarFallback = (
+        <div className={classes.searchFallback} ref={searchRef}>
+            <div className={classes.input}>
+                <div className={classes.loader}>
+                    <div className={classes.loaderBefore} />
+                    <div className={classes.loaderAfter} />
+                </div>
+            </div>
+        </div>
+    );
+    // 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 />
+                    <WebsiteSwitcher />
+                    <StoreSwitcher />
+                    <CurrencySwitcher />
+                </div>
+            </div>
+            <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>
+                <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}
+                isOnline={isOnline}
+            />
+        </Fragment>
+    );
+};
+
+Header.propTypes = {
+    classes: shape({
+        closed: string,
+        logo: string,
+        open: string,
+        primaryActions: string,
+        secondaryActions: string,
+        toolbar: string,
+        switchers: string,
+        switchersContainer: string
+    })
+};
+
+export default Header;