@magento/peregrine 12.6.0-beta.2 → 13.0.0-alpha.1

package/lib/hooks/useDelayedTransition.js

@@ -14,7 +14,7 @@ import { getRootComponent } from '../talons/MagentoRoute/helpers';
 
 const DELAY_MESSAGE_PREFIX = 'DELAY:';
 
-const useDelayedTransition = () => {
+export const useDelayedTransition = () => {
     const { pathname } = useLocation();
     const history = useHistory();
     const client = useApolloClient();
@@ -123,5 +123,3 @@ const useDelayedTransition = () => {
         };
     }, [client, resolveUrlQuery, setComponentMap, setPageLoading]);
 };
-
-export default useDelayedTransition;

package/lib/hooks/useGoogleReCaptcha/useGoogleReCaptcha.js

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useQuery } from '@apollo/client';
 
-import useScript from '@magento/peregrine/lib/hooks/useScript';
+import { useScript } from '@magento/peregrine/lib/hooks/useScript';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 
 import defaultOperations from './googleReCaptchaConfig.gql';

package/lib/hooks/useInternalLink.js

@@ -3,7 +3,7 @@ import { useAppContext } from '../context/app';
 
 export const SHIMMER_TYPE_SUFFIX = '_SHIMMER';
 
-export default rootType => {
+export const useInternalLink = rootType => {
     const [, appApi] = useAppContext();
     const { actions: appActions } = appApi;
     const { setNextRootComponent } = appActions;

package/lib/hooks/useIntersectionObserver.js

@@ -1,4 +1,4 @@
-export default () => {
+export const useIntersectionObserver = () => {
     if (typeof IntersectionObserver === 'undefined') {
         return;
     }

package/lib/hooks/useIsInViewport.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import useIntersectionObserver from '@magento/peregrine/lib/hooks/useIntersectionObserver';
+import { useIntersectionObserver } from '@magento/peregrine/lib/hooks/useIntersectionObserver';
 
 export const useIsInViewport = props => {
     const { elementRef, renderOnce = true } = props;

package/lib/hooks/useScript.js

@@ -8,7 +8,7 @@ import { useState, useEffect } from 'react';
  *
  * @returns {string} - returns one of the possible status: "idle", "loading", "ready" or "error"
  */
-export default src => {
+export const useScript = src => {
     // Keep track of script status ("idle", "loading", "ready", "error")
     const [status, setStatus] = useState(src ? 'loading' : 'idle');
     useEffect(

package/lib/talons/Breadcrumbs/useBreadcrumbs.js

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { useQuery } from '@apollo/client';
-import useInternalLink from '../../hooks/useInternalLink';
+import { useInternalLink } from '../../hooks/useInternalLink';
 
 import mergeOperations from '../../util/shallowMerge';
 

package/lib/talons/CartPage/PriceSummary/usePriceSummary.js

@@ -68,8 +68,17 @@ export const usePriceSummary = (props = {}) => {
         history.push('/checkout');
     }, [history]);
 
+    const handleEnterKeyPress = useCallback(() => {
+        event => {
+            if (event.key === 'Enter') {
+                handleProceedToCheckout();
+            }
+        };
+    }, [handleProceedToCheckout]);
+
     return {
         handleProceedToCheckout,
+        handleEnterKeyPress,
         hasError: !!error,
         hasItems: data && !!data.cart.items.length,
         isCheckout,
@@ -111,6 +120,7 @@ export const usePriceSummary = (props = {}) => {
  * @typedef {Object} PriceSummaryTalonProps
  *
  * @property {function} handleProceedToCheckout Callback function which navigates the browser to the checkout
+ * * @property {function} handleEnterKeyPress Callback function which navigates the browser to the checkout at the press of enter key
  * @property {boolean} hasError True if a GraphQL query returns an error. False otherwise.
  * @property {boolean} hasItems True if the cart has any items. False otherwise.
  * @property {boolean} isLoading True while the GraphQL query is still in flight. False otherwise.

package/lib/talons/CategoryList/useCategoryTile.js

@@ -1,7 +1,7 @@
 /* Deprecated in PWA-12.1.0*/
 
 import { useMemo } from 'react';
-import useInternalLink from '../../hooks/useInternalLink';
+import { useInternalLink } from '../../hooks/useInternalLink';
 
 const previewImageSize = 480;
 

package/lib/talons/CheckoutPage/OrderConfirmationPage/useCreateAccount.js

@@ -24,6 +24,7 @@ import { useEventingContext } from '../../../context/eventing';
  * @returns {{
  *   errors: Map,
  *   handleSubmit: function,
+ *   handleEnterKeyPress: function,
  *   isDisabled: boolean,
  *   initialValues: object,
  *   recaptchaWidgetProps: { containerElement: function, shouldRender: boolean }
@@ -161,6 +162,14 @@ export const useCreateAccount = props => {
         ]
     );
 
+    const handleEnterKeyPress = useCallback(() => {
+        event => {
+            if (event.key === 'Enter') {
+                handleSubmit();
+            }
+        };
+    }, [handleSubmit]);
+
     const sanitizedInitialValues = useMemo(() => {
         const { email, firstName, lastName, ...rest } = initialValues;
 
@@ -182,6 +191,7 @@ export const useCreateAccount = props => {
     return {
         errors,
         handleSubmit,
+        handleEnterKeyPress,
         isDisabled: isSubmitting || isGettingDetails || recaptchaLoading,
         initialValues: sanitizedInitialValues,
         recaptchaWidgetProps

package/lib/talons/CheckoutPage/useCheckoutPage.js

@@ -40,6 +40,7 @@ export const CHECKOUT_STEP = {
  *  customer: Object,
  *  error: ApolloError,
  *  handlePlaceOrder: Function,
+ *  handlePlaceOrderEnterKeyPress: Function,
  *  hasError: Boolean,
  *  isCartEmpty: Boolean,
  *  isGuestCheckout: Boolean,
@@ -60,6 +61,7 @@ export const CHECKOUT_STEP = {
  *  scrollShippingMethodIntoView: Function,
  *  resetReviewOrderButtonClicked: Function,
  *  handleReviewOrder: Function,
+ *  handleReviewOrderEnterKeyPress: Function,
  *  reviewOrderButtonClicked: Boolean,
  *  toggleAddressBookContent: Function,
  *  toggleSignInContent: Function,
@@ -182,6 +184,14 @@ export const useCheckoutPage = (props = {}) => {
         setReviewOrderButtonClicked(true);
     }, []);
 
+    const handleReviewOrderEnterKeyPress = useCallback(() => {
+        event => {
+            if (event.key === 'Enter') {
+                handleReviewOrder();
+            }
+        };
+    }, [handleReviewOrder]);
+
     const resetReviewOrderButtonClicked = useCallback(() => {
         setReviewOrderButtonClicked(false);
     }, []);
@@ -241,6 +251,14 @@ export const useCheckoutPage = (props = {}) => {
         setIsPlacingOrder(true);
     }, [cartId, getOrderDetails]);
 
+    const handlePlaceOrderEnterKeyPress = useCallback(() => {
+        event => {
+            if (event.key === 'Enter') {
+                handlePlaceOrder();
+            }
+        };
+    }, [handlePlaceOrder]);
+
     const [, { dispatch }] = useEventingContext();
 
     // Go back to checkout if shopper logs in
@@ -377,6 +395,7 @@ export const useCheckoutPage = (props = {}) => {
         error: checkoutError,
         guestSignInUsername,
         handlePlaceOrder,
+        handlePlaceOrderEnterKeyPress,
         hasError: !!checkoutError,
         isCartEmpty: !(checkoutData && checkoutData?.cart?.total_quantity),
         isGuestCheckout: !isSignedIn,
@@ -401,6 +420,7 @@ export const useCheckoutPage = (props = {}) => {
         scrollShippingMethodIntoView,
         resetReviewOrderButtonClicked,
         handleReviewOrder,
+        handleReviewOrderEnterKeyPress,
         reviewOrderButtonClicked,
         recaptchaWidgetProps,
         toggleAddressBookContent,

package/lib/talons/ContactPage/index.js

@@ -1,2 +1,2 @@
-export { default as useContactPage } from './useContactPage';
-export { default as useContactLink } from './useContactLink';
+export { useContactPage } from './useContactPage';
+export { useContactLink } from './useContactLink';

package/lib/talons/ContactPage/useContactLink.js

@@ -3,7 +3,7 @@ import { useQuery } from '@apollo/client';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 import DEFAULT_OPERATIONS from './contactUs.gql';
 
-export default (props = {}) => {
+export const useContactLink = (props = {}) => {
     const { getStoreConfigQuery } = mergeOperations(
         DEFAULT_OPERATIONS,
         props.operations

package/lib/talons/ContactPage/useContactPage.js

@@ -3,7 +3,7 @@ import { useMutation, useQuery } from '@apollo/client';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 import DEFAULT_OPERATIONS from './contactUs.gql';
 
-export default props => {
+export const useContactPage = props => {
     const { cmsBlockIdentifiers = [], operations } = props;
     const {
         contactMutation,

package/lib/talons/Gallery/useAddToCartButton.js

@@ -4,6 +4,7 @@ import { useHistory } from 'react-router-dom';
 
 import { useCartContext } from '../../context/cart';
 import { useEventingContext } from '../../context/eventing';
+import resourceUrl from '../../util/makeUrl';
 import operations from './addToCart.gql';
 
 /**
@@ -91,7 +92,11 @@ export const useAddToCartButton = props => {
 
                 setIsLoading(false);
             } else if (productType === 'ConfigurableProduct') {
-                history.push(`${item.url_key}${urlSuffix || ''}`);
+                const productLink = resourceUrl(
+                    `/${item.url_key}${urlSuffix || ''}`
+                );
+
+                history.push(productLink);
             } else {
                 console.warn('Unsupported product type unable to handle.');
             }

package/lib/talons/Gallery/useGalleryItem.js

@@ -1,7 +1,7 @@
 import { isSupportedProductType as isSupported } from '@magento/peregrine/lib/util/isSupportedProductType';
 import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
 import { useCallback, useEffect, useRef } from 'react';
-import useIntersectionObserver from '@magento/peregrine/lib/hooks/useIntersectionObserver';
+import { useIntersectionObserver } from '@magento/peregrine/lib/hooks/useIntersectionObserver';
 
 export const useGalleryItem = (props = {}) => {
     const [, { dispatch }] = useEventingContext();

package/lib/talons/Header/useAccountTrigger.js

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 
 import { useDropdown } from '@magento/peregrine/lib/hooks/useDropdown';
-
+import { useUserContext } from '@magento/peregrine/lib/context/user';
 /**
  * The useAccountTrigger talon complements the AccountTrigger component.
  *
@@ -25,11 +25,14 @@ export const useAccountTrigger = () => {
         setAccountMenuIsOpen(isOpen => !isOpen);
     }, [setAccountMenuIsOpen]);
 
+    const [{ isSignedIn: isUserSignedIn }] = useUserContext();
+
     return {
         accountMenuIsOpen,
         accountMenuRef,
         accountMenuTriggerRef,
         setAccountMenuIsOpen,
-        handleTriggerClick
+        handleTriggerClick,
+        isUserSignedIn
     };
 };

package/lib/talons/Link/useLink.js

@@ -1,11 +1,11 @@
 import { useEffect, useRef } from 'react';
 import { useLazyQuery } from '@apollo/client';
-import useIntersectionObserver from '../../hooks/useIntersectionObserver';
+import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
 import resourceUrl from '../../util/makeUrl';
 import mergeOperations from '../../util/shallowMerge';
 import DEFAULT_OPERATIONS from '../MagentoRoute/magentoRoute.gql';
 
-const useLink = (props, passedOperations = {}) => {
+export const useLink = (props, passedOperations = {}) => {
     const { innerRef: originalRef, to } = props;
     const shouldPrefetch = props.prefetchType || props.shouldPrefetch;
     const operations = shouldPrefetch
@@ -65,5 +65,3 @@ const useLink = (props, passedOperations = {}) => {
         ref: elementRef
     };
 };
-
-export default useLink;

package/lib/talons/MegaMenu/useMegaMenu.js

@@ -1,6 +1,6 @@
 import { useMemo, useState, useCallback, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
-import useInternalLink from '../../hooks/useInternalLink';
+import { useInternalLink } from '../../hooks/useInternalLink';
 
 import { useQuery } from '@apollo/client';
 import { useEventListener } from '../../hooks/useEventListener';

package/lib/talons/Navigation/useNavigation.js

@@ -6,7 +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 { useInternalLink } from '../../hooks/useInternalLink';
 
 import DEFAULT_OPERATIONS from './navigation.gql';
 

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

@@ -17,6 +17,7 @@ export const GET_PRODUCT_THUMBNAILS_BY_URL_KEY = gql`
             items {
                 uid
                 sku
+                name
                 thumbnail {
                     label
                     url
@@ -29,6 +30,7 @@ export const GET_PRODUCT_THUMBNAILS_BY_URL_KEY = gql`
                         product {
                             sku
                             uid
+                            name
                             thumbnail {
                                 label
                                 url

package/lib/talons/PageLoadingIndicator/usePageLoadingIndicator.js

@@ -3,7 +3,7 @@ import { useAppContext } from '../../context/app';
 
 const GROUP_LOADING_DELAY = 750;
 
-export default () => {
+export const usePageLoadingIndicator = () => {
     const [{ isPageLoading }] = useAppContext();
     const doneTimeoutRef = useRef();
     const [loadingState, setLoadingState] = useState('off');

package/lib/talons/SearchPage/useSearchPage.js

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useLazyQuery, useQuery } from '@apollo/client';
 import { useLocation } from 'react-router-dom';
-
+import { useStoreSwitcher } from '@magento/peregrine/lib/talons/Header/useStoreSwitcher';
 import mergeOperations from '../../util/shallowMerge';
 import { useAppContext } from '../../context/app';
 import { usePagination } from '../../hooks/usePagination';
@@ -22,7 +22,7 @@ import { useEventingContext } from '../../context/eventing';
 export const useSearchPage = (props = {}) => {
     const [, { dispatch }] = useEventingContext();
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
-
+    const { currentStoreName } = useStoreSwitcher();
     const {
         getFilterInputsQuery,
         getPageSize,
@@ -286,6 +286,7 @@ export const useSearchPage = (props = {}) => {
         pageControl,
         searchCategory,
         searchTerm: inputText,
-        sortProps
+        sortProps,
+        currentStoreName
     };
 };

package/lib/talons/SignIn/useSignIn.js

@@ -165,6 +165,14 @@ export const useSignIn = props => {
         showCreateAccount();
     }, [setDefaultUsername, showCreateAccount]);
 
+    const handleEnterKeyPress = useCallback(() => {
+        event => {
+            if (event.key === 'Enter') {
+                handleCreateAccount();
+            }
+        };
+    }, [handleCreateAccount]);
+
     const errors = useMemo(
         () =>
             new Map([
@@ -177,6 +185,7 @@ export const useSignIn = props => {
     return {
         errors,
         handleCreateAccount,
+        handleEnterKeyPress,
         handleForgotPassword,
         handleSubmit,
         isBusy: isGettingDetails || isSigningIn || recaptchaLoading,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/peregrine",
-  "version": "12.6.0-beta.2",
+  "version": "13.0.0-alpha.1",
   "publishConfig": {
     "access": "public"
   },