Add to Wishlist from PDP

packages/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js

@@ -1,11 +1,12 @@
 import { useCallback, useState, useMemo } from 'react';
-import { useMutation } from '@apollo/client';
+import { useMutation, useQuery } from '@apollo/client';
 import { useCartContext } from '@magento/peregrine/lib/context/cart';
 
 import { appendOptionsToPayload } from '@magento/peregrine/lib/util/appendOptionsToPayload';
 import { findMatchingVariant } from '@magento/peregrine/lib/util/findMatchingProductVariant';
 import { isProductConfigurable } from '@magento/peregrine/lib/util/isProductConfigurable';
 import { deriveErrorMessage } from '../../util/deriveErrorMessage';
+import { useUserContext } from '../../context/user';
 
 const INITIAL_OPTION_CODES = new Map();
 const INITIAL_OPTION_SELECTIONS = new Map();
@@ -150,6 +151,7 @@ const SUPPORTED_PRODUCT_TYPES = ['SimpleProduct', 'ConfigurableProduct'];
 /**
  * @param {GraphQLQuery} props.addConfigurableProductToCartMutation - configurable product mutation
  * @param {GraphQLQuery} props.addSimpleProductToCartMutation - configurable product mutation
+ * @param {GraphQLQuery} props.getWishlistConfig - queries for whether wishlists are enabled.
  * @param {Object} props.product - the product, see RootComponents/Product
  *
  * @returns {{
@@ -168,6 +170,7 @@ export const useProductFullDetail = props => {
     const {
         addConfigurableProductToCartMutation,
         addSimpleProductToCartMutation,
+        getWishlistConfig,
         product
     } = props;
 
@@ -178,6 +181,11 @@ export const useProductFullDetail = props => {
     );
 
     const [{ cartId }] = useCartContext();
+    const [{ isSignedIn }] = useUserContext();
+
+    const { data: storeConfigData } = useQuery(getWishlistConfig, {
+        fetchPolicy: 'cache-and-network'
+    });
 
     const [
         addConfigurableProductToCart,
@@ -221,6 +229,41 @@ export const useProductFullDetail = props => {
         [product, optionCodes, optionSelections]
     );
 
+    // The map of ids to values (and their uids)
+    // For example:
+    // { "179" => [{ uid: "abc", value_index: 1 }, { uid: "def", value_index: 2 }]}
+    const attributeIdToValuesMap = useMemo(
+        () =>
+            new Map(
+                product.configurable_options.map(option => [
+                    option.attribute_id,
+                    option.values
+                ])
+            ),
+        [product.configurable_options]
+    );
+
+    // An array of selected option uids. Useful for passing to mutations.
+    // For example:
+    // ["abc", "def"]
+    const selectedOptionsArray = useMemo(() => {
+        const selectedOptions = [];
+
+        optionSelections.forEach((value, key) => {
+            const values = attributeIdToValuesMap.get(key);
+
+            const selectedValue = values.find(
+                item => item.value_index === value
+            );
+
+            if (selectedValue) {
+                selectedOptions.push(selectedValue.uid);
+            }
+        });
+
+        return selectedOptions;
+    }, [attributeIdToValuesMap, optionSelections]);
+
     const handleAddToCart = useCallback(
         async formValues => {
             const { quantity } = formValues;
@@ -309,6 +352,20 @@ export const useProductFullDetail = props => {
         [errorAddingConfigurableProduct, errorAddingSimpleProduct]
     );
 
+    const wishlistItemOptions = useMemo(() => {
+        const options = {
+            // TODO: Does this need to reflect the quantity selected?
+            quantity: 1,
+            sku: product.sku
+        };
+
+        if (productType === 'ConfigurableProduct') {
+            options.selected_options = selectedOptionsArray;
+        }
+
+        return options;
+    }, [product, productType, selectedOptionsArray]);
+
     return {
         breadcrumbCategoryId,
         errorMessage: derivedErrorMessage,
@@ -319,7 +376,13 @@ export const useProductFullDetail = props => {
             isMissingOptions ||
             isAddConfigurableLoading ||
             isAddSimpleLoading,
+        isSignedIn,
         mediaGalleryEntries,
-        productDetails
+        shouldShowWishlistButton:
+            isSignedIn &&
+            storeConfigData &&
+            !!storeConfigData.storeConfig.magento_wishlist_general_is_enabled,
+        productDetails,
+        wishlistItemOptions
     };
 };

packages/peregrine/lib/talons/RootComponents/Product/productDetailFragment.gql.js

@@ -42,6 +42,7 @@ export const ProductDetailsFragment = gql`
                 id
                 label
                 values {
+                    uid
                     default_label
                     label
                     store_label

packages/peregrine/lib/talons/Wishlist/WishlistButton/useWishlistButton.ce.js

@@ -0,0 +1,47 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useMutation } from '@apollo/client';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+
+import DEFAULT_OPERATIONS from './wishlistButton.gql';
+
+export const useWishlistButton = props => {
+    const { itemOptions } = props;
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+
+    const { addProductToWishlistMutation } = operations;
+
+    const [isItemAdded, setIsItemAdded] = useState(false);
+
+    useEffect(() => {
+        if (itemOptions.selected_options) setIsItemAdded(false);
+    }, [itemOptions.selected_options]);
+
+    const [
+        addProductToWishlist,
+        { loading: isAddLoading, error: addProductError }
+    ] = useMutation(addProductToWishlistMutation);
+
+    const handleClick = useCallback(async () => {
+        try {
+            await addProductToWishlist({
+                variables: {
+                    // TODO: "0" will create a wishlist if doesn't exist, and add to one if it does, regardless of the user's single wishlist id. In 2.4.3 this will be "fixed" by removing the `wishlistId` param entirely because all users will have a wishlist created automatically in CE. So should only have to pass items and it will add correctly.
+                    wishlistId: '0',
+                    itemOptions
+                }
+            });
+            setIsItemAdded(true);
+        } catch (err) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.log(err);
+            }
+        }
+    }, [addProductToWishlist, itemOptions]);
+
+    return {
+        addProductError,
+        handleClick,
+        isDisabled: isItemAdded || isAddLoading,
+        isItemAdded
+    };
+};

packages/peregrine/lib/talons/Wishlist/WishlistButton/useWishlistButton.ee.js

@@ -0,0 +1,33 @@
+import { useCallback, useEffect, useState } from 'react';
+
+export const useWishlistButton = props => {
+    const { itemOptions } = props;
+
+    const [isItemAdded, setIsItemAdded] = useState(false);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    useEffect(() => {
+        if (itemOptions.selected_options) setIsItemAdded(false);
+    }, [itemOptions.selected_options]);
+
+    const handleButtonClick = useCallback(() => {
+        setIsModalOpen(true);
+    }, []);
+
+    const handleModalClose = useCallback(success => {
+        setIsModalOpen(false);
+
+        // only set item added true if someone calls handleModalClose(true)
+        if (success === true) {
+            setIsItemAdded(true);
+        }
+    }, []);
+
+    return {
+        handleButtonClick,
+        handleModalClose,
+        isDisabled: isItemAdded || isModalOpen,
+        isItemAdded,
+        isModalOpen
+    };
+};

packages/peregrine/lib/talons/Wishlist/WishlistButton/wishlistButton.gql.js

@@ -0,0 +1,21 @@
+import { gql } from '@apollo/client';
+
+export const ADD_TO_WISHLIST = gql`
+    mutation addProductToWishlist(
+        $wishlistId: ID!
+        $itemOptions: WishlistItemInput!
+    ) {
+        addProductsToWishlist(
+            wishlistId: $wishlistId
+            wishlistItems: [$itemOptions]
+        ) {
+            user_errors {
+                code
+                message
+            }
+        }
+    }
+`;
+export default {
+    addProductToWishlistMutation: ADD_TO_WISHLIST
+};

packages/peregrine/lib/talons/Wishlist/WishlistDialog/NewWishlistForm/newWishlistForm.gql.js

@@ -0,0 +1,19 @@
+import { gql } from '@apollo/client';
+
+/* https://devdocs.magento.com/guides/v2.4/graphql/mutations/create-wishlist.html */
+export const CREATE_WISHLIST = gql`
+    mutation createWishlist(
+        $name: String!
+        $visibility: WishlistVisibilityEnum!
+    ) {
+        createWishlist(input: { name: $name, visibility: $visibility }) {
+            wishlist {
+                id
+            }
+        }
+    }
+`;
+
+export default {
+    createWishlistMutation: CREATE_WISHLIST
+};

