@magento/peregrine 12.2.0-alpha.3 → 12.3.0-alpha.1

package/lib/talons/CmsDynamicBlock/useCmsDynamicBlock.js

@@ -0,0 +1,211 @@
+import { useEffect, useCallback } from 'react';
+import { useQuery } from '@apollo/client';
+import { useLocation } from 'react-router-dom';
+
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+
+import DEFAULT_OPERATIONS from './cmsDynamicBlock.gql';
+
+export const flatten = cartData => {
+    const cartItems = cartData?.cart?.items || [];
+    const totalWeight = cartItems.reduce((prevItem, currentItem) => {
+        const { product, quantity, configured_variant } = currentItem;
+
+        const currentWeight = configured_variant
+            ? configured_variant.weight
+            : product.weight || 0;
+
+        return prevItem + currentWeight * quantity;
+    }, 0);
+    const shippingAddresses = cartData?.cart?.shipping_addresses || [];
+    const subtotalExcludingTax =
+        cartData?.cart?.prices?.subtotal_excluding_tax?.value || 0;
+    const subtotalIncludingTax =
+        cartData?.cart?.prices?.subtotal_including_tax?.value || 0;
+    const selectedPaymentMethod =
+        cartData?.cart?.selected_payment_method?.code || null;
+    const shippingCountryCode = shippingAddresses[0]?.country?.code || null;
+    const shippingPostCode = shippingAddresses[0]?.postcode || null;
+    const shippingRegionCode = shippingAddresses[0]?.region?.code || null;
+    const shippingRegionId = shippingAddresses[0]?.region?.region_id || null;
+    const selectedShippingMethod =
+        shippingAddresses[0]?.selected_shipping_method?.method_code || null;
+    const totalQuantity = cartData?.cart?.total_quantity || 0;
+
+    return JSON.stringify([
+        totalWeight,
+        subtotalExcludingTax,
+        subtotalIncludingTax,
+        selectedPaymentMethod,
+        shippingCountryCode,
+        shippingPostCode,
+        shippingRegionCode,
+        shippingRegionId,
+        selectedShippingMethod,
+        totalQuantity
+    ]);
+};
+
+/**
+ * This talon contains the logic for a cms dynamic block component.
+ * It performs effects and returns a data object containing values for rendering the component.
+ *
+ * This talon performs the following effects:
+ *
+ * - Get cms dynamic block based on type, locations and given uids
+ * - Get sales rules data from cart to refetch dynamic block query when conditions change
+ * - Update the {@link CmsDynamicBlockTalonProps} values with the data returned by the query
+ *
+ * @function
+ *
+ * @param {Array} props.locations - array of locations of cms dynamic blocks
+ * @param {(String|String[])} props.uids - single or multiple uids of cms dynamic blocks
+ * @param {String} props.type - type of cms dynamic blocks
+ * @param {CmsDynamicBlockOperations} [props.operations]
+ *
+ * @returns {CmsDynamicBlockTalonProps}
+ *
+ * @example <caption>Importing into your project</caption>
+ * import { useCmsDynamicBlock } from '@magento/peregrine/lib/talons/CmsDynamicBlock/useCmsDynamicBlock';
+ */
+export const useCmsDynamicBlock = props => {
+    const { locations, uids, type } = props;
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const {
+        getCmsDynamicBlocksQuery,
+        getSalesRulesDataQuery,
+        getStoreConfigData,
+        getProductDetailQuery
+    } = operations;
+
+    const [{ cartId }] = useCartContext();
+    const { pathname } = useLocation();
+
+    // Get Product Data from cache
+    const { data: storeConfigData, loading: storeConfigLoading } = useQuery(
+        getStoreConfigData
+    );
+    const slug = pathname.split('/').pop();
+    const productUrlSuffix = storeConfigData?.storeConfig?.product_url_suffix;
+    const urlKey = productUrlSuffix ? slug.replace(productUrlSuffix, '') : slug;
+    const { data: productData, loading: productDataLoading } = useQuery(
+        getProductDetailQuery,
+        {
+            skip: !storeConfigData,
+            variables: {
+                urlKey
+            }
+        }
+    );
+
+    // @TODO: Update with uid when done in Product Root Component
+    const products =
+        productData?.products?.items && productData.products.items.length > 0
+            ? productData.products.items
+            : [];
+    const productUid = products.find(item => item.url_key === urlKey)?.uid;
+
+    const { client, loading, error, data, refetch } = useQuery(
+        getCmsDynamicBlocksQuery,
+        {
+            variables: {
+                cartId,
+                type,
+                locations,
+                uids,
+                ...(productUid ? { productId: productUid } : {})
+            },
+            skip: !cartId
+        }
+    );
+
+    const { loading: cartLoading, data: cartData } = useQuery(
+        getSalesRulesDataQuery,
+        {
+            variables: { cartId },
+            skip: !cartId
+        }
+    );
+
+    const currentSalesRulesData = flatten(cartData);
+    const isLoading =
+        loading || cartLoading || storeConfigLoading || productDataLoading;
+    const cachedSalesRulesData = data?.dynamicBlocks?.salesRulesData;
+
+    const updateSalesRulesData = useCallback(
+        (currentData, currentSalesRulesData) => {
+            client.writeQuery({
+                query: getCmsDynamicBlocksQuery,
+                data: {
+                    dynamicBlocks: {
+                        ...currentData,
+                        salesRulesData: currentSalesRulesData
+                    }
+                },
+                variables: {
+                    cartId,
+                    type,
+                    locations,
+                    uids,
+                    ...(productUid ? { productId: productUid } : {})
+                },
+                skip: !cartId
+            });
+        },
+        [
+            cartId,
+            client,
+            getCmsDynamicBlocksQuery,
+            locations,
+            productUid,
+            type,
+            uids
+        ]
+    );
+
+    useEffect(() => {
+        if (data && cachedSalesRulesData !== currentSalesRulesData) {
+            if (!cachedSalesRulesData) {
+                // Save cart conditions data in cache
+                updateSalesRulesData(data.dynamicBlocks, currentSalesRulesData);
+            } else {
+                // Refetch cms data if there's a mismatch
+                refetch();
+            }
+        }
+    }, [
+        cachedSalesRulesData,
+        currentSalesRulesData,
+        data,
+        refetch,
+        updateSalesRulesData
+    ]);
+
+    return {
+        loading: isLoading,
+        error,
+        data
+    };
+};
+
+/** JSDocs type definitions */
+
+/**
+ * Props data to use when rendering a gift options component.
+ *
+ * @typedef {Object} CmsDynamicBlockTalonProps
+ *
+ * @property {Boolean} loading Query loading indicator.
+ * @property {Object} error Error of the GraphQl query.
+ * @property {Object} data Data returned by the query.
+ */
+
+/**
+ * This is a type used by the {@link useCmsDynamicBlock} talon.
+ *
+ * @typedef {Object} CmsDynamicBlockOperations
+ *
+ * @property {GraphQLAST} getSalesRulesDataQuery get sales rules data from cart.
+ * @property {GraphQLAST} getCmsDynamicBlocksQuery get cms dynamics blocks.
+ */

