@magento/peregrine 12.2.0 → 12.3.0

package/lib/Apollo/clearCustomerDataFromCache.js

@@ -12,6 +12,7 @@ export const clearCustomerDataFromCache = async client => {
     // Cached ROOT_QUERY
     client.cache.evict({ fieldName: 'customer' });
     client.cache.evict({ fieldName: 'customerWishlistProducts' });
+    client.cache.evict({ fieldName: 'dynamicBlocks' });
 
     client.cache.gc();
 

package/lib/Apollo/policies/index.js

@@ -177,10 +177,15 @@ const typePolicies = {
     SelectedConfigurableOption: {
         // id alone is not enough to identify a selected option as it can refer
         // to something like "size" where value_id refers to "large".
-        keyFields: [
-            'configurable_product_option_uid',
-            'configurable_product_option_value_uid'
-        ]
+        // TODO: Use configurable_product_option_uid for ConfigurableWishlistItem when available in 2.4.5
+        keyFields: fields => {
+            return fields.configurable_product_option_uid
+                ? [
+                      'configurable_product_option_uid',
+                      'configurable_product_option_value_uid'
+                  ]
+                : ['id', 'value_id'];
+        }
     },
     SelectedPaymentMethod: {
         keyFields: ['code']

package/lib/hooks/useGoogleReCaptcha/googleReCaptchaConfig.gql.js

@@ -0,0 +1,16 @@
+import { gql } from '@apollo/client';
+
+export const GET_RECAPTCHAV3_CONFIG = gql`
+    query GetReCaptchaV3Config {
+        recaptchaV3Config {
+            website_key
+            badge_position
+            language_code
+            forms
+        }
+    }
+`;
+
+export default {
+    getReCaptchaV3ConfigQuery: GET_RECAPTCHAV3_CONFIG
+};

package/lib/hooks/useGoogleReCaptcha/index.js

@@ -0,0 +1 @@
+export { useGoogleReCaptcha } from './useGoogleReCaptcha';

package/lib/hooks/useGoogleReCaptcha/useGoogleReCaptcha.js

@@ -0,0 +1,210 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useQuery } from '@apollo/client';
+
+import useScript from '@magento/peregrine/lib/hooks/useScript';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+
+import defaultOperations from './googleReCaptchaConfig.gql';
+
+const GOOGLE_RECAPTCHA_HEADER = 'X-ReCaptcha';
+const GOOGLE_RECAPTCHA_URL = 'https://www.google.com/recaptcha/api.js';
+
+/**
+ * Returns props necessary to attach Google ReCaptcha V3 to a form.
+ *
+ * @function
+ *
+ * @param {String} props.currentForm - Form name to match GraphQl ReCaptchaFormEnum.
+ * @param {String} props.formAction - Action name to use for logging in API.
+ * @param {Object} [props.operations] - GraphQL operations to be run by the hook.
+ *
+ * @returns {GoogleReCaptchaProps}
+ *
+ * @example <caption>Importing into your project</caption>
+ * import { useGoogleReCaptcha } from '@magento/peregrine/lib/hooks/useGoogleReCaptcha';
+ */
+export const useGoogleReCaptcha = props => {
+    const operations = mergeOperations(defaultOperations, props.operations);
+    const { currentForm, formAction } = props;
+
+    const {
+        data: configData,
+        error: configError,
+        loading: configLoading
+    } = useQuery(operations.getReCaptchaV3ConfigQuery, {
+        fetchPolicy: 'cache-and-network'
+    });
+
+    if (!globalThis['recaptchaCallbacks']) {
+        globalThis['recaptchaCallbacks'] = {};
+    }
+    const [apiIsReady, setApiIsReady] = useState(
+        globalThis.hasOwnProperty('grecaptcha')
+    );
+    const [isGenerating, setIsGenerating] = useState(false);
+    const [widgetId, setWidgetId] = useState(null);
+
+    // Container Reference to be used for the GoogleReCaptcha component
+    const [inlineContainer, setInlineContainer] = useState(null);
+
+    // callback to update container element ref in case of mount/unmount
+    const updateInlineContainerRef = useCallback(node => {
+        if (node !== null) {
+            setInlineContainer(node);
+        }
+    }, []);
+
+    const recaptchaBadge =
+        configData?.recaptchaV3Config?.badge_position &&
+        configData.recaptchaV3Config.badge_position.length > 0
+            ? configData.recaptchaV3Config.badge_position
+            : 'bottomright';
+    const recaptchaKey = configData?.recaptchaV3Config?.website_key;
+    const recaptchaLang = configData?.recaptchaV3Config?.language_code;
+    const activeForms = configData?.recaptchaV3Config?.forms || [];
+    const isEnabled =
+        !(configError instanceof Error) &&
+        recaptchaKey &&
+        recaptchaKey.length > 0 &&
+        activeForms.includes(currentForm);
+
+    // Determine which type of badge should be loaded
+    const isInline = recaptchaBadge === 'inline';
+
+    // Construct script url with configs
+    const scriptUrl = new URL(GOOGLE_RECAPTCHA_URL);
+
+    scriptUrl.searchParams.append('badge', recaptchaBadge);
+
+    // Render separate widgets with GoogleReCaptcha component when inline
+    scriptUrl.searchParams.append(
+        'render',
+        isInline ? 'explicit' : recaptchaKey
+    );
+    scriptUrl.searchParams.append('onload', 'onloadRecaptchaCallback');
+
+    if (recaptchaLang && recaptchaLang.length > 0) {
+        scriptUrl.searchParams.append('hl', recaptchaLang);
+    }
+
+    // Load Script only if the API is not already set, if the key is set
+    // and if the current form is enabled in the V3 configs
+    const status = useScript(!apiIsReady && isEnabled ? scriptUrl : null);
+
+    // Wait for config to be loaded and script to be ready
+    const isLoading =
+        configLoading || (isEnabled && !apiIsReady && status !== 'ready');
+
+    // Render inline widget manually
+    useEffect(() => {
+        // Only render if container is set and API is available
+        if (
+            inlineContainer !== null &&
+            isInline &&
+            apiIsReady &&
+            widgetId === null
+        ) {
+            // Avoid loading twice if already rendered
+            if ('widgetId' in inlineContainer.dataset) {
+                setWidgetId(inlineContainer.dataset.widgetId);
+            } else {
+                const id = globalThis.grecaptcha.render(inlineContainer, {
+                    sitekey: recaptchaKey,
+                    size: 'invisible'
+                });
+
+                setWidgetId(id);
+                inlineContainer.dataset.widgetId = id;
+            }
+        }
+    }, [apiIsReady, isInline, recaptchaKey, widgetId, inlineContainer]);
+
+    // Callback sets API as ready
+    if (!globalThis['recaptchaCallbacks'][formAction] && isEnabled) {
+        globalThis['recaptchaCallbacks'][formAction] = () => {
+            // Update non inline styles
+            if (!isInline) {
+                const floatingBadge = document.getElementsByClassName(
+                    'grecaptcha-badge'
+                );
+
+                if (floatingBadge && floatingBadge.length > 0) {
+                    floatingBadge[0].style.zIndex = 999;
+                }
+            }
+
+            setApiIsReady(true);
+        };
+    }
+
+    // Callback loops through each instance and set API as ready
+    globalThis['onloadRecaptchaCallback'] = useCallback(() => {
+        for (const key in globalThis['recaptchaCallbacks']) {
+            globalThis['recaptchaCallbacks'][key]();
+        }
+        // Reset value after
+        globalThis['recaptchaCallbacks'] = {};
+    }, []);
+
+    // Generate the object that will be sent with the request
+    const generateReCaptchaData = useCallback(async () => {
+        if (apiIsReady) {
+            try {
+                setIsGenerating(true);
+
+                const token = await globalThis.grecaptcha.execute(
+                    isInline ? widgetId : recaptchaKey,
+                    {
+                        action: formAction
+                    }
+                );
+
+                const result = {
+                    // TODO: Use Apollo Link middleware when solution is found
+                    context: {
+                        headers: {
+                            [GOOGLE_RECAPTCHA_HEADER]: token
+                        }
+                    }
+                };
+
+                setIsGenerating(false);
+
+                return result;
+            } catch (error) {
+                // Log API error
+                console.error(error);
+
+                setIsGenerating(false);
+            }
+        }
+
+        return {};
+    }, [apiIsReady, formAction, isInline, recaptchaKey, widgetId]);
+
+    const recaptchaWidgetProps = {
+        containerElement: updateInlineContainerRef,
+        shouldRender: !!(isEnabled && isInline && apiIsReady)
+    };
+
+    return {
+        recaptchaLoading: isGenerating || isLoading,
+        generateReCaptchaData,
+        recaptchaWidgetProps
+    };
+};
+
+/** JSDocs type definitions */
+
+/**
+ * Object type returned by the {@link useGoogleReCaptcha} hook.
+ * It provides props data to use when attaching Google ReCaptcha V3 to a form.
+ *
+ * @typedef {Object} GoogleReCaptchaProps
+ *
+ * @property {Boolean} recaptchaLoading - Indicates if hook is loading data or loading the script.
+ * @property {Function} generateReCaptchaData - The function to generate ReCaptcha Mutation data.
+ * @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/hooks/useMediaQuery.js

@@ -0,0 +1,83 @@
+import { useEffect, useState, useRef } from 'react';
+import { string, shape, object, arrayOf } from 'prop-types';
+
+const { matchMedia } = globalThis;
+
+/**
+ * A hook that will return all matched styles for any given media queries using the
+ * matchMedia API (https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
+ *
+ * @param {Object} props
+ * @param {Array} props.mediaQueries The array of media rules and respective styles to apply
+ *
+ * @returns {Object}
+ */
+export const useMediaQuery = (props = { mediaQueries: [] }) => {
+    const [styles, setStyles] = useState({});
+
+    const isMountedRef = useRef(null);
+
+    const { mediaQueries } = props;
+
+    useEffect(() => {
+        isMountedRef.current = true;
+        if (!mediaQueries) return;
+
+        const mqlList = mediaQueries.map(({ media }) => matchMedia(media));
+
+        const handleMatch = (query, i) => {
+            if (!isMountedRef.current) return;
+
+            if (query.matches) {
+                setStyles(prevState => ({
+                    ...prevState,
+                    ...mediaQueries[i].style
+                }));
+            } else {
+                setStyles(prevState => {
+                    const filteredState = Object.keys(prevState)
+                        .filter(
+                            key => mediaQueries[i].style[key] !== prevState[key]
+                        )
+                        .reduce((obj, key) => {
+                            return {
+                                ...obj,
+                                [key]: prevState[key]
+                            };
+                        }, {});
+                    return filteredState;
+                });
+            }
+        };
+
+        mqlList.forEach((mql, i) => {
+            if (mql.matches) {
+                setStyles(prevState => ({
+                    ...prevState,
+                    ...mediaQueries[i].style
+                }));
+            }
+            mql.addEventListener('change', query => handleMatch(query, i));
+        });
+
+        return () => {
+            isMountedRef.current = false;
+            mqlList.forEach((mql, i) => {
+                mql.removeEventListener('change', query =>
+                    handleMatch(query, i)
+                );
+            });
+        };
+    }, [mediaQueries]);
+
+    return { styles };
+};
+
+useMediaQuery.propTypes = {
+    mediaQueries: arrayOf(
+        shape({
+            media: string.isRequired,
+            style: object.isRequired
+        })
+    ).isRequired
+};

package/lib/hooks/useScript.js

@@ -0,0 +1,68 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Dynamically load an external script and know when its loaded
+ * @see https://usehooks.com/useScript/.
+ *
+ * @param {String} src - the script src.
+ *
+ * @returns {string} - returns one of the possible status: "idle", "loading", "ready" or "error"
+ */
+export default src => {
+    // Keep track of script status ("idle", "loading", "ready", "error")
+    const [status, setStatus] = useState(src ? 'loading' : 'idle');
+    useEffect(
+        () => {
+            // Allow falsy src value if waiting on other data needed for
+            // constructing the script URL passed to this hook.
+            if (!src) {
+                setStatus('idle');
+                return;
+            }
+            // Fetch existing script element by src
+            // It may have been added by another instance of this hook
+            let script = document.querySelector(`script[src="${src}"]`);
+            if (!script) {
+                // Create script
+                script = document.createElement('script');
+                script.src = src;
+                script.async = true;
+                script.setAttribute('data-status', 'loading');
+                // Add script to document body
+                document.body.appendChild(script);
+                // Store status in attribute on script
+                // This can be read by other instances of this hook
+                const setAttributeFromEvent = event => {
+                    script.setAttribute(
+                        'data-status',
+                        event.type === 'load' ? 'ready' : 'error'
+                    );
+                };
+                script.addEventListener('load', setAttributeFromEvent);
+                script.addEventListener('error', setAttributeFromEvent);
+            } else {
+                // Grab existing script status from attribute and set to state.
+                setStatus(script.getAttribute('data-status'));
+            }
+            // Script event handler to update status in state
+            // Note: Even if the script already exists we still need to add
+            // event handlers to update the state for *this* hook instance.
+            const setStateFromEvent = event => {
+                setStatus(event.type === 'load' ? 'ready' : 'error');
+            };
+            // Add event listeners
+            script.addEventListener('load', setStateFromEvent);
+            script.addEventListener('error', setStateFromEvent);
+            // Remove event listeners on cleanup
+            return () => {
+                if (script) {
+                    script.removeEventListener('load', setStateFromEvent);
+                    script.removeEventListener('error', setStateFromEvent);
+                }
+            };
+        },
+        [src] // Only re-run effect if script src changes
+    );
+
+    return status;
+};

package/lib/hooks/useSort.js

@@ -8,10 +8,21 @@ const defaultSort = {
     sortDirection: 'ASC'
 };
 
+const searchSort = {
+    sortText: 'Best Match',
+    sortId: 'sortItem.relevance',
+    sortAttribute: 'relevance',
+    sortDirection: 'DESC'
+};
+
 /**
  *
  * @param props
  * @returns {[{sortDirection: string, sortAttribute: string, sortText: string}, React.Dispatch<React.SetStateAction<{sortDirection: string, sortAttribute: string, sortText: string}>>]}
  */
-export const useSort = (props = {}) =>
-    useState(() => Object.assign({}, defaultSort, props));
+export const useSort = (props = {}) => {
+    const { sortFromSearch = false } = props;
+    return useState(() =>
+        Object.assign({}, sortFromSearch ? searchSort : defaultSort, props)
+    );
+};

package/lib/talons/AccountInformationPage/useAccountInformationPage.js

@@ -1,6 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
 import { useMutation, useQuery } from '@apollo/client';
 import { useUserContext } from '../../context/user';
+import { useGoogleReCaptcha } from '../../hooks/useGoogleReCaptcha';
 
 export const useAccountInformationPage = props => {
     const {
@@ -46,6 +47,15 @@ export const useAccountInformationPage = props => {
         }
     ] = useMutation(changeCustomerPasswordMutation);
 
+    const {
+        generateReCaptchaData,
+        recaptchaLoading,
+        recaptchaWidgetProps
+    } = useGoogleReCaptcha({
+        currentForm: 'CUSTOMER_EDIT',
+        formAction: 'editCustomer'
+    });
+
     const initialValues = useMemo(() => {
         if (accountInformationData) {
             return { customer: accountInformationData.customer };
@@ -97,11 +107,13 @@ export const useAccountInformationPage = props => {
                     });
                 }
                 if (password && newPassword) {
+                    const recaptchaDataForChangeCustomerPassword = await generateReCaptchaData();
                     await changeCustomerPassword({
                         variables: {
                             currentPassword: password,
                             newPassword: newPassword
-                        }
+                        },
+                        ...recaptchaDataForChangeCustomerPassword
                     });
                 }
                 // After submission, close the form if there were no errors.
@@ -117,10 +129,11 @@ export const useAccountInformationPage = props => {
             }
         },
         [
-            setCustomerInformation,
+            initialValues,
             handleCancel,
-            changeCustomerPassword,
-            initialValues
+            setCustomerInformation,
+            generateReCaptchaData,
+            changeCustomerPassword
         ]
     );
 
@@ -134,10 +147,14 @@ export const useAccountInformationPage = props => {
         handleSubmit,
         handleChangePassword,
         initialValues,
-        isDisabled: isUpdatingCustomerInformation || isChangingCustomerPassword,
+        isDisabled:
+            isUpdatingCustomerInformation ||
+            isChangingCustomerPassword ||
+            recaptchaLoading,
         isUpdateMode,
         loadDataError,
         shouldShowNewPassword,
-        showUpdateMode
+        showUpdateMode,
+        recaptchaWidgetProps
     };
 };

package/lib/talons/CartPage/PriceAdjustments/GiftOptions/giftOptions.gql.js

@@ -1,21 +1,46 @@
 import { gql } from '@apollo/client';
 
-/**
- * Local query. GQL support is not available as of today.
- *
- * Once available, we can change the query to match the schema.
- */
+import { CartPageFragment } from '../../cartPageFragments.gql';
+import { GiftOptionsFragment } from './giftOptionsFragments.gql';
+
 const GET_GIFT_OPTIONS = gql`
-    query getGiftOptions($cartId: String!) {
-        cart(cart_id: $cartId) @client {
+    query GetGiftOptions($cartId: String!) {
+        cart(cart_id: $cartId) {
             id
-            include_gift_receipt
-            include_printed_card
-            local_gift_message
+            ...GiftOptionsFragment
+        }
+    }
+    ${GiftOptionsFragment}
+`;
+
+// Currently Commerce only
+const SET_GIFT_OPTIONS_ON_CART = gql`
+    mutation SetGiftOptionsOnCart(
+        $cartId: String!
+        $giftMessage: GiftMessageInput
+        $giftReceiptIncluded: Boolean!
+        $printedCardIncluded: Boolean!
+    ) {
+        setGiftOptionsOnCart(
+            input: {
+                cart_id: $cartId
+                gift_message: $giftMessage
+                gift_receipt_included: $giftReceiptIncluded
+                printed_card_included: $printedCardIncluded
+            }
+        ) {
+            cart {
+                id
+                ...CartPageFragment
+                ...GiftOptionsFragment
+            }
         }
     }
+    ${CartPageFragment}
+    ${GiftOptionsFragment}
 `;
 
 export default {
-    getGiftOptionsQuery: GET_GIFT_OPTIONS
+    getGiftOptionsQuery: GET_GIFT_OPTIONS,
+    setGiftOptionsOnCartMutation: SET_GIFT_OPTIONS_ON_CART
 };

package/lib/talons/CartPage/PriceAdjustments/GiftOptions/giftOptionsFragments.gql.js

@@ -0,0 +1,19 @@
+import { gql } from '@apollo/client';
+
+import { GiftOptionsSummaryFragment } from '../../PriceSummary/queries/giftOptionsSummary';
+
+export const GiftOptionsFragment = gql`
+    fragment GiftOptionsFragment on Cart {
+        __typename
+        id
+        gift_message {
+            from
+            to
+            message
+        }
+        gift_receipt_included
+        printed_card_included
+        ...GiftOptionsSummaryFragment
+    }
+    ${GiftOptionsSummaryFragment}
+`;