@magento/peregrine 11.0.0-beta.1 → 12.0.0-alpha.3

package/lib/talons/MiniCart/useMiniCart.js

@@ -33,7 +33,7 @@ export const useMiniCart = props => {
     const {
         removeItemMutation,
         miniCartQuery,
-        getConfigurableThumbnailSource
+        getStoreConfigQuery
     } = operations;
 
     const [{ cartId }] = useCartContext();
@@ -49,19 +49,21 @@ export const useMiniCart = props => {
         }
     );
 
-    const { data: configurableThumbnailSourceData } = useQuery(
-        getConfigurableThumbnailSource,
-        {
-            fetchPolicy: 'cache-and-network'
-        }
-    );
+    const { data: storeConfigData } = useQuery(getStoreConfigQuery, {
+        fetchPolicy: 'cache-and-network'
+    });
 
     const configurableThumbnailSource = useMemo(() => {
-        if (configurableThumbnailSourceData) {
-            return configurableThumbnailSourceData.storeConfig
-                .configurable_thumbnail_source;
+        if (storeConfigData) {
+            return storeConfigData.storeConfig.configurable_thumbnail_source;
+        }
+    }, [storeConfigData]);
+
+    const storeUrlSuffix = useMemo(() => {
+        if (storeConfigData) {
+            return storeConfigData.storeConfig.product_url_suffix;
         }
-    }, [configurableThumbnailSourceData]);
+    }, [storeConfigData]);
 
     const [
         removeItem,
@@ -135,6 +137,7 @@ export const useMiniCart = props => {
         productList,
         subTotal,
         totalQuantity,
-        configurableThumbnailSource
+        configurableThumbnailSource,
+        storeUrlSuffix
     };
 };

package/lib/talons/Navigation/useNavigation.js

@@ -6,6 +6,7 @@ import { useAppContext } from '../../context/app';
 import { useCatalogContext } from '../../context/catalog';
 import { useUserContext } from '../../context/user';
 import { useAwaitQuery } from '../../hooks/useAwaitQuery';
+import useInternalLink from '../../hooks/useInternalLink';
 
 import DEFAULT_OPERATIONS from './navigation.gql';
 
@@ -76,9 +77,13 @@ export const useNavigation = (props = {}) => {
         }
     }, [category, closeDrawer, isTopLevel, view]);
 
