@magento/peregrine 15.5.2 → 15.6.2-alpha12

package/lib/context/cart.js

@@ -1,15 +1,5 @@
-import React, {
-    createContext,
-    useContext,
-    useEffect,
-    useMemo,
-    useCallback
-} from 'react';
+import React, { createContext, useContext, useMemo, useCallback } from 'react';
 import { connect } from 'react-redux';
-import { useMutation } from '@apollo/client';
-import gql from 'graphql-tag';
-
-import { useAwaitQuery } from '@magento/peregrine/lib/hooks/useAwaitQuery';
 import actions from '../store/actions/cart/actions';
 import * as asyncActions from '../store/actions/cart/asyncActions';
 import bindActionCreators from '../util/bindActionCreators';
@@ -62,9 +52,6 @@ const CartContextProvider = props => {
         return [derivedCartState, cartApi];
     }, [cartApi, cartState, derivedDetails]);
 
-    const [fetchCartId] = useMutation(CREATE_CART_MUTATION);
-    const fetchCartDetails = useAwaitQuery(CART_DETAILS_QUERY);
-
     // Storage listener to force a state update if cartId changes from another browser tab.
     const storageListener = useCallback(() => {
         const storage = new BrowserPersistence();
@@ -77,14 +64,6 @@ const CartContextProvider = props => {
 
     useEventListener(globalThis, 'storage', storageListener);
 
-    useEffect(() => {
-        // cartApi.getCartDetails initializes the cart if there isn't one.
-        cartApi.getCartDetails({
-            fetchCartId,
-            fetchCartDetails
-        });
-    }, [cartApi, fetchCartDetails, fetchCartId]);
-
     return (
         <CartContext.Provider value={contextValue}>
             {children}
@@ -105,24 +84,3 @@ export default connect(
 )(CartContextProvider);
 
 export const useCartContext = () => useContext(CartContext);
-
-/**
- * We normally do not keep GQL queries in Peregrine. All components should pass
- * queries to talons/hooks. This is an exception to the rule because it would
- * be unecessarily complex to pass these queries to the context provider.
- */
-const CREATE_CART_MUTATION = gql`
-    mutation createCart {
-        cartId: createEmptyCart
-    }
-`;
-
-const CART_DETAILS_QUERY = gql`
-    query checkUserIsAuthed($cartId: String!) {
-        cart(cart_id: $cartId) {
-            # The purpose of this query is to check that the user is authorized
-            # to query on the current cart. Just fetch "id" to keep it small.
-            id
-        }
-    }
-`;

package/lib/hooks/useCustomerWishlistSkus/customerWishlist.gql.ce.js

@@ -7,7 +7,7 @@ export const GET_WISHLIST_ITEMS = gql`
         customer {
             wishlists {
                 id
-                items_v2(currentPage: $currentPage, pageSize: 10) {
+                items_v2(currentPage: $currentPage, pageSize: 20) {
                     items {
                         id
                         # eslint-disable-next-line @graphql-eslint/require-id-when-available

package/lib/hooks/useCustomerWishlistSkus/useCustomerWishlistSkus.js

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { useQuery } from '@apollo/client';
 import { useUserContext } from '../../context/user';
 import mergeOperations from '../../util/shallowMerge';
@@ -16,19 +15,16 @@ export const useCustomerWishlistSkus = (props = {}) => {
     const operations = mergeOperations(defaultOperations, props.operations);
     const [{ isSignedIn }] = useUserContext();
 
-    const [currentPage, setCurrentPage] = useState(1);
-
     const {
         client,
         data: { customerWishlistProducts }
     } = useQuery(operations.getProductsInWishlistsQuery);
 
     useQuery(operations.getWishlistItemsQuery, {
-        fetchPolicy: 'cache-and-network',
+        fetchPolicy: 'cache-first',
         onCompleted: data => {
             const itemsToAdd = new Set();
             const wishlists = data.customer.wishlists;
-            let shouldFetchMore = false;
             wishlists.map(wishlist => {
                 const items = wishlist.items_v2.items;
                 items.map(item => {
@@ -37,12 +33,6 @@ export const useCustomerWishlistSkus = (props = {}) => {
                         itemsToAdd.add(sku);
                     }
                 });
-
-                const pageInfo = wishlist.items_v2.page_info;
-
-                if (pageInfo.total_pages > pageInfo.current_page) {
-                    shouldFetchMore = true;
-                }
             });
 
             if (itemsToAdd.size) {
@@ -56,14 +46,10 @@ export const useCustomerWishlistSkus = (props = {}) => {
                     }
                 });
             }
-
-            if (shouldFetchMore) {
-                setCurrentPage(current => ++current);
-            }
         },
         skip: !isSignedIn,
         variables: {
-            currentPage
+            currentPage: 1
         }
     });
 };

package/lib/store/middleware/auth.js

@@ -64,11 +64,11 @@ const scheduleSignOut = store => next => action => {
             intervals.set(parsedValue, intervalId);
         }
     } else if (isSigningOut(action.type)) {
-        for (const timeoutId of timeouts) {
+        for (const [, timeoutId] of timeouts) {
             clearTimeout(timeoutId);
         }
 
-        for (const intervalId of intervals) {
+        for (const [, intervalId] of intervals) {
             clearInterval(intervalId);
         }
 

package/lib/talons/AddToCartDialog/useAddToCartDialog.js

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useMutation, useQuery } from '@apollo/client';
+import { useMutation, useQuery, gql } from '@apollo/client';
 
 import mergeOperations from '../../util/shallowMerge';
 import { useCartContext } from '../../context/cart';
@@ -7,6 +7,8 @@ import defaultOperations from './addToCartDialog.gql';
 import { useEventingContext } from '../../context/eventing';
 import { isProductConfigurable } from '@magento/peregrine/lib/util/isProductConfigurable';
 import { getOutOfStockVariants } from '@magento/peregrine/lib/util/getOutOfStockVariants';
+import { useAwaitQuery } from '@magento/peregrine/lib/hooks/useAwaitQuery';
+import BrowserPersistence from '../../util/simplePersistence';
 
 export const useAddToCartDialog = props => {
     const { item, onClose } = props;
@@ -25,7 +27,51 @@ export const useAddToCartDialog = props => {
         new Map()
     );
 
-    const [{ cartId }] = useCartContext();
+    //const [{ cartId }] = useCartContext();
+
+    const [cartState, cartApi] = useCartContext();
+
+    const { cartId } = cartState;
+
+    // cart creation logic
+
+    const CREATE_CART_MUTATION = gql`
+        mutation createCart {
+            cartId: createEmptyCart
+        }
+    `;
+
+    const CART_DETAILS_QUERY = gql`
+        query checkUserIsAuthed($cartId: String!) {
+            cart(cart_id: $cartId) {
+                id
+            }
+        }
+    `;
+
+    const [fetchCartId] = useMutation(CREATE_CART_MUTATION);
+
+    const fetchCartDetails = useAwaitQuery(CART_DETAILS_QUERY);
+
+    const ensureCartId = useCallback(async () => {
+        let newCartId = cartId;
+
+        if (!newCartId) {
+            await cartApi.getCartDetails({
+                fetchCartId,
+
+                fetchCartDetails
+            });
+
+            newCartId = new BrowserPersistence().getItem('cartId');
+
+            if (!newCartId) {
+                throw new Error('Failed to create a new cart');
+            }
+        }
+
+        return newCartId;
+    }, [cartId, cartApi, fetchCartId, fetchCartDetails]);
 
     const optionCodes = useMemo(() => {
         const optionCodeMap = new Map();
@@ -112,7 +158,9 @@ export const useAddToCartDialog = props => {
             fetchPolicy: 'cache-and-network',
             nextFetchPolicy: 'cache-first',
             variables: {
-                configurableOptionValues: selectedOptionsArray,
+                configurableOptionValues: selectedOptionsArray.length
+                    ? selectedOptionsArray
+                    : null,
                 sku
             },
             skip: !sku
@@ -127,6 +175,7 @@ export const useAddToCartDialog = props => {
     useEffect(() => {
         if (data) {
             const product = data.products.items[0];
+            console.log('useAddToCartDialog.js - data', data);
             const {
                 media_gallery: selectedProductMediaGallery,
                 variant: selectedVariant
@@ -181,12 +230,14 @@ export const useAddToCartDialog = props => {
     );
 
     const handleAddToCart = useCallback(async () => {
+        //console.log("useAddToCartDialog.js handleAddToCart is called for ",cartId);
         try {
+            const ensuredCartId = await ensureCartId();
             const quantity = 1;
 
             await addProductToCart({
                 variables: {
-                    cartId,
+                    cartId: ensuredCartId,
                     cartItem: {
                         quantity,
                         selected_options: selectedOptionsArray,
@@ -207,7 +258,7 @@ export const useAddToCartDialog = props => {
             dispatch({
                 type: 'CART_ADD_ITEM',
                 payload: {
-                    cartId,
+                    cartId: ensuredCartId,
                     sku: item.product.sku,
                     name: item.product.name,
                     pricing: item.product.price,
@@ -225,7 +276,7 @@ export const useAddToCartDialog = props => {
         }
     }, [
         addProductToCart,
-        cartId,
+        ensureCartId,
         currentDiscount,
         currentPrice,
         dispatch,

package/lib/talons/App/useApp.js

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import errorRecord from '@magento/peregrine/lib/util/createErrorRecord';
+import { useCustomerWishlistSkus } from '@magento/peregrine/lib/hooks/useCustomerWishlistSkus/useCustomerWishlistSkus';
 import { useAppContext } from '@magento/peregrine/lib/context/app';
 
 const dismissers = new WeakMap();
@@ -41,6 +42,8 @@ export const useApp = props => {
     } = props;
     const history = useHistory();
 
+    useCustomerWishlistSkus();
+
     const reload = useCallback(() => {
         if (process.env.NODE_ENV !== 'development') {
             history.go(0);

package/lib/talons/CartPage/ProductListing/EditModal/useProductForm.js

@@ -202,19 +202,31 @@ export const useProductForm = props => {
 
     const outOfStockVariants = useMemo(() => {
         if (cartItem && configItem) {
-            const product = cartItem.product;
+            const product = configItem;
+            const currentSelections = new Map();
+
+            cartItem.configurable_options.forEach(option => {
+                currentSelections.set(String(option.id), option.value_id);
+            });
+
+            optionSelections.forEach((value, key) => {
+                currentSelections.set(key, value);
+            });
+
             return getOutOfStockVariantsWithInitialSelection(
                 product,
                 configurableOptionCodes,
-                multipleOptionSelections,
+                currentSelections,
                 configItem,
                 isOutOfStockProductDisplayed
             );
         }
+
+        return [];
     }, [
         cartItem,
         configurableOptionCodes,
-        multipleOptionSelections,
+        optionSelections,
         configItem,
         isOutOfStockProductDisplayed
     ]);

package/lib/talons/FilterSidebar/useFilterSidebar.js

@@ -182,10 +182,22 @@ export const useFilterSidebar = props => {
     }, [handleClose]);
 
     const handleReset = useCallback(() => {
-        //filterApi.clear();
-        //setIsApplying(true);
-        history.replace({ search: 'page=1' });
-    }, [history]);
+        filterApi.clear();
+
+        const params = new URLSearchParams(search);
+        const filterKeys = [];
+        for (const key of params.keys()) {
+            if (key.endsWith('[filter]')) {
+                filterKeys.push(key);
+            }
+        }
+        for (const key of filterKeys) {
+            params.delete(key);
+        }
+
+        const newSearch = `?${params.toString()}`;
+        history.replace({ pathname, search: newSearch });
+    }, [filterApi, search, history, pathname]);
 
     const handleKeyDownActions = useCallback(
         event => {

package/lib/talons/Gallery/useAddToCartButton.js

@@ -1,11 +1,13 @@
 import { useCallback, useState } from 'react';
-import { useMutation } from '@apollo/client';
+import { useMutation, gql } from '@apollo/client';
 import { useHistory } from 'react-router-dom';
 
 import { useCartContext } from '../../context/cart';
 import { useEventingContext } from '../../context/eventing';
 import resourceUrl from '../../util/makeUrl';
 import operations from './addToCart.gql';
+import { useAwaitQuery } from '@magento/peregrine/lib/hooks/useAwaitQuery';
+import BrowserPersistence from '../../util/simplePersistence';
 
 /**
  * @param {String} props.item.uid - uid of item
@@ -29,6 +31,20 @@ const UNSUPPORTED_PRODUCT_TYPES = [
     'DownloadableProduct'
 ];
 
+const CREATE_CART_MUTATION = gql`
+    mutation createCart {
+        cartId: createEmptyCart
+    }
+`;
+
+const CART_DETAILS_QUERY = gql`
+    query checkUserIsAuthed($cartId: String!) {
+        cart(cart_id: $cartId) {
+            id
+        }
+    }
+`;
+
 export const useAddToCartButton = props => {
     const { item, urlSuffix } = props;
 
@@ -36,6 +52,12 @@ export const useAddToCartButton = props => {
 
     const [isLoading, setIsLoading] = useState(false);
 
+    const [cartState, cartApi] = useCartContext();
+    const { cartId } = cartState;
+
+    const [fetchCartId] = useMutation(CREATE_CART_MUTATION);
+    const fetchCartDetails = useAwaitQuery(CART_DETAILS_QUERY);
+
     const isInStock = item.stock_status === 'IN_STOCK';
 
     const productType = item
@@ -52,21 +74,42 @@ export const useAddToCartButton = props => {
 
     const history = useHistory();
 
-    const [{ cartId }] = useCartContext();
-
     const [addToCart] = useMutation(operations.ADD_ITEM);
 
+    // helper: ensure we have a valid cartId before adding
+    const ensureCartId = useCallback(async () => {
+        let newCartId = cartId;
+        if (!newCartId) {
+            console.log('No cart ID found, creating a new cart...');
+            await cartApi.getCartDetails({
+                fetchCartId,
+                fetchCartDetails
+            });
+
+            newCartId = new BrowserPersistence().getItem('cartId');
+
+            if (!newCartId) {
+                throw new Error('Failed to create a new cart');
+            }
+        }
+        return newCartId;
+    }, [cartId, cartApi, fetchCartId, fetchCartDetails]);
+
     const handleAddToCart = useCallback(async () => {
         try {
             if (productType === 'SimpleProduct' || productType === 'simple') {
                 setIsLoading(true);
 
                 const quantity = 1;
+                let newCartId;
 
                 if (item.uid) {
+                    // ensure cart right before addToCart
+                    newCartId = await ensureCartId();
+
                     await addToCart({
                         variables: {
-                            cartId,
+                            cartId: newCartId,
                             cartItem: {
                                 quantity,
                                 entered_options: [
@@ -80,9 +123,12 @@ export const useAddToCartButton = props => {
                         }
                     });
                 } else {
+                    // ensure cart right before addToCart
+                    newCartId = await ensureCartId();
+
                     await addToCart({
                         variables: {
-                            cartId,
+                            cartId: newCartId,
                             cartItem: {
                                 quantity,
                                 sku: item.sku
@@ -94,7 +140,7 @@ export const useAddToCartButton = props => {
                 dispatch({
                     type: 'CART_ADD_ITEM',
                     payload: {
-                        cartId,
+                        cartId: newCartId,
                         sku: item.sku,
                         name: item.name,
                         pricing: {
@@ -130,7 +176,15 @@ export const useAddToCartButton = props => {
         } catch (error) {
             console.error(error);
         }
-    }, [productType, addToCart, cartId, item, dispatch, history, urlSuffix]);
+    }, [
+        productType,
+        addToCart,
+        item,
+        dispatch,
+        history,
+        urlSuffix,
+        ensureCartId
+    ]);
 
     return {
         handleAddToCart,

package/lib/talons/Gallery/useGallery.js

@@ -1,15 +1,11 @@
 import { useQuery } from '@apollo/client';
 
-import { useCustomerWishlistSkus } from '../../hooks/useCustomerWishlistSkus/useCustomerWishlistSkus';
-
 import mergeOperations from '../../util/shallowMerge';
 import defaultOperations from './gallery.gql';
 
 export const useGallery = (props = {}) => {
     const operations = mergeOperations(defaultOperations, props.operations);
 
-    useCustomerWishlistSkus();
-
     const { data: storeConfigData } = useQuery(operations.getStoreConfigQuery, {
         fetchPolicy: 'cache-and-network'
     });

package/lib/talons/MagentoRoute/useMagentoRoute.js

@@ -71,8 +71,8 @@ export const useMagentoRoute = (props = {}) => {
                 });
 
                 if (isMounted) {
-                    setRouteData(data);
                     fetchedPathname.current = pathname;
+                    setRouteData(data);
                 }
             } catch (error) {
                 if (isMounted) {

package/lib/talons/ProductFullDetail/useProductFullDetail.js

@@ -1,6 +1,6 @@
 import { useCallback, useState, useMemo } from 'react';
 import { useIntl } from 'react-intl';
-import { useMutation, useQuery } from '@apollo/client';
+import { useMutation, useQuery, gql } from '@apollo/client';
 import { useCartContext } from '@magento/peregrine/lib/context/cart';
 import { useUserContext } from '@magento/peregrine/lib/context/user';
 
@@ -13,6 +13,8 @@ import mergeOperations from '../../util/shallowMerge';
 import defaultOperations from './productFullDetail.gql';
 import { useEventingContext } from '../../context/eventing';
 import { getOutOfStockVariants } from '@magento/peregrine/lib/util/getOutOfStockVariants';
+import { useAwaitQuery } from '@magento/peregrine/lib/hooks/useAwaitQuery';
+import BrowserPersistence from '../../util/simplePersistence';
 
 const INITIAL_OPTION_CODES = new Map();
 const INITIAL_OPTION_SELECTIONS = new Map();
@@ -257,7 +259,9 @@ export const useProductFullDetail = props => {
 
     const isSupportedProductType = isSupported(productType);
 
-    const [{ cartId }] = useCartContext();
+    //const [{ cartId }] = useCartContext();
+    const [cartState, cartApi] = useCartContext();
+    const { cartId } = cartState;
     const [{ isSignedIn }] = useUserContext();
     const { formatMessage } = useIntl();
 
@@ -411,6 +415,42 @@ export const useProductFullDetail = props => {
         return selectedOptions;
     }, [attributeIdToValuesMap, optionSelections]);
 
+    // Cart creation wiring (same approach as useAddToCartButton.js)
+    const CREATE_CART_MUTATION = gql`
+        mutation createCart {
+            cartId: createEmptyCart
+        }
+    `;
+
+    const CART_DETAILS_QUERY = gql`
+        query checkUserIsAuthed($cartId: String!) {
+            cart(cart_id: $cartId) {
+                id
+            }
+        }
+    `;
+
+    const [fetchCartId] = useMutation(CREATE_CART_MUTATION);
+    const fetchCartDetails = useAwaitQuery(CART_DETAILS_QUERY);
+
+    const ensureCartId = useCallback(async () => {
+        let newCartId = cartId;
+        if (!newCartId) {
+            await cartApi.getCartDetails({
+                fetchCartId,
+                fetchCartDetails
+            });
+
+            newCartId = new BrowserPersistence().getItem('cartId');
+            if (!newCartId) {
+                throw new Error('Failed to create a new cart');
+            }
+        }
+        return newCartId;
+    }, [cartId, cartApi, fetchCartId, fetchCartDetails]);
+
+    // Cart Creation ends
+
     const handleAddToCart = useCallback(
         async formValues => {
             const { quantity } = formValues;
@@ -435,7 +475,7 @@ export const useProductFullDetail = props => {
 
                 if (isSupportedProductType) {
                     const variables = {
-                        cartId,
+                        cartId, // will be replaced by ensured cart id below
                         parentSku: payload.parentSku,
                         product: payload.item,
                         quantity: payload.quantity,
@@ -484,6 +524,10 @@ export const useProductFullDetail = props => {
                 }
 
                 try {
+                    //Ensure cart exists *right before* mutation runs
+                    const ensuredCartId = await ensureCartId();
+                    variables.cartId = ensuredCartId;
+
                     await addProductToCart({ variables });
 
                     const selectedOptionsLabels =
@@ -498,7 +542,7 @@ export const useProductFullDetail = props => {
                     dispatch({
                         type: 'CART_ADD_ITEM',
                         payload: {
-                            cartId,
+                            cartId: ensuredCartId,
                             sku: product.sku,
                             name: product.name,
                             pricing: product.price,
@@ -527,7 +571,8 @@ export const useProductFullDetail = props => {
             product,
             productPrice,
             productType,
-            selectedOptionsArray
+            selectedOptionsArray,
+            ensureCartId
         ]
     );
 

package/lib/talons/SignIn/useSignIn.js

@@ -98,6 +98,16 @@ export const useSignIn = props => {
             try {
                 // Get source cart id (guest cart id).
                 const sourceCartId = cartId;
+                let hasSourceItems = false;
+
+                if (sourceCartId !== null) {
+                    const { data: sourceCartData } = await fetchCartDetails({
+                        variables: { cartId: sourceCartId },
+                        fetchPolicy: 'network-only'
+                    });
+
+                    hasSourceItems = sourceCartData?.cart?.items?.length > 0;
+                }
 
                 // Get recaptchaV3 data for login
                 const recaptchaData = await generateReCaptchaData();
@@ -127,14 +137,30 @@ export const useSignIn = props => {
                 });
                 const destinationCartId = await retrieveCartId();
 
-                // Merge the guest cart into the customer cart.
-                await mergeCarts({
-                    variables: {
-                        destinationCartId,
-                        sourceCartId
-                    }
+                const { data: destCartData } = await fetchCartDetails({
+                    variables: { cartId: destinationCartId },
+                    fetchPolicy: 'network-only'
                 });
 
+                const hasDestinationItems =
+                    destCartData?.cart?.items?.length > 0;
+
+                if (sourceCartId !== null && hasSourceItems) {
+                    console.log('Merging guest cart into customer cart');
+                    // Merge the guest cart into the customer cart.
+                    await mergeCarts({
+                        variables: {
+                            destinationCartId,
+                            sourceCartId
+                        }
+                    });
+                } else if (!hasSourceItems && !hasDestinationItems) {
+                    console.log('Both carts empty → clearing local cart');
+                    // Clear all cart/customer data from cache and redux.
+                    await apolloClient.clearCacheData(apolloClient, 'cart');
+                    await removeCart();
+                }
+
                 // Ensure old stores are updated with any new data.
 
                 await getUserDetails({ fetchUserDetails });
@@ -150,7 +176,9 @@ export const useSignIn = props => {
                     }
                 });
 
-                getCartDetails({ fetchCartId, fetchCartDetails });
+                if (sourceCartId !== null && hasSourceItems) {
+                    getCartDetails({ fetchCartId, fetchCartDetails });
+                }
 
                 if (
                     userOnOrderSuccess &&

package/lib/talons/WishlistPage/useWishlist.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useLazyQuery } from '@apollo/client';
 import mergeOperations from '../../util/shallowMerge';
 import defaultOperations from './wishlist.gql';
@@ -17,15 +17,17 @@ export const useWishlist = (props = {}) => {
     const [page, setPage] = useState(1);
     const [isOpen, setIsOpen] = useState(!isCollapsed);
     const [isFetchingMore, setIsFetchingMore] = useState(false);
+    const hasFetchedRef = useRef(false);
 
     const [fetchWishlistItems, queryResult] = useLazyQuery(
         operations.getCustomerWishlistItems,
         {
-            fetchPolicy: 'cache-and-network',
+            fetchPolicy: 'cache-first',
             nextFetchPolicy: 'cache-first',
             variables: {
                 id,
-                currentPage: 1
+                currentPage: 1,
+                pageSize: 20
             }
         }
     );
@@ -38,28 +40,84 @@ export const useWishlist = (props = {}) => {
     const handleLoadMore = useCallback(async () => {
         setIsFetchingMore(true);
         const currentPage = page + 1;
-        await fetchMore({
-            variables: {
-                id,
-                currentPage
-            }
-        });
 
-        setPage(currentPage);
-        setIsFetchingMore(false);
+        try {
+            await fetchMore({
+                variables: {
+                    id,
+                    currentPage,
+                    pageSize: 20
+                },
+                updateQuery: (prevResult, { fetchMoreResult }) => {
+                    if (!fetchMoreResult) {
+                        return prevResult;
+                    }
+
+                    const prevWishlist = prevResult.customer.wishlist_v2;
+                    const newWishlist = fetchMoreResult.customer.wishlist_v2;
+
+                    if (prevWishlist.id !== newWishlist.id) {
+                        return prevResult;
+                    }
+
+                    const prevItems = prevWishlist.items_v2.items || [];
+                    const newItems = newWishlist.items_v2.items || [];
+
+                    const existingIds = new Set(prevItems.map(item => item.id));
+                    const uniqueNewItems = newItems.filter(
+                        item => !existingIds.has(item.id)
+                    );
+
+                    return {
+                        ...prevResult,
+                        customer: {
+                            ...prevResult.customer,
+                            wishlist_v2: {
+                                ...prevWishlist,
+                                items_v2: {
+                                    ...prevWishlist.items_v2,
+                                    items: [...prevItems, ...uniqueNewItems]
+                                }
+                            }
+                        }
+                    };
+                }
+            });
+
+            setPage(currentPage);
+        } catch (error) {
+            console.error('Error loading more wishlist items:', error);
+        } finally {
+            setIsFetchingMore(false);
+        }
     }, [id, fetchMore, page]);
 
     useEffect(() => {
-        setPage(1);
-        if (itemsCount >= 1 && isOpen === true && !data) {
+        if (itemsCount >= 1 && isOpen === true && !hasFetchedRef.current) {
+            hasFetchedRef.current = true;
             fetchWishlistItems();
         }
-    }, [itemsCount, isOpen, fetchWishlistItems, data]);
+    }, [itemsCount, isOpen, fetchWishlistItems]);
+
+    const items = useMemo(() => {
+        if (!data || !data.customer || !data.customer.wishlist_v2) {
+            return [];
+        }
+
+        const allItems = data.customer.wishlist_v2.items_v2?.items || [];
+
+        const uniqueItems = [];
+        const seenIds = new Set();
+
+        for (const item of allItems) {
+            if (!seenIds.has(item.id)) {
+                seenIds.add(item.id);
+                uniqueItems.push(item);
+            }
+        }
 
-    const items =
-        data && data.customer.wishlist_v2.items_v2.items
-            ? data.customer.wishlist_v2.items_v2.items
-            : [];
+        return uniqueItems;
+    }, [data]);
 
     return {
         handleContentToggle,

package/lib/talons/WishlistPage/useWishlistItem.js

@@ -1,7 +1,9 @@
 import { useCallback, useMemo, useState } from 'react';
-import { useMutation } from '@apollo/client';
+import { gql, useMutation } from '@apollo/client';
 
 import { useCartContext } from '@magento/peregrine/lib/context/cart';
+import { useAwaitQuery } from '@magento/peregrine/lib/hooks/useAwaitQuery';
+import BrowserPersistence from '../../util/simplePersistence';
 import mergeOperations from '../../util/shallowMerge';
 import defaultOperations from './wishlistItem.gql';
 import { useEventingContext } from '../../context/eventing';
@@ -18,6 +20,20 @@ const mergeSupportedProductTypes = (supportedProductTypes = []) => {
     return newSupportedProductTypes;
 };
 
+const CREATE_CART_MUTATION = gql`
+    mutation createCart {
+        cartId: createEmptyCart
+    }
+`;
+
+const CART_DETAILS_QUERY = gql`
+    query getCart($cartId: String!) {
+        cart(cart_id: $cartId) {
+            id
+        }
+    }
+`;
+
 /**
  * @function
  *
@@ -61,7 +77,8 @@ export const useWishlistItem = props => {
         removeProductsFromWishlistMutation
     } = operations;
 
-    const [{ cartId }] = useCartContext();
+    //const [{ cartId }] = useCartContext();
+    const [{ cartId: existingCartId }, { getCartDetails }] = useCartContext();
 
     const [isRemovalInProgress, setIsRemovalInProgress] = useState(false);
 
@@ -119,18 +136,26 @@ export const useWishlistItem = props => {
         return item;
     }, [configurableOptions, selectedConfigurableOptions, sku]);
 
+    // const [
+    //     addWishlistItemToCart,
+    //     {
+    //         error: addWishlistItemToCartError,
+    //         loading: addWishlistItemToCartLoading
+    //     }
+    // ] = useMutation(addWishlistItemToCartMutation, {
+    //     variables: {
+    //         cartId,
+    //         cartItem
+    //     }
+    // });
+
     const [
         addWishlistItemToCart,
         {
             error: addWishlistItemToCartError,
             loading: addWishlistItemToCartLoading
         }
-    ] = useMutation(addWishlistItemToCartMutation, {
-        variables: {
-            cartId,
-            cartItem
-        }
-    });
+    ] = useMutation(addWishlistItemToCartMutation);
 
     const [removeProductsFromWishlist] = useMutation(
         removeProductsFromWishlistMutation,
@@ -169,13 +194,41 @@ export const useWishlistItem = props => {
         }
     );
 
+    const [fetchCartId] = useMutation(CREATE_CART_MUTATION);
+    const fetchCartDetails = useAwaitQuery(CART_DETAILS_QUERY);
+
+    const ensureCartId = useCallback(async () => {
+        let newCartId = existingCartId;
+
+        if (!newCartId) {
+            await getCartDetails({
+                fetchCartId,
+                fetchCartDetails
+            });
+
+            newCartId = new BrowserPersistence().getItem('cartId');
+
+            if (!newCartId) {
+                throw new Error('Failed to create a new cart');
+            }
+        }
+        return newCartId;
+    }, [existingCartId, getCartDetails, fetchCartId, fetchCartDetails]);
+
     const handleAddToCart = useCallback(async () => {
         if (
             configurableOptions.length === 0 ||
             selectedConfigurableOptions.length === configurableOptions.length
         ) {
             try {
-                await addWishlistItemToCart();
+                const ensuredCartId = await ensureCartId();
+                //await addWishlistItemToCart();
+                await addWishlistItemToCart({
+                    variables: {
+                        cartId: ensuredCartId,
+                        cartItem
+                    }
+                });
 
                 const selectedOptionsLabels =
                     selectedConfigurableOptions?.length > 0
@@ -190,7 +243,7 @@ export const useWishlistItem = props => {
                 dispatch({
                     type: 'CART_ADD_ITEM',
                     payload: {
-                        cartId,
+                        cartId: ensuredCartId,
                         sku: item.product.sku,
                         name: item.product.name,
                         pricing: item.product.price,
@@ -215,9 +268,11 @@ export const useWishlistItem = props => {
         }
     }, [
         addWishlistItemToCart,
-        cartId,
+        //cartId,
+        cartItem,
         configurableOptions.length,
         dispatch,
+        ensureCartId,
         item,
         onOpenAddToCartDialog,
         selectedConfigurableOptions

package/lib/talons/WishlistPage/wishlist.gql.js

@@ -17,12 +17,12 @@ export const GET_CUSTOMER_WISHLIST = gql`
 `;
 
 export const GET_CUSTOMER_WISHLIST_ITEMS = gql`
-    query getCustomerWishlist($id: ID!, $currentPage: Int) {
+    query getCustomerWishlist($id: ID!, $currentPage: Int, $pageSize: Int) {
         # eslint-disable-next-line @graphql-eslint/require-id-when-available
         customer {
             wishlist_v2(id: $id) {
                 id
-                items_v2(currentPage: $currentPage) {
+                items_v2(currentPage: $currentPage, pageSize: $pageSize) {
                     items {
                         id
                         ...WishlistItemFragment

package/lib/util/getOutOfStockVariants.js

@@ -18,8 +18,6 @@ export const getOutOfStockVariants = (
     isOutOfStockProductDisplayed
 ) => {
     const isConfigurable = isProductConfigurable(product);
-    const singeOptionSelected =
-        singleOptionSelection && singleOptionSelection.size === 1;
     const outOfStockIndexes = [];
 
     if (isConfigurable) {
@@ -32,6 +30,14 @@ export const getOutOfStockVariants = (
             ? variants
             : variantsIfOutOfStockProductsNotDisplayed;
 
+        if (!variants || variants.length === 0) {
+            return [];
+        }
+
+        if (!variants[0] || !variants[0].attributes) {
+            return [];
+        }
+
         const numberOfVariations = variants[0].attributes.length;
 
         // If only one pair of variations, display out of stock variations before option selection
@@ -45,18 +51,14 @@ export const getOutOfStockVariants = (
             );
             return outOfStockIndex;
         } else {
-            if (singeOptionSelected) {
-                const optionsSelected =
-                    Array.from(optionSelections.values()).filter(
-                        value => !!value
-                    ).length > 1;
-                const selectedIndexes = Array.from(
-                    optionSelections.values()
-                ).flat();
+            const selectedIndexes = Array.from(
+                optionSelections.values()
+            ).filter(value => !!value);
 
+            if (selectedIndexes.length > 0) {
                 const items = findAllMatchingVariants({
                     optionCodes,
-                    singleOptionSelection,
+                    singleOptionSelection: optionSelections,
                     variants
                 });
                 const outOfStockItemsIndexes = getOutOfStockIndexes(items);
@@ -70,15 +72,14 @@ export const getOutOfStockVariants = (
                     const differentIndexes = indexes.filter(
                         num => !selectedIndexes.includes(num)
                     );
-                    if (sameIndexes.length >= optionCodes.size - 1) {
+                    if (sameIndexes.length > 0) {
                         outOfStockIndexes.push(differentIndexes);
                     }
                 }
                 // Display all possible out of stock swatches with current selections, when all groups of swatches are selected
                 if (
-                    optionsSelected &&
-                    !selectedIndexes.includes(undefined) &&
-                    selectedIndexes.length === optionCodes.size
+                    selectedIndexes.length === optionCodes.size &&
+                    !selectedIndexes.includes(undefined)
                 ) {
                     const selectedIndexesCombinations = getCombinations(
                         selectedIndexes,
@@ -96,7 +97,7 @@ export const getOutOfStockVariants = (
                             )
                         );
                         const curItems = findAllMatchingVariants({
-                            optionCodes: optionCodes,
+                            optionCodes,
                             singleOptionSelection: curOption,
                             variants: variants
                         });
@@ -107,8 +108,11 @@ export const getOutOfStockVariants = (
                     }
                     return oosIndexes;
                 }
-                return outOfStockIndexes;
+            } else {
+                return [];
             }
+
+            return outOfStockIndexes;
         }
     }
     return [];

package/lib/util/getOutOfStockVariantsWithInitialSelection.js

@@ -7,6 +7,8 @@ import { getOutOfStockIndexes } from '@magento/peregrine/lib/util/getOutOfStockI
 import { createProductVariants } from '@magento/peregrine/lib/util/createProductVariants';
 import { getCombinations } from '@magento/peregrine/lib/util/getCombinations';
 
+const OUT_OF_STOCK_CODE = 'OUT_OF_STOCK';
+
 export const getOutOfStockVariantsWithInitialSelection = (
     product,
     configurableOptionCodes,
@@ -14,50 +16,100 @@ export const getOutOfStockVariantsWithInitialSelection = (
     configItem,
     isOutOfStockProductDisplayed
 ) => {
-    if (configItem && product) {
+    if (configItem) {
+        const selectedIndexes = Array.from(
+            multipleOptionSelections.values()
+        ).filter(value => !!value);
+
         let variants = product.variants;
         const variantsIfOutOfStockProductsNotDisplayed = createProductVariants(
-            configItem
+            product
         );
         //If out of stock products is set to not displayed, use the variants created
         variants = isOutOfStockProductDisplayed
             ? variants
             : variantsIfOutOfStockProductsNotDisplayed;
-        if (
-            multipleOptionSelections &&
-            multipleOptionSelections.size === configurableOptionCodes.size
-        ) {
-            const selectedIndexes = Array.from(
-                multipleOptionSelections.values()
-            ).flat();
-
-            const selectedIndexesCombinations = getCombinations(
-                selectedIndexes,
-                selectedIndexes.length - 1
+
+        if (!variants || variants.length === 0) {
+            return [];
+        }
+
+        if (!variants[0] || !variants[0].attributes) {
+            return [];
+        }
+
+        const numberOfVariations = variants[0].attributes.length;
+
+        if (numberOfVariations === 1) {
+            const outOfStockOptions = variants.filter(
+                variant => variant.product.stock_status === OUT_OF_STOCK_CODE
             );
-            const oosIndexes = [];
-            for (const option of selectedIndexesCombinations) {
-                const curOption = new Map(
-                    [...multipleOptionSelections].filter(
-                        ([key, val]) => (
-                            option.includes(key), option.includes(val)
-                        )
-                    )
-                );
-                const curItems = findAllMatchingVariants({
+
+            const outOfStockIndex = outOfStockOptions.map(option =>
+                option.attributes.map(attribute => attribute.value_index)
+            );
+            return outOfStockIndex;
+        } else {
+            const outOfStockIndexes = [];
+
+            if (selectedIndexes.length > 0) {
+                const items = findAllMatchingVariants({
                     optionCodes: configurableOptionCodes,
-                    singleOptionSelection: curOption,
-                    variants: variants
+                    singleOptionSelection: multipleOptionSelections,
+                    variants
                 });
 
-                const outOfStockIndex = getOutOfStockIndexes(curItems)
-                    ?.flat()
-                    .filter(idx => !selectedIndexes.includes(idx));
+                const outOfStockItemsIndexes = getOutOfStockIndexes(items);
+
+                for (const indexes of outOfStockItemsIndexes) {
+                    const sameIndexes = indexes.filter(num =>
+                        selectedIndexes.includes(num)
+                    );
+                    const differentIndexes = indexes.filter(
+                        num => !selectedIndexes.includes(num)
+                    );
 
-                oosIndexes.push(outOfStockIndex);
+                    if (sameIndexes.length > 0) {
+                        outOfStockIndexes.push(differentIndexes);
+                    }
+                }
+
+                if (
+                    selectedIndexes.length === configurableOptionCodes.size &&
+                    !selectedIndexes.includes(undefined)
+                ) {
+                    const selectedIndexesCombinations = getCombinations(
+                        selectedIndexes,
+                        selectedIndexes.length - 1
+                    );
+
+                    const oosIndexes = [];
+                    for (const option of selectedIndexesCombinations) {
+                        const curOption = new Map(
+                            [...multipleOptionSelections].filter(
+                                ([key, val]) => (
+                                    option.includes(key), option.includes(val)
+                                )
+                            )
+                        );
+                        const curItems = findAllMatchingVariants({
+                            optionCodes: configurableOptionCodes,
+                            singleOptionSelection: curOption,
+                            variants: variants
+                        });
+                        const outOfStockIndex = getOutOfStockIndexes(curItems)
+                            ?.flat()
+                            .filter(idx => !selectedIndexes.includes(idx));
+                        oosIndexes.push(outOfStockIndex);
+                    }
+                    return oosIndexes;
+                }
+            } else {
+                return [];
             }
-            return oosIndexes;
+
+            return outOfStockIndexes;
         }
-        return [];
     }
+    return [];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/peregrine",
-  "version": "15.5.2",
+  "version": "15.6.2-alpha12",
   "publishConfig": {
     "access": "public"
   },