@magento/peregrine 12.4.0-beta.1 → 12.5.0-alpha.2

package/lib/talons/Header/useStoreSwitcher.js

@@ -2,6 +2,7 @@ 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 '../../util/shallowMerge';
 import DEFAULT_OPERATIONS from './storeSwitcher.gql';
@@ -13,11 +14,8 @@ const mapAvailableOptions = (config, stores) => {
 
     return stores.reduce((map, store) => {
         const {
-            category_url_suffix,
-            store_code: code,
             default_display_currency_code: currency,
             locale,
-            product_url_suffix,
             secure_base_media_url,
             store_code: storeCode,
             store_group_code: storeGroupCode,
@@ -26,14 +24,11 @@ const mapAvailableOptions = (config, stores) => {
             store_sort_order: sortOrder
         } = store;
 
-        const isCurrent = code === configCode;
+        const isCurrent = storeCode === configCode;
         const option = {
-            category_url_suffix,
-            code,
             currency,
             isCurrent,
             locale,
-            product_url_suffix,
             secure_base_media_url,
             sortOrder,
             storeCode,
@@ -42,14 +37,15 @@ const mapAvailableOptions = (config, stores) => {
             storeName
         };
 
-        return map.set(code, option);
+        return map.set(storeCode, option);
     }, new Map());
 };
 
 /**
  * The useStoreSwitcher talon complements the StoreSwitcher component.
  *
- * @param {*} props.getStoreConfig the store switcher data getStoreConfig
+ * @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.
@@ -62,12 +58,21 @@ const mapAvailableOptions = (config, stores) => {
 
 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 } = useLocation();
+    const { pathname, search: searchParams } = useLocation();
     const {
         elementRef: storeMenuRef,
         expanded: storeMenuIsOpen,
@@ -80,10 +85,7 @@ export const useStoreSwitcher = (props = {}) => {
         nextFetchPolicy: 'cache-first'
     });
 
-    const { data: routeData } = useQuery(getRouteData, {
-        fetchPolicy: 'cache-first',
-        variables: { url: pathname }
-    });
+    const fetchRouteData = useAwaitQuery(getRouteData);
 
     const { data: availableStoresData } = useQuery(getAvailableStoresData, {
         fetchPolicy: 'cache-and-network',
@@ -102,18 +104,6 @@ export const useStoreSwitcher = (props = {}) => {
         }
     }, [storeConfigData]);
 
-    const currentStoreCode = useMemo(() => {
-        if (storeConfigData) {
-            return storeConfigData.storeConfig.store_code;
-        }
-    }, [storeConfigData]);
-
-    const pageType = useMemo(() => {
-        if (routeData && routeData.route) {
-            return routeData.route.type;
-        }
-    }, [routeData]);
-
     // availableStores => mapped options or empty map if undefined.
     const availableStores = useMemo(() => {
         return (
@@ -146,51 +136,35 @@ export const useStoreSwitcher = (props = {}) => {
         return groups;
     }, [availableStores]);
 
-    // Get pathname with suffix based on page type
     const getPathname = useCallback(
-        storeCode => {
-            // Use globalThis.location.pathname to get the path with the store view code
-            // pathname from useLocation() does not include the store view code
-            const pathname = globalThis.location.pathname;
-
-            if (pageType === 'CATEGORY') {
-                const currentSuffix =
-                    availableStores.get(currentStoreCode).category_url_suffix ||
-                    '';
-                const newSuffix =
-                    availableStores.get(storeCode).category_url_suffix || '';
-
-                return currentSuffix
-                    ? pathname.replace(currentSuffix, newSuffix)
-                    : `${pathname}${newSuffix}`;
-            }
-            if (pageType === 'PRODUCT') {
-                const currentSuffix =
-                    availableStores.get(currentStoreCode).product_url_suffix ||
-                    '';
-                const newSuffix =
-                    availableStores.get(storeCode).product_url_suffix || '';
-
-                return currentSuffix
-                    ? pathname.replace(currentSuffix, newSuffix)
-                    : `${pathname}${newSuffix}`;
+        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;
+                }
             }
-
-            // search.html ...etc
-            return pathname;
+            return newPath.startsWith('/') ? newPath.substr(1) : newPath;
         },
-        [availableStores, currentStoreCode, pageType]
+        [pathname, fetchRouteData, internalRoutes]
     );
 
     const handleSwitchStore = useCallback(
         // Change store view code and currency to be used in Apollo link request headers
-        storeCode => {
+        async storeCode => {
             // Do nothing when store view is not present in available stores
             if (!availableStores.has(storeCode)) return;
 
-            const pathName = getPathname(storeCode);
-            const params = globalThis.location.search || '';
-
             storage.setItem('store_view_code', storeCode);
             storage.setItem(
                 'store_view_currency',
@@ -200,43 +174,16 @@ export const useStoreSwitcher = (props = {}) => {
                 'store_view_secure_base_media_url',
                 availableStores.get(storeCode).secure_base_media_url
             );
+            const pathName = await getPathname(storeCode);
+            const newPath = pathName ? `/${pathName}${searchParams}` : '';
 
-            // Handle updating the URL if the store code should be present.
-            // In this block we use `globalThis.location.assign` to work around the
-            // static React Router basename, which is changed on initialization.
             if (process.env.USE_STORE_CODE_IN_URL === 'true') {
-                // Check to see if we're on a page outside of the homepage
-                if (pathName !== '' && pathName !== '/') {
-                    const [, pathStoreCode] = pathName.split('/');
-
-                    // If the current store code is in the url, replace it with
-                    // the new one.
-                    if (
-                        availableStores.has(pathStoreCode) &&
-                        availableStores.get(pathStoreCode).isCurrent
-                    ) {
-                        const newPath = `${pathName.replace(
-                            `/${pathStoreCode}`,
-                            `/${storeCode}`
-                        )}${params}`;
-
-                        globalThis.location.assign(newPath);
-                    } else {
-                        // Otherwise include it and reload.
-                        const newPath = `/${storeCode}${pathName}${params}`;
-
-                        globalThis.location.assign(newPath);
-                    }
-                } else {
-                    globalThis.location.assign(`/${storeCode}`);
-                }
+                globalThis.location.assign(`/${storeCode}${newPath || ''}`);
             } else {
-                // Refresh the page to re-trigger the queries once code/currency
-                // are saved in local storage.
-                globalThis.location.assign(`${pathName}${params}`);
+                globalThis.location.assign(`${newPath || '/'}`);
             }
         },
-        [availableStores, getPathname]
+        [availableStores, getPathname, searchParams]
     );
 
     const handleTriggerClick = useCallback(() => {

package/lib/talons/MagentoRoute/useMagentoRoute.js

@@ -109,6 +109,13 @@ export const useMagentoRoute = (props = {}) => {
     } else if (routeError) {
         // ERROR
         routeData = { hasError: true, routeError };
+    } else if (empty && fetchedPathname.current === pathname && !loading) {
+        // NOT FOUND
+        routeData = { isNotFound: true };
+    } else if (nextRootComponent) {
+        // LOADING with full page shimmer
+        showPageLoader = true;
+        routeData = { isLoading: true, shimmer: nextRootComponent };
     } else if (redirect) {
         // REDIRECT
         routeData = {
@@ -117,13 +124,6 @@ export const useMagentoRoute = (props = {}) => {
                 ? relative_url
                 : '/' + relative_url
         };
-    } else if (empty && fetchedPathname.current === pathname && !loading) {
-        // NOT FOUND
-        routeData = { isNotFound: true };
-    } else if (nextRootComponent) {
-        // LOADING with full page shimmer
-        showPageLoader = true;
-        routeData = { isLoading: true, shimmer: nextRootComponent };
     } else {
         // LOADING
         const isInitialLoad = !isInitialized;

package/lib/talons/MiniCart/ProductList/productListFragments.gql.js

@@ -10,6 +10,7 @@ export const ProductListFragment = gql`
             product {
                 uid
                 name
+                sku
                 url_key
                 thumbnail {
                     url
@@ -36,6 +37,9 @@ export const ProductListFragment = gql`
                     currency
                     value
                 }
+                total_item_discount {
+                    value
+                }
             }
             quantity
             # eslint-disable-next-line @graphql-eslint/require-id-when-available

package/lib/talons/MiniCart/useMiniCart.js

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
 import { useQuery, useMutation } from '@apollo/client';
 
@@ -6,9 +6,11 @@ import { useCartContext } from '../../context/cart';
 import { deriveErrorMessage } from '../../util/deriveErrorMessage';
 import mergeOperations from '../../util/shallowMerge';
 import DEFAULT_OPERATIONS from './miniCart.gql';
+import { useEventingContext } from '../../context/eventing';
 
 /**
  *
+ * @param {Boolean} props.isOpen - True if the mini cart is open
  * @param {Function} props.setIsOpen - Function to toggle the mini cart
  * @param {DocumentNode} props.operations.miniCartQuery - Query to fetch mini cart data
  * @param {DocumentNode} props.operations.removeItemMutation - Mutation to remove an item from cart
@@ -27,7 +29,9 @@ import DEFAULT_OPERATIONS from './miniCart.gql';
  *  }
  */
 export const useMiniCart = props => {
-    const { setIsOpen } = props;
+    const { isOpen, setIsOpen } = props;
+
+    const [, { dispatch }] = useEventingContext();
 
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
     const {
@@ -106,11 +110,38 @@ export const useMiniCart = props => {
                         itemId: id
                     }
                 });
+
+                const [product] = productList.filter(
+                    p => (p.uid || p.id) === id
+                );
+
+                const selectedOptionsLabels =
+                    product.configurable_options?.map(
+                        ({ option_label, value_label }) => ({
+                            attribute: option_label,
+                            value: value_label
+                        })
+                    ) || null;
+
+                dispatch({
+                    type: 'CART_REMOVE_ITEM',
+                    payload: {
+                        cartId,
+                        sku: product.product.sku,
+                        name: product.product.name,
+                        priceTotal: product.prices.price.value,
+                        currencyCode: product.prices.price.currency,
+                        discountAmount:
+                            product.prices.total_item_discount.value,
+                        selectedOptions: selectedOptionsLabels,
+                        quantity: product.quantity
+                    }
+                });
             } catch (e) {
                 // Error is logged by apollo link - no need to double log.
             }
         },
