@riosst100/pwa-marketplace 1.0.1 → 1.0.3

package/src/talons/WebsiteByIp/useWebsiteByIp.js

@@ -24,6 +24,8 @@ export const useWebsiteByIp = websiteCodeInUrl => {
     const getWebsiteByUserIp = useMemo(() => {
         if (websiteByUserIpData) {
             return websiteByUserIpData;
+        } else {
+            return null;
         }
     }, [websiteByUserIpData]);
 

package/src/talons/WebsiteSwitcher/useWebsiteSwitcher.js

@@ -0,0 +1,218 @@
+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(() => {
+        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/WebsiteSwitcher/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
+};