@riosst100/pwa-marketplace 1.0.0

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

@@ -0,0 +1,118 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+
+import { useStoreSwitcher } from '@magento/peregrine/lib/talons/Header/useStoreSwitcher';
+import { availableRoutes } from '@magento/venia-ui/lib/components/Routes/routes';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from '@magento/venia-ui/lib/components/Header/storeSwitcher.module.css';
+import SwitcherItem from '@magento/venia-ui/lib/components/Header/switcherItem';
+import Shimmer from '@magento/venia-ui/lib/components/Header/storeSwitcher.shimmer';
+
+const StoreSwitcher = props => {
+    const {
+        availableStores,
+        currentGroupName,
+        currentStoreName,
+        handleSwitchStore,
+        storeGroups,
+        storeMenuRef,
+        storeMenuTriggerRef,
+        storeMenuIsOpen,
+        handleTriggerClick
+    } = useStoreSwitcher({ availableRoutes });
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const menuClassName = storeMenuIsOpen ? classes.menu_open : classes.menu;
+
+    if (!availableStores) return <Shimmer />;
+
+    const groups = [];
+    const hasOnlyOneGroup = storeGroups.size === 1;
+
+    storeGroups.forEach((group, key) => {
+        const stores = [];
+        group.forEach(({ storeGroupName, storeName, isCurrent, storeCode, websiteCode }) => {
+            let label;
+            if (hasOnlyOneGroup) {
+                label = `${storeName}`;
+            } else {
+                label = `${storeGroupName} - ${storeName}`;
+            }
+
+            stores.push(
+                <li
+                    aria-selected={currentStoreName}
+                    role="option"
+                    key={storeCode}
+                    className={classes.menuItem}
+                    data-cy="StoreSwitcher-view"
+                >
+                    <SwitcherItem
+                        active={isCurrent}
+                        onClick={handleSwitchStore}
+                        option={storeCode}
+                        option2={websiteCode}
+                    >
+                        {label}
+                    </SwitcherItem>
+                </li>
+            );
+        });
+
+        groups.push(
+            <ul
+                role="listbox"
+                className={classes.groupList}
+                key={key}
+                data-cy="StoreSwitcher-group"
+            >
+                {stores}
+            </ul>
+        );
+    });
+
+    let triggerLabel;
+    if (hasOnlyOneGroup) {
+        triggerLabel = `${currentStoreName}`;
+    } else {
+        triggerLabel = `${currentGroupName} - ${currentStoreName}`;
+    }
+
+    return (
+        <div className={classes.root} data-cy="StoreSwitcher-root">
+            <button
+                data-cy="StoreSwitcher-triggerButton"
+                className={classes.trigger}
+                aria-label={currentStoreName || ''}
+                onClick={handleTriggerClick}
+                ref={storeMenuTriggerRef}
+                data-cy="StoreSwitcher-trigger"
+                aria-expanded={storeMenuIsOpen}
+            >
+                {triggerLabel}
+            </button>
+            <div
+                ref={storeMenuRef}
+                className={menuClassName}
+                data-cy="StoreSwitcher-menu"
+            >
+                <div className={classes.groups}>{groups}</div>
+            </div>
+        </div>
+    );
+};
+
+export default StoreSwitcher;
+
+StoreSwitcher.propTypes = {
+    classes: shape({
+        groupList: string,
+        groups: string,
+        menu: string,
+        menu_open: string,
+        menuItem: string,
+        root: string,
+        trigger: string
+    })
+};

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

@@ -0,0 +1,47 @@
+import React, { useCallback } from 'react';
+import { Check } from 'react-feather';
+import { bool, func, shape, string } from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Icon from '@magento/venia-ui/lib/components/Icon/icon';
+import defaultClasses from '@magento/venia-ui/lib/components/Header/switcherItem.module.css';
+
+const SwitcherItem = props => {
+    const { active, onClick, option, option2, children } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const handleClick = useCallback(() => {
+        onClick(option, option2);
+    }, [option, option2, onClick]);
+
+    const activeIcon = active ? (
+        <Icon data-cy="SwitcherItem-activeIcon" size={20} src={Check} />
+    ) : null;
+
+    return (
+        <button
+            data-cy="SwitcherItem-button"
+            className={classes.root}
+            disabled={active}
+            onClick={handleClick}
+        >
+            <span className={classes.content}>
+                <span className={classes.text}>{children}</span>
+                {activeIcon}
+            </span>
+        </button>
+    );
+};
+
+SwitcherItem.propTypes = {
+    active: bool,
+    classes: shape({
+        content: string,
+        root: string,
+        text: string
+    }),
+    onClick: func,
+    option: string
+};
+
+export default SwitcherItem;

