@graphcommerce/magento-wishlist 1.0.5 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 # @graphcommerce/magento-wishlist
 
+## 1.2.0
+
+### Minor Changes
+
+- [#1482](https://github.com/graphcommerce-org/graphcommerce/pull/1482) [`b359fe252`](https://github.com/graphcommerce-org/graphcommerce/commit/b359fe252a50bb8195601ba97c3eef6a7be146ba) Thanks [@mikekeehnen](https://github.com/mikekeehnen)! - Added selectedOptions to AddToCart mutation
+
+### Patch Changes
+
+- Updated dependencies [[`a9df81310`](https://github.com/graphcommerce-org/graphcommerce/commit/a9df81310c051876dd82fb2819105dece47cc213), [`b359fe252`](https://github.com/graphcommerce-org/graphcommerce/commit/b359fe252a50bb8195601ba97c3eef6a7be146ba), [`f167f9963`](https://github.com/graphcommerce-org/graphcommerce/commit/f167f99630966a7de43717937d43669e66132494)]:
+  - @graphcommerce/next-ui@4.8.1
+  - @graphcommerce/magento-product@4.4.0
+  - @graphcommerce/magento-cart@4.3.1
+  - @graphcommerce/magento-customer@4.3.2
+  - @graphcommerce/magento-product-configurable@4.1.7
+  - @graphcommerce/magento-store@4.2.5
+  - @graphcommerce/image@3.1.6
+
+## 1.1.1
+
+### Patch Changes
+
+- [#1469](https://github.com/graphcommerce-org/graphcommerce/pull/1469) [`849ea6595`](https://github.com/graphcommerce-org/graphcommerce/commit/849ea6595f9d3057bbf120d117529cbe74c0998a) Thanks [@timhofman](https://github.com/timhofman)! - wishlist chip icon not visible in darkmode
+
+- Updated dependencies [[`a12db31b9`](https://github.com/graphcommerce-org/graphcommerce/commit/a12db31b9db9d27d86f59c1bfe58a0879999b9d3), [`cf575395c`](https://github.com/graphcommerce-org/graphcommerce/commit/cf575395c16e9c571f75d4563004c3018a29aeaa)]:
+  - @graphcommerce/magento-customer@4.3.1
+  - @graphcommerce/magento-cart@4.3.0
+  - @graphcommerce/magento-product-configurable@4.1.6
+  - @graphcommerce/magento-product@4.3.6
+
+## 1.1.0
+
+### Minor Changes
+
+- [#1467](https://github.com/graphcommerce-org/graphcommerce/pull/1467) [`0363b9671`](https://github.com/graphcommerce-org/graphcommerce/commit/0363b9671db7c2932321d97faf6f1eb385238397) Thanks [@timhofman](https://github.com/timhofman)! - optional feedback message upon adding products to wishlist
+
+* [#1464](https://github.com/graphcommerce-org/graphcommerce/pull/1464) [`c74089bd7`](https://github.com/graphcommerce-org/graphcommerce/commit/c74089bd7475bd8dd6090d3cdb5f2cff2570a4fc) Thanks [@mikekeehnen](https://github.com/mikekeehnen)! - Moved early return to end of file and added next-env.d.ts to solve some type issues
+
+### Patch Changes
+
+- [#1458](https://github.com/graphcommerce-org/graphcommerce/pull/1458) [`31ce79a89`](https://github.com/graphcommerce-org/graphcommerce/commit/31ce79a89624205ce12d7192375b864d9a87e31a) Thanks [@timhofman](https://github.com/timhofman)! - remove mandatory \_\_typename from chip base props
+
+* [#1463](https://github.com/graphcommerce-org/graphcommerce/pull/1463) [`a71a7e4bc`](https://github.com/graphcommerce-org/graphcommerce/commit/a71a7e4bced2c2719839eecdd995e5b3a0faadb8) Thanks [@paales](https://github.com/paales)! - make sure the default color of the heart is black
+
+- [#1466](https://github.com/graphcommerce-org/graphcommerce/pull/1466) [`ed2b67a06`](https://github.com/graphcommerce-org/graphcommerce/commit/ed2b67a0618d9db97e79ed2a8226e0ae12403943) Thanks [@FrankHarland](https://github.com/FrankHarland)! - Added a new useCustomerSession hook to allow for more fine grained control over loading data for customers.
+
+- Updated dependencies [[`0363b9671`](https://github.com/graphcommerce-org/graphcommerce/commit/0363b9671db7c2932321d97faf6f1eb385238397), [`c6a62a338`](https://github.com/graphcommerce-org/graphcommerce/commit/c6a62a338abf8af83d3a6eb7ed796586009910ca), [`3ac90b57c`](https://github.com/graphcommerce-org/graphcommerce/commit/3ac90b57c68b96f9d81771d6664ed9435a28fc1d), [`00f6167ff`](https://github.com/graphcommerce-org/graphcommerce/commit/00f6167ff4096bf7432f3d8e8e739ecbf6ab0dd2), [`7159d3ab3`](https://github.com/graphcommerce-org/graphcommerce/commit/7159d3ab31e937c9c921023c46e80db5813e789c), [`32370574b`](https://github.com/graphcommerce-org/graphcommerce/commit/32370574bef6345b857ae911049ca27a64bc7e08), [`ed2b67a06`](https://github.com/graphcommerce-org/graphcommerce/commit/ed2b67a0618d9db97e79ed2a8226e0ae12403943), [`4c146c682`](https://github.com/graphcommerce-org/graphcommerce/commit/4c146c68242e6edc616807fb73173cc959c26034)]:
+  - @graphcommerce/next-ui@4.8.0
+  - @graphcommerce/magento-product@4.3.5
+  - @graphcommerce/magento-customer@4.3.0
+  - @graphcommerce/magento-cart@4.2.15
+  - @graphcommerce/magento-product-configurable@4.1.5
+  - @graphcommerce/magento-store@4.2.4
+
 ## 1.0.5
 
 ### Patch Changes

package/README.md

@@ -10,7 +10,7 @@ account.
 - Add products to wishlist based on SKU (all producttypes)
 - Add products with selected variants, like size and color, to wishlist
   (configurable product)
-- Add products from wishlist to cart (simple, downloadable, virtual)
+- Add products from wishlist to cart (simple, virtual)
 - Enable/disable through Magento configuration item
   'magento_wishlist_general_is_enabled'
 
@@ -36,6 +36,13 @@ already is a product with the same SKU in the wishlist.
 NEXT_PUBLIC_WISHLIST_IGNORE_PRODUCT_WISHLIST_STATUS="1"
 ```
 
+- Display a MessageSnackbar message as feedback upon adding a product to the
+  wishlist
+
+```
+<ProductWishlistChip showFeedbackMessage {...props} />
+```
+
 ## Customizing wishlist styling
 
 - The ProductWishlistChip accepts SX props (see ProductWishlistChip and

package/components/ProductWishlistChip/ProductWishlistChip.graphql

@@ -1,4 +1,4 @@
 fragment ProductWishlistChip on ProductInterface {
-  __typename
+  name
   sku
 }

package/components/ProductWishlistChip/ProductWishlistChipBase.tsx

@@ -1,10 +1,17 @@
-/* eslint-disable @typescript-eslint/no-floating-promises */
-/* eslint-disable react-hooks/rules-of-hooks */
 import { useQuery, useMutation, useApolloClient } from '@graphcommerce/graphql'
 import { CustomerTokenDocument } from '@graphcommerce/magento-customer'
-import { IconSvg, iconHeart, extendableComponent } from '@graphcommerce/next-ui'
+import {
+  IconSvg,
+  iconHeart,
+  extendableComponent,
+  MessageSnackbar,
+  Button,
+  iconChevronRight,
+} from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
-import { SxProps, Theme, IconButton } from '@mui/material'
+import { Trans } from '@lingui/react'
+import { SxProps, Theme, IconButton, Box } from '@mui/material'
+import PageLink from 'next/link'
 import { useState, useEffect } from 'react'
 import { useWishlistEnabled } from '../../hooks'
 import { AddProductToWishlistDocument } from '../../queries/AddProductToWishlist.gql'
@@ -19,34 +26,46 @@ const ignoreProductWishlistStatus =
 
 export type ProductWishlistChipProps = ProductWishlistChipFragment & { sx?: SxProps<Theme> } & {
   selectedOptions?: string[]
+  showFeedbackMessage?: boolean
 }
 
-const name = 'ProductWishlistChipBase' as const
+const compName = 'ProductWishlistChipBase' as const
 const parts = ['root', 'wishlistIcon', 'wishlistIconActive', 'wishlistButton'] as const
-const { classes } = extendableComponent(name, parts)
+const { classes } = extendableComponent(compName, parts)
 
 export function ProductWishlistChipBase(props: ProductWishlistChipProps) {
-  const { sku, selectedOptions = [], sx = [] } = props
+  const { name, sku, showFeedbackMessage, selectedOptions = [], sx = [] } = props
 
   const [inWishlist, setInWishlist] = useState(false)
+  const [displayMessageBar, setDisplayMessageBar] = useState(false)
 
   const { data: token } = useQuery(CustomerTokenDocument)
+  const [addWishlistItem] = useMutation(AddProductToWishlistDocument)
+  const [removeWishlistItem] = useMutation(RemoveProductFromWishlistDocument)
   const isLoggedIn = token?.customerToken && token?.customerToken.valid
 
+  const { data: GetCustomerWishlistData, loading } = useQuery(GetIsInWishlistsDocument, {
+    skip: !isLoggedIn,
+  })
+
+  const { data: guestWishlistData } = useQuery(GuestWishlistDocument, {
+    ssr: false,
+    skip: isLoggedIn === true,
+  })
+
   const { cache } = useApolloClient()
 
   const isWishlistEnabled = useWishlistEnabled()
 
-  if (!isWishlistEnabled) {
-    return null
-  }
-
   const heart = (
     <IconSvg
       src={iconHeart}
       size='medium'
       className={classes.wishlistIcon}
-      sx={(theme) => ({ color: theme.palette.primary.main })}
+      sx={(theme) => ({
+        color:
+          theme.palette.mode === 'light' ? theme.palette.text.primary : theme.palette.primary.main,
+      })}
     />
   )
 
@@ -59,18 +78,6 @@ export function ProductWishlistChipBase(props: ProductWishlistChipProps) {
     />
   )
 
-  const { data: GetCustomerWishlistData, loading } = useQuery(GetIsInWishlistsDocument, {
-    skip: !isLoggedIn,
-  })
-
-  const { data: guestWishlistData, loading: loadingGuestWishlistData } = useQuery(
-    GuestWishlistDocument,
-    {
-      ssr: false,
-      skip: isLoggedIn === true,
-    },
-  )
-
   useEffect(() => {
     // Do not display wishlist UI to guests when configured as customer only
     if (hideForGuest && !isLoggedIn) {
@@ -94,9 +101,6 @@ export function ProductWishlistChipBase(props: ProductWishlistChipProps) {
     }
   }, [isLoggedIn, sku, loading, GetCustomerWishlistData, guestWishlistData])
 
-  const [addWishlistItem] = useMutation(AddProductToWishlistDocument)
-  const [removeWishlistItem] = useMutation(RemoveProductFromWishlistDocument)
-
   const preventAnimationBubble: React.MouseEventHandler<HTMLButtonElement> = (e) => {
     e.preventDefault()
     e.stopPropagation()
@@ -114,15 +118,18 @@ export function ProductWishlistChipBase(props: ProductWishlistChipProps) {
         const wishlistItemsInSession =
           GetCustomerWishlistData?.customer?.wishlists[0]?.items_v2?.items || []
 
-        const item = wishlistItemsInSession.find((element) => element?.product?.sku == sku)
+        const item = wishlistItemsInSession.find((element) => element?.product?.sku === sku)
 
         if (item?.id) {
+          // eslint-disable-next-line @typescript-eslint/no-floating-promises
           removeWishlistItem({ variables: { wishlistItemId: item.id } })
         }
       } else {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
         addWishlistItem({
           variables: { input: { sku, quantity: 1, selected_options: selectedOptions } },
         })
+        setDisplayMessageBar(true)
       }
     } else if (inWishlist) {
       cache.modify({
@@ -153,36 +160,67 @@ export function ProductWishlistChipBase(props: ProductWishlistChipProps) {
         },
         broadcast: true,
       })
+      setDisplayMessageBar(true)
     }
   }
 
-  const button = (
-    <IconButton
-      key={sku}
-      onClick={handleClick}
-      onMouseDown={preventAnimationBubble}
-      size='small'
-      className={classes.wishlistButton}
-      sx={[
-        (theme) => ({
-          padding: theme.spacings.xxs,
-        }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
-      title={
-        inWishlist
-          ? i18n._(/* i18n */ `Remove from wishlist`)
-          : i18n._(/* i18n */ `Add to wishlist`)
-      }
-      aria-label={
-        inWishlist
-          ? i18n._(/* i18n */ `Remove from wishlist`)
-          : i18n._(/* i18n */ `Add to wishlist`)
-      }
-    >
-      {inWishlist ? activeHeart : heart}
-    </IconButton>
+  const output = (
+    <Box>
+      <IconButton
+        key={sku}
+        onClick={handleClick}
+        onMouseDown={preventAnimationBubble}
+        size='small'
+        className={classes.wishlistButton}
+        sx={[
+          (theme) => ({
+            padding: theme.spacings.xxs,
+          }),
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
+        title={
+          inWishlist
+            ? i18n._(/* i18n */ `Remove from wishlist`)
+            : i18n._(/* i18n */ `Add to wishlist`)
+        }
+        aria-label={
+          inWishlist
+            ? i18n._(/* i18n */ `Remove from wishlist`)
+            : i18n._(/* i18n */ `Add to wishlist`)
+        }
+      >
+        {inWishlist ? activeHeart : heart}
+      </IconButton>
+
+      <MessageSnackbar
+        open={showFeedbackMessage && displayMessageBar}
+        variant='pill'
+        action={
+          <PageLink href='/wishlist' passHref>
+            <Button
+              id='view-wishlist-button'
+              size='medium'
+              variant='pill'
+              color='secondary'
+              endIcon={<IconSvg src={iconChevronRight} />}
+            >
+              <Trans id='View wishlist' />
+            </Button>
+          </PageLink>
+        }
+      >
+        <Trans
+          id='<0>{name}</0> has been added to your wishlist!'
+          components={{ 0: <strong /> }}
+          values={{ name }}
+        />
+      </MessageSnackbar>
+    </Box>
   )
 
-  return !hideForGuest || isLoggedIn ? button : null
+  return !hideForGuest || isLoggedIn ? output : null
+}
+
+ProductWishlistChipBase.defaultProps = {
+  showFeedbackMessage: false,
 }

package/components/ProductWishlistChip/ProductWishlistChipDetailConfigurable.tsx

@@ -3,11 +3,11 @@ import { ProductWishlistChipBase, ProductWishlistChipProps } from './ProductWish
 
 export function ProductWishlistChipDetailConfigurable(props: ProductWishlistChipProps) {
   const { sku } = props
+  const context = useConfigurableContext(sku ?? '')
 
   let selectedOptions: string[] = []
+
   if (sku) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const context = useConfigurableContext(sku)
     selectedOptions = (Object as any).values(context.selection)
   }
 

package/components/WishlistItem/ProductAddToCart.tsx

@@ -51,9 +51,9 @@ export function ProductAddToCart(
   return (
     <Box component='form' onSubmit={submitHandler} noValidate className={classes.root}>
       <Box
-        sx={(theme) => ({
+        sx={{
           gridArea: 'itemQuantity',
-        })}
+        }}
       >
         <TextInputNumber
           variant='outlined'
@@ -64,21 +64,21 @@ export function ProductAddToCart(
           helperText={formState.isSubmitted && formState.errors.quantity}
           disabled={formState.isSubmitting}
           size='small'
-          sx={(theme) => ({
+          sx={{
             alignSelf: 'flex-start',
-          })}
+          }}
         />
       </Box>
       {children}
       <Box
         className={classes.buttonWrapper}
-        sx={(theme) => ({
+        sx={{
           gridArea: 'itemCartButton',
           alignSelf: 'flex-start',
           position: 'absolute',
           left: '0',
           bottom: '-35px',
-        })}
+        }}
       >
         <Button
           type='submit'

package/components/WishlistItem/WishlistItem.tsx

@@ -1,7 +1,5 @@
-/* eslint-disable @typescript-eslint/no-floating-promises */
-/* eslint-disable react-hooks/rules-of-hooks */
+import { InputMaybe } from '@graphcommerce/graphql-mesh'
 import { SxProps, Theme } from '@mui/material'
-
 import { PropsWithChildren } from 'react'
 import { ProductAddToCart } from './ProductAddToCart'
 import { WishlistItemBase } from './WishlistItemBase'
@@ -13,15 +11,16 @@ type OptionalProductWishlistParent = {
 
 export type WishlistItemProps = PropsWithChildren<WishlistItemProductFragment> & {
   sx?: SxProps<Theme>
+  selectedOptions?: InputMaybe<InputMaybe<string> | InputMaybe<string>[]> | undefined
 } & OptionalProductWishlistParent
 
 export function WishlistItem(props: WishlistItemProps) {
-  const { sku, name, price_range } = props
+  const { sku, name, price_range, selectedOptions } = props
 
   return (
     <WishlistItemBase {...props}>
       <ProductAddToCart
-        variables={{ sku: sku ?? '', quantity: 1 }}
+        variables={{ sku: sku ?? '', quantity: 1, selectedOptions }}
         name={name ?? ''}
         price={price_range.minimum_price.final_price}
       />

package/components/WishlistItem/WishlistItemBase.tsx

@@ -1,14 +1,10 @@
-/* eslint-disable @typescript-eslint/no-floating-promises */
-/* eslint-disable react-hooks/rules-of-hooks */
 import { useQuery, useMutation, useApolloClient } from '@graphcommerce/graphql'
 import { Image } from '@graphcommerce/image'
-import { useDisplayInclTax } from '@graphcommerce/magento-cart'
 import { CustomerTokenDocument } from '@graphcommerce/magento-customer'
 import { useProductLink } from '@graphcommerce/magento-product'
 import { Money } from '@graphcommerce/magento-store'
 import { responsiveVal, extendableComponent, iconEllypsis, IconSvg } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { i18n } from '@lingui/core'
 import { Badge, Box, Link, SxProps, Theme, Typography } from '@mui/material'
 import IconButton from '@mui/material/IconButton'
 import Menu from '@mui/material/Menu'
@@ -59,13 +55,12 @@ export function WishlistItemBase(props: WishlistItemBaseProps) {
   } = props
 
   const productLink = useProductLink({ url_key, __typename: productType })
-  const inclTaxes = useDisplayInclTax()
   const { cache } = useApolloClient()
 
   const { data: token } = useQuery(CustomerTokenDocument)
   const isLoggedIn = token?.customerToken && token?.customerToken.valid
 
-  const { data: GetCustomerWishlistData, loading } = useQuery(GetIsInWishlistsDocument, {
+  const { data: GetCustomerWishlistData } = useQuery(GetIsInWishlistsDocument, {
     skip: !isLoggedIn,
   })
 
@@ -74,6 +69,7 @@ export function WishlistItemBase(props: WishlistItemBaseProps) {
   const [anchorEl, setAnchorEl] = useState(null)
   const open = Boolean(anchorEl)
   const handleClick = (event) => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     setAnchorEl(event.currentTarget)
   }
 
@@ -94,6 +90,7 @@ export function WishlistItemBase(props: WishlistItemBaseProps) {
         }
 
         if (itemIdToDelete) {
+          // eslint-disable-next-line @typescript-eslint/no-floating-promises
           removeWishlistItem({ variables: { wishlistItemId: itemIdToDelete } })
         }
       } else {
@@ -170,7 +167,7 @@ export function WishlistItemBase(props: WishlistItemBaseProps) {
           vertical: 'top',
           horizontal: 'left',
         }}
-        sx={(theme) => ({
+        sx={() => ({
           gridArea: 'picture',
           width: rowImageSize,
           height: rowImageSize,
@@ -234,7 +231,7 @@ export function WishlistItemBase(props: WishlistItemBaseProps) {
         variant='body1'
         className={classes.root}
         sx={[
-          (theme) => ({ gridArea: 'itemPrice', marginLeft: 'auto' }),
+          () => ({ gridArea: 'itemPrice', marginLeft: 'auto' }),
           ...(Array.isArray(sx) ? sx : [sx]),
         ]}
       >
@@ -262,7 +259,7 @@ export function WishlistItemBase(props: WishlistItemBaseProps) {
         aria-expanded={open ? 'true' : undefined}
         aria-haspopup='true'
         onClick={handleClick}
-        sx={(theme) => ({
+        sx={() => ({
           gridArea: 'iconMenu',
           alignSelf: 'flex-start',
           padding: '0',

package/components/WishlistItem/WishlistItemConfigurable.tsx

@@ -1,5 +1,4 @@
 import { WishlistItem, WishlistItemProps } from './WishlistItem'
-import { WishlistItemFragment } from './WishlistItem.gql'
 import { WishlistItemConfigurableFragment } from './WishlistItemConfigurable.gql'
 
 export function WishlistItemConfigurable(

package/components/WishlistMenuFabItem/WishlistMenuFabItem.tsx

@@ -21,18 +21,15 @@ function WishlistMenuFabItemContent(props: WishlistMenuFabItemProps) {
   const { data: token } = useQuery(CustomerTokenDocument)
   const isLoggedIn = token?.customerToken && token?.customerToken.valid
 
-  const { data: GetCustomerWishlistData, loading } = useQuery(GetIsInWishlistsDocument, {
+  const { data: GetCustomerWishlistData } = useQuery(GetIsInWishlistsDocument, {
     ssr: false,
     skip: !isLoggedIn,
   })
 
-  const { data: guestWishlistData, loading: loadingGuestWishlistData } = useQuery(
-    GuestWishlistDocument,
-    {
-      ssr: false,
-      skip: isLoggedIn === true,
-    },
-  )
+  const { data: guestWishlistData } = useQuery(GuestWishlistDocument, {
+    ssr: false,
+    skip: isLoggedIn === true,
+  })
 
   let activeWishlist
   if (isLoggedIn) {

package/hooks/useMergeGuestWishlistWithCustomer.tsx

@@ -1,8 +1,5 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-/* eslint-disable @typescript-eslint/no-floating-promises */
-/* eslint-disable react-hooks/rules-of-hooks */
 import { useMutation, useQuery, useApolloClient } from '@graphcommerce/graphql'
-import { CustomerTokenDocument } from '@graphcommerce/magento-customer'
+import { useCustomerSession } from '@graphcommerce/magento-customer'
 import { useEffect } from 'react'
 import { AddProductToWishlistDocument } from '../queries/AddProductToWishlist.gql'
 import { GetGuestWishlistProductsDocument } from '../queries/GetGuestWishlistProducts.gql'
@@ -10,55 +7,34 @@ import { GuestWishlistDocument } from '../queries/GuestWishlist.gql'
 
 /** Merge guest wishlist items to customer session upon login */
 export function useMergeGuestWishlistWithCustomer() {
-  const customerToken = useQuery(CustomerTokenDocument)?.data?.customerToken
-  const isLoggedIn = customerToken?.token && customerToken?.valid
+  const { loggedIn } = useCustomerSession()
   const { cache } = useApolloClient()
 
-  const guestWishlistData = useQuery(GuestWishlistDocument, {
-    ssr: false,
-  }).data?.guestWishlist
+  const guestSkus = useQuery(GuestWishlistDocument, { ssr: false }).data?.guestWishlist?.items
 
-  const guestDataSkus = guestWishlistData?.items.map((item) => item?.sku) || []
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const validatedItems =
-    useQuery(GetGuestWishlistProductsDocument, {
-      ssr: false,
-      variables: {
-        filters: { sku: { in: guestDataSkus } },
-      },
-      skip: guestDataSkus.length === 0,
-    }).data?.products?.items?.map((item) => item?.sku) || []
+  const guestProducts = useQuery(GetGuestWishlistProductsDocument, {
+    ssr: false,
+    variables: { filters: { sku: { in: guestSkus?.map((item) => item?.sku) } } },
+    skip: guestSkus && guestSkus?.length === 0,
+  }).data?.products?.items
 
   const [addWishlistItem] = useMutation(AddProductToWishlistDocument)
 
   useEffect(() => {
-    if (!isLoggedIn) return
+    if (!loggedIn || !guestSkus || guestSkus.length === 0) return
 
-    if (!guestDataSkus.length) return
-
-    if (!validatedItems.length) {
-      /** Only outdated items were found, purge them */
-      cache.evict({
-        id: cache.identify({ __typename: 'GuestWishlist' }),
-      })
-      return
-    }
+    const clearGuestList = () =>
+      cache.evict({ id: cache.identify({ __typename: 'GuestWishlist' }) })
 
-    const wishlist =
-      guestWishlistData?.items.filter((item) => validatedItems.includes(item.sku)) || []
+    if (guestProducts?.length === 0) {
+      clearGuestList()
+    } else {
+      const input = guestSkus
+        .filter((item) => guestProducts?.find((i) => i?.sku === item.sku))
+        .map(({ sku, selected_options, quantity }) => ({ sku, selected_options, quantity }))
 
-    if (!wishlist.length) return
-
-    const payload = wishlist.map((item) => ({
-      sku: item.sku,
-      selected_options: item.selected_options,
-      quantity: item.quantity,
-    }))
-
-    addWishlistItem({ variables: { input: payload } }).then(() => 
-      cache.evict({
-        id: cache.identify({ __typename: 'GuestWishlist' }),
-      })
-    )
-  }, [isLoggedIn])
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      if (input.length) addWishlistItem({ variables: { input } }).then(clearGuestList)
+    }
+  }, [addWishlistItem, cache, guestProducts, guestSkus, loggedIn])
 }

package/hooks/useWishlistItems.tsx

@@ -1,53 +1,35 @@
 import { useQuery } from '@graphcommerce/graphql'
-import { CustomerTokenDocument } from '@graphcommerce/magento-customer'
+import { useCustomerSession } from '@graphcommerce/magento-customer'
 import { GetGuestWishlistProductsDocument } from '../queries/GetGuestWishlistProducts.gql'
 import { GetWishlistProductsDocument } from '../queries/GetWishlistProducts.gql'
 import { GuestWishlistDocument } from '../queries/GuestWishlist.gql'
 
 export function useWishlistItems() {
-  const { data: token } = useQuery(CustomerTokenDocument)
-  const isLoggedIn = token?.customerToken && token?.customerToken.valid
+  const { loggedIn } = useCustomerSession()
 
   let wishlistItems
 
   /** Get customer wishlist from session */
-  const { data: GetCustomerWishlistData, loading: loadingCustomerItems } = useQuery(
-    GetWishlistProductsDocument,
-    {
-      skip: !isLoggedIn,
-      ssr: false,
-    },
-  )
+  const customerWl = useQuery(GetWishlistProductsDocument, { ssr: false, skip: !loggedIn })
 
   /** Get guest wishlist items from cache and hydrate with catalog data */
-  const { data: guestWishlistData, loading: loadingGuestWishlistData } = useQuery(
-    GuestWishlistDocument,
-    {
-      ssr: false,
-      skip: isLoggedIn === true,
-    },
-  )
-  const guestData = guestWishlistData?.guestWishlist?.items.map((item) => item?.sku) || []
+  const guestWl = useQuery(GuestWishlistDocument, { ssr: false, skip: loggedIn })
+  const guestSkus = guestWl.data?.guestWishlist?.items.map((item) => item?.sku) || []
 
-  const { data: productGuestItems, loading: loadingGuestItems } = useQuery(
-    GetGuestWishlistProductsDocument,
-    {
-      ssr: false,
-      variables: {
-        filters: { sku: { in: guestData } },
-      },
-      skip: loadingGuestWishlistData || guestData.length === 0,
-    },
-  )
+  const guestProducts = useQuery(GetGuestWishlistProductsDocument, {
+    ssr: false,
+    variables: { filters: { sku: { in: guestSkus } } },
+    skip: guestSkus.length === 0,
+  })
 
-  if (isLoggedIn) {
-    wishlistItems = GetCustomerWishlistData?.customer?.wishlists[0]?.items_v2?.items
+  if (loggedIn) {
+    wishlistItems = customerWl.data?.customer?.wishlists[0]?.items_v2?.items
   } else {
-    wishlistItems = productGuestItems?.products?.items || []
+    wishlistItems = guestProducts.data?.products?.items || []
   }
 
   return {
     items: wishlistItems,
-    loading: loadingGuestWishlistData || loadingGuestItems || loadingCustomerItems,
+    loading: guestWl.loading || guestProducts.loading || customerWl.loading,
   }
 }

package/next-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+/// <reference types="@graphcommerce/next-ui/types" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/magento-wishlist",
-  "version": "1.0.5",
+  "version": "1.2.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -20,13 +20,14 @@
   },
   "dependencies": {
     "@graphcommerce/graphql": "3.1.3",
-    "@graphcommerce/image": "3.1.5",
-    "@graphcommerce/magento-cart": "4.2.14",
-    "@graphcommerce/magento-customer": "4.2.12",
-    "@graphcommerce/magento-product": "4.3.4",
-    "@graphcommerce/magento-product-configurable": "4.1.4",
-    "@graphcommerce/magento-store": "4.2.3",
-    "@graphcommerce/next-ui": "4.7.2"
+    "@graphcommerce/graphql-mesh": "4.1.3",
+    "@graphcommerce/image": "3.1.6",
+    "@graphcommerce/magento-cart": "4.3.1",
+    "@graphcommerce/magento-customer": "4.3.2",
+    "@graphcommerce/magento-product": "4.4.0",
+    "@graphcommerce/magento-product-configurable": "4.1.7",
+    "@graphcommerce/magento-store": "4.2.5",
+    "@graphcommerce/next-ui": "4.8.1"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",

package/queries/GetWishlistProducts.graphql

@@ -8,6 +8,7 @@ query GetWishlistProducts {
           id
           ...WishlistItem
           product {
+            __typename
             uid
             sku
             ...ProductListItem