@graphcommerce/magento-wishlist 1.1.0 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @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
+
+- [#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

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()
 
@@ -62,7 +60,10 @@ export function ProductWishlistChipBase(props: ProductWishlistChipProps) {
       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,
+      })}
     />
   )
 
@@ -77,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
     }
 
@@ -86,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()
@@ -110,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 || []
@@ -215,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/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,3 +1,4 @@
+import { InputMaybe } from '@graphcommerce/graphql-mesh'
 import { SxProps, Theme } from '@mui/material'
 import { PropsWithChildren } from 'react'
 import { ProductAddToCart } from './ProductAddToCart'
@@ -10,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,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.1.0",
+  "version": "1.2.1",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -21,13 +21,13 @@
   "dependencies": {
     "@graphcommerce/graphql": "3.1.3",
     "@graphcommerce/graphql-mesh": "4.1.3",
-    "@graphcommerce/image": "3.1.5",
-    "@graphcommerce/magento-cart": "4.2.15",
-    "@graphcommerce/magento-customer": "4.3.0",
-    "@graphcommerce/magento-product": "4.3.5",
-    "@graphcommerce/magento-product-configurable": "4.1.5",
-    "@graphcommerce/magento-store": "4.2.4",
-    "@graphcommerce/next-ui": "4.8.0"
+    "@graphcommerce/image": "3.1.6",
+    "@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",