-        [cartId, removeItem]
+        [removeItem, cartId, dispatch, productList]
     );
 
     const handleProceedToCheckout = useCallback(() => {
@@ -128,6 +159,18 @@ export const useMiniCart = props => {
         [removeItemError]
     );
 
+    useEffect(() => {
+        if (isOpen) {
+            dispatch({
+                type: 'MINI_CART_VIEW',
+                payload: {
+                    cartId: cartId,
+                    products: productList
+                }
+            });
+        }
+    }, [isOpen, cartId, productList, dispatch]);
+
     return {
         closeMiniCart,
         errorMessage: derivedErrorMessage,

package/lib/talons/ProductFullDetail/useProductFullDetail.js

@@ -11,6 +11,7 @@ import { isSupportedProductType as isSupported } from '@magento/peregrine/lib/ut
 import { deriveErrorMessage } from '../../util/deriveErrorMessage';
 import mergeOperations from '../../util/shallowMerge';
 import defaultOperations from './productFullDetail.gql';
+import { useEventingContext } from '../../context/eventing';
 
 const INITIAL_OPTION_CODES = new Map();
 const INITIAL_OPTION_SELECTIONS = new Map();
@@ -155,7 +156,7 @@ const getConfigPrice = (product, optionCodes, optionSelections) => {
         0;
 
     if (!isConfigurable || !optionsSelected) {
-        value = product.price_range?.maximum_price?.final_price;
+        value = product.price_range?.maximum_price;
     } else {
         const item = findMatchingVariant({
             optionCodes,
@@ -164,8 +165,8 @@ const getConfigPrice = (product, optionCodes, optionSelections) => {
         });
 
         value = item
-            ? item.product.price_range?.maximum_price?.final_price
-            : product.price_range?.maximum_price?.final_price;
+            ? item.product.price_range?.maximum_price
+            : product.price_range?.maximum_price;
     }
 
     return value;
@@ -229,6 +230,8 @@ export const useProductFullDetail = props => {
         product
     } = props;
 
+    const [, { dispatch }] = useEventingContext();
+
     const hasDeprecatedOperationProp = !!(
         addConfigurableProductToCartMutation || addSimpleProductToCartMutation
     );
@@ -314,6 +317,11 @@ export const useProductFullDetail = props => {
         [product, optionCodes, optionSelections]
     );
 
+    const productPrice = useMemo(
+        () => getConfigPrice(product, optionCodes, optionSelections),
+        [product, optionCodes, optionSelections]
+    );
+
     // The map of ids to values (and their uids)
     // For example:
     // { "179" => [{ uid: "abc", value_index: 1 }, { uid: "def", value_index: 2 }]}
@@ -421,6 +429,29 @@ export const useProductFullDetail = props => {
 
                 try {
                     await addProductToCart({ variables });
+
+                    const selectedOptionsLabels =
+                        selectedOptionsArray?.map((uid, i) => ({
+                            attribute: product.configurable_options[i].label,
+                            value:
+                                product.configurable_options[i].values.findLast(
+                                    x => x.uid === uid
+                                )?.label || null
+                        })) || null;
+
+                    dispatch({
+                        type: 'CART_ADD_ITEM',
+                        payload: {
+                            cartId,
+                            sku: product.sku,
+                            name: product.name,
+                            priceTotal: productPrice.final_price.value,
+                            currencyCode: productPrice.final_price.currency,
+                            discountAmount: productPrice.discount.amount_off,
+                            selectedOptions: selectedOptionsLabels,
+                            quantity
+                        }
+                    });
                 } catch {
                     return;
                 }
@@ -431,11 +462,13 @@ export const useProductFullDetail = props => {
             addProductToCart,
             addSimpleProductToCart,
             cartId,
+            dispatch,
             hasDeprecatedOperationProp,
             isSupportedProductType,
             optionCodes,
             optionSelections,
             product,
+            productPrice,
             productType,
             selectedOptionsArray
         ]
@@ -452,17 +485,12 @@ export const useProductFullDetail = props => {
         [optionSelections]
     );
 
-    const productPrice = useMemo(
-        () => getConfigPrice(product, optionCodes, optionSelections),
-        [product, optionCodes, optionSelections]
-    );
-
     // Normalization object for product details we need for rendering.
     const productDetails = {
         description: product.description,
         shortDescription: product.short_description,
         name: product.name,
-        price: productPrice,
+        price: productPrice?.final_price,
         sku: product.sku
     };
 

package/lib/talons/RootComponents/Category/categoryContent.gql.js

@@ -27,6 +27,8 @@ export const GET_CATEGORY_CONTENT = gql`
                 uid
                 name
                 description
+                url_key
+                url_path
             }
         }
     }

package/lib/talons/RootComponents/Category/categoryFragments.gql.js

@@ -26,6 +26,9 @@ export const ProductsFragment = gql`
                         currency
                         value
                     }
+                    discount {
+                        amount_off
+                    }
                 }
             }
             sku

package/lib/talons/RootComponents/Category/useCategory.js

@@ -200,6 +200,8 @@ export const useCategory = props => {
     }, [currentSort, previousSearch, search, setCurrentPage]);
 
     const categoryData = categoryLoading && !data ? null : data;
+    const categoryNotFound =
+        !categoryLoading && data && data.categories.items.length === 0;
     const metaDescription =
         data &&
         data.categories.items[0] &&
@@ -222,6 +224,7 @@ export const useCategory = props => {
         metaDescription,
         pageControl,
         sortProps,
-        pageSize
+        pageSize,
+        categoryNotFound
     };
 };

package/lib/talons/RootComponents/Category/useCategoryContent.js

@@ -2,6 +2,7 @@ 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';
 
@@ -46,14 +47,19 @@ export const useCategoryContent = props => {
         }
     );
 