package/src/overwrites/venia-ui/lib/components/StoreCodeRoute/storeCodeRoute.js

@@ -0,0 +1,75 @@
+import { useEffect, useMemo } from 'react';
+import { useHistory } from 'react-router-dom';
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
+
+const storage = new BrowserPersistence();
+
+/**
+ * This component checks for use of a store code in the url that is not the
+ * current base. If found, it updates the local storage values for code/currency
+ * and reloads the page so that they are used in the graphQL headers.
+ */
+const StoreCodeRoute = () => {
+    const history = useHistory();
+
+    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;
+    });
+
+    // Sort by length (longest first) to avoid false hits ie "en" matching just
+    // the "/en" in "/en-us/home.html" when "en-us" is also in storeCodes.
+    websiteCodes.sort((a, b) => b.length - a.length);
+
+    // Find the store code in the url. This will always be the first path.
+    // ie `https://example.com/fr/foo/baz.html` => `fr`.
+    const { location } = globalThis;
+    const match = location && location.pathname.split("/")[1];
+    let websiteCodeInUrl = websiteCodes.find((str) => str === match);
+
+    // Determine what the current store code is using the configured basename.
+    const currentWebsiteCode = storage && storage.getItem('website_code') || process.env.WEBSITE_CODE;
+
+    // If we find a store code in the url that is not the current one, update
+    // the storage value and refresh so that we start using the new code.
+    useEffect(() => {
+        if (!websiteCodeInUrl) {
+            history.replace(location.pathname)
+        } else if (websiteCodeInUrl && websiteCodeInUrl !== currentWebsiteCode) {
+            let storeCodeInUrl = websiteStores[websiteCodeInUrl];
+
+            storage.setItem('store_view_code', storeCodeInUrl);
+            storage.setItem('website_code', websiteCodeInUrl);
+            storage.setItem(
+                'store_view_currency',
+                storeCurrencies[storeCodeInUrl]
+            );
+            storage.setItem(
+                'store_view_secure_base_media_url',
+                storeSecureBaseMediaUrl[storeCodeInUrl]
+            );
+
+            // We're required to reload the page as the basename doesn't
+            // change entirely without a full page reload.
+            history.go(0);
+        }
+    }, [
+        websiteCodeInUrl,
+        // currentWebsiteCode,
+        history
+        // storeCodeInUrl,
+        // storeCurrencies,
+        // storeSecureBaseMediaUrl
+    ]);
+
+    return null;
+};
+
+export default StoreCodeRoute;

package/src/queries/getAvailableWebsitesConfigData.graphql

@@ -0,0 +1,14 @@
+query getAvailableWebsitesConfigData {
+    availableStoresByUserIp {
+        store_code
+        id
+        secure_base_media_url
+        store_name
+        default_display_currency_code
+        website_code
+        is_default_store
+        website_code
+        website_name
+        is_suggested
+    }
+}

package/src/queries/index.js

