@magento/peregrine 13.0.1-beta.3 → 13.1.1-alpha.1

package/lib/talons/CartPage/GiftCards/useGiftCards.js

@@ -109,6 +109,14 @@ export const useGiftCards = props => {
         });
     }, [formApi, checkCardBalance]);
 
+    const checkGiftCardBalanceKeyPress = useCallback(() => {
+        event => {
+            if (event.key === 'Enter') {
+                checkGiftCardBalance();
+            }
+        };
+    }, [checkGiftCardBalance]);
+
     const removeGiftCard = useCallback(
         async giftCardCode => {
             setMostRecentAction(actions.REMOVE);
@@ -148,6 +156,13 @@ export const useGiftCards = props => {
         removeCardLoading,
         setIsCartUpdating
     ]);
+    const handleEnterKeyPress = useCallback(() => {
+        event => {
+            if (event.key === 'Enter') {
+                applyGiftCard();
+            }
+        };
+    }, [applyGiftCard]);
 
     const shouldDisplayCardBalance =
         mostRecentAction === actions.CHECK_BALANCE &&
@@ -163,12 +178,14 @@ export const useGiftCards = props => {
         checkBalanceData:
             balanceResult.data && balanceResult.data.giftCardAccount,
         checkGiftCardBalance,
+        checkGiftCardBalanceKeyPress,
         errorLoadingGiftCards: Boolean(appliedCardsResult.error),
         errorRemovingCard: Boolean(removeCardResult.error),
         giftCardsData:
             (appliedCardsResult.data &&
                 appliedCardsResult.data.cart.applied_gift_cards) ||
             [],
+        handleEnterKeyPress,
         isLoadingGiftCards: appliedCardsResult.loading,
         isApplyingCard: applyCardLoading,
         isCheckingBalance: balanceResult.loading,

package/lib/talons/CartPage/PriceAdjustments/CouponCode/useCouponCode.js

@@ -78,6 +78,13 @@ export const useCouponCode = props => {
         },
         [applyCoupon, cartId]
     );
+    const handleApplyCouponOnEnter = useCallback(() => {
+        event => {
+            if (event.key === 'Enter') {
+                handleApplyCoupon();
+            }
+        };
+    }, [handleApplyCoupon]);
 
     const handleRemoveCoupon = useCallback(
         async couponCode => {
@@ -95,6 +102,14 @@ export const useCouponCode = props => {
         [cartId, removeCoupon]
     );
 
+    const handleRemoveCouponOnEnter = useCallback(() => {
+        event => {
+            if (event.key === 'Enter') {
+                handleRemoveCoupon();
+            }
+        };
+    }, [handleRemoveCoupon]);
+
     useEffect(() => {
         if (applyCouponCalled || removeCouponCalled) {
             // If a coupon mutation is in flight, tell the cart.
@@ -124,7 +139,9 @@ export const useCouponCode = props => {
         data,
         errors,
         handleApplyCoupon,
+        handleApplyCouponOnEnter,
         handleRemoveCoupon,
+        handleRemoveCouponOnEnter,
         removingCoupon
     };
 };
@@ -167,6 +184,8 @@ export const useCouponCode = props => {
  * @property {String} errorMessage If GraphQL error occurs, this value is set.
  * @property {Object} fetchError The error data object returned by a GraphQL query.
  * @property {function} handleApplyCoupon Function to call for handling the application of a coupon code to a cart.
+ * @property {function} handleApplyCouponOnEnter Function to call for handling the application of a coupon code to a cart on enter key Press.
  * @property {function} handleRemoveCoupon Function to call for handling the removal of a coupon code from a cart
+ * @property {function} handleRemoveCouponOnEnter Function to call for handling the removal of a coupon code from a cart on enter key press.
  * @property {boolean} removingCoupon True if a coupon code is currently being removed. False otherwise.
  */

package/lib/talons/CartPage/PriceAdjustments/ShippingMethods/useShippingForm.js

@@ -137,6 +137,14 @@ export const useShippingForm = props => {
         [cartId, setShippingAddress]
     );
 
+    const handleOnSubmitKeyPress = useCallback(() => {
+        event => {
+            if (event.key === 'Enter') {
+                handleOnSubmit();
+            }
+        };
+    }, [handleOnSubmit]);
+
     const errors = useMemo(
         () =>
             new Map([
@@ -149,6 +157,7 @@ export const useShippingForm = props => {
         errors,
         handleOnSubmit,
         handleZipChange,
+        handleOnSubmitKeyPress,
         isSetShippingLoading
     };
 };
@@ -198,6 +207,7 @@ export const useShippingForm = props => {
  *
  * @property {Array<Error>} formErrors A list of form errors
  * @property {function} handleOnSubmit Callback function to handle form submissions
+ * @property {function} handleOnSubmitKeyPress Callback function to handle form submissions on enter key
  * @property {function} handleZipChange Callback function to handle a zip code change
  * @property {boolean} isSetShippingLoading True if the cart shipping information is being set. False otherwise.
  */

package/lib/talons/CartPage/PriceAdjustments/ShippingMethods/useShippingMethods.js

@@ -39,6 +39,13 @@ export const useShippingMethods = (props = {}) => {
 
     const [isShowingForm, setIsShowingForm] = useState(false);
     const showForm = useCallback(() => setIsShowingForm(true), []);
+    const showFormOnEnter = useCallback(() => {
+        event => {
+            if (event.key === 'Enter') {
+                showForm();
+            }
+        };
+    }, [showForm]);
 
     useEffect(() => {
         if (data && data.cart.shipping_addresses.length) {
@@ -92,7 +99,8 @@ export const useShippingMethods = (props = {}) => {
         selectedShippingFields,
         selectedShippingMethod,
         shippingMethods: formattedShippingMethods,
-        showForm
+        showForm,
+        showFormOnEnter
     };
 };
 
@@ -123,4 +131,5 @@ export const useShippingMethods = (props = {}) => {
  * @property {String} selectedShippingMethod A serialized string of <inlineCode>${carrier-code}\|${method-code}</inlineCode>, eg. <inlineCode>usps\|priority</inlineCode>.
  * @property {Array<Object>} shippingMethods A list of available shipping methods based on the primary shipping address
  * @property {function} showForm A function that sets the `isShowingForm` value to true.
+ * @property {function} showFormOnEnter A function that sets the `isShowingForm` value to true.
  */

package/lib/talons/CheckoutPage/ItemsReview/__fixtures__/cartItems.js

@@ -10,7 +10,7 @@ export default {
                     name: 'Jillian Top',
                     thumbnail: {
                         url:
-                            'https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/t/vt12-kh_main_2.jpg',
+                            'https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/t/vt12-kh_main_2.jpg',
                         __typename: 'ProductImage'
                     },
                     __typename: 'ConfigurableProduct'
@@ -41,7 +41,7 @@ export default {
                     name: 'Juno Sweater',
                     thumbnail: {
                         url:
-                            'https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg',
+                            'https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg',
                         __typename: 'ProductImage'
                     },
                     __typename: 'ConfigurableProduct'
@@ -72,7 +72,7 @@ export default {
                     name: 'Angelina Tank Dress',
                     thumbnail: {
                         url:
-                            'https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/d/vd01-ll_main_2.jpg',
+                            'https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/d/vd01-ll_main_2.jpg',
                         __typename: 'ProductImage'
                     },
                     __typename: 'ConfigurableProduct'

package/lib/talons/CheckoutPage/PaymentInformation/usePaymentMethods.js

@@ -46,16 +46,23 @@ export const usePaymentMethods = props => {
         element => {
             const value = element.target.value;
 
+            const paymentMethodData =
+                value == 'braintree'
+                    ? {
+                          code: value,
+                          braintree: {
+                              payment_method_nonce: value,
+                              is_active_payment_token_enabler: false
+                          }
+                      }
+                    : {
+                          code: value
+                      };
+
             setPaymentMethod({
                 variables: {
                     cartId,
-                    paymentMethod: {
-                        code: value,
-                        braintree: {
-                            payment_method_nonce: value,
-                            is_active_payment_token_enabler: false
-                        }
-                    }
+                    paymentMethod: paymentMethodData
                 }
             });
         },

package/lib/talons/FilterModal/helpers.js

@@ -143,7 +143,7 @@ export const stripHtml = html => html.replace(/(<([^>]+)>)/gi, '');
 
 /** GetFilterInput helpers below. */
 const getValueFromFilterString = keyValueString =>
-    keyValueString.split(DELIMITER)[1];
+    keyValueString.split(DELIMITER).pop();
 
 /**
  * Converts a set of values to a range filter

package/lib/talons/Link/useLink.js

@@ -8,9 +8,7 @@ import DEFAULT_OPERATIONS from '../MagentoRoute/magentoRoute.gql';
 export const useLink = (props, passedOperations = {}) => {
     const { innerRef: originalRef, to } = props;
     const shouldPrefetch = props.prefetchType || props.shouldPrefetch;
-    const operations = shouldPrefetch
-        ? mergeOperations(DEFAULT_OPERATIONS, passedOperations)
-        : {};
+    const operations = mergeOperations(DEFAULT_OPERATIONS, passedOperations);
 
     const intersectionObserver = useIntersectionObserver();
     const { resolveUrlQuery } = operations;

package/lib/talons/MagentoRoute/useMagentoRoute.js

@@ -48,6 +48,16 @@ export const useMagentoRoute = (props = {}) => {
     const { data, error, loading } = queryResult;
     const { route } = data || {};
 
+    // redirect to external url
+    useEffect(() => {
+        if (route) {
+            const external_URL = route.relative_url;
+            if (external_URL && external_URL.startsWith('http')) {
+                window.location.replace(external_URL);
+            }
+        }
+    }, [route]);
+
     useEffect(() => {
         if (initialized.current || !getInlinedPageData()) {
             runQuery({

package/lib/talons/SignIn/useSignIn.js

@@ -156,6 +156,14 @@ export const useSignIn = props => {
         showForgotPassword();
     }, [setDefaultUsername, showForgotPassword]);
 
+    const forgotPasswordHandleEnterKeyPress = useCallback(() => {
+        event => {
+            if (event.key === 'Enter') {
+                handleForgotPassword();
+            }
+        };
+    }, [handleForgotPassword]);
+
     const handleCreateAccount = useCallback(() => {
         const { current: formApi } = formApiRef;
 
@@ -197,6 +205,7 @@ export const useSignIn = props => {
         handleEnterKeyPress,
         signinHandleEnterKeyPress,
         handleForgotPassword,
+        forgotPasswordHandleEnterKeyPress,
         handleSubmit,
         isBusy: isGettingDetails || isSigningIn || recaptchaLoading,
         setFormApi,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/peregrine",
-  "version": "13.0.1-beta.3",
+  "version": "13.1.1-alpha.1",
   "publishConfig": {
     "access": "public"
   },