-    const { data: categoryData } = useQuery(getCategoryContentQuery, {
-        fetchPolicy: 'cache-and-network',
-        nextFetchPolicy: 'cache-first',
-        skip: !categoryId,
-        variables: {
-            id: categoryId
+    const { data: categoryData, loading: categoryLoading } = useQuery(
+        getCategoryContentQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first',
+            skip: !categoryId,
+            variables: {
+                id: categoryId
+            }
         }
-    });
+    );
+
+    const [, { dispatch }] = useEventingContext();
 
     useEffect(() => {
         if (categoryId) {
@@ -85,16 +91,32 @@ export const useCategoryContent = props => {
         ? data.products.page_info.total_pages
         : null;
     const totalCount = data ? data.products.total_count : null;
-    const categoryName = categoryData
-        ? categoryData.categories.items[0].name
-        : null;
-    const categoryDescription = categoryData
-        ? categoryData.categories.items[0].description
-        : 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,

package/lib/talons/RootComponents/Product/productDetailFragment.gql.js

@@ -42,6 +42,9 @@ export const ProductDetailsFragment = gql`
                     currency
                     value
                 }
+                discount {
+                    amount_off
+                }
             }
         }
         sku
@@ -136,6 +139,9 @@ export const ProductDetailsFragment = gql`
                                 currency
                                 value
                             }
+                            discount {
+                                amount_off
+                            }
                         }
                     }
                     custom_attributes {

package/lib/talons/RootComponents/Product/useProduct.js

@@ -5,6 +5,7 @@ import { useAppContext } from '@magento/peregrine/lib/context/app';
 
 import mergeOperations from '../../../util/shallowMerge';
 import DEFAULT_OPERATIONS from './product.gql';
+import { useEventingContext } from '../../../context/eventing';
 
 /**
  * A [React Hook]{@link https://reactjs.org/docs/hooks-intro.html} that
@@ -76,11 +77,37 @@ export const useProduct = props => {
         return mapProduct(product);
     }, [data, mapProduct, urlKey]);
 
+    const [, { dispatch }] = useEventingContext();
+
     // Update the page indicator if the GraphQL query is in flight.
     useEffect(() => {
         setPageLoading(isBackgroundLoading);
     }, [isBackgroundLoading, setPageLoading]);
 
+    useEffect(() => {
+        if (!error && !loading && product) {
+            dispatch({
+                type: 'PRODUCT_PAGE_VIEW',
+                payload: {
+                    id: product.id,
+                    name: product.name,
+                    sku: product.sku,
+                    currency_code:
+                        product?.price_range?.maximum_price?.final_price
+                            ?.currency,
+                    price_range: {
+                        maximum_price: {
+                            final_price:
+                                product?.price_range?.maximum_price?.final_price
+                                    ?.value
+                        }
+                    },
+                    url_key: product.url_key
+                }
+            });
+        }
+    }, [error, loading, product, dispatch]);
+
     return {
         error,
         loading,

package/lib/talons/SearchBar/index.js

@@ -3,3 +3,4 @@ export { useSearchBar } from './useSearchBar';
 export { useSearchField } from './useSearchField';
 export { useSuggestedCategory } from './useSuggestedCategory';
 export { useSuggestions } from './useSuggestions';
+export { useSuggestedProduct } from './useSuggestedProduct';