@magento/peregrine 12.4.0 → 12.5.0-alpha.1

package/lib/talons/SearchBar/useAutocomplete.js

@@ -2,6 +2,7 @@ import { useEffect, useMemo } from 'react';
 import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
 import { useLazyQuery } from '@apollo/client';
 import debounce from 'lodash.debounce';
+import { useEventingContext } from '../../context/eventing';
 
 /**
  * @typedef { import("graphql").DocumentNode } DocumentNode
@@ -21,6 +22,8 @@ export const useAutocomplete = props => {
         visible
     } = props;
 
+    const [, { dispatch }] = useEventingContext();
+
     // Prepare to run the queries.
     const [runSearch, productResult] = useLazyQuery(getAutocompleteResults, {
         fetchPolicy: 'cache-and-network',
@@ -44,12 +47,25 @@ export const useAutocomplete = props => {
     useEffect(() => {
         if (valid && visible) {
             debouncedRunQuery(value);
+
+            if (value) {
+                dispatch({
+                    type: 'SEARCHBAR_REQUEST',
+                    payload: {
+                        query: value,
+                        currentPage: 1, // Same value used in GQL query
+                        pageSize: 3, // Same value used in GQL query
+                        refinements: []
+                    }
+                });
+            }
         }
-    }, [debouncedRunQuery, valid, value, visible]);
+    }, [debouncedRunQuery, valid, value, visible, dispatch]);
 
     const { data, error, loading } = productResult;
 
     // Handle results.
+    const categories = data && data.products?.aggregations[1]?.options;
     const products = data && data.products;
     const filters = data && data.products.aggregations;
     const hasResult = products && products.items;
@@ -73,6 +89,7 @@ export const useAutocomplete = props => {
     }
 
     return {
+        categories,
         displayResult,
         filters,
         messageType,

package/lib/talons/SearchBar/useSuggestedProduct.js

@@ -0,0 +1,99 @@
+import { useCallback, useMemo, useEffect } from 'react';
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
+import resourceUrl from '../../util/makeUrl';
+
+/**
+ * Return props necessary to render a SuggestedProduct component.
+ *
+ * @param {Object} props
+ * @param {Object} props.price_range - price range
+ * @param {String} props.url_key - url key
+ * @param {String} props.url_suffix - url suffix
+ * @param {String} props.sku - product sky
+ * @param {Function} props.onNavigate - callback to fire on link click
+ */
+export const useSuggestedProduct = props => {
+    const [, { dispatch }] = useEventingContext();
+    const {
+        name,
+        price,
+        price_range,
+        onNavigate,
+        url_key,
+        url_suffix,
+        sku
+    } = props;
+
+    const finalPrice = price_range?.maximum_price?.final_price?.value;
+    const discountAmount = price_range?.maximum_price?.discount?.amount_off;
+    const currencyCode = price_range?.maximum_price?.final_price?.currency;
+
+    const handleClick = useCallback(() => {
+        dispatch({
+            type: 'PRODUCT_CLICK',
+            payload: {
+                name,
+                sku,
+                priceTotal: finalPrice,
+                discountAmount,
+                currencyCode,
+                selectedOptions: null
+            }
+        });
+        if (typeof onNavigate === 'function') {
+            onNavigate();
+        }
+    }, [
+        name,
+        currencyCode,
+        discountAmount,
+        dispatch,
+        finalPrice,
+        onNavigate,
+        sku
+    ]);
+
+    useEffect(() => {
+        if (sku !== null) {
+            dispatch({
+                type: 'PRODUCT_IMPRESSION',
+                payload: {
+                    name,
+                    sku,
+                    priceTotal: finalPrice,
+                    discountAmount,
+                    currencyCode,
+                    selectedOptions: null
+                }
+            });
+        }
+    }, [name, currencyCode, discountAmount, dispatch, finalPrice, sku]);
+
+    // fall back to deprecated field if price range is unavailable
+    const priceProps = useMemo(() => {
+        return {
+            currencyCode:
+                price_range?.maximum_price?.final_price?.currency ||
+                price.regularPrice.amount.currency,
+            value:
+                price_range?.maximum_price?.final_price?.value ||
+                price.regularPrice.amount.value
+        };
+    }, [
+        price.regularPrice.amount.currency,
+        price.regularPrice.amount.value,
+        price_range?.maximum_price?.final_price?.currency,
+        price_range?.maximum_price?.final_price?.value
+    ]);
+
+    const uri = useMemo(() => resourceUrl(`/${url_key}${url_suffix || ''}`), [
+        url_key,
+        url_suffix
+    ]);
+
+    return {
+        priceProps,
+        handleClick,
+        uri
+    };
+};

package/lib/talons/SearchPage/searchPage.gql.js

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

package/lib/talons/SearchPage/useSearchPage.js

@@ -11,6 +11,7 @@ import { useSort } from '../../hooks/useSort';
 import { getFiltersFromSearch, getFilterInput } from '../FilterModal/helpers';
 
 import DEFAULT_OPERATIONS from './searchPage.gql';
