@graphcommerce/magento-wishlist 1.6.11 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @graphcommerce/magento-wishlist
 
+## 1.7.0
+
+### Minor Changes
+
+- [#1642](https://github.com/graphcommerce-org/graphcommerce/pull/1642) [`ad63ebf4e`](https://github.com/graphcommerce-org/graphcommerce/commit/ad63ebf4e33bfb0e5c9e5e68ab69b14775f3f8a8) Thanks [@paales](https://github.com/paales)! - Introduced `<AddProductsToCartForm/>`, which is allows for adding all product types to the cart with a single react-hook-form form.
+
+  Which allows you to fully compose the form on the product page without having to modify the page.
+
+* [#1652](https://github.com/graphcommerce-org/graphcommerce/pull/1652) [`961b06fbb`](https://github.com/graphcommerce-org/graphcommerce/commit/961b06fbbfef3dd9b7b41b3dcdefbe78ddbc58c3) Thanks [@mikekeehnen](https://github.com/mikekeehnen)! - Improved useWishlistItems hook, and merge guest wishlist based on url_key instead of sku
+
+### Patch Changes
+
+- Updated dependencies [[`ad63ebf4e`](https://github.com/graphcommerce-org/graphcommerce/commit/ad63ebf4e33bfb0e5c9e5e68ab69b14775f3f8a8), [`87c897cda`](https://github.com/graphcommerce-org/graphcommerce/commit/87c897cda1934f072887d5302b7b7ef5ecccd1c0), [`b6bf2c941`](https://github.com/graphcommerce-org/graphcommerce/commit/b6bf2c94197ddacbf8f1fc0d352cd0d46e096f30), [`b91b9eb1f`](https://github.com/graphcommerce-org/graphcommerce/commit/b91b9eb1f3f9c2740fcbe03d8047f23941b10dcc)]:
+  - @graphcommerce/magento-product@4.6.0
+  - @graphcommerce/magento-product-configurable@4.3.0
+  - @graphcommerce/magento-store@4.3.0
+  - @graphcommerce/next-ui@4.27.0
+  - @graphcommerce/magento-cart@4.8.4
+  - @graphcommerce/magento-customer@4.11.4
+
 ## 1.6.11
 
 ### Patch Changes

package/components/ProductWishlistChip/ProductWishlistChip.graphql

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

package/components/ProductWishlistChip/ProductWishlistChipBase.tsx

@@ -1,9 +1,11 @@
 import { useMutation, useApolloClient } from '@graphcommerce/graphql'
+import { WishlistItem } from '@graphcommerce/graphql-mesh'
 import {
   useCustomerQuery,
   useCustomerSession,
   useGuestQuery,
 } from '@graphcommerce/magento-customer'
+import { useFormAddProductsToCart } from '@graphcommerce/magento-product'
 import {
   IconSvg,
   iconHeart,
@@ -22,6 +24,7 @@ import { AddProductToWishlistDocument } from '../../queries/AddProductToWishlist
 import { GetIsInWishlistsDocument } from '../../queries/GetIsInWishlists.gql'
 import { GuestWishlistDocument } from '../../queries/GuestWishlist.gql'
 import { RemoveProductFromWishlistDocument } from '../../queries/RemoveProductFromWishlist.gql'
+import { WishlistSummaryFragment } from '../../queries/WishlistSummaryFragment.gql'
 import { ProductWishlistChipFragment } from './ProductWishlistChip.gql'
 
 const hideForGuest = process.env.NEXT_PUBLIC_WISHLIST_HIDE_FOR_GUEST === '1'
@@ -29,17 +32,22 @@ const ignoreProductWishlistStatus =
   process.env.NEXT_PUBLIC_WISHLIST_IGNORE_PRODUCT_WISHLIST_STATUS === '1'
 
 export type ProductWishlistChipProps = ProductWishlistChipFragment & { sx?: SxProps<Theme> } & {
-  selectedOptions?: string[]
   showFeedbackMessage?: boolean
   buttonProps?: IconButtonProps
 }
 
+export type WishListItemType = NonNullable<
+  NonNullable<NonNullable<WishlistSummaryFragment['items_v2']>['items']>[0]
+>['product']
+
 const compName = 'ProductWishlistChipBase' as const
 const parts = ['root', 'wishlistIcon', 'wishlistIconActive', 'wishlistButton'] as const
 const { classes } = extendableComponent(compName, parts)
 
 export function ProductWishlistChipBase(props: ProductWishlistChipProps) {
-  const { name, sku, showFeedbackMessage, selectedOptions = [], buttonProps, sx = [] } = props
+  const { name, sku, url_key, showFeedbackMessage, buttonProps, sx = [] } = props
+
+  const addToCartForm = useFormAddProductsToCart(true)
 
   const [inWishlist, setInWishlist] = useState(false)
   const [displayMessageBar, setDisplayMessageBar] = useState(false)
@@ -85,7 +93,7 @@ export function ProductWishlistChipBase(props: ProductWishlistChipProps) {
       return
     }
 
-    if (!sku) {
+    if (!url_key || !sku) {
       return
     }
 
@@ -93,14 +101,15 @@ export function ProductWishlistChipBase(props: ProductWishlistChipProps) {
     if (loggedIn && !loading) {
       const inWishlistTest =
         GetCustomerWishlistData?.customer?.wishlists[0]?.items_v2?.items.map(
-          (item) => item?.product?.sku,
+          (item) => item?.product?.url_key,
         ) || []
-      setInWishlist(inWishlistTest.includes(sku))
+      setInWishlist(inWishlistTest.includes(url_key))
     } else if (!loggedIn) {
-      const inWishlistTest = guestWishlistData?.guestWishlist?.items.map((item) => item?.sku) || []
-      setInWishlist(inWishlistTest.includes(sku))
+      const inWishlistTest =
+        guestWishlistData?.guestWishlist?.items.map((item) => item?.url_key) || []
+      setInWishlist(inWishlistTest.includes(url_key))
     }
-  }, [loggedIn, sku, loading, GetCustomerWishlistData, guestWishlistData])
+  }, [loggedIn, url_key, loading, GetCustomerWishlistData, guestWishlistData, sku])
 
   const preventAnimationBubble: React.MouseEventHandler<HTMLButtonElement> = (e) => {
     e.preventDefault()
@@ -110,7 +119,10 @@ export function ProductWishlistChipBase(props: ProductWishlistChipProps) {
   const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
     e.preventDefault()
 
-    if (!sku) {
+    const selectedOptions = addToCartForm?.getValues().cartItems[0].selected_options ?? []
+    const selected_options = Array.isArray(selectedOptions) ? selectedOptions : [selectedOptions]
+
+    if (!url_key || !sku) {
       return
     }
 
@@ -119,7 +131,7 @@ 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?.url_key === url_key)
 
         if (item?.id) {
           // eslint-disable-next-line @typescript-eslint/no-floating-promises
@@ -127,17 +139,15 @@ export function ProductWishlistChipBase(props: ProductWishlistChipProps) {
         }
       } else {
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        addWishlistItem({
-          variables: { input: { sku, quantity: 1, selected_options: selectedOptions } },
-        })
+        addWishlistItem({ variables: { input: [{ sku, quantity: 1, selected_options }] } })
         setDisplayMessageBar(true)
       }
     } else if (inWishlist) {
       cache.modify({
         id: cache.identify({ __typename: 'GuestWishlist' }),
         fields: {
-          items(existingItems = []) {
-            const items = existingItems.filter((item) => item.sku !== sku)
+          items(existingItems: WishListItemType[] = []) {
+            const items = existingItems.filter((item) => item?.url_key !== url_key)
             return items
           },
         },
@@ -153,8 +163,9 @@ export function ProductWishlistChipBase(props: ProductWishlistChipProps) {
               {
                 __typename: 'GuestWishlistItem',
                 sku,
+                url_key,
                 quantity: 1,
-                selected_options: selectedOptions,
+                selected_options,
               },
             ],
           },
@@ -168,7 +179,7 @@ export function ProductWishlistChipBase(props: ProductWishlistChipProps) {
   const output = (
     <Box>
       <IconButton
-        key={sku}
+        key={url_key}
         onClick={handleClick}
         onMouseDown={preventAnimationBubble}
         size='small'

package/components/ProductWishlistChip/ProductWishlistChipDetailConfigurable.tsx

@@ -1,23 +1,5 @@
-import { useConfigurableContext } from '@graphcommerce/magento-product-configurable'
 import { ProductWishlistChipBase, ProductWishlistChipProps } from './ProductWishlistChipBase'
 
 export function ProductWishlistChipDetailConfigurable(props: ProductWishlistChipProps) {
-  const { sku } = props
-  const context = useConfigurableContext(sku ?? '')
-
-  let selectedOptions: string[] = []
-
-  if (sku) {
-    selectedOptions = (Object as any).values(context.selection)
-  }
-
-  return (
-    <ProductWishlistChipBase
-      sx={(theme) => ({
-        boxShadow: theme.shadows[6],
-      })}
-      selectedOptions={selectedOptions}
-      {...props}
-    />
-  )
+  return <ProductWishlistChipBase sx={(theme) => ({ boxShadow: theme.shadows[6] })} {...props} />
 }

package/components/WishlistItem/WishlistItem.tsx

@@ -11,7 +11,7 @@ type OptionalProductWishlistParent = {
 
 export type WishlistItemProps = PropsWithChildren<WishlistItemProductFragment> & {
   sx?: SxProps<Theme>
-  selectedOptions?: InputMaybe<InputMaybe<string> | InputMaybe<string>[]> | undefined
+  selectedOptions?: InputMaybe<string[]> | undefined
 } & OptionalProductWishlistParent
 
 export function WishlistItem(props: WishlistItemProps) {

package/components/WishlistItem/WishlistItemBase.tsx

@@ -80,7 +80,9 @@ export function WishlistItemBase(props: WishlistItemBaseProps) {
           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?.url_key === url_key,
+          )
           if (item?.id) {
             itemIdToDelete = item.id
           }

package/components/WishlistItems/WishlistItems.tsx

@@ -18,7 +18,7 @@ export function WishlistItems(props: WishlistProps) {
   /** Structure between guest and customer wishlist differs */
   return (
     <>
-      {wishlistItemsData.items?.map((item) => {
+      {wishlistItemsData.data?.map((item) => {
         if (!item?.uid && !item?.id) return null
 
         const productData = item?.product ? item?.product : item

package/hooks/useMergeGuestWishlistWithCustomer.tsx

@@ -10,18 +10,18 @@ export function useMergeGuestWishlistWithCustomer() {
   const { loggedIn } = useCustomerSession()
   const { cache } = useApolloClient()
 
-  const guestSkus = useQuery(GuestWishlistDocument, { ssr: false }).data?.guestWishlist?.items
+  const guestItems = useQuery(GuestWishlistDocument, { ssr: false }).data?.guestWishlist?.items
 
   const guestProducts = useQuery(GetGuestWishlistProductsDocument, {
     ssr: false,
-    variables: { filters: { sku: { in: guestSkus?.map((item) => item?.sku) } } },
-    skip: guestSkus && guestSkus?.length === 0,
+    variables: { filters: { url_key: { in: guestItems?.map((item) => item?.url_key) } } },
+    skip: guestItems && guestItems?.length === 0,
   }).data?.products?.items
 
   const [addWishlistItem] = useMutation(AddProductToWishlistDocument)
 
   useEffect(() => {
-    if (!loggedIn || !guestSkus || guestSkus.length === 0) return
+    if (!loggedIn || !guestItems || guestItems.length === 0) return
 
     const clearGuestList = () =>
       cache.evict({ id: cache.identify({ __typename: 'GuestWishlist' }) })
@@ -29,12 +29,12 @@ export function useMergeGuestWishlistWithCustomer() {
     if (guestProducts?.length === 0) {
       clearGuestList()
     } else {
-      const input = guestSkus
+      const input = guestItems
         .filter((item) => guestProducts?.find((i) => i?.sku === item.sku))
         .map(({ sku, selected_options, quantity }) => ({ sku, selected_options, quantity }))
 
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       if (input.length) addWishlistItem({ variables: { input } }).then(clearGuestList)
     }
-  }, [addWishlistItem, cache, guestProducts, guestSkus, loggedIn])
+  }, [addWishlistItem, cache, guestProducts, guestItems, loggedIn])
 }

package/hooks/useWishlistItems.tsx

@@ -1,14 +1,26 @@
-import { useQuery } from '@graphcommerce/graphql'
+import { QueryResult, useQuery } from '@graphcommerce/graphql'
 import { useCustomerSession } from '@graphcommerce/magento-customer'
-import { GetGuestWishlistProductsDocument } from '../queries/GetGuestWishlistProducts.gql'
-import { GetWishlistProductsDocument } from '../queries/GetWishlistProducts.gql'
+import {
+  GetGuestWishlistProductsDocument,
+  GetGuestWishlistProductsQuery,
+} from '../queries/GetGuestWishlistProducts.gql'
+import {
+  GetWishlistProductsDocument,
+  GetWishlistProductsQuery,
+} from '../queries/GetWishlistProducts.gql'
 import { GuestWishlistDocument } from '../queries/GuestWishlist.gql'
 
-export function useWishlistItems() {
-  const { loggedIn } = useCustomerSession()
-
-  let wishlistItems
+type WishListData =
+  | NonNullable<GetGuestWishlistProductsQuery['products']>['items']
+  | NonNullable<
+      NonNullable<NonNullable<GetWishlistProductsQuery['customer']>['wishlists'][0]>['items_v2']
+    >['items']
 
+export function useWishlistItems(): Omit<QueryResult<GetGuestWishlistProductsQuery>, 'data'> & {
+  data: WishListData
+} {
+  const { loggedIn } = useCustomerSession()
+  let wishlistItems: WishListData = []
   /** Get customer wishlist from session */
   const customerWl = useQuery(GetWishlistProductsDocument, { ssr: false, skip: !loggedIn })
 
@@ -22,14 +34,20 @@ export function useWishlistItems() {
     skip: guestSkus.length === 0,
   })
 
-  if (loggedIn) {
-    wishlistItems = customerWl.data?.customer?.wishlists[0]?.items_v2?.items
-  } else {
-    wishlistItems = guestProducts.data?.products?.items || []
-  }
+  const loading = guestWl.loading || guestProducts.loading || customerWl.loading
+
+  // When loading the queries, data will return undefined. While we load the new data, we want
+  // to return the previous data, to prevent the UI for going in a loading state
+  if (loading && !loggedIn) wishlistItems = guestProducts.previousData?.products?.items
+  if (loading && loggedIn)
+    wishlistItems = customerWl.previousData?.customer?.wishlists[0]?.items_v2?.items
+
+  if (!loading && loggedIn) wishlistItems = customerWl.data?.customer?.wishlists[0]?.items_v2?.items
+  if (!loading && !loggedIn) wishlistItems = guestProducts.data?.products?.items
 
   return {
-    items: wishlistItems,
-    loading: guestWl.loading || guestProducts.loading || customerWl.loading,
+    ...guestProducts,
+    data: wishlistItems,
+    loading,
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/magento-wishlist",
-  "version": "1.6.11",
+  "version": "1.7.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -22,12 +22,12 @@
     "@graphcommerce/graphql": "3.4.8",
     "@graphcommerce/graphql-mesh": "4.2.0",
     "@graphcommerce/image": "3.1.9",
-    "@graphcommerce/magento-cart": "4.8.3",
-    "@graphcommerce/magento-customer": "4.11.3",
-    "@graphcommerce/magento-product": "4.5.10",
-    "@graphcommerce/magento-product-configurable": "4.2.11",
-    "@graphcommerce/magento-store": "4.2.35",
-    "@graphcommerce/next-ui": "4.26.0"
+    "@graphcommerce/magento-cart": "4.8.4",
+    "@graphcommerce/magento-customer": "4.11.4",
+    "@graphcommerce/magento-product": "4.6.0",
+    "@graphcommerce/magento-product-configurable": "4.3.0",
+    "@graphcommerce/magento-store": "4.3.0",
+    "@graphcommerce/next-ui": "4.27.0"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",

package/queries/GuestWishlist.graphql

@@ -4,6 +4,7 @@ query GuestWishlist {
     items {
       __typename
       sku
+      url_key
       selected_options
       quantity
     }

package/queries/GuestWishlist.graphqls

@@ -8,6 +8,7 @@ type GuestWishlist {
 
 type GuestWishlistItem {
   sku: String!
+  url_key: String!
   selected_options: [ID]
   quantity: Float!
 }

package/queries/WishlistSummaryFragment.graphql

@@ -6,7 +6,7 @@ fragment WishlistSummaryFragment on Wishlist {
       id
       product {
         uid
-        sku
+        url_key
       }
     }
   }