@riosst100/pwa-marketplace 1.0.0

package/src/overwrites/peregrine/lib/talons/Adapter/useAdapter.js

@@ -0,0 +1,208 @@
+import { ApolloLink } from '@apollo/client';
+import { InMemoryCache } from '@apollo/client/cache';
+import { ApolloClient } from '@apollo/client/core';
+import { CachePersistor } from 'apollo-cache-persist';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import attachClient from '@magento/peregrine/lib/Apollo/attachClientToStore';
+import { clearCartDataFromCache } from '@magento/peregrine/lib/Apollo/clearCartDataFromCache';
+import { clearCustomerDataFromCache } from '@magento/peregrine/lib/Apollo/clearCustomerDataFromCache';
+import { CACHE_PERSIST_PREFIX } from '@magento/peregrine/lib/Apollo/constants';
+import getLinks from '@magento/peregrine/lib/Apollo/links';
+import typePolicies from '@magento/peregrine/lib/Apollo/policies';
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
+
+const isServer = !globalThis.document;
+const storage = new BrowserPersistence();
+
+export const useAdapter = props => {
+    const { apiUrl, configureLinks, origin, store, styles } = props;
+
+    // Custom
+    const websiteCodes = [];
+
+    AVAILABLE_WEBSITES.forEach(store => {
+        websiteCodes.push(store.website_code);
+    });
+
+    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);
+
+    let isBaseWebsite = false;
+
+    let websiteCode = storage.getItem('website_code');
+
+    if (!websiteCodeInUrl) {
+        isBaseWebsite = true;
+    }
+
+    let basename = '/';
+
+    const urlHasStoreCode = isBaseWebsite ? false : true;
+    if (urlHasStoreCode) {
+        basename = `/${websiteCode}`;
+    }
+
+    const [initialized, setInitialized] = useState(false);
+
+    const apiBase = useMemo(
+        () => apiUrl || new URL('/graphql', origin).toString(),
+        [apiUrl, origin]
+    );
+
+    const apolloLink = useMemo(() => {
+        let links = getLinks(apiBase);
+
+        if (configureLinks) {
+            links = configureLinks(links, apiBase);
+        }
+
+        return ApolloLink.from(Array.from(links.values()));
+    }, [apiBase, configureLinks]);
+
+    const createApolloClient = useCallback((cache, link) => {
+        return new ApolloClient({
+            cache,
+            link,
+            ssrMode: isServer
+        });
+    }, []);
+
+    const createCachePersistor = useCallback((storeCode, cache) => {
+        return isServer
+            ? null
+            : new CachePersistor({
+                  key: `${CACHE_PERSIST_PREFIX}-${storeCode}`,
+                  cache,
+                  storage: globalThis.localStorage,
+                  debug: process.env.NODE_ENV === 'development'
+              });
+    }, []);
+
+    const clearCacheData = useCallback(
+        async (client, cacheType) => {
+            const storeCode = storage.getItem('store_view_code') || 'default';
+
+            // Clear current store
+            if (cacheType === 'cart') {
+                await clearCartDataFromCache(client);
+            } else if (cacheType === 'customer') {
+                await clearCustomerDataFromCache(client);
+            }
+
+            // Clear other stores
+            for (const store of AVAILABLE_STORE_VIEWS) {
+                if (store.store_code !== storeCode) {
+                    // Get saved data directly from local storage
+                    const existingStorePersistor = globalThis.localStorage.getItem(
+                        `${CACHE_PERSIST_PREFIX}-${store.store_code}`
+                    );
+
+                    // Make sure we have data available
+                    if (
+                        existingStorePersistor &&
+                        Object.keys(existingStorePersistor).length > 0
+                    ) {
+                        const storeCache = new InMemoryCache();
+
+                        // Restore available data
+                        storeCache.restore(JSON.parse(existingStorePersistor));
+
+                        const storeClient = createApolloClient(
+                            storeCache,
+                            apolloLink
+                        );
+
+                        storeClient.persistor = isServer
+                            ? null
+                            : createCachePersistor(
+                                  store.store_code,
+                                  storeCache
+                              );
+
+                        // Clear other store
+                        if (cacheType === 'cart') {
+                            await clearCartDataFromCache(storeClient);
+                        } else if (cacheType === 'customer') {
+                            await clearCustomerDataFromCache(storeClient);
+                        }
+                    }
+                }
+            }
+        },
+        [apolloLink, createApolloClient, createCachePersistor]
+    );
+
+    const apolloClient = useMemo(() => {
+        const storeCode = storage.getItem('store_view_code') || 'default';
+        const client = createApolloClient(preInstantiatedCache, apolloLink);
+        const persistor = isServer
+            ? null
+            : createCachePersistor(storeCode, preInstantiatedCache);
+
+        client.apiBase = apiBase;
+        client.persistor = persistor;
+        client.clearCacheData = clearCacheData;
+
+        return client;
+    }, [
+        apiBase,
+        apolloLink,
+        clearCacheData,
+        createApolloClient,
+        createCachePersistor
+    ]);
+
+    const getUserConfirmation = useCallback(async (message, callback) => {
+        if (typeof globalThis.handleRouteChangeConfirmation === 'function') {
+            return globalThis.handleRouteChangeConfirmation(message, callback);
+        }
+
+        return callback(globalThis.confirm(message));
+    }, []);
+
+    const apolloProps = { client: apolloClient };
+    const reduxProps = { store };
+    const routerProps = { basename, getUserConfirmation };
+    const styleProps = { initialState: styles };
+
+    // perform blocking async work here
+    useEffect(() => {
+        if (initialized) return;
+
+        // immediately invoke this async function
+        (async () => {
+            // restore persisted data to the Apollo cache
+            await apolloClient.persistor.restore();
+
+            // attach the Apollo client to the Redux store
+            await attachClient(apolloClient);
+
+            // mark this routine as complete
+            setInitialized(true);
+        })();
+    }, [apolloClient, initialized]);
+
+    return {
+        apolloProps,
+        initialized,
+        reduxProps,
+        routerProps,
+        styleProps,
+        urlHasStoreCode
+    };
+};
+
+/**
+ * To improve initial load time, create an apollo cache object as soon as
+ * this module is executed, since it doesn't depend on any component props.
+ * The tradeoff is that we may be creating an instance we don't end up needing.
+ */
+const preInstantiatedCache = new InMemoryCache({
+    // POSSIBLE_TYPES is injected into the bundle by webpack at build time.
+    possibleTypes: POSSIBLE_TYPES,
+    typePolicies
+});