+import { useEventingContext } from '../../context/eventing';
 
 /**
  * Return props necessary to render a SearchPage component.
@@ -19,6 +20,7 @@ import DEFAULT_OPERATIONS from './searchPage.gql';
  * @param {String} props.query - graphql query used for executing search
  */
 export const useSearchPage = (props = {}) => {
+    const [, { dispatch }] = useEventingContext();
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
 
     const {
@@ -133,17 +135,50 @@ export const useSearchPage = (props = {}) => {
         setPageLoading(isBackgroundLoading);
     }, [isBackgroundLoading, setPageLoading]);
 
+    //Handle initial redirect to add page to query param to prevent double query and dispatch and further pagination
+    const searched = useRef(false);
+    // Reset the current page back to one (1) when the search string, filters
+    // or sort criteria change.
+    useEffect(() => {
+        // We don't want to compare page value.
+        const prevSearch = new URLSearchParams(previousSearch.current);
+        const nextSearch = new URLSearchParams(search);
+        prevSearch.delete('page');
+        nextSearch.delete('page');
+
+        if (
+            prevSearch.toString() !== nextSearch.toString() ||
+            previousSort.current.sortAttribute.toString() !==
+                currentSort.sortAttribute.toString() ||
+            previousSort.current.sortDirection.toString() !==
+                currentSort.sortDirection.toString()
+        ) {
+            // The search term changed.
+            setCurrentPage(1, true);
+            // And update the ref.
+            previousSearch.current = search;
+            previousSort.current = currentSort;
+            searched.current = false;
+        }
+    }, [currentSort, search, setCurrentPage]);
+
     useEffect(() => {
         // Wait until we have the type map to fetch product data.
         if (!filterTypeMap.size || !pageSize) {
             return;
         }
         const filters = getFiltersFromSearch(search);
-
-        // Construct the filter arg object.
+        // Construct the filter arg object and dispatcher refinement data.
         const newFilters = {};
+        const refinementData = [];
         filters.forEach((values, key) => {
-            newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
+            const filterMapType = filterTypeMap.get(key);
+            newFilters[key] = getFilterInput(values, filterMapType);
+            refinementData.push({
+                attribute: key,
+                value: values,
+                isRange: filterMapType === 'FilterRangeTypeInput'
+            });
         });
 
         runQuery({
@@ -155,6 +190,22 @@ export const useSearchPage = (props = {}) => {
                 sort: { [sortAttribute]: sortDirection }
             }
         });
+        if (!searched.current) {
+            dispatch({
+                type: 'SEARCH_REQUEST',
+                payload: {
+                    query: inputText,
+                    refinements: refinementData,
+                    sort: {
+                        attribute: sortAttribute,
+                        order: sortDirection
+                    },
+                    pageSize: Number(pageSize),
+                    currentPage: Number(currentPage)
+                }
+            });
+            searched.current = true;
+        }
     }, [
         currentPage,
         filterTypeMap,
@@ -163,7 +214,8 @@ export const useSearchPage = (props = {}) => {
         pageSize,
         search,
         sortDirection,
-        sortAttribute
+        sortAttribute,
+        dispatch
     ]);
 
     // Set the total number of pages whenever the data changes.
@@ -179,30 +231,6 @@ export const useSearchPage = (props = {}) => {
         };
     }, [data, setTotalPages]);
 