package/lib/talons/CreateAccount/useCreateAccount.js

@@ -6,6 +6,7 @@ import { useUserContext } from '../../context/user';
 import { useCartContext } from '../../context/cart';
 import { useAwaitQuery } from '../../hooks/useAwaitQuery';
 import { retrieveCartId } from '../../store/actions/cart';
+import { useGoogleReCaptcha } from '../../hooks/useGoogleReCaptcha';
 
 import DEFAULT_OPERATIONS from './createAccount.gql';
 
@@ -68,6 +69,15 @@ export const useCreateAccount = props => {
     const fetchUserDetails = useAwaitQuery(getCustomerQuery);
     const fetchCartDetails = useAwaitQuery(getCartDetailsQuery);
 
+    const {
+        generateReCaptchaData,
+        recaptchaLoading,
+        recaptchaWidgetProps
+    } = useGoogleReCaptcha({
+        currentForm: 'CUSTOMER_CREATE',
+        formAction: 'createAccount'
+    });
+
     const handleCancel = useCallback(() => {
         onCancel();
     }, [onCancel]);
@@ -79,6 +89,9 @@ export const useCreateAccount = props => {
                 // Get source cart id (guest cart id).
                 const sourceCartId = cartId;
 
+                // Get reCaptchaV3 Data for createAccount mutation
+                const recaptchaDataForCreateAccount = await generateReCaptchaData();
+
                 // Create the account and then sign in.
                 await createAccount({
                     variables: {
@@ -87,13 +100,19 @@ export const useCreateAccount = props => {
                         lastname: formValues.customer.lastname,
                         password: formValues.password,
                         is_subscribed: !!formValues.subscribe
-                    }
+                    },
+                    ...recaptchaDataForCreateAccount
                 });
+
+                // Get reCaptchaV3 Data for signIn mutation
+                const recaptchaDataForSignIn = await generateReCaptchaData();
+
                 const signInResponse = await signIn({
                     variables: {
                         email: formValues.customer.email,
                         password: formValues.password
-                    }
+                    },
+                    ...recaptchaDataForSignIn
                 });
                 const token = signInResponse.data.generateCustomerToken.token;
                 await setToken(token);
@@ -137,11 +156,12 @@ export const useCreateAccount = props => {
         },
         [
             cartId,
-            apolloClient,
-            removeCart,
+            generateReCaptchaData,
             createAccount,
             signIn,
             setToken,
+            apolloClient,
+            removeCart,
             createCart,
             fetchCartId,
             mergeCarts,
@@ -176,7 +196,8 @@ export const useCreateAccount = props => {
         handleCancel,
         handleSubmit,
         initialValues: sanitizedInitialValues,
-        isDisabled: isSubmitting || isGettingDetails
+        isDisabled: isSubmitting || isGettingDetails || recaptchaLoading,
+        recaptchaWidgetProps
     };
 };
 
@@ -237,4 +258,7 @@ export const useCreateAccount = props => {
  * @property {Function} handleSubmit callback function to handle form submission
  * @property {SanitizedInitialValues} initialValues initial values for the create account form
  * @property {Boolean} isDisabled true if either details are being fetched or form is being submitted. False otherwise.
+ * @property {Object} recaptchaWidgetProps - Props for the GoogleReCaptcha component.
+ * @property {Function} recaptchaWidgetProps.containerElement - Container reference callback.
+ * @property {Boolean} recaptchaWidgetProps.shouldRender - Checks if component should be rendered.
  */

package/lib/talons/FilterModal/helpers.js

@@ -104,6 +104,35 @@ export const getFiltersFromSearch = initialValue => {
     return filters;
 };
 
+/**
+ * Sort filters array
+ * @param {Array} initialArray an array containing filters data
+ */
+export const sortFiltersArray = initialArray => {
+    return initialArray.sort((a, b) => {
+        // Place Category filter first
+        if (a['attribute_code'] === 'category_id') {
+            return -1;
+        }
+        if (b['attribute_code'] === 'category_id') {
+            return 1;
+        }
+
+        // Sort alphabetically if same position
+        if (a['position'] === b['position']) {
+            if (a['label'] < b['label']) {
+                return -1;
+            }
+            if (a['label'] > b['label']) {
+                return 1;
+            }
+        }
+
+        // Sort by position
+        return a['position'] - b['position'];
+    });
+};
+
 export const stripHtml = html => html.replace(/(<([^>]+)>)/gi, '');
 
 /** GetFilterInput helpers below. */

package/lib/talons/FilterModal/useFilterModal.js

@@ -6,7 +6,12 @@ import { useAppContext } from '@magento/peregrine/lib/context/app';
 
 import mergeOperations from '../../util/shallowMerge';
 import { useFilterState } from './useFilterState';
-import { getSearchFromState, getStateFromSearch, stripHtml } from './helpers';
+import {
+    getSearchFromState,
+    getStateFromSearch,
+    sortFiltersArray,
+    stripHtml
+} from './helpers';
 
 import DEFAULT_OPERATIONS from './filterModal.gql';
 
@@ -83,7 +88,9 @@ export const useFilterModal = props => {
         const keys = new Set();
         const itemsByGroup = new Map();
 
-        for (const filter of filters) {
+        const sortedFilters = sortFiltersArray([...filters]);
+
+        for (const filter of sortedFilters) {
             const { options, label: name, attribute_code: group } = filter;
 
             // If this aggregation is not a possible filter, just back out.

package/lib/talons/FilterSidebar/useFilterSidebar.js

@@ -9,6 +9,7 @@ import { useFilterState } from '../FilterModal';
 import {
     getSearchFromState,
     getStateFromSearch,
+    sortFiltersArray,
     stripHtml
 } from '../FilterModal/helpers';
 
@@ -77,7 +78,9 @@ export const useFilterSidebar = props => {
         const keys = new Set();
         const itemsByGroup = new Map();
 
-        for (const filter of filters) {
+        const sortedFilters = sortFiltersArray([...filters]);
+
+        for (const filter of sortedFilters) {
             const { options, label: name, attribute_code: group } = filter;
 
             // If this aggregation is not a possible filter, just back out.

package/lib/talons/ForgotPassword/useForgotPassword.js

@@ -1,6 +1,8 @@
 import { useCallback, useState } from 'react';
 import { useMutation } from '@apollo/client';
 
+import { useGoogleReCaptcha } from '@magento/peregrine/lib/hooks/useGoogleReCaptcha';
+
 /**
  * Returns props necessary to render a ForgotPassword form.
  *
@@ -25,17 +27,34 @@ export const useForgotPassword = props => {
         { error: requestResetEmailError, loading: isResettingPassword }
     ] = useMutation(mutations.requestPasswordResetEmailMutation);
 
+    const {
+        recaptchaLoading,
+        generateReCaptchaData,
+        recaptchaWidgetProps
+    } = useGoogleReCaptcha({
+        currentForm: 'CUSTOMER_FORGOT_PASSWORD',
+        formAction: 'forgotPassword'
+    });
+
     const handleFormSubmit = useCallback(
         async ({ email }) => {
             try {
-                await requestResetEmail({ variables: { email } });
+                const reCaptchaData = await generateReCaptchaData();
+
+                await requestResetEmail({
+                    variables: { email },
+                    ...reCaptchaData
+                });
+
                 setForgotPasswordEmail(email);
                 setCompleted(true);
-            } catch (err) {
+            } catch (error) {
+                // Error is logged by apollo link - no need to double log.
+
                 setCompleted(false);
             }
         },
-        [requestResetEmail]
+        [generateReCaptchaData, requestResetEmail]
     );
 
     const handleCancel = useCallback(() => {
@@ -48,7 +67,8 @@ export const useForgotPassword = props => {
         handleCancel,
         handleFormSubmit,
         hasCompleted,
-        isResettingPassword
+        isResettingPassword: isResettingPassword || recaptchaLoading,
+        recaptchaWidgetProps
     };
 };
 
@@ -77,5 +97,6 @@ export const useForgotPassword = props => {
  * @property {Function} handleCancel Callback function to handle form cancellations
  * @property {Function} handleFormSubmit Callback function to handle form submission
  * @property {Boolean} hasCompleted True if password reset mutation has completed. False otherwise
- * @property {Boolean} isResettingPassword True if password reset mutation is in progress. False otherwise
+ * @property {Boolean} isResettingPassword True if form awaits events. False otherwise
+ * @property {Object} recaptchaWidgetProps Props for the GoogleReCaptcha component
  */

package/lib/talons/Link/useLink.js

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

package/lib/talons/MiniCart/miniCartFragments.gql.js

@@ -10,6 +10,10 @@ export const MiniCartFragment = gql`
                 currency
                 value
             }
+            subtotal_including_tax {
+                currency
+                value
+            }
         }
         ...ProductListFragment
     }

package/lib/talons/MyAccount/useResetPassword.js

@@ -2,6 +2,8 @@ import { useState, useMemo, useCallback } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useMutation } from '@apollo/client';
 
+import { useGoogleReCaptcha } from '@magento/peregrine/lib/hooks/useGoogleReCaptcha';
+
 /**
  * Returns props necessary to render a ResetPassword form.
  *
@@ -22,6 +24,15 @@ export const useResetPassword = props => {
         { error: resetPasswordErrors, loading }
     ] = useMutation(mutations.resetPasswordMutation);
 
+    const {
+        recaptchaLoading,
+        generateReCaptchaData,
+        recaptchaWidgetProps
+    } = useGoogleReCaptcha({
+        currentForm: 'CUSTOMER_FORGOT_PASSWORD',
+        formAction: 'resetPassword'
+    });
+
     const searchParams = useMemo(() => new URLSearchParams(location.search), [
         location
     ]);
@@ -31,25 +42,31 @@ export const useResetPassword = props => {
         async ({ email, newPassword }) => {
             try {
                 if (email && token && newPassword) {
+                    const reCaptchaData = await generateReCaptchaData();
+
                     await resetPassword({
-                        variables: { email, token, newPassword }
+                        variables: { email, token, newPassword },
+                        ...reCaptchaData
                     });
 
                     setHasCompleted(true);
                 }
             } catch (err) {
+                // Error is logged by apollo link - no need to double log.
+
                 setHasCompleted(false);
             }
         },
-        [resetPassword, token]
+        [generateReCaptchaData, resetPassword, token]
     );
 
     return {
         formErrors: [resetPasswordErrors],
         handleSubmit,
         hasCompleted,
-        loading,
-        token
+        loading: loading || recaptchaLoading,
+        token,
+        recaptchaWidgetProps
     };
 };
 
@@ -76,6 +93,7 @@ export const useResetPassword = props => {
  * @property {Array} formErrors A list of form errors
  * @property {Function} handleSubmit Callback function to handle form submission
  * @property {Boolean} hasCompleted True if password reset mutation has completed. False otherwise
- * @property {Boolean} loading True if password reset mutation is in progress. False otherwise
+ * @property {Boolean} loading True if form awaits events. False otherwise
  * @property {String} token token needed for password reset, will be sent in the mutation
+ * @property {Object} recaptchaWidgetProps Props for the GoogleReCaptcha component
  */

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

@@ -13,6 +13,7 @@ export const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
                     label
                     value
                 }
+                position
             }
         }
     }

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

@@ -54,7 +54,7 @@ export const useCategory = props => {
     const { currentPage, totalPages } = paginationValues;
     const { setCurrentPage, setTotalPages } = paginationApi;
 
-    const sortProps = useSort();
+    const sortProps = useSort({ sortFromSearch: false });
     const [currentSort] = sortProps;
 
     // Keep track of the sort criteria so we can tell when they change.

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

@@ -60,12 +60,14 @@ export const ProductDetailsFragment = gql`
                 }
                 data_type
                 is_system
-                is_visible_on_front
                 entity_type
                 ui_input {
                     ui_input_type
                     is_html_allowed
                 }
+                ... on ProductAttributeMetadata {
+                    used_in_components
+                }
             }
         }
         ... on ConfigurableProduct {
@@ -138,12 +140,14 @@ export const ProductDetailsFragment = gql`
                             }
                             data_type
                             is_system
-                            is_visible_on_front
                             entity_type
                             ui_input {
                                 ui_input_type
                                 is_html_allowed
                             }
+                            ... on ProductAttributeMetadata {
+                                used_in_components
+                            }
                         }
                     }
                 }

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

@@ -40,13 +40,8 @@ export const useProduct = props => {
         nextFetchPolicy: 'cache-first'
     });
 
-    const productUrlSuffix = useMemo(() => {
-        if (storeConfigData) {
-            return storeConfigData.storeConfig.product_url_suffix;
-        }
-    }, [storeConfigData]);
-
     const slug = pathname.split('/').pop();
+    const productUrlSuffix = storeConfigData?.storeConfig?.product_url_suffix;
     const urlKey = productUrlSuffix ? slug.replace(productUrlSuffix, '') : slug;
 
     const { error, loading, data } = useQuery(getProductDetailQuery, {

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

@@ -21,6 +21,7 @@ export const GET_PRODUCT_FILTERS_BY_SEARCH = gql`
                     label
                     value
                 }
+                position
             }
         }
     }

package/lib/talons/SearchPage/useSearchPage.js

@@ -44,7 +44,7 @@ export const useSearchPage = (props = {}) => {
 
     const pageSize = pageSizeData && pageSizeData.storeConfig.grid_per_page;
 
-    const sortProps = useSort();
+    const sortProps = useSort({ sortFromSearch: true });
     const [currentSort] = sortProps;
     const { sortAttribute, sortDirection } = currentSort;
     // Keep track of the sort criteria so we can tell when they change.