@graphcommerce/magento-wishlist 1.2.0 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @graphcommerce/magento-wishlist
 
+## 1.2.1
+
+### Patch Changes
+
+- [#1485](https://github.com/graphcommerce-org/graphcommerce/pull/1485) [`d6262de71`](https://github.com/graphcommerce-org/graphcommerce/commit/d6262de71d2254a2b0b492e1a60f9e141767470e) Thanks [@paales](https://github.com/paales)! - move to useCustomerSession instead of using the tokenquery directly and fix ssr issues
+
+- Updated dependencies [[`d6262de71`](https://github.com/graphcommerce-org/graphcommerce/commit/d6262de71d2254a2b0b492e1a60f9e141767470e), [`c8c246b8a`](https://github.com/graphcommerce-org/graphcommerce/commit/c8c246b8aaab0621b68a2fca2a1c529a56fad962), [`e3005fe63`](https://github.com/graphcommerce-org/graphcommerce/commit/e3005fe6306093d47b08c6756c21c8175649e30b)]:
+  - @graphcommerce/magento-customer@4.4.0
+  - @graphcommerce/magento-cart@4.3.2
+  - @graphcommerce/next-ui@4.8.2
+  - @graphcommerce/magento-product-configurable@4.1.8
+  - @graphcommerce/magento-product@4.4.1
+  - @graphcommerce/magento-store@4.2.6
+
 ## 1.2.0
 
 ### Minor Changes

package/components/ProductWishlistChip/ProductWishlistChipBase.tsx

@@ -1,5 +1,9 @@
-import { useQuery, useMutation, useApolloClient } from '@graphcommerce/graphql'
-import { CustomerTokenDocument } from '@graphcommerce/magento-customer'
+import { useMutation, useApolloClient } from '@graphcommerce/graphql'
+import {
+  useCustomerQuery,
+  useCustomerSession,
+  useGuestQuery,
+} from '@graphcommerce/magento-customer'
 import {
   IconSvg,
   iconHeart,
@@ -39,19 +43,13 @@ export function ProductWishlistChipBase(props: ProductWishlistChipProps) {
   const [inWishlist, setInWishlist] = useState(false)
   const [displayMessageBar, setDisplayMessageBar] = useState(false)
 
-  const { data: token } = useQuery(CustomerTokenDocument)
+  const { loggedIn } = useCustomerSession()
   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: GetCustomerWishlistData, loading } = useCustomerQuery(GetIsInWishlistsDocument)
 
-  const { data: guestWishlistData } = useQuery(GuestWishlistDocument, {
-    ssr: false,
-    skip: isLoggedIn === true,
-  })
+  const { data: guestWishlistData } = useGuestQuery(GuestWishlistDocument)
 
   const { cache } = useApolloClient()
 
@@ -80,7 +78,7 @@ export function ProductWishlistChipBase(props: ProductWishlistChipProps) {
 
   useEffect(() => {
     // Do not display wishlist UI to guests when configured as customer only
-    if (hideForGuest && !isLoggedIn) {
+    if (hideForGuest && !loggedIn) {
       return
     }
 
@@ -89,17 +87,17 @@ export function ProductWishlistChipBase(props: ProductWishlistChipProps) {
     }
 
     // Mark as active when product is available in either customer or guest wishlist
-    if (isLoggedIn && !loading) {
+    if (loggedIn && !loading) {
       const inWishlistTest =
         GetCustomerWishlistData?.customer?.wishlists[0]?.items_v2?.items.map(
           (item) => item?.product?.sku,
         ) || []
       setInWishlist(inWishlistTest.includes(sku))
-    } else if (!isLoggedIn) {
+    } else if (!loggedIn) {
       const inWishlistTest = guestWishlistData?.guestWishlist?.items.map((item) => item?.sku) || []
       setInWishlist(inWishlistTest.includes(sku))
     }
-  }, [isLoggedIn, sku, loading, GetCustomerWishlistData, guestWishlistData])
+  }, [loggedIn, sku, loading, GetCustomerWishlistData, guestWishlistData])
 
   const preventAnimationBubble: React.MouseEventHandler<HTMLButtonElement> = (e) => {
     e.preventDefault()
@@ -113,7 +111,7 @@ export function ProductWishlistChipBase(props: ProductWishlistChipProps) {
       return
     }
 
-    if (isLoggedIn) {
+    if (loggedIn) {
       if (inWishlist && !ignoreProductWishlistStatus) {
         const wishlistItemsInSession =
           GetCustomerWishlistData?.customer?.wishlists[0]?.items_v2?.items || []
@@ -218,7 +216,7 @@ export function ProductWishlistChipBase(props: ProductWishlistChipProps) {
     </Box>
   )
 
-  return !hideForGuest || isLoggedIn ? output : null
+  return !hideForGuest || loggedIn ? output : null
 }
 
 ProductWishlistChipBase.defaultProps = {

package/components/WishlistFab/WishlistFab.tsx

@@ -1,10 +1,13 @@
-import { useQuery } from '@graphcommerce/graphql'
-import { CustomerTokenDocument } from '@graphcommerce/magento-customer'
+import {
+  useCustomerQuery,
+  useCustomerSession,
+  useGuestQuery,
+} from '@graphcommerce/magento-customer'
 import { iconHeart, DesktopHeaderBadge, IconSvg, extendableComponent } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Fab, FabProps as FabPropsType, NoSsr, SxProps, Theme } from '@mui/material'
 import PageLink from 'next/link'
-import React, { useEffect } from 'react'
+import React from 'react'
 import { useWishlistEnabled } from '../../hooks'
 import { GetIsInWishlistsDocument } from '../../queries/GetIsInWishlists.gql'
 import { GuestWishlistDocument } from '../../queries/GuestWishlist.gql'
@@ -13,6 +16,7 @@ type WishlistFabContentProps = {
   icon?: React.ReactNode
   FabProps?: Omit<FabPropsType, 'children'>
   sx?: SxProps<Theme>
+  activeWishlist: boolean
 }
 
 const name = 'WishlistFab'
@@ -22,31 +26,7 @@ const { classes } = extendableComponent(name, parts)
 const hideForGuest = process.env.NEXT_PUBLIC_WISHLIST_HIDE_FOR_GUEST === '1'
 
 function WishlistFabContent(props: WishlistFabContentProps) {
-  const { icon, FabProps, sx } = props
-
-  const { data: token } = useQuery(CustomerTokenDocument)
-  const isLoggedIn = token?.customerToken && token?.customerToken.valid
-
-  const { data: GetCustomerWishlistData, loading } = useQuery(GetIsInWishlistsDocument, {
-    skip: !isLoggedIn,
-  })
-
-  const { data: guestWishlistData, loading: loadingGuestWishlistData } = useQuery(
-    GuestWishlistDocument,
-    {
-      ssr: false,
-      skip: isLoggedIn === true,
-    },
-  )
-
-  let activeWishlist = false
-  if (isLoggedIn) {
-    const wishlistItemCount = GetCustomerWishlistData?.customer?.wishlists[0]?.items_count || 0
-    activeWishlist = wishlistItemCount > 0
-  } else {
-    const wishlist = guestWishlistData?.guestWishlist?.items || []
-    activeWishlist = wishlist.length > 0
-  }
+  const { icon, FabProps, sx, activeWishlist } = props
 
   const wishlistIcon = icon ?? <IconSvg src={iconHeart} size='large' />
 
@@ -73,19 +53,30 @@ function WishlistFabContent(props: WishlistFabContentProps) {
   )
 }
 
-export function WishlistFab(props: WishlistFabContentProps) {
+export type WishlistFabProps = Omit<WishlistFabContentProps, 'activeWishlist'>
+
+export function WishlistFab(props: WishlistFabProps) {
   const isWishlistEnabled = useWishlistEnabled()
 
-  const { data: token } = useQuery(CustomerTokenDocument)
-  const isLoggedIn = token?.customerToken && token?.customerToken.valid
+  const { loggedIn } = useCustomerSession()
+
+  const { data: GetCustomerWishlistData } = useCustomerQuery(GetIsInWishlistsDocument)
+  const { data: guestWishlistData } = useGuestQuery(GuestWishlistDocument)
+
+  let activeWishlist = false
+  if (loggedIn) {
+    const wishlistItemCount = GetCustomerWishlistData?.customer?.wishlists[0]?.items_count || 0
+    activeWishlist = wishlistItemCount > 0
+  } else {
+    const wishlist = guestWishlistData?.guestWishlist?.items || []
+    activeWishlist = wishlist.length > 0
+  }
+
+  if (!isWishlistEnabled || hideForGuest) return null
 
   return (
-    <>
-      {isWishlistEnabled && (!hideForGuest || isLoggedIn) && (
-        <NoSsr>
-          <WishlistFabContent {...props} />
-        </NoSsr>
-      )}
-    </>
+    <NoSsr fallback={<WishlistFabContent {...props} activeWishlist={false} />}>
+      <WishlistFabContent {...props} activeWishlist={activeWishlist} />
+    </NoSsr>
   )
 }

package/components/WishlistItem/WishlistItemBase.tsx

@@ -1,6 +1,6 @@
-import { useQuery, useMutation, useApolloClient } from '@graphcommerce/graphql'
+import { useMutation, useApolloClient } from '@graphcommerce/graphql'
 import { Image } from '@graphcommerce/image'
-import { CustomerTokenDocument } from '@graphcommerce/magento-customer'
+import { useCustomerQuery, useCustomerSession } 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'
@@ -57,12 +57,9 @@ export function WishlistItemBase(props: WishlistItemBaseProps) {
   const productLink = useProductLink({ url_key, __typename: productType })
   const { cache } = useApolloClient()
 
-  const { data: token } = useQuery(CustomerTokenDocument)
-  const isLoggedIn = token?.customerToken && token?.customerToken.valid
+  const { loggedIn } = useCustomerSession()
 
-  const { data: GetCustomerWishlistData } = useQuery(GetIsInWishlistsDocument, {
-    skip: !isLoggedIn,
-  })
+  const { data: GetCustomerWishlistData } = useCustomerQuery(GetIsInWishlistsDocument)
 
   const [removeWishlistItem] = useMutation(RemoveProductFromWishlistDocument)
 
@@ -75,7 +72,7 @@ export function WishlistItemBase(props: WishlistItemBaseProps) {
 
   const handleClose = (event) => {
     if (event.target.id === 'remove') {
-      if (isLoggedIn) {
+      if (loggedIn) {
         let itemIdToDelete = wishlistItemId
 
         /** When no internal ID is provided, fetch it by sku */

package/components/WishlistMenuFabItem/WishlistMenuFabItem.tsx

@@ -1,5 +1,8 @@
-import { useQuery } from '@graphcommerce/graphql'
-import { CustomerTokenDocument } from '@graphcommerce/magento-customer'
+import {
+  useCustomerQuery,
+  useCustomerSession,
+  useGuestQuery,
+} from '@graphcommerce/magento-customer'
 import { MenuFabSecondaryItem, iconHeart, IconSvg } from '@graphcommerce/next-ui'
 import { Badge, NoSsr, SxProps, Theme } from '@mui/material'
 import React from 'react'
@@ -7,38 +10,17 @@ import { useWishlistEnabled } from '../../hooks'
 import { GetIsInWishlistsDocument } from '../../queries/GetIsInWishlists.gql'
 import { GuestWishlistDocument } from '../../queries/GuestWishlist.gql'
 
-type WishlistMenuFabItemProps = {
+type WishlistMenuFabItemContentProps = {
   icon?: React.ReactNode
   children: React.ReactNode
   sx?: SxProps<Theme>
+  activeWishlist: boolean
 }
 
 const hideForGuest = process.env.NEXT_PUBLIC_WISHLIST_HIDE_FOR_GUEST === '1'
 
-function WishlistMenuFabItemContent(props: WishlistMenuFabItemProps) {
-  const { icon, children, sx = [] } = props
-
-  const { data: token } = useQuery(CustomerTokenDocument)
-  const isLoggedIn = token?.customerToken && token?.customerToken.valid
-
-  const { data: GetCustomerWishlistData } = useQuery(GetIsInWishlistsDocument, {
-    ssr: false,
-    skip: !isLoggedIn,
-  })
-
-  const { data: guestWishlistData } = useQuery(GuestWishlistDocument, {
-    ssr: false,
-    skip: isLoggedIn === true,
-  })
-
-  let activeWishlist
-  if (isLoggedIn) {
-    const wishlistItemCount = GetCustomerWishlistData?.customer?.wishlists[0]?.items_count || 0
-    activeWishlist = wishlistItemCount > 0
-  } else {
-    const wishlist = guestWishlistData?.guestWishlist?.items || []
-    activeWishlist = wishlist.length > 0
-  }
+function WishlistMenuFabItemContent(props: WishlistMenuFabItemContentProps) {
+  const { icon, children, sx = [], activeWishlist } = props
 
   return (
     <MenuFabSecondaryItem
@@ -60,19 +42,29 @@ function WishlistMenuFabItemContent(props: WishlistMenuFabItemProps) {
   )
 }
 
+export type WishlistMenuFabItemProps = Omit<WishlistMenuFabItemContentProps, 'activeWishlist'>
+
 export function WishlistMenuFabItem(props: WishlistMenuFabItemProps) {
   const isWishlistEnabled = useWishlistEnabled()
+  const { loggedIn } = useCustomerSession()
 
-  const { data: token } = useQuery(CustomerTokenDocument)
-  const isLoggedIn = token?.customerToken && token?.customerToken.valid
+  const { data: GetCustomerWishlistData } = useCustomerQuery(GetIsInWishlistsDocument)
+  const { data: guestWishlistData } = useGuestQuery(GuestWishlistDocument)
+
+  let activeWishlist: boolean
+  if (loggedIn) {
+    const wishlistItemCount = GetCustomerWishlistData?.customer?.wishlists[0]?.items_count ?? 0
+    activeWishlist = wishlistItemCount > 0
+  } else {
+    const wishlist = guestWishlistData?.guestWishlist?.items ?? []
+    activeWishlist = wishlist.length > 0
+  }
 
+  if (hideForGuest) return null
+  if (!isWishlistEnabled) return null
   return (
-    <>
-      {isWishlistEnabled && (!hideForGuest || isLoggedIn) && (
-        <NoSsr fallback={<WishlistMenuFabItemContent {...props} />}>
-          <WishlistMenuFabItemContent {...props} />
-        </NoSsr>
-      )}
-    </>
+    <NoSsr fallback={<WishlistMenuFabItemContent {...props} activeWishlist={false} />}>
+      <WishlistMenuFabItemContent {...props} activeWishlist={activeWishlist} />
+    </NoSsr>
   )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/magento-wishlist",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -22,12 +22,12 @@
     "@graphcommerce/graphql": "3.1.3",
     "@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"
+    "@graphcommerce/magento-cart": "4.3.2",
+    "@graphcommerce/magento-customer": "4.4.0",
+    "@graphcommerce/magento-product": "4.4.1",
+    "@graphcommerce/magento-product-configurable": "4.1.8",
+    "@graphcommerce/magento-store": "4.2.6",
+    "@graphcommerce/next-ui": "4.8.2"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",