@@ -0,0 +1,30 @@
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Normal `require` doesn't know what to do with .graphql files, so this helper function
+ * simply imports their contents as a string.
+ * @see https://github.com/apollographql/apollo-server/issues/1175#issuecomment-397257339.
+ *
+ * @param   {String} filepath - A relative path to a .graphql file to read.
+ * @returns {String} - The contents of the file as a string.
+ */
+const requireGraphQL = filePath => {
+    const absolutePath = path.resolve(__dirname, filePath);
+    return stripComments(fs.readFileSync(absolutePath, { encoding: 'utf8' }));
+};
+
+const singleLineCommentRegex = /(^#.*\n)/gm;
+const stripComments = string => {
+    return string.replace(singleLineCommentRegex, '');
+};
+
+// Import all the build-time queries.
+const getAvailableWebsitesConfigData = requireGraphQL(
+    './getAvailableWebsitesConfigData.graphql'
+);
+
+// Export the queries for use by the rest of buildpack.
+module.exports = {
+    getAvailableWebsitesConfigData
+};

package/src/talons/Header/useWebsiteSwitcher.js

@@ -0,0 +1,219 @@
+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 './websiteSwitcher.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,
+            store_group_code: storeGroupCode,
+            store_group_name: storeGroupName,
+            website_name: websiteName,
+            website_code: websiteCode,
+            store_sort_order: sortOrder
+        } = store;
+
+        const isCurrent = storeCode === configCode;
+        const option = {
+            currency,
+            isCurrent,
+            locale,
+            secure_base_media_url,
+            sortOrder,
+            storeCode,
+            storeGroupCode,
+            storeGroupName,
+            websiteName,
+            websiteCode
+        };
+
+        return map.set(storeCode, option);
+    }, new Map());
+};
+
+/**
+ * The useWebsiteSwitcher talon complements the WebsiteSwitcher 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.currentWebsiteName - 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.handleSwitchWebsite - A function for handling when the menu item is clicked.
+ */
+
+export const useWebsiteSwitcher = (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,
+        getAvailableWebsitesData
+    } = 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(getAvailableWebsitesData, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const currentWebsiteName = useMemo(() => {
+        if (storeConfigData) {
+            return storeConfigData.storeConfig.website_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(() => {
+        console.log(availableStoresData)
+        return (
+            (storeConfigData &&
+                availableStoresData &&
+                mapAvailableOptions(
+                    storeConfigData.storeConfig,
+                    availableStoresData.availableStoresByUserIp
+                )) ||
+            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 handleSwitchWebsite = 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(
+                '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);
+            
+            let accessBaseWebsite = null;
+            let newSearchParams = searchParams;
+            let newWebsiteCode = websiteCode;
+
+            if (newWebsiteCode == process.env.WEBSITE_CODE) {
+                newWebsiteCode = null;
+                newSearchParams = searchParams ? searchParams+'&access_base_website=1' : '?access_base_website=1';
+                accessBaseWebsite = '?access_base_website=1';
+            }
+
+            const newPath = pathName ? `/${pathName}${newSearchParams}` : (accessBaseWebsite ? `/${pathName}${accessBaseWebsite}` : '');
+
+            if (newWebsiteCode) {
+                globalThis.location.assign(`/${newWebsiteCode}${newPath || ''}`);
+            } else {
+                globalThis.location.assign(`${newPath || ''}`);
+            }
+        },
+        [availableStores, getPathname, searchParams]
+    );
+
+    const handleTriggerClick = useCallback(() => {
+        // Toggle Stores Menu.
+        setStoreMenuIsOpen(isOpen => !isOpen);
+    }, [setStoreMenuIsOpen]);
+
+    return {
+        availableStores,
+        currentGroupName,
+        currentWebsiteName,
+        storeGroups,
+        storeMenuRef,
+        storeMenuTriggerRef,
+        storeMenuIsOpen,
+        handleTriggerClick,
+        handleSwitchWebsite
+    };
+};

package/src/talons/Header/websiteSwitcher.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_name
+        }
+    }
+`;
+
+export const GET_ROUTE_DATA = gql`
+    query getRouteData($url: String!) {
+        route(url: $url) {
+            relative_url
+        }
+    }
+`;
+
+export const GET_AVAILABLE_WEBSITES_DATA = gql`
+    query availableStoresByUserIp {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        availableStoresByUserIp {
+            default_display_currency_code
+            locale
+            secure_base_media_url
+            store_code
+            store_group_code
+            store_group_name
+            store_name
+            store_sort_order
+            website_name
+            website_code
+        }
+    }
+`;
+
+export default {
+    getStoreConfigData: GET_STORE_CONFIG_DATA,
+    getRouteData: GET_ROUTE_DATA,
+    getAvailableWebsitesData: GET_AVAILABLE_WEBSITES_DATA
+};

package/src/talons/WebsiteByIp/getWebsiteByIp.gql.js

@@ -0,0 +1,14 @@
+import gql from 'graphql-tag';
+
+export const GET_WEBSITE_BY_IP = gql`
+    query getWebsiteByUserIp (
+        $ip_address: String
+    ) {
+        getWebsiteByUserIp(ip_address: $ip_address) {
+            store_code
+            website_code
+            website_name
+            is_suggested
+        }
+    }
+`;

package/src/talons/WebsiteByIp/useWebsiteByIp.js

@@ -0,0 +1,33 @@
+import { useState, useMemo, useEffect } from 'react';
+import axios from 'axios';
+
+export const useWebsiteByIp = websiteCodeInUrl => {
+    const [websiteByUserIpData, setWebsiteByUserIpData] = useState(null);
+
+    useEffect(() => {
+        if (!websiteCodeInUrl) {
+            const fetchData = async () => {
+                axios.get('https://extreme-ip-lookup.com/json/?key=NqwiAPsYZXoA3jwsnP7B').then((response) => {
+                    let data = response.data;
+                    if (data) {
+                        setWebsiteByUserIpData(data)
+                    }
+                }).catch((error) => {
+                    console.log(error);
+                });
+            };
+        
+            fetchData();
+        }
+    }, [websiteCodeInUrl]);
+
+    const getWebsiteByUserIp = useMemo(() => {
+        if (websiteByUserIpData) {
+            return websiteByUserIpData;
+        }
+    }, [websiteByUserIpData]);
+
+    return {
+        getWebsiteByUserIp
+    };
+};