packages/peregrine/lib/talons/Wishlist/WishlistDialog/NewWishlistForm/useNewWishlistForm.js

@@ -0,0 +1,56 @@
+import { useCallback, useState } from 'react';
+import { useMutation } from '@apollo/client';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+
+import DEFAULT_OPERATIONS from './newWishlistForm.gql';
+import { useFormState } from 'informed';
+
+export const useNewWishlistForm = props => {
+    const { onCreateList, isAddLoading } = props;
+    const { values } = useFormState();
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const [
+        createList,
+        { loading: isCreateLoading, error: createWishlistError }
+    ] = useMutation(operations.createWishlistMutation);
+
+    const [isOpen, setIsOpen] = useState(false);
+
+    const handleNewListClick = useCallback(() => {
+        setIsOpen(true);
+    }, []);
+
+    const handleCancel = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+
+    const handleSave = useCallback(async () => {
+        try {
+            const { listname, visibility } = values;
+
+            const { data } = await createList({
+                variables: {
+                    name: listname,
+                    visibility
+                }
+            });
+            const wishlistId = data.createWishlist.wishlist.id;
+
+            onCreateList(wishlistId);
+        } catch (err) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.log(err);
+            }
+        }
+    }, [createList, onCreateList, values]);
+
+    return {
+        formErrors: [createWishlistError],
+        handleCancel,
+        handleNewListClick,
+        handleSave,
+        isOpen,
+        isSaveDisabled: isCreateLoading || isAddLoading
+    };
+};