package/src/overwrites/peregrine/lib/talons/Header/storeSwitcher.gql.js

@@ -0,0 +1,45 @@
+import { gql } from '@apollo/client';
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query getStoreConfigData {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            store_name
+            store_group_name
+            website_code
+        }
+    }
+`;
+
+export const GET_ROUTE_DATA = gql`
+    query getRouteData($url: String!) {
+        route(url: $url) {
+            relative_url
+        }
+    }
+`;
+
+export const GET_AVAILABLE_STORES_DATA = gql`
+    query getAvailableStoresData {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        availableStores {
+            default_display_currency_code
+            locale
+            secure_base_media_url
+            store_code
+            store_group_code
+            store_group_name
+            store_name
+            store_sort_order
+            website_code
+            is_default_store
+        }
+    }
+`;
+
+export default {
+    getStoreConfigData: GET_STORE_CONFIG_DATA,
+    getRouteData: GET_ROUTE_DATA,
+    getAvailableStoresData: GET_AVAILABLE_STORES_DATA
+};

package/src/overwrites/peregrine/lib/talons/Header/useStoreSwitcher.js

@@ -0,0 +1,204 @@
+import { useQuery } from '@apollo/client';
+import { useCallback, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useDropdown } from '@magento/peregrine/lib/hooks/useDropdown';
+import { useAwaitQuery } from '@magento/peregrine/lib/hooks/useAwaitQuery';
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from '@magento/peregrine/lib/talons/Header/storeSwitcher.gql';
+
+const storage = new BrowserPersistence();
+
+const mapAvailableOptions = (config, stores) => {
+    const { store_code: configCode } = config;
+
+    return stores.reduce((map, store) => {
+        const {
+            default_display_currency_code: currency,
+            locale,
+            secure_base_media_url,
+            store_code: storeCode,
+            website_code: websiteCode,
+            store_group_code: storeGroupCode,
+            store_group_name: storeGroupName,
+            store_name: storeName,
+            store_sort_order: sortOrder
+        } = store;
+
+        const isCurrent = storeCode === configCode;
+        const option = {
+            currency,
+            isCurrent,
+            locale,
+            secure_base_media_url,
+            sortOrder,
+            storeCode,
+            websiteCode,
+            storeGroupCode,
+            storeGroupName,
+            storeName
+        };
+
+        return map.set(storeCode, option);
+    }, new Map());
+};
+
+/**
+ * The useStoreSwitcher talon complements the StoreSwitcher component.
+ *
+ * @param {Array<Object>} [props.availableRoutes] - Hardcoded app routes.
+ * @param {Object} [props.operations] - GraphQL operations to be run by the hook.
+ *
+ * @returns {Map}    talonProps.availableStores - Details about the available store views.
+ * @returns {String}    talonProps.currentStoreName - Name of the current store view.
+ * @returns {Boolean}   talonProps.storeMenuIsOpen - Whether the menu that this trigger toggles is open or not.
+ * @returns {Ref}       talonProps.storeMenuRef - A React ref to the menu that this trigger toggles.
+ * @returns {Ref}       talonProps.storeMenuTriggerRef - A React ref to the trigger element itself.
+ * @returns {Function}  talonProps.handleTriggerClick - A function for handling when the trigger is clicked.
+ * @returns {Function}  talonProps.handleSwitchStore - A function for handling when the menu item is clicked.
+ */
+
+export const useStoreSwitcher = (props = {}) => {
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { availableRoutes = [] } = props;
+    const internalRoutes = useMemo(() => {
+        return availableRoutes.map(path => {
+            if (path.exact) {
+                return path.pattern;
+            }
+        });
+    }, [availableRoutes]);
+
+    const {
+        getStoreConfigData,
+        getRouteData,
+        getAvailableStoresData
+    } = operations;
+    const { pathname, search: searchParams } = useLocation();
+    const {
+        elementRef: storeMenuRef,
+        expanded: storeMenuIsOpen,
+        setExpanded: setStoreMenuIsOpen,
+        triggerRef: storeMenuTriggerRef
+    } = useDropdown();
+
+    const { data: storeConfigData } = useQuery(getStoreConfigData, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const fetchRouteData = useAwaitQuery(getRouteData);
+
+    const { data: availableStoresData } = useQuery(getAvailableStoresData, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const currentStoreName = useMemo(() => {
+        if (storeConfigData) {
+            return storeConfigData.storeConfig.store_name;
+        }
+    }, [storeConfigData]);
+
+    const currentGroupName = useMemo(() => {
+        if (storeConfigData) {
+            return storeConfigData.storeConfig.store_group_name;
+        }
+    }, [storeConfigData]);
+
+    // availableStores => mapped options or empty map if undefined.
+    const availableStores = useMemo(() => {
+        return (
+            (storeConfigData &&
+                availableStoresData &&
+                mapAvailableOptions(
+                    storeConfigData.storeConfig,
+                    availableStoresData.availableStores
+                )) ||
+            new Map()
+        );
+    }, [storeConfigData, availableStoresData]);
+
+    // Create a map of sorted store views for each group.
+    const storeGroups = useMemo(() => {
+        const groups = new Map();
+
+        availableStores.forEach(store => {
+            const groupCode = store.storeGroupCode;
+            if (!groups.has(groupCode)) {
+                const groupViews = [store];
+                groups.set(groupCode, groupViews);
+            } else {
+                const groupViews = groups.get(groupCode);
+                // Insert store at configured position
+                groupViews.splice(store.sortOrder, 0, store);
+            }
+        });
+
+        return groups;
+    }, [availableStores]);
+
+    const getPathname = useCallback(
+        async storeCode => {
+            if (pathname === '' || pathname === '/') return '';
+            let newPath = '';
+            if (internalRoutes.includes(pathname)) {
+                newPath = pathname;
+            } else {
+                const { data: routeData } = await fetchRouteData({
+                    fetchPolicy: 'no-cache',
+                    variables: {
+                        url: pathname
+                    },
+                    context: { headers: { store: storeCode } }
+                });
+                if (routeData.route) {
+                    newPath = routeData.route.relative_url;
+                }
+            }
+            return newPath.startsWith('/') ? newPath.substr(1) : newPath;
+        },
+        [pathname, fetchRouteData, internalRoutes]
+    );
+
+    const handleSwitchStore = useCallback(
+        // Change store view code and currency to be used in Apollo link request headers
+        async (storeCode, websiteCode) => {
+            // Do nothing when store view is not present in available stores
+            if (!availableStores.has(storeCode)) return;
+
+            storage.setItem('store_view_code', storeCode);
+            storage.setItem('website_code', websiteCode);
+            storage.setItem(
+                'store_view_currency',
+                availableStores.get(storeCode).currency
+            );
+            storage.setItem(
+                'store_view_secure_base_media_url',
+                availableStores.get(storeCode).secure_base_media_url
+            );
+            const pathName = await getPathname(storeCode);
+            const newPath = pathName ? `/${pathName}${searchParams}` : '';
+
+            globalThis.location.assign(`/${websiteCode}${newPath || ''}`);
+        },
+        [availableStores, getPathname, searchParams]
+    );
+
+    const handleTriggerClick = useCallback(() => {
+        // Toggle Stores Menu.
+        setStoreMenuIsOpen(isOpen => !isOpen);
+    }, [setStoreMenuIsOpen]);
+
+    return {
+        availableStores,
+        currentGroupName,
+        currentStoreName,
+        storeGroups,
+        storeMenuRef,
+        storeMenuTriggerRef,
+        storeMenuIsOpen,
+        handleTriggerClick,
+        handleSwitchStore
+    };
+};

package/src/overwrites/pwa-buildpack/lib/queries/getAvailableStoresConfigData.graphql

@@ -0,0 +1,11 @@
+query availableStoresConfigData {
+    availableStores {
+        store_code
+        id
+        secure_base_media_url
+        store_name
+        default_display_currency_code
+        website_code
+        is_default_store
+    }
+}

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

@@ -0,0 +1,110 @@
+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-multi-website/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;
+
+            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

@@ -0,0 +1,116 @@
+import React, { Fragment, Suspense } from 'react';
+import { shape, string } from 'prop-types';
+import { Link, Route } from 'react-router-dom';
+
+import Logo from '@magento/venia-ui/lib/components/Logo';
+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-multi-website/src/components/Header/websiteSwitcher';
+import CurrencySwitcher from '@magento/venia-ui/lib/components/Header/currencySwitcher';
+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">
+                    <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"
+                    >
+                        <Logo classes={{ logo: classes.logo }} />
+                    </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;