@graphcommerce/magento-wishlist 9.0.0-canary.98 → 9.0.0

package/components/ProductWishlistChip/ProductWishlistChipDetail.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
-import { ProductWishlistIconButton, ProductWishlistChipProps } from './ProductWishlistIconButton'
+import type { ProductWishlistChipProps } from './ProductWishlistIconButton'
+import { ProductWishlistIconButton } from './ProductWishlistIconButton'
 
 /**
  * @deprecated use ProductWishlistIconButton with an sx prop.
  */
-export const ProductWishlistChipDetail = React.memo<ProductWishlistChipProps>((props) => {
-  return <ProductWishlistIconButton sx={{ boxShadow: 6 }} {...props} />
-})
+export const ProductWishlistChipDetail = React.memo<ProductWishlistChipProps>((props) => (
+  <ProductWishlistIconButton sx={{ boxShadow: 6 }} {...props} />
+))

package/components/ProductWishlistChip/ProductWishlistIconButton.tsx

@@ -1,28 +1,31 @@
-import { ProductListItemFragment } from '@graphcommerce/magento-product'
+import type { ProductListItemFragment } from '@graphcommerce/magento-product'
+import type { IconSvgProps } from '@graphcommerce/next-ui'
 import {
   IconSvg,
-  iconHeart,
-  extendableComponent,
   MessageSnackbar,
+  extendableComponent,
   iconChevronRight,
+  iconHeart,
 } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
-import { SxProps, Theme, IconButton, Box, IconButtonProps, Button } from '@mui/material'
+import type { IconButtonProps, SxProps, Theme } from '@mui/material'
+import { Box, Button, IconButton } from '@mui/material'
 import React from 'react'
-import { useWishlistEnabled, useAddProductToWishlistAction } from '../../hooks'
+import { useAddProductToWishlistAction, useWishlistEnabled } from '../../hooks'
 
 export type ProductWishlistChipProps = ProductListItemFragment & {
   sx?: SxProps<Theme>
   buttonProps?: IconButtonProps
+  iconSvgProps?: Partial<IconSvgProps>
 }
 
-const compName = 'ProductWishlistChipBase' as const
+const compName = 'ProductWishlistChipBase'
 const parts = ['root', 'wishlistIcon', 'wishlistIconActive', 'wishlistButton'] as const
 const { classes } = extendableComponent(compName, parts)
 
 export const ProductWishlistIconButton = React.memo<ProductWishlistChipProps>((props) => {
-  const { buttonProps, sx = [], ...product } = props
+  const { buttonProps, iconSvgProps, sx = [], ...product } = props
   const enabled = useWishlistEnabled()
   const { current, onClick, cancelBubble, showSuccess, hideShowSuccess } =
     useAddProductToWishlistAction({ product, index: 0 })
@@ -52,6 +55,7 @@ export const ProductWishlistIconButton = React.memo<ProductWishlistChipProps>((p
             size='medium'
             className={classes.wishlistIconActive}
             sx={(theme) => ({ color: theme.palette.primary.main, fill: 'currentcolor' })}
+            {...iconSvgProps}
           />
         ) : (
           <IconSvg
@@ -71,6 +75,7 @@ export const ProductWishlistIconButton = React.memo<ProductWishlistChipProps>((p
                     : theme.palette.primary.contrastText,
               },
             })}
+            {...iconSvgProps}
           />
         )}
       </IconButton>

package/components/WishlistFab/WishlistFab.tsx

@@ -1,13 +1,14 @@
-import { useCustomerSession } from '@graphcommerce/magento-customer'
-import { iconHeart, DesktopHeaderBadge, IconSvg, extendableComponent } from '@graphcommerce/next-ui'
+import { DesktopHeaderBadge, IconSvg, extendableComponent, iconHeart } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
-import { Fab, FabProps as FabPropsType, NoSsr, SxProps, Theme } from '@mui/material'
+import type { BadgeProps, FabProps as FabPropsType, SxProps, Theme } from '@mui/material'
+import { Fab, NoSsr } from '@mui/material'
 import React from 'react'
 import { useWishlistEnabled, useWishlistItems } from '../../hooks'
 