packages/peregrine/lib/talons/Wishlist/WishlistDialog/useWishlistDialog.js

@@ -0,0 +1,55 @@
+import { useCallback } from 'react';
+import { useQuery, useMutation } from '@apollo/client';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+
+import DEFAULT_OPERATIONS from './wishlistDialog.gql';
+
+export const useWishlistDialog = props => {
+    const { itemOptions, onClose } = props;
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+
+    const { data: wishlistsData } = useQuery(operations.getWishlistsQuery, {
+        fetchPolicy: 'cache-and-network'
+    });
+
+    const [
+        addProductToWishlist,
+        { loading: isAddLoading, error: addProductError }
+    ] = useMutation(operations.addProductToWishlistMutation);
+
+    // enable_multiple_wishlists is a string "1" or "0". See documentation here:
+    // https://devdocs.magento.com/guides/v2.4/graphql/mutations/create-wishlist.html
+    const canCreateWishlist =
+        wishlistsData &&
+        !!wishlistsData.storeConfig.enable_multiple_wishlists &&
+        wishlistsData.storeConfig.maximum_number_of_wishlists >
+            wishlistsData.customer.wishlists.length;
+
+    const handleAddToWishlist = useCallback(
+        async wishlistId => {
+            console.log('adding to id', wishlistId, itemOptions);
+            try {
+                await addProductToWishlist({
+                    variables: {
+                        wishlistId,
+                        itemOptions
+                    }
+                });
+                onClose(true);
+            } catch (err) {
+                if (process.env.NODE_ENV !== 'production') {
+                    console.log(err);
+                }
+            }
+        },
+        [addProductToWishlist, itemOptions, onClose]
+    );
+
+    return {
+        formErrors: [addProductError],
+        canCreateWishlist,
+        handleAddToWishlist,
+        isAddLoading,
+        wishlistsData
+    };
+};