+    const { setShimmerType } = useInternalLink('category');
+
     const handleClose = useCallback(() => {
         closeDrawer();
-    }, [closeDrawer]);
+        // Sets next root component to show proper loading effect
+        setShimmerType();
+    }, [closeDrawer, setShimmerType]);
 
     // create callbacks for local state
     const showCreateAccount = useCallback(() => {

package/lib/talons/OrderHistoryPage/orderRow.gql.js

@@ -20,7 +20,6 @@ export const GET_PRODUCT_THUMBNAILS_BY_URL_KEY = gql`
                     url
                 }
                 url_key
-                url_suffix
                 ... on ConfigurableProduct {
                     variants {
                         product {

package/lib/talons/OrderHistoryPage/useOrderHistoryPage.js

@@ -1,13 +1,10 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useHistory } from 'react-router-dom';
 import { useQuery } from '@apollo/client';
 
+import { useAppContext } from '@magento/peregrine/lib/context/app';
+import { deriveErrorMessage } from '@magento/peregrine/lib/util/deriveErrorMessage';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 
-import { useAppContext } from '../../context/app';
-import { useUserContext } from '../../context/user';
-import { deriveErrorMessage } from '../../util/deriveErrorMessage';
-
 import DEFAULT_OPERATIONS from './orderHistoryPage.gql';
 
 const PAGE_SIZE = 10;
@@ -22,8 +19,6 @@ export const useOrderHistoryPage = (props = {}) => {
             actions: { setPageLoading }
         }
     ] = useAppContext();
-    const history = useHistory();
-    const [{ isSignedIn }] = useUserContext();
 
     const [pageSize, setPageSize] = useState(PAGE_SIZE);
     const [searchText, setSearchText] = useState('');
@@ -88,13 +83,6 @@ export const useOrderHistoryPage = (props = {}) => {
         return null;
     }, [orderData]);
 
-    // If the user is no longer signed in, redirect to the home page.
-    useEffect(() => {
-        if (!isSignedIn) {
-            history.push('/');
-        }
-    }, [history, isSignedIn]);
-
     // Update the page indicator if the GraphQL query is in flight.
     useEffect(() => {
         setPageLoading(isBackgroundLoading);

package/lib/talons/PageLoadingIndicator/usePageLoadingIndicator.js

@@ -0,0 +1,52 @@
+import { useEffect, useRef, useState } from 'react';
+import { useAppContext } from '../../context/app';
+
+const GROUP_LOADING_DELAY = 750;
+
+export default () => {
+    const [{ isPageLoading }] = useAppContext();
+    const doneTimeoutRef = useRef();
+    const [loadingState, setLoadingState] = useState('off');
+
+    useEffect(() => {
+        if (isPageLoading) {
+            setLoadingState('loading');
+        } else if (
+            typeof clearTimeout !== 'undefined' &&
+            typeof setTimeout !== 'undefined'
+        ) {
+            setLoadingState('done');
+
+            if (doneTimeoutRef && doneTimeoutRef.current !== null) {
+                clearTimeout(doneTimeoutRef.current);
+            }
+
+            doneTimeoutRef.current = setTimeout(() => {
+                setLoadingState(currentLoadingState => {
+                    if (currentLoadingState === 'loading') {
+                        return 'loading';
+                    }
+
+                    return 'off';
+                });
+            }, GROUP_LOADING_DELAY);
+        } else {
+            setLoadingState('off');
+        }
+
+        return () => {
+            if (
+                typeof clearTimeout !== 'undefined' &&
+                doneTimeoutRef &&
+                doneTimeoutRef.current !== null
+            ) {
+                clearTimeout(doneTimeoutRef.current);
+            }
+        };
+    }, [isPageLoading, doneTimeoutRef]);
+
+    return {
+        isPageLoading,
+        loadingState
+    };
+};

package/lib/talons/Postcode/usePostcode.js

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react';
-import { useFieldApi, useFieldState } from 'informed';
+import { useFieldApi } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
 
 /**
  * The usePostcode talon handles logic for resetting the postcode field value when the country changes.

package/lib/talons/ProductFullDetail/useProductFullDetail.js

@@ -7,12 +7,14 @@ import { useUserContext } from '@magento/peregrine/lib/context/user';
 import { appendOptionsToPayload } from '@magento/peregrine/lib/util/appendOptionsToPayload';
 import { findMatchingVariant } from '@magento/peregrine/lib/util/findMatchingProductVariant';
 import { isProductConfigurable } from '@magento/peregrine/lib/util/isProductConfigurable';
+import { isSupportedProductType as isSupported } from '@magento/peregrine/lib/util/isSupportedProductType';
 import { deriveErrorMessage } from '../../util/deriveErrorMessage';
 import mergeOperations from '../../util/shallowMerge';
 import defaultOperations from './productFullDetail.gql';
 
 const INITIAL_OPTION_CODES = new Map();
 const INITIAL_OPTION_SELECTIONS = new Map();
+const OUT_OF_STOCK_CODE = 'OUT_OF_STOCK';
 
 const deriveOptionCodesFromProduct = product => {
     // If this is a simple product it has no option codes.
@@ -63,6 +65,25 @@ const getIsMissingOptions = (product, optionSelections) => {
     return numProductSelections < numProductOptions;
 };
 
+const getIsOutOfStock = (product, optionCodes, optionSelections) => {
+    const { stock_status, variants } = product;
+    const isConfigurable = isProductConfigurable(product);
+    const optionsSelected =
+        Array.from(optionSelections.values()).filter(value => !!value).length >
+        0;
+
+    if (isConfigurable && optionsSelected) {
+        const item = findMatchingVariant({
+            optionCodes,
+            optionSelections,
+            variants
+        });
+
+        return item.product.stock_status === OUT_OF_STOCK_CODE;
+    }
+    return stock_status === OUT_OF_STOCK_CODE;
+};
+
 const getMediaGalleryEntries = (product, optionCodes, optionSelections) => {
     let value = [];
 
@@ -149,8 +170,6 @@ const getConfigPrice = (product, optionCodes, optionSelections) => {
     return value;
 };
 
-const SUPPORTED_PRODUCT_TYPES = ['SimpleProduct', 'ConfigurableProduct'];
-
 /**
  * @param {GraphQLDocument} props.addConfigurableProductToCartMutation - configurable product mutation
  * @param {GraphQLDocument} props.addSimpleProductToCartMutation - configurable product mutation
@@ -185,9 +204,7 @@ export const useProductFullDetail = props => {
 
     const productType = product.__typename;
 
-    const isSupportedProductType = SUPPORTED_PRODUCT_TYPES.includes(
-        productType
-    );
+    const isSupportedProductType = isSupported(productType);
 
     const [{ cartId }] = useCartContext();
     const [{ isSignedIn }] = useUserContext();
@@ -248,6 +265,12 @@ export const useProductFullDetail = props => {
         () => getIsMissingOptions(product, optionSelections),
         [product, optionSelections]
     );
+
+    const isOutOfStock = useMemo(
+        () => getIsOutOfStock(product, optionCodes, optionSelections),
+        [product, optionCodes, optionSelections]
+    );
+
     const mediaGalleryEntries = useMemo(
         () => getMediaGalleryEntries(product, optionCodes, optionSelections),
         [product, optionCodes, optionSelections]
@@ -445,7 +468,9 @@ export const useProductFullDetail = props => {
         errorMessage: derivedErrorMessage,
         handleAddToCart,
         handleSelectionChange,
+        isOutOfStock,
         isAddToCartDisabled:
+            isOutOfStock ||
             isMissingOptions ||
             isAddConfigurableLoading ||
             isAddSimpleLoading ||

package/lib/talons/Region/useRegion.js

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { useQuery } from '@apollo/client';
-import { useFieldApi, useFieldState } from 'informed';
+import { useFieldApi } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
 
 /**
  * The useRegion talon handles logic for:
@@ -33,24 +34,25 @@ export const useRegion = props => {
     const regionInputFieldApi = useFieldApi(fieldInput);
     const regionSelectFieldApi = useFieldApi(fieldSelect);
 
+    const { data, loading } = useQuery(getRegionsQuery, {
+        variables: { countryCode: country },
+        skip: !country
+    });
+
     // Reset region value when country changes. Because of how Informed sets
     // initialValues, we want to skip the first state change of the value being
     // initialized.
     useEffect(() => {
-        if (country) {
+        if (country && !loading) {
             if (hasInitialized.current) {
-                regionInputFieldApi.exists() && regionInputFieldApi.reset();
-                regionSelectFieldApi.exists() && regionSelectFieldApi.reset();
+                regionInputFieldApi.exists() && regionInputFieldApi.setValue();
+                regionSelectFieldApi.exists() &&
+                    regionSelectFieldApi.setValue();
             } else {
                 hasInitialized.current = true;
             }
         }
-    }, [country, regionInputFieldApi, regionSelectFieldApi]);
-
-    const { data, loading } = useQuery(getRegionsQuery, {
-        variables: { countryCode: country },
-        skip: !country
-    });
+    }, [country, regionInputFieldApi, regionSelectFieldApi, loading]);
 
     let formattedRegionsData = [{ label: 'Loading Regions...', value: '' }];
     if (data) {

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

@@ -14,9 +14,9 @@ export const ProductsFragment = gql`
         items {
             id
             name
-            price {
-                regularPrice {
-                    amount {
+            price_range {
+                maximum_price {
+                    regular_price {
                         currency
                         value
                     }
@@ -26,8 +26,9 @@ export const ProductsFragment = gql`
             small_image {
                 url
             }
+            stock_status
+            type_id
             url_key
-            url_suffix
         }
         page_info {
             total_pages

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

@@ -14,7 +14,10 @@ export const ProductDetailsFragment = gql`
         }
         id
         media_gallery_entries {
+            # id is deprecated and unused in our code, but lint rules require we
+            # request it if available
             id
+            uid
             label
             position
             disabled
@@ -34,6 +37,7 @@ export const ProductDetailsFragment = gql`
         small_image {
             url
         }
+        stock_status
         url_key
         ... on ConfigurableProduct {
             configurable_options {
@@ -64,7 +68,10 @@ export const ProductDetailsFragment = gql`
                 product {
                     id
                     media_gallery_entries {
+                        # id is deprecated and unused in our code, but lint rules require we
+                        # request it if available
                         id
+                        uid
                         disabled
                         file
                         label

package/lib/talons/SavedPaymentsPage/useSavedPaymentsPage.js

@@ -1,12 +1,10 @@
 import { useEffect } from 'react';
-import { useHistory } from 'react-router-dom';
-
 import { useQuery } from '@apollo/client';
 
 import { useAppContext } from '@magento/peregrine/lib/context/app';
 import { useUserContext } from '@magento/peregrine/lib/context/user';
-
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+
 import defaultOperations from './savedPaymentsPage.gql';
 
 export const normalizeTokens = responseData => {
@@ -46,7 +44,6 @@ export const useSavedPaymentsPage = (props = {}) => {
             actions: { setPageLoading }
         }
     ] = useAppContext();
-    const history = useHistory();
     const [{ isSignedIn }] = useUserContext();
 
     const { data: savedPaymentsData, loading } = useQuery(
@@ -58,13 +55,6 @@ export const useSavedPaymentsPage = (props = {}) => {
         }
     );
 
-    // If the user is no longer signed in, redirect to the home page.
-    useEffect(() => {
-        if (!isSignedIn) {
-            history.push('/');
-        }
-    }, [history, isSignedIn]);
-
     // Update the page indicator if the GraphQL query is in flight.
     useEffect(() => {
         setPageLoading(loading);

package/lib/talons/SearchBar/useAutocomplete.js

@@ -1,5 +1,5 @@
 import { useEffect, useMemo } from 'react';
-import { useFieldState } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
 import { useLazyQuery } from '@apollo/client';
 import debounce from 'lodash.debounce';
 

package/lib/talons/SearchBar/useSearchField.js

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef } from 'react';
-import { useFieldState, useFormApi } from 'informed';
+import { useFormApi } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
 
 import { getSearchParam } from '@magento/peregrine/lib/hooks/useSearchParam';
 

package/lib/talons/SearchBar/useSuggestedCategory.js

@@ -1,7 +1,8 @@
 import { useCallback } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
 import { DELIMITER } from '../FilterModal/helpers';
+
 // TODO: derive from store config when available
 const setSearchParams = (existing, options) => {
     const params = new URLSearchParams(existing);
@@ -23,13 +24,10 @@ const setSearchParams = (existing, options) => {
  */
 export const useSuggestedCategory = props => {
     const { onNavigate, ...restProps } = props;
-    const { createHref } = useHistory();
     const { search } = useLocation();
+
     const nextSearchParams = setSearchParams(search, restProps);
-    const destination = createHref({
-        pathname: '/search.html',
-        search: nextSearchParams
-    });
+    const destination = `/search.html?${nextSearchParams}`;
 
     const handleClick = useCallback(() => {
         if (typeof onNavigate === 'function') {

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

@@ -43,20 +43,21 @@ export const PRODUCT_SEARCH = gql`
             items {
                 id
                 name
-                small_image {
-                    url
-                }
-                url_key
-                url_suffix
-                price {
-                    regularPrice {
-                        amount {
-                            value
+                price_range {
+                    maximum_price {
+                        regular_price {
                             currency
+                            value
                         }
                     }
                 }
                 sku
+                small_image {
+                    url
+                }
+                stock_status
+                type_id
+                url_key
             }
             page_info {
                 total_pages

package/lib/talons/SignIn/signIn.gql.js

@@ -1,4 +1,5 @@
 import { gql } from '@apollo/client';
+import { CheckoutPageFragment } from '../CheckoutPage/checkoutPageFragments.gql';
 
 export const GET_CUSTOMER = gql`
     query GetCustomerAfterSignIn {
@@ -39,8 +40,10 @@ export const MERGE_CARTS = gql`
             items {
                 id
             }
+            ...CheckoutPageFragment
         }
     }
+    ${CheckoutPageFragment}
 `;
 
 export default {

package/lib/talons/SignInPage/useSignInPage.js

@@ -0,0 +1,63 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { useUserContext } from '@magento/peregrine/lib/context/user';
+
+/**
+ * @typedef {function} useSignInPage
+ *
+ * @param {String} props.createAccountPageUrl - Create Account Password Page url
+ * @param {String} props.forgotPasswordPageUrl - Forgot Password Page url
+ * @param {String} props.signedInRedirectUrl - Url to push when user is signed in
+ *
+ * @returns {{
+ *   signInProps: object
+ * }}
+ */
+export const useSignInPage = props => {
+    const {
+        createAccountPageUrl,
+        forgotPasswordPageUrl,
+        signedInRedirectUrl
+    } = props;
+    const history = useHistory();
+    const [{ isSignedIn }] = useUserContext();
+
+    // Keep location state in memory when pushing history and redirect to
+    // the `from` url instead when signing in
+    const historyState = useMemo(() => {
+        return history && history.location.state ? history.location.state : {};
+    }, [history]);
+    const fromRedirectUrl = historyState.from || null;
+
+    // Redirect if user is signed in
+    useEffect(() => {
+        if (isSignedIn) {
+            if (fromRedirectUrl || signedInRedirectUrl) {
+                history.push(fromRedirectUrl || signedInRedirectUrl);
+            }
+        }
+    }, [history, isSignedIn, fromRedirectUrl, signedInRedirectUrl]);
+
+    const handleShowCreateAccount = useCallback(() => {
+        if (createAccountPageUrl) {
+            history.push(createAccountPageUrl, historyState);
+        }
+    }, [createAccountPageUrl, history, historyState]);
+
+    const handleShowForgotPassword = useCallback(() => {
+        if (forgotPasswordPageUrl) {
+            history.push(forgotPasswordPageUrl, historyState);
+        }
+    }, [forgotPasswordPageUrl, history, historyState]);
+
+    const signInProps = {
+        classes: { modal_active: undefined },
+        showCreateAccount: handleShowCreateAccount,
+        showForgotPassword: handleShowForgotPassword
+    };
+
+    return {
+        signInProps
+    };
+};

package/lib/talons/Wishlist/AddToListButton/helpers/useSingleWishlist.js

@@ -132,8 +132,8 @@ export const useSingleWishlist = props => {
                 id: 'wishlistButton.addText',
                 defaultMessage: 'Add to Favorites'
             }),
-            disabled: isSelected,
-            onClick: handleClick,
+            isDisabled: isSelected,
+            onPress: handleClick,
             type: 'button'
         }),
         [formatMessage, handleClick, isSelected]

package/lib/talons/Wishlist/AddToListButton/useAddToListButton.ee.js

@@ -23,7 +23,8 @@ export const useAddToListButton = props => {
         if (storeConfig.enable_multiple_wishlists === '1' && isSignedIn) {
             return {
                 ...singleButtonProps,
-                onClick: () => {
+                'aria-haspopup': 'dialog',
+                onPress: () => {
                     setIsModalOpen(true);
 
                     if (beforeAdd) {

package/lib/talons/WishlistPage/useActionMenu.js

@@ -1,6 +1,7 @@
-import { useCallback, useState } from 'react';
-import { useMutation } from '@apollo/client';
+import { useCallback, useState, useMemo } from 'react';
+import { useMutation, useQuery } from '@apollo/client';
 import DEFAULT_OPERATIONS from './wishlist.gql';
+import getWishlistConfigQuery from './wishlistConfig.gql';
 import mergeOperations from '../../util/shallowMerge';
 
 const dialogs = {
@@ -20,15 +21,21 @@ const dialogs = {
  */
 export const useActionMenu = (props = {}) => {
     const { id } = props;
-    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const operations = mergeOperations(
+        DEFAULT_OPERATIONS,
+        getWishlistConfigQuery,
+        props.operations
+    );
     const { getCustomerWishlistQuery, updateWishlistMutation } = operations;
     const [currentDialog, setCurrentDialog] = useState(dialogs.NONE);
+    const [displayError, setDisplayError] = useState(false);
 
     const handleActionMenuClick = useCallback(() => {
         setCurrentDialog(dialogs.LIST_ACTIONS);
     }, []);
 
     const handleHideDialogs = useCallback(() => {
+        setDisplayError(false);
         setCurrentDialog(dialogs.NONE);
     }, []);
 
@@ -44,6 +51,26 @@ export const useActionMenu = (props = {}) => {
         { error: updateWishlistErrors, loading: isEditInProgress }
     ] = useMutation(updateWishlistMutation);
 
+    const { data: storeConfigData } = useQuery(
+        operations.getWishlistConfigQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first'
+        }
+    );
+
+    const shouldRender = useMemo(() => {
+        let multipleWishlistEnabled = false;
+        try {
+            if (storeConfigData.storeConfig.enable_multiple_wishlists === '1') {
+                multipleWishlistEnabled = true;
+            }
+        } catch (e) {
+            return false;
+        }
+        return storeConfigData && multipleWishlistEnabled;
+    }, [storeConfigData]);
+
     const handleEditWishlist = useCallback(
         async data => {
             // add private visibility because is required field for ee
@@ -63,6 +90,7 @@ export const useActionMenu = (props = {}) => {
                 });
                 setCurrentDialog(dialogs.NONE);
             } catch (error) {
+                setDisplayError(true);
                 if (process.env.NODE_ENV !== 'production') {
                     console.error(error);
                 }
@@ -71,15 +99,21 @@ export const useActionMenu = (props = {}) => {
         [getCustomerWishlistQuery, id, updateWishlist]
     );
 
+    const errors = useMemo(
+        () => (displayError ? [updateWishlistErrors] : [false]),
+        [updateWishlistErrors, displayError]
+    );
+
     return {
         editFavoritesListIsOpen,
-        formErrors: [updateWishlistErrors],
+        formErrors: errors,
         handleActionMenuClick,
         handleEditWishlist,
         handleHideDialogs,
         handleShowEditFavorites,
         isEditInProgress,
-        listActionsIsOpen
+        listActionsIsOpen,
+        shouldRender
     };
 };