-type WishlistFabContentProps = {
+export type WishlistFabContentProps = {
   icon?: React.ReactNode
   FabProps?: Omit<FabPropsType, 'children'>
+  BadgeProps?: BadgeProps
   sx?: SxProps<Theme>
   activeWishlist: boolean
 }
@@ -17,7 +18,7 @@ const parts = ['root'] as const
 const { classes } = extendableComponent(name, parts)
 
 function WishlistFabContent(props: WishlistFabContentProps) {
-  const { icon, FabProps, sx, activeWishlist } = props
+  const { icon, FabProps, BadgeProps, sx, activeWishlist } = props
 
   const wishlistIcon = icon ?? <IconSvg src={iconHeart} size='large' />
 
@@ -34,7 +35,7 @@ function WishlistFabContent(props: WishlistFabContentProps) {
     >
       <NoSsr fallback={wishlistIcon}>
         {activeWishlist ? (
-          <DesktopHeaderBadge color='primary' variant='dot' overlap='circular'>
+          <DesktopHeaderBadge color='primary' variant='dot' overlap='circular' {...BadgeProps}>
             {wishlistIcon}
           </DesktopHeaderBadge>
         ) : (
@@ -52,7 +53,7 @@ export function WishlistFab(props: WishlistFabProps) {
   const wishlist = useWishlistItems()
 
   if (!enabled) return null
-  const activeWishlist = wishlist.items.length > 0 ?? false
+  const activeWishlist = wishlist.items.length > 0
 
   return (
     <NoSsr fallback={<WishlistFabContent {...props} activeWishlist={false} />}>

package/components/WishlistItem/AddWishlistItemToCart.tsx

@@ -1,14 +1,16 @@
+import type {
+  AddToCartItemSelector,
+  UseAddProductsToCartActionProps,
+} from '@graphcommerce/magento-product'
 import {
-  AddProductsToCartQuantity,
   AddProductsToCartButton,
+  AddProductsToCartQuantity,
   useFormAddProductsToCart,
-  UseAddProductsToCartActionProps,
-  AddToCartItemSelector,
 } from '@graphcommerce/magento-product'
-import { InputMaybe } from '@graphcommerce/next-config'
+import type { InputMaybe } from '@graphcommerce/next-config'
 import { Box } from '@mui/material'
 
-type AddWishlistItemToCartProps = UseAddProductsToCartActionProps &
+export type AddWishlistItemToCartProps = UseAddProductsToCartActionProps &
   AddToCartItemSelector & { selectedOptions?: InputMaybe<string[]> | undefined }
 
 export function AddWishlistItemToCart(props: AddWishlistItemToCartProps) {

package/components/WishlistItemActionCard/ConfigurableWishlistItemAction.tsx

@@ -5,7 +5,10 @@ import { Trans } from '@lingui/react'
 import { Button } from '@mui/material'
 import { AddWishlistItemToCart } from '../WishlistItem/AddWishlistItemToCart'
 
-type ConfigurableWishlistItemActionProps = Omit<WishlistItemActionCardProps, 'selectedOptions'>
+export type ConfigurableWishlistItemActionProps = Omit<
+  WishlistItemActionCardProps,
+  'selectedOptions'
+>
 
 export function ConfigurableWishlistItemAction(props: ConfigurableWishlistItemActionProps) {
   const { item } = props

package/components/WishlistItemActionCard/WishlistItemActionCard.tsx

@@ -1,18 +1,15 @@
 import { Image } from '@graphcommerce/image'
 import { AddProductsToCartForm, useProductLink } from '@graphcommerce/magento-product'
 import { Money } from '@graphcommerce/magento-store'
-import { InputMaybe } from '@graphcommerce/next-config'
-import {
-  extendableComponent,
-  ActionCard,
-  ActionCardProps,
-  actionCardImageSizes,
-} from '@graphcommerce/next-ui'
+import type { InputMaybe } from '@graphcommerce/next-config'
+import type { ActionCardProps } from '@graphcommerce/next-ui'
+import { ActionCard, actionCardImageSizes, extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Button, Link, SxProps, Theme } from '@mui/material'
-import { ReactNode } from 'react'
+import type { SxProps, Theme, ButtonProps } from '@mui/material'
+import { Button, Link } from '@mui/material'
+import type { ReactNode } from 'react'
 import { useRemoveProductsFromWishlist } from '../../hooks'
-import { WishlistItemFragment } from '../../queries/WishlistItem.gql'
+import type { WishlistItemFragment } from '../../queries/WishlistItem.gql'
 import { AddWishlistItemToCart } from '../WishlistItem/AddWishlistItemToCart'
 
 export type WishlistItemActionCardProps = {
@@ -21,10 +18,11 @@ export type WishlistItemActionCardProps = {
   selectedOptions?: InputMaybe<string[]> | undefined
   isConfigurableUncompleted?: boolean
   secondaryAction?: ReactNode
+  actionButtonProps?: ButtonProps
 } & OwnerState &
   Omit<ActionCardProps, 'value' | 'image' | 'price' | 'title' | 'action'>
 type OwnerState = { withOptions?: boolean }
-const compName = 'WishlistItemActionCard' as const
+const compName = 'WishlistItemActionCard'
 const parts = [
   'item',
   'picture',
@@ -52,6 +50,7 @@ export function WishlistItemActionCard(props: WishlistItemActionCardProps) {
     selectedOptions,
     secondaryAction,
     variant = 'default',
+    actionButtonProps,
     ...rest
   } = props
   const { id, product } = item
@@ -172,6 +171,7 @@ export function WishlistItemActionCard(props: WishlistItemActionCardProps) {
             size='medium'
             type='button'
             onClick={() => remove([id])}
+            {...actionButtonProps}
           >
             <Trans id='Remove' />
           </Button>

package/components/WishlistMenuFabItem/WishlistMenuFabItem.tsx

@@ -1,9 +1,11 @@
-import { MenuFabSecondaryItem, iconHeart, IconSvg } from '@graphcommerce/next-ui'
-import { Badge, NoSsr, SxProps, Theme } from '@mui/material'
-import React, { MouseEventHandler } from 'react'
-import { useWishlistEnabled, useWishlistItems } from '../../hooks'
-
-type WishlistMenuFabItemContentProps = {
+import { IconSvg, MenuFabSecondaryItem, iconHeart } from '@graphcommerce/next-ui'
+import type { SxProps, Theme } from '@mui/material'
+import { Badge, NoSsr } from '@mui/material'
+import type { MouseEventHandler } from 'react'
+import React from 'react'
+import { useWishlistItems } from '../../hooks'
+
+export type WishlistMenuFabItemContentProps = {
   icon?: React.ReactNode
   children: React.ReactNode
   sx?: SxProps<Theme>
@@ -42,7 +44,7 @@ export function WishlistMenuFabItem(props: WishlistMenuFabItemProps) {
 
   if (!wishlist.enabled) return null
 
-  const activeWishlist = wishlist.items.length > 0 ?? false
+  const activeWishlist = wishlist.items.length > 0
 
   return (
     <NoSsr fallback={<WishlistMenuFabItemContent {...props} activeWishlist={false} />}>

package/components/index.ts

@@ -1,5 +1,4 @@
 export * from './ProductWishlistChip/ProductWishlistChipDetail'
-export * from './ProductWishlistChip/ProductWishlistChipDetailConfigurable'
 export * from './ProductWishlistChip/ProductWishlistChip'
 export * from './ProductWishlistChip/ProductWishlistIconButton'
 export * from './WishlistFab/WishlistFab'

package/hooks/useAddProductToWishlistAction.ts

@@ -1,10 +1,11 @@
 import { useWatch } from '@graphcommerce/ecommerce-ui'
 import { useCustomerSession } from '@graphcommerce/magento-customer'
-import { AddToCartItemSelector, useFormAddProductsToCart } from '@graphcommerce/magento-product'
+import type { AddToCartItemSelector } from '@graphcommerce/magento-product'
+import { useFormAddProductsToCart } from '@graphcommerce/magento-product'
 import { nonNullable } from '@graphcommerce/next-ui'
 import { useEventCallback } from '@mui/material'
 import { useState } from 'react'
-import { WishlistItemFragment } from '../queries/WishlistItem.gql'
+import type { WishlistItemFragment } from '../queries/WishlistItem.gql'
 import { useAddProductsToWishlist } from './useAddProductsToWishlist/useAddProductsToWishlist'
 import { useRemoveProductsFromWishlist } from './useRemoveProductsFromWishlist'
 import { useWishlistItems } from './useWishlistitems'

package/hooks/useAddProductsToWishlist/useAddProductsToWishlist.ts

@@ -1,12 +1,10 @@
 import { useApolloClient } from '@graphcommerce/graphql'
 import { useCustomerSession } from '@graphcommerce/magento-customer'
-import {
-  AddProductToWishlistDocument,
-  AddProductToWishlistMutationVariables,
-} from './AddProductToWishlist.gql'
-import { UseWishlistGuestDocument } from '../useWishlistitems'
-import { WishlistItemFragment } from '../../queries/WishlistItem.gql'
 import { useEventCallback } from '@mui/material'
+import type { WishlistItemFragment } from '../../queries/WishlistItem.gql'
+import { UseWishlistGuestDocument } from '../useWishlistitems'
+import type { AddProductToWishlistMutationVariables } from './AddProductToWishlist.gql'
+import { AddProductToWishlistDocument } from './AddProductToWishlist.gql'
 
 function isMutationVariableInput(
   input: AddProductToWishlistMutationVariables['input'] | WishlistItemFragment[],

package/hooks/useMergeGuestWishlistWithCustomer.tsx

@@ -2,8 +2,8 @@ import { useApolloClient } from '@graphcommerce/graphql'
 import { useCustomerSession } from '@graphcommerce/magento-customer'
 import { filterNonNullableKeys, nonNullable } from '@graphcommerce/next-ui'
 import { useEffect } from 'react'
-import { UseWishlistCustomerDocument } from './useWishlistitems/UseWishlistCustomer.gql'
 import { useAddProductsToWishlist } from './useAddProductsToWishlist/useAddProductsToWishlist'
+import { UseWishlistCustomerDocument } from './useWishlistitems/UseWishlistCustomer.gql'
 
 /** Merge guest wishlist items to customer session upon login */
 export function useMergeGuestWishlistWithCustomer() {
@@ -25,6 +25,7 @@ export function useMergeGuestWishlistWithCustomer() {
       return
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     add(
       wishlist
         ?.map((item) => {
@@ -42,5 +43,5 @@ export function useMergeGuestWishlistWithCustomer() {
         })
         .filter(nonNullable),
     ).then(clearGuestList)
-  }, [client, loggedIn])
+  }, [add, client, loggedIn])
 }

package/hooks/useRemoveProductsFromWishlist/useRemoveProductsFromWishlist.tsx

@@ -2,11 +2,9 @@ import { useApolloClient } from '@graphcommerce/graphql'
 import { useCustomerSession } from '@graphcommerce/magento-customer'
 import { filterNonNullableKeys } from '@graphcommerce/next-ui'
 import { useEventCallback } from '@mui/material'
-import {
-  UseRemoveProductsFromWishlistDocument,
-  UseRemoveProductsFromWishlistMutationVariables,
-} from './UseRemoveProductsFromWishlist.gql'
 import { UseWishlistGuestDocument } from '../useWishlistitems'
+import type { UseRemoveProductsFromWishlistMutationVariables } from './UseRemoveProductsFromWishlist.gql'
+import { UseRemoveProductsFromWishlistDocument } from './UseRemoveProductsFromWishlist.gql'
 
 export function useRemoveProductsFromWishlist() {
   const client = useApolloClient()

package/hooks/useWishlistitems/useWishlistItems.tsx

@@ -1,23 +1,19 @@
-import { QueryResult, useApolloClient, useQuery } from '@graphcommerce/graphql'
+import type { QueryResult } from '@graphcommerce/graphql'
 import {
   useCustomerQuery,
   useCustomerSession,
   useGuestQuery,
 } from '@graphcommerce/magento-customer'
-import type { Get } from 'type-fest'
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+import type { WishlistItemFragment } from '../../queries/WishlistItem.gql'
 import { useWishlistEnabled } from '../useWishlistEnabled/useWishlistEnabled'
-import {
-  UseWishlistCustomerDocument,
+import type {
   UseWishlistCustomerQuery,
   UseWishlistCustomerQueryVariables,
 } from './UseWishlistCustomer.gql'
-import {
-  UseWishlistGuestDocument,
-  UseWishlistGuestQuery,
-  UseWishlistGuestQueryVariables,
-} from './UseWishlistGuest.gql'
-import { WishlistItemFragment } from '../../queries/WishlistItem.gql'
-import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { UseWishlistCustomerDocument } from './UseWishlistCustomer.gql'
+import type { UseWishlistGuestQuery, UseWishlistGuestQueryVariables } from './UseWishlistGuest.gql'
+import { UseWishlistGuestDocument } from './UseWishlistGuest.gql'
 
 export type UseWishlistItemsGuestReturn = {
   enabled: boolean

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/magento-wishlist",
-  "version": "9.0.0-canary.98",
+  "version": "9.0.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -13,25 +13,25 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.98",
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.98",
-    "@graphcommerce/graphql": "^9.0.0-canary.98",
-    "@graphcommerce/graphql-mesh": "^9.0.0-canary.98",
-    "@graphcommerce/image": "^9.0.0-canary.98",
-    "@graphcommerce/magento-cart": "^9.0.0-canary.98",
-    "@graphcommerce/magento-customer": "^9.0.0-canary.98",
-    "@graphcommerce/magento-product": "^9.0.0-canary.98",
-    "@graphcommerce/magento-product-configurable": "^9.0.0-canary.98",
-    "@graphcommerce/magento-store": "^9.0.0-canary.98",
-    "@graphcommerce/next-config": "^9.0.0-canary.98",
-    "@graphcommerce/next-ui": "^9.0.0-canary.98",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.98",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.98",
+    "@graphcommerce/ecommerce-ui": "^9.0.0",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0",
+    "@graphcommerce/graphql": "^9.0.0",
+    "@graphcommerce/graphql-mesh": "^9.0.0",
+    "@graphcommerce/image": "^9.0.0",
+    "@graphcommerce/magento-cart": "^9.0.0",
+    "@graphcommerce/magento-customer": "^9.0.0",
+    "@graphcommerce/magento-product": "^9.0.0",
+    "@graphcommerce/magento-product-configurable": "^9.0.0",
+    "@graphcommerce/magento-store": "^9.0.0",
+    "@graphcommerce/next-config": "^9.0.0",
+    "@graphcommerce/next-ui": "^9.0.0",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",
     "@mui/material": "^5.10.16",
-    "framer-motion": "^10.0.0",
+    "framer-motion": "^11.0.0",
     "next": "*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

package/plugins/ConfigurableWishlistItemActionCard.tsx

@@ -8,7 +8,7 @@ export const config: PluginConfig = {
   module: '@graphcommerce/magento-wishlist',
 }
 
-export const WishlistItemActionCard = (props: PluginProps<WishlistItemActionCardProps>) => {
+export function WishlistItemActionCard(props: PluginProps<WishlistItemActionCardProps>) {
   const { Prev, details, item } = props
   if (item.__typename !== 'ConfigurableWishlistItem') return <Prev {...props} />
   const { configurable_options } = item

package/plugins/WishlistProductAddToCartFormPlugin.tsx

@@ -1,9 +1,7 @@
 import { useCustomerSession } from '@graphcommerce/magento-customer'
-import {
-  useFormAddProductsToCart,
-  AddProductsToCartFormProps,
-} from '@graphcommerce/magento-product'
-import { InputMaybe, PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import type { AddProductsToCartFormProps } from '@graphcommerce/magento-product'
+import { useFormAddProductsToCart } from '@graphcommerce/magento-product'
+import type { InputMaybe, PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import { useWishlistItems } from '../hooks'
@@ -42,7 +40,7 @@ function WishlistUrlHandler() {
           ) || []
         : []
 
-    setValue(`cartItems.0.selected_options`, wishlistItemOptions)
+    setValue('cartItems.0.selected_options', wishlistItemOptions)
     setWishlistItemId(router.query.wishlistItemId as string)
     setIsInitialLoad(false)
   }, [

package/components/ProductWishlistChip/ProductWishlistChipDetailConfigurable.tsx

@@ -1,8 +0,0 @@
-import { ProductWishlistIconButton, ProductWishlistChipProps } from './ProductWishlistIconButton'
-
-/**
- * @deprecated
- */
-export function ProductWishlistChipDetailConfigurable(props: ProductWishlistChipProps) {
-  return <ProductWishlistIconButton sx={{ boxShadow: 6 }} {...props} />
-}