-    // Reset the current page back to one (1) when the search string, filters
-    // or sort criteria change.
-    useEffect(() => {
-        // We don't want to compare page value.
-        const prevSearch = new URLSearchParams(previousSearch.current);
-        const nextSearch = new URLSearchParams(search);
-        prevSearch.delete('page');
-        nextSearch.delete('page');
-
-        if (
-            prevSearch.toString() !== nextSearch.toString() ||
-            previousSort.current.sortAttribute.toString() !==
-                currentSort.sortAttribute.toString() ||
-            previousSort.current.sortDirection.toString() !==
-                currentSort.sortDirection.toString()
-        ) {
-            // The search term changed.
-            setCurrentPage(1, true);
-            // And update the ref.
-            previousSearch.current = search;
-            previousSort.current = currentSort;
-        }
-    }, [currentSort, search, setCurrentPage]);
-
     useEffect(() => {
         if (inputText) {
             getSortMethods({

package/lib/talons/SignIn/useSignIn.js

@@ -9,6 +9,7 @@ import { useAwaitQuery } from '../../hooks/useAwaitQuery';
 import { retrieveCartId } from '../../store/actions/cart';
 
 import DEFAULT_OPERATIONS from './signIn.gql';
+import { useEventingContext } from '../../context/eventing';
 
 export const useSignIn = props => {
     const {
@@ -39,6 +40,8 @@ export const useSignIn = props => {
         { getUserDetails, setToken }
     ] = useUserContext();
 
+    const [, { dispatch }] = useEventingContext();
+
     const [signIn, { error: signInError }] = useMutation(signInMutation, {
         fetchPolicy: 'no-cache'
     });
@@ -101,7 +104,20 @@ export const useSignIn = props => {
                 });
 
                 // Ensure old stores are updated with any new data.
-                getUserDetails({ fetchUserDetails });
+
+                await getUserDetails({ fetchUserDetails });
+
+                const { data } = await fetchUserDetails({
+                    fetchPolicy: 'cache-only'
+                });
+
+                dispatch({
+                    type: 'USER_SIGN_IN',
+                    payload: {
+                        ...data.customer
+                    }
+                });
+
                 getCartDetails({ fetchCartId, fetchCartDetails });
             } catch (error) {
                 if (process.env.NODE_ENV !== 'production') {
@@ -124,7 +140,8 @@ export const useSignIn = props => {
             getUserDetails,
             fetchUserDetails,
             getCartDetails,
-            fetchCartDetails
+            fetchCartDetails,
+            dispatch
         ]
     );
 

package/lib/talons/WishlistPage/useWishlistItem.js

@@ -4,6 +4,7 @@ import { useMutation } from '@apollo/client';
 import { useCartContext } from '@magento/peregrine/lib/context/cart';
 import mergeOperations from '../../util/shallowMerge';
 import defaultOperations from './wishlistItem.gql';
+import { useEventingContext } from '../../context/eventing';
 
 const SUPPORTED_PRODUCT_TYPES = ['SimpleProduct', 'ConfigurableProduct'];
 
@@ -29,6 +30,8 @@ const mergeSupportedProductTypes = (supportedProductTypes = []) => {
 export const useWishlistItem = props => {
     const { item, onOpenAddToCartDialog, wishlistId } = props;
 
+    const [, { dispatch }] = useEventingContext();
+
     const {
         configurable_options: selectedConfigurableOptions = [],
         id: itemId,
@@ -162,6 +165,36 @@ export const useWishlistItem = props => {
         ) {
             try {
                 await addWishlistItemToCart();
+
+                const selectedOptionsLabels =
+                    selectedConfigurableOptions?.length > 0
+                        ? selectedConfigurableOptions?.map(
+                              ({ option_label, value_label }) => ({
+                                  attribute: option_label,
+                                  value: value_label
+                              })
+                          )
+                        : null;
+
+                dispatch({
+                    type: 'CART_ADD_ITEM',
+                    payload: {
+                        cartId,
+                        sku: item.product.sku,
+                        name: item.product.name,
+                        priceTotal:
+                            item.product.price_range.maximum_price.final_price
+                                .value,
+                        currencyCode:
+                            item.product.price_range.maximum_price.final_price
+                                .currency,
+                        discountAmount:
+                            item.product.price_range.maximum_price.discount
+                                .amount_off,
+                        selectedOptions: selectedOptionsLabels,
+                        quantity: 1
+                    }
+                });
             } catch (error) {
                 console.error(error);
             }
@@ -170,10 +203,12 @@ export const useWishlistItem = props => {
         }
     }, [
         addWishlistItemToCart,
+        cartId,
         configurableOptions.length,
+        dispatch,
         item,
         onOpenAddToCartDialog,
-        selectedConfigurableOptions.length
+        selectedConfigurableOptions
     ]);
 
     const handleRemoveProductFromWishlist = useCallback(async () => {

package/lib/talons/WishlistPage/wishlistItemFragments.gql.js

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

package/lib/util/makeUrl.js

@@ -13,7 +13,7 @@ const storeSecureBaseMediaUrl = {};
 
 // Fallback to global secure_base_media_url set at build time
 AVAILABLE_STORE_VIEWS.forEach(store => {
-    storeSecureBaseMediaUrl[store.code] = store.secure_base_media_url;
+    storeSecureBaseMediaUrl[store.store_code] = store.secure_base_media_url;
 });
 
 let mediaBackend =

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/peregrine",
-  "version": "12.4.0",
+  "version": "12.5.0-alpha.1",
   "publishConfig": {
     "access": "public"
   },
@@ -17,10 +17,11 @@
   },
   "homepage": "https://github.com/magento/pwa-studio/tree/main/packages/peregrine#readme",
   "dependencies": {
-    "fast-glob": "~3.2.4"
+    "fast-glob": "~3.2.4",
+    "zen-observable-ts": "^1.2.0"
   },
   "devDependencies": {
-    "@apollo/client": "~3.4.0",
+    "@apollo/client": "~3.5.0",
     "@magento/eslint-config": "~1.5.0",
     "@testing-library/react-hooks": "~5.0.3",
     "intl": "~1.2.5",
@@ -36,7 +37,7 @@
     "wait-for-expect": "~1.2.0"
   },
   "peerDependencies": {
-    "@apollo/client": "~3.4.0",
+    "@apollo/client": "~3.5.0",
     "@babel/runtime": "~7.15.3",
     "informed": "~3.29.0",
     "react": "~17.0.1",