@magento/peregrine 12.2.0 → 12.3.0

package/lib/talons/CartPage/PriceAdjustments/GiftOptions/useGiftOptions.js

@@ -1,7 +1,11 @@
-import { useCallback, useRef, useState } from 'react';
-import { useApolloClient, useQuery } from '@apollo/client';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { useMutation, useQuery } from '@apollo/client';
+import debounce from 'lodash.debounce';
+
 import { useCartContext } from '@magento/peregrine/lib/context/cart';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import { isRequired } from '@magento/venia-ui/lib/util/formValidators';
+
 import DEFAULT_OPERATIONS from './giftOptions.gql';
 
 /**
@@ -16,145 +20,362 @@ import DEFAULT_OPERATIONS from './giftOptions.gql';
  * @function
  *
  * @param {Object} props
- * @param {GiftOptionsMutations} props.mutations GraphQL mutations for Gift Options
- * @param {GiftOptionsQueries} props.queries GraphQL queries for Gift Options
+ * @param {GiftOptionsOperations} props.operations
  *
  * @returns {GiftOptionsTalonProps}
  *
  * @example <caption>Importing into your project</caption>
  * import { useGiftOptions } from '@magento/peregrine/lib/talons/CartPage/GiftOptions/useGiftOptions';
  */
-const useGiftOptions = (props = {}) => {
+export const useGiftOptions = (props = {}) => {
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
-    const { getGiftOptionsQuery } = operations;
+    const { setGiftOptionsOnCartMutation, getGiftOptionsQuery } = operations;
 
     const [{ cartId }] = useCartContext();
-    const { cache } = useApolloClient();
-
-    // The form will be a child, not a parent, so we can't call `useFormApi`.
-    // Need to use a ref and `props.getApi` instead.
-    const formApiRef = useRef();
-    const [hasHydrated, setHasHydrated] = useState(false);
-
-    // Could be an effect, but a callback should be slightly better.
-    const handleCompleted = useCallback(
-        data => {
-            // Only write values to the form once, ideally before user input.
-            // Afterward, treat client state as the single source of truth.
-            if (data && !hasHydrated) {
-                formApiRef.current.setValues({
-                    cardMessage: data.cart.local_gift_message,
-                    includeGiftReceipt: data.cart.include_gift_receipt,
-                    includePrintedCard: data.cart.include_printed_card
+
+    const [
+        setGiftOptionsOnCart,
+        { error: setGiftOptionsOnCartError }
+    ] = useMutation(setGiftOptionsOnCartMutation);
+    const {
+        data: getGiftOptionsData,
+        error: getGiftOptionsError,
+        loading
+    } = useQuery(getGiftOptionsQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
+        skip: !cartId,
+        variables: { cartId }
+    });
+
+    const { cart } = getGiftOptionsData || {};
+
+    const formApiRef = useRef(null);
+
+    const [giftMessageIsChecked, setGiftMessageIsChecked] = useState(false);
+    const [showGiftMessageResult, setShowGiftMessageResult] = useState(false);
+    const [savingOptions, setSavingOptions] = useState([]);
+
+    const initialValues = useMemo(() => {
+        const hasInitialGiftMessage =
+            cart?.gift_message?.from.length > 0 ||
+            cart?.gift_message?.to.length > 0 ||
+            cart?.gift_message?.message.length > 0;
+
+        if (formApiRef?.current?.getState()?.values === undefined) {
+            setGiftMessageIsChecked(hasInitialGiftMessage);
+            setShowGiftMessageResult(hasInitialGiftMessage);
+        }
+
+        return {
+            cardFrom: cart?.gift_message?.from || '',
+            cardTo: cart?.gift_message?.to || '',
+            cardMessage: cart?.gift_message?.message || '',
+            includeGiftReceipt: cart?.gift_receipt_included === true,
+            includeGiftMessage: hasInitialGiftMessage,
+            includePrintedCard: cart?.printed_card_included === true
+        };
+    }, [cart]);
+
+    const giftMessageResult = useMemo(
+        () => ({
+            cardFrom: cart?.gift_message?.from || '',
+            cardTo: cart?.gift_message?.to || '',
+            cardMessage: cart?.gift_message?.message || ''
+        }),
+        [
+            cart?.gift_message?.from,
+            cart?.gift_message?.message,
+            cart?.gift_message?.to
+        ]
+    );
+
+    const printedCardPrice = cart?.prices?.gift_options?.printed_card || {};
+
+    const hasGiftMessage =
+        giftMessageResult.cardFrom.length > 0 &&
+        giftMessageResult.cardTo.length > 0 &&
+        giftMessageResult.cardMessage.length > 0;
+
+    const setFormApi = useCallback(api => (formApiRef.current = api), []);
+
+    const handleOnChange = useCallback(async () => {
+        try {
+            const formApi = formApiRef.current;
+
+            if (formApi) {
+                await setGiftOptionsOnCart({
+                    variables: {
+                        cartId,
+                        giftReceiptIncluded: formApi.getValue(
+                            'includeGiftReceipt'
+                        ),
+                        printedCardIncluded: formApi.getValue(
+                            'includePrintedCard'
+                        )
+                    }
                 });
 
-                setHasHydrated(true);
+                // Reset saving options when mutation is complete
+                setSavingOptions([]);
             }
-        },
-        [hasHydrated, setHasHydrated]
-    );
+        } catch (e) {
+            // Error is logged by apollo link - no need to double log.
+        }
+    }, [cartId, setGiftOptionsOnCart]);
+
+    // TODO: Update mutation when backend provides the option to remove Gift Message
+    const handleRemoveGiftMessage = useCallback(async () => {
+        try {
+            const formApi = formApiRef.current;
+
+            if (formApi) {
+                // Indicates Gift Message is currently saving
+                setSavingOptions([...savingOptions, 'giftMessage']);
 
-    const handleValueChange = useCallback(
-        values => {
-            // Write values to the cache after every user input.
-            // Apollo should batch these writes if the user inputs quickly.
-            cache.writeQuery({
-                query: getGiftOptionsQuery,
-                variables: {
-                    cart_id: cartId
-                },
-                data: {
-                    cart: {
-                        __typename: 'Cart',
-                        id: cartId,
-                        include_gift_receipt: !!values.includeGiftReceipt,
-                        include_printed_card: !!values.includePrintedCard,
-                        local_gift_message: values.cardMessage || ''
+                // Reset form data and form errors
+                formApi.setValues({
+                    cardTo: '',
+                    cardFrom: '',
+                    cardMessage: ''
+                });
+                formApi.setError('cardTo');
+                formApi.setError('cardFrom');
+                formApi.setError('cardMessage');
+                setShowGiftMessageResult(false);
+
+                await setGiftOptionsOnCart({
+                    variables: {
+                        cartId,
+                        giftMessage: {
+                            to: '',
+                            from: '',
+                            message: ''
+                        },
+                        // Mutation requires both options to be provided
+                        giftReceiptIncluded: formApi.getValue(
+                            'includeGiftReceipt'
+                        ),
+                        printedCardIncluded: formApi.getValue(
+                            'includePrintedCard'
+                        )
                     }
+                });
+
+                // Reset saving options when mutation is complete
+                setSavingOptions([]);
+            }
+        } catch (e) {
+            // Error is logged by apollo link - no need to double log.
+        }
+    }, [cartId, savingOptions, setGiftOptionsOnCart]);
+
+    const handleUpdateGiftMessage = useCallback(async () => {
+        try {
+            const formApi = formApiRef.current;
+
+            if (formApi) {
+                formApi.validate();
+
+                if (!formApi.getState().invalid) {
+                    // Indicates Gift Message is currently saving
+                    setSavingOptions([...savingOptions, 'giftMessage']);
+
+                    await setGiftOptionsOnCart({
+                        variables: {
+                            cartId,
+                            giftMessage: {
+                                to: formApi.getValue('cardTo'),
+                                from: formApi.getValue('cardFrom'),
+                                message: formApi.getValue('cardMessage')
+                            },
+                            // Mutation requires both options to be provided
+                            giftReceiptIncluded: formApi.getValue(
+                                'includeGiftReceipt'
+                            ),
+                            printedCardIncluded: formApi.getValue(
+                                'includePrintedCard'
+                            )
+                        }
+                    });
+
+                    setShowGiftMessageResult(true);
+                    // Reset saving options when mutation is complete
+                    setSavingOptions([]);
                 }
-            });
+            }
+        } catch (e) {
+            // Error is logged by apollo link - no need to double log.
+        }
+    }, [cartId, savingOptions, setGiftOptionsOnCart]);
+
+    const handleToggleGiftMessageIsChecked = useCallback(
+        async isChecked => {
+            if (!isChecked) {
+                // Remove Gift Message and reset form
+                await handleRemoveGiftMessage();
+            }
+
+            setGiftMessageIsChecked(prevState => !prevState);
         },
-        [cartId, cache, getGiftOptionsQuery]
+        [handleRemoveGiftMessage]
     );
 
-    useQuery(getGiftOptionsQuery, {
-        onCompleted: handleCompleted,
-        skip: !cartId,
-        variables: { cartId }
-    });
+    const handleToggleGiftMessageResult = useCallback(() => {
+        setShowGiftMessageResult(prevState => !prevState);
+    }, []);
 
-    const cardMessageProps = {
-        field: 'cardMessage',
-        initialValue: '',
-        keepState: true
-    };
+    // Batch writes if the user inputs quickly.
+    const debouncedOnChange = useMemo(
+        () =>
+            debounce(() => {
+                handleOnChange();
+            }, 500),
+        [handleOnChange]
+    );
+
+    // Indicates which options are currently saving
+    const updateSavingOptionsOnChange = useCallback(
+        element => {
+            const elementName = element.target.name;
+
+            if (!savingOptions.includes(elementName)) {
+                setSavingOptions([...savingOptions, elementName]);
+            }
+
+            debouncedOnChange();
+        },
+        [debouncedOnChange, savingOptions]
+    );
 
     const giftReceiptProps = {
         field: 'includeGiftReceipt',
-        initialValue: false
+        onChange: updateSavingOptionsOnChange
     };
 
     const printedCardProps = {
         field: 'includePrintedCard',
-        initialValue: false
+        onChange: updateSavingOptionsOnChange
+    };
+
+    const giftMessageCheckboxProps = {
+        disabled: savingOptions.includes('giftMessage'),
+        field: 'includeGiftMessage',
+        onValueChange: handleToggleGiftMessageIsChecked
+    };
+
+    const cardToProps = {
+        disabled:
+            !giftMessageIsChecked || savingOptions.includes('giftMessage'),
+        field: 'cardTo',
+        validate: isRequired
+    };
+
+    const cardFromProps = {
+        disabled:
+            !giftMessageIsChecked || savingOptions.includes('giftMessage'),
+        field: 'cardFrom',
+        validate: isRequired
+    };
+
+    const cardMessageProps = {
+        disabled:
+            !giftMessageIsChecked || savingOptions.includes('giftMessage'),
+        field: 'cardMessage',
+        validate: isRequired
     };
 
     const optionsFormProps = {
-        getApi: api => {
-            formApiRef.current = api;
-        },
-        onValueChange: handleValueChange
+        initialValues,
+        getApi: setFormApi
     };
 
-    const shouldPromptForMessage = useCallback(
-        ({ values }) => values.includePrintedCard,
-        []
+    const editGiftMessageButtonProps = {
+        disabled:
+            !giftMessageIsChecked || savingOptions.includes('giftMessage'),
+        priority: 'normal',
+        type: 'button',
+        onClick: handleToggleGiftMessageResult
+    };
+
+    const cancelGiftMessageButtonProps = {
+        disabled:
+            !giftMessageIsChecked || savingOptions.includes('giftMessage'),
+        priority: 'low',
+        type: 'button',
+        onClick: handleToggleGiftMessageResult
+    };
+
+    const saveGiftMessageButtonProps = {
+        disabled:
+            !giftMessageIsChecked || savingOptions.includes('giftMessage'),
+        priority: 'normal',
+        type: 'button',
+        onClick: handleUpdateGiftMessage
+    };
+
+    // Create a memoized error map and toggle individual errors when they change
+    const errors = useMemo(
+        () =>
+            new Map([
+                ['setGiftOptionsOnCartMutation', setGiftOptionsOnCartError],
+                ['getGiftOptionsQuery', getGiftOptionsError]
+            ]),
+        [getGiftOptionsError, setGiftOptionsOnCartError]
     );
 
     return {
-        cardMessageProps,
+        loading,
+        errors,
+        savingOptions,
         giftReceiptProps,
-        optionsFormProps,
         printedCardProps,
-        shouldPromptForMessage
+        printedCardPrice,
+        giftMessageCheckboxProps,
+        giftMessageResult,
+        hasGiftMessage,
+        showGiftMessageResult,
+        cardToProps,
+        cardFromProps,
+        cardMessageProps,
+        editGiftMessageButtonProps,
+        cancelGiftMessageButtonProps,
+        saveGiftMessageButtonProps,
+        optionsFormProps
     };
 };
 
-export default useGiftOptions;
-
 /** JSDocs type definitions */
 
 /**
- * GraphQL mutations for Gift Options
- *
- * @typedef {Object} GiftOptionsMutations
- *
- * @property {GraphQLAST} setGiftOptionsMutation Mutation to use for setting the gift options for the cart
- *
- * @see [giftOptions.gql.js]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/PriceAdjustments/GiftOptions/giftOptions.gql.js}
- * for the query Venia uses.
- */
-
-/**
- * GraphQL query for Gift Options
- *
- * @typedef {Object} GiftOptionsQueries
+ * Props data to use when rendering a gift options component.
  *
- * @property {GraphQLAST} getGiftOptionsQuery Query to get gift options data
+ * @typedef {Object} GiftOptionsTalonProps
  *
- * @see [giftOptions.gql.js]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/PriceAdjustments/GiftOptions/giftOptions.gql.js}
- * for the query Venia uses.
+ * @property {Boolean} loading Query loading indicator.
+ * @property {Object} errors Errors for GraphQl query and mutation.
+ * @property {Array} savingOptions Array containing fields that are busy.
+ * @property {Object} giftReceiptProps Props for the `includeGiftReceipt` checkbox element.
+ * @property {Object} printedCardProps Props for the `includePrintedCard` checkbox element.
+ * @property {Object} printedCardPrice Printed Card Price object.
+ * @property {Object} giftMessageCheckboxProps Props for the `includeGiftMessage` checkbox element.
+ * @property {Object} giftMessageResult Object containing Gift Message data.
+ * @property {Boolean} hasGiftMessage Checks if Gift Message data has all fields filled.
+ * @property {Boolean} showGiftMessageResult Show or hide Gift Message result.
+ * @property {Object} cardToProps Props for the `cardTo` text input element.
+ * @property {Object} cardFromProps Props for the `cardFrom` text input element.
+ * @property {Object} cardMessageProps Props for the `cardMessage` textarea element.
+ * @property {Object} editGiftMessageButtonProps Props for the Edit Gift Message button.
+ * @property {Object} cancelGiftMessageButtonProps Props for the Cancel Gift Message button.
+ * @property {Object} saveGiftMessageButtonProps Props for the Update Gift Message button.
+ * @property {Object} optionsFormProps Props for the form element.
  */
 
 /**
- * Props data to use when rendering a gift options component.
- *
- * @typedef {Object} GiftOptionsTalonProps
+ * This is a type used by the {@link useGiftOptions} talon.
  *
- * @property {object} cardMessageProps Props for the `cardMessage` textarea element.
- * @property {object} giftReceiptProps Props for the `includeGiftReceipt` checkbox element.
- * @property {object} optionsFormProps Props for the form element.
- * @property {object} printedCardProps Props for the `includePrintedCard` checkbox element.
- * @property {function} shouldPromptForMessage Determines whether to show the `cardMessage` textarea element.
+ * @typedef {Object} GiftOptionsOperations
  *
+ * @property {GraphQLAST} setGiftOptionsOnCartMutation sets the gift options on cart.
+ * @property {GraphQLAST} getGiftOptionsQuery fetch the gift options.
  */

package/lib/talons/CartPage/PriceAdjustments/giftOptionsSection.gql.js

@@ -0,0 +1,17 @@
+import { gql } from '@apollo/client';
+
+const GET_GIFT_OPTIONS_CONFIG = gql`
+    query GetStoreConfigForGiftOptions {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            allow_order
+            allow_gift_receipt
+            allow_printed_card
+        }
+    }
+`;
+
+export default {
+    getGiftOptionsConfigQuery: GET_GIFT_OPTIONS_CONFIG
+};

package/lib/talons/CartPage/PriceAdjustments/useGiftOptionsSection.js

@@ -0,0 +1,61 @@
+import { useQuery } from '@apollo/client';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+
+import DEFAULT_OPERATIONS from './giftOptionsSection.gql.js';
+
+/**
+ * This talon fetches the gift options section data.
+ * @function
+ *
+ * @param {Object} props
+ * @param {GiftOptionsSectionOperations} props.operations
+ *
+ * @return {GiftOptionsSectionProps}
+ */
+export const useGiftOptionsSection = (props = {}) => {
+    const { getGiftOptionsConfigQuery } = mergeOperations(
+        DEFAULT_OPERATIONS,
+        props.operations
+    );
+
+    const { data, loading } = useQuery(getGiftOptionsConfigQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const storeConfig = data?.storeConfig || {};
+    const {
+        allow_order = '0',
+        allow_gift_receipt = '0',
+        allow_printed_card = '0'
+    } = storeConfig;
+    const isVisible =
+        allow_order === '1' ||
+        allow_gift_receipt === '1' ||
+        allow_printed_card === '1';
+
+    return {
+        giftOptionsConfigData: storeConfig,
+        isLoading: loading,
+        isVisible
+    };
+};
+
+/**
+ * Object type returned by the {@link useGiftOptionsSection} talon.
+ *
+ * @typedef {Object} GiftOptionsSectionProps
+ *
+ * @property {Object} giftOptionsConfigData Data returned from the `getGiftOptionsConfigQuery`.
+ * @property {boolean} isLoading True if the data is still loading.
+ * @property {boolean} isVisible True if the gift options section should be displayed.
+ */
+
+/**
+ * This is a type used by the {@link useGiftOptionsSection} talon.
+ *
+ * @typedef {Object} GiftOptionsSectionOperations
+ *
+ * @property {GraphQLAST} getGiftOptionsConfigQuery fetch the store configuration.
+ */

package/lib/talons/CartPage/PriceSummary/__fixtures__/priceSummary.js

@@ -5,7 +5,7 @@ export const priceSummaryResponse = {
                 value: 20
             },
             grand_total: {
-                value: 30
+                value: 40
             },
             discounts: [
                 {
@@ -20,7 +20,12 @@ export const priceSummaryResponse = {
                         value: 7
                     }
                 }
-            ]
+            ],
+            gift_options: {
+                printed_card: {
+                    value: 10
+                }
+            }
         },
         applied_gift_cards: [
             {

package/lib/talons/CartPage/PriceSummary/priceSummaryFragments.gql.js

@@ -2,6 +2,7 @@ import { gql } from '@apollo/client';
 
 import { DiscountSummaryFragment } from './discountSummary.gql';
 import { GiftCardSummaryFragment } from './queries/giftCardSummary';
+import { GiftOptionsSummaryFragment } from './queries/giftOptionsSummary';
 import { ShippingSummaryFragment } from './shippingSummary.gql';
 import { TaxSummaryFragment } from './taxSummary.gql';
 
@@ -31,11 +32,17 @@ export const PriceSummaryFragment = gql`
                 currency
                 value
             }
+            subtotal_including_tax {
+                currency
+                value
+            }
         }
         ...GiftCardSummaryFragment
+        ...GiftOptionsSummaryFragment
     }
     ${DiscountSummaryFragment}
     ${GiftCardSummaryFragment}
+    ${GiftOptionsSummaryFragment}
     ${GrandTotalFragment}
     ${ShippingSummaryFragment}
     ${TaxSummaryFragment}

package/lib/talons/CartPage/PriceSummary/queries/giftOptionsSummary.ce.js

@@ -0,0 +1,8 @@
+import { gql } from '@apollo/client';
+
+export const GiftOptionsSummaryFragment = gql`
+    fragment GiftOptionsSummaryFragment on Cart {
+        id
+        __typename
+    }
+`;

package/lib/talons/CartPage/PriceSummary/queries/giftOptionsSummary.ee.js

@@ -0,0 +1,15 @@
+import { gql } from '@apollo/client';
+
+export const GiftOptionsSummaryFragment = gql`
+    fragment GiftOptionsSummaryFragment on Cart {
+        id
+        prices {
+            gift_options {
+                printed_card {
+                    value
+                    currency
+                }
+            }
+        }
+    }
+`;