@graphcommerce/magento-wishlist 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @graphcommerce/magento-wishlist
+
+## 1.0.0
+
+### Major Changes
+
+- [#1256](https://github.com/graphcommerce-org/graphcommerce/pull/1256) [`669a17a97`](https://github.com/graphcommerce-org/graphcommerce/commit/669a17a973c47c00fed4a649a9da0bfc5670c5da) Thanks [@timhofman](https://github.com/timhofman)! - Wishlist
+
+### Patch Changes
+
+- Updated dependencies [[`669a17a97`](https://github.com/graphcommerce-org/graphcommerce/commit/669a17a973c47c00fed4a649a9da0bfc5670c5da)]:
+  - @graphcommerce/magento-product@4.3.0
+  - @graphcommerce/magento-product-configurable@4.1.0

package/README.md

@@ -0,0 +1,62 @@
+# Wishlist
+
+This package enables visitors to manage their wishlist with or without an
+account.
+
+## Features
+
+- Manage wishlist without an account
+- Automatically migrate wishlist from guest session to account upon login
+- 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)
+- Enable/disable through Magento configuration item
+  'magento_wishlist_general_is_enabled'
+
+## Additional settings
+
+- Enable wishlist for logged in users only (for instance for B2B)
+
+Add the following configuration to your env file
+
+```
+NEXT_PUBLIC_WISHLIST_HIDE_FOR_GUEST="1"
+```
+
+- Force add products to wishlist (only availble for logged in users)
+
+In B2B cases you might want to add multiple configured variants of the same
+product to the wishlist, like a quick order list.
+
+Use this setting to force adding products to the wishlist, even when there
+already is a product with the same SKU in the wishlist.
+
+```
+NEXT_PUBLIC_WISHLIST_IGNORE_PRODUCT_WISHLIST_STATUS="1"
+```
+
+## Customizing wishlist styling
+
+- The ProductWishlistChip accepts SX props (see ProductWishlistChip and
+  ProductWishlistChipDetail)
+- Fancy a different icon? See:
+  https://www.graphcommerce.org/docs/framework/icons
+- Styleable through theme provider overMuiCssBaseline.styleOverrides (although
+  we do recommend to use the SX approach)
+
+## Roadmap
+
+- Wishlist overview: add to cart with configurable options (see 'Remarks')
+
+## Remarks
+
+Magento (<= 2.4.4) throws errors when retrieving product configuration for
+wishlist items. Currently selected products variants are stored, but not yet
+displayed in the wishlist overview
+
+Fetching configurable_options throws internal servers due to a mismatch in
+schema and implemented resolvers on Magento's side.
+
+Related issue:
+https://github.com/magento/magento2/commit/5c884244cd7f1bd55bb0b908943caaed3e3e762b

package/components/ProductWishlistChip/ProductWishlistChip.graphql

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

package/components/ProductWishlistChip/ProductWishlistChip.tsx

@@ -0,0 +1,5 @@
+import { ProductWishlistChipBase, ProductWishlistChipProps } from './ProductWishlistChipBase'
+
+export function ProductWishlistChip(props: ProductWishlistChipProps) {
+  return <ProductWishlistChipBase {...props} />
+}

package/components/ProductWishlistChip/ProductWishlistChipBase.tsx

@@ -0,0 +1,180 @@
+/* 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 { t } from '@lingui/macro'
+import { SxProps, Theme, IconButton } from '@mui/material'
+import { useState, useEffect } from 'react'
+import { useWishlistEnabled } from '../../hooks'
+import { AddProductToWishlistDocument } from '../../queries/AddProductToWishlist.gql'
+import { GetIsInWishlistsDocument } from '../../queries/GetIsInWishlists.gql'
+import { GuestWishlistDocument } from '../../queries/GuestWishlist.gql'
+import { RemoveProductFromWishlistDocument } from '../../queries/RemoveProductFromWishlist.gql'
+import { ProductWishlistChipFragment } from './ProductWishlistChip.gql'
+
+const hideForGuest = process.env.NEXT_PUBLIC_WISHLIST_HIDE_FOR_GUEST === '1'
+const ignoreProductWishlistStatus =
+  process.env.NEXT_PUBLIC_WISHLIST_IGNORE_PRODUCT_WISHLIST_STATUS === '1'
+
+export type ProductWishlistChipProps = ProductWishlistChipFragment & { sx?: SxProps<Theme> } & {
+  selectedOptions?: string[]
+}
+
+const name = 'ProductWishlistChipBase' as const
+const parts = ['root', 'wishlistIcon', 'wishlistIconActive', 'wishlistButton'] as const
+const { classes } = extendableComponent(name, parts)
+
+export function ProductWishlistChipBase(props: ProductWishlistChipProps) {
+  const { sku, selectedOptions = [], sx = [] } = props
+
+  const [inWishlist, setInWishlist] = useState(false)
+
+  const { data: token } = useQuery(CustomerTokenDocument)
+  const isLoggedIn = token?.customerToken && token?.customerToken.valid
+
+  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 })}
+    />
+  )
+
+  const activeHeart = (
+    <IconSvg
+      src={iconHeart}
+      size='medium'
+      className={classes.wishlistIconActive}
+      sx={(theme) => ({ color: theme.palette.primary.main, fill: 'currentcolor' })}
+    />
+  )
+
+  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) {
+      return
+    }
+
+    if (!sku) {
+      return
+    }
+
+    // Mark as active when product is available in either customer or guest wishlist
+    if (isLoggedIn && !loading) {
+      const inWishlistTest =
+        GetCustomerWishlistData?.customer?.wishlists[0]?.items_v2?.items.map(
+          (item) => item?.product?.sku,
+        ) || []
+      setInWishlist(inWishlistTest.includes(sku))
+    } else if (!isLoggedIn) {
+      const inWishlistTest = guestWishlistData?.guestWishlist?.items.map((item) => item?.sku) || []
+      setInWishlist(inWishlistTest.includes(sku))
+    }
+  }, [isLoggedIn, sku, loading, GetCustomerWishlistData, guestWishlistData])
+
+  const [addWishlistItem] = useMutation(AddProductToWishlistDocument)
+  const [removeWishlistItem] = useMutation(RemoveProductFromWishlistDocument)
+
+  const preventAnimationBubble: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.preventDefault()
+
+    if (!sku) {
+      return
+    }
+
+    if (isLoggedIn) {
+      if (inWishlist && !ignoreProductWishlistStatus) {
+        const wishlistItemsInSession =
+          GetCustomerWishlistData?.customer?.wishlists[0]?.items_v2?.items || []
+
+        const item = wishlistItemsInSession.find((element) => element?.product?.sku == sku)
+
+        if (item?.id) {
+          removeWishlistItem({ variables: { wishlistItemId: item.id } })
+        }
+      } else {
+        addWishlistItem({
+          variables: { input: { sku, quantity: 1, selected_options: selectedOptions } },
+        })
+      }
+    } else if (inWishlist) {
+      cache.modify({
+        id: cache.identify({ __typename: 'GuestWishlist' }),
+        fields: {
+          items(existingItems = []) {
+            const items = existingItems.filter((item) => item.sku !== sku)
+            return items
+          },
+        },
+      })
+    } else {
+      /** Merging of wishlist items is done by policy, see typePolicies.ts */
+      cache.writeQuery({
+        query: GuestWishlistDocument,
+        data: {
+          guestWishlist: {
+            __typename: 'GuestWishlist',
+            items: [
+              {
+                __typename: 'GuestWishlistItem',
+                sku,
+                quantity: 1,
+                selected_options: selectedOptions,
+              },
+            ],
+          },
+        },
+        broadcast: 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 ? t`Remove from wishlist` : t`Add to wishlist`}
+      aria-label={inWishlist ? t`Remove from wishlist` : t`Add to wishlist`}
+    >
+      {inWishlist ? activeHeart : heart}
+    </IconButton>
+  )
+
+  return !hideForGuest || isLoggedIn ? button : null
+}

package/components/ProductWishlistChip/ProductWishlistChipDetail.tsx

@@ -0,0 +1,12 @@
+import { ProductWishlistChipBase, ProductWishlistChipProps } from './ProductWishlistChipBase'
+
+export function ProductWishlistChipDetail(props: ProductWishlistChipProps) {
+  return (
+    <ProductWishlistChipBase
+      sx={(theme) => ({
+        boxShadow: theme.shadows[6],
+      })}
+      {...props}
+    />
+  )
+}

package/components/ProductWishlistChip/ProductWishlistChipDetailConfigurable.tsx

@@ -0,0 +1,23 @@
+import { useConfigurableContext } from '@graphcommerce/magento-product-configurable'
+import { ProductWishlistChipBase, ProductWishlistChipProps } from './ProductWishlistChipBase'
+
+export function ProductWishlistChipDetailConfigurable(props: ProductWishlistChipProps) {
+  const { sku } = props
+
+  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)
+  }
+
+  return (
+    <ProductWishlistChipBase
+      sx={(theme) => ({
+        boxShadow: theme.shadows[6],
+      })}
+      selectedOptions={selectedOptions}
+      {...props}
+    />
+  )
+}

package/components/WishlistFab/WishlistFab.tsx

@@ -0,0 +1,91 @@
+import { useQuery } from '@graphcommerce/graphql'
+import { CustomerTokenDocument } from '@graphcommerce/magento-customer'
+import { iconHeart, DesktopHeaderBadge, IconSvg, extendableComponent } from '@graphcommerce/next-ui'
+import { t } from '@lingui/macro'
+import { Fab, FabProps as FabPropsType, NoSsr, SxProps, Theme } from '@mui/material'
+import PageLink from 'next/link'
+import React, { useEffect } from 'react'
+import { useWishlistEnabled } from '../../hooks'
+import { GetIsInWishlistsDocument } from '../../queries/GetIsInWishlists.gql'
+import { GuestWishlistDocument } from '../../queries/GuestWishlist.gql'
+
+type WishlistFabContentProps = {
+  icon?: React.ReactNode
+  FabProps?: Omit<FabPropsType, 'children'>
+  sx?: SxProps<Theme>
+}
+
+const name = 'WishlistFab'
+const parts = ['root'] as const
+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 wishlistIcon = icon ?? <IconSvg src={iconHeart} size='large' />
+
+  return (
+    <PageLink href='/wishlist' passHref>
+      <Fab
+        color='inherit'
+        data-test-id='wishlist-fab'
+        aria-label={t`Wishlist`}
+        size='large'
+        className={classes.root}
+        {...FabProps}
+        sx={sx}
+      >
+        {activeWishlist ? (
+          <DesktopHeaderBadge color='primary' variant='dot' overlap='circular'>
+            {wishlistIcon}
+          </DesktopHeaderBadge>
+        ) : (
+          wishlistIcon
+        )}
+      </Fab>
+    </PageLink>
+  )
+}
+
+export function WishlistFab(props: WishlistFabContentProps) {
+  const isWishlistEnabled = useWishlistEnabled()
+
+  const { data: token } = useQuery(CustomerTokenDocument)
+  const isLoggedIn = token?.customerToken && token?.customerToken.valid
+
+  return (
+    <>
+      {isWishlistEnabled && (!hideForGuest || isLoggedIn) && (
+        <NoSsr>
+          <WishlistFabContent {...props} />
+        </NoSsr>
+      )}
+    </>
+  )
+}

package/components/WishlistItem/ProductAddToCart.tsx

@@ -0,0 +1,135 @@
+import type { ProductInterface } from '@graphcommerce/graphql-mesh'
+import { ApolloCartErrorAlert, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
+import {
+  ProductAddToCartDocument,
+  ProductAddToCartMutationVariables,
+} from '@graphcommerce/magento-product'
+import { MoneyProps } from '@graphcommerce/magento-store'
+import {
+  Button,
+  MessageSnackbar,
+  TextInputNumber,
+  iconChevronRight,
+  IconSvg,
+  extendableComponent,
+  AnimatedRow,
+} from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
+import { ButtonProps, Box, Alert } from '@mui/material'
+import { AnimatePresence } from 'framer-motion'
+import PageLink from 'next/link'
+import React from 'react'
+
+const { classes, selectors } = extendableComponent('ProductAddToCart', [
+  'root',
+  'button',
+  'price',
+  'divider',
+  'buttonWrapper',
+] as const)
+
+export type AddToCartProps = React.ComponentProps<typeof ProductAddToCart>
+
+export function ProductAddToCart(
+  props: Pick<ProductInterface, 'name'> & {
+    variables: Omit<ProductAddToCartMutationVariables, 'cartId'>
+    name: string
+    price: MoneyProps
+    additionalButtons?: React.ReactNode
+    children?: React.ReactNode
+  } & Omit<ButtonProps, 'type' | 'name'>,
+) {
+  const { name, children, variables, price, sx, additionalButtons, ...buttonProps } = props
+
+  const form = useFormGqlMutationCart(ProductAddToCartDocument, {
+    defaultValues: { ...variables },
+  })
+
+  const { handleSubmit, formState, error, muiRegister, required, data } = form
+  const submitHandler = handleSubmit(() => {})
+
+  return (
+    <Box component='form' onSubmit={submitHandler} noValidate className={classes.root}>
+      <Box
+        sx={(theme) => ({
+          gridArea: 'itemQuantity',
+        })}
+      >
+        <TextInputNumber
+          variant='outlined'
+          error={formState.isSubmitted && !!formState.errors.quantity}
+          required={required.quantity}
+          inputProps={{ min: 1 }}
+          {...muiRegister('quantity', { required: required.quantity })}
+          helperText={formState.isSubmitted && formState.errors.quantity}
+          disabled={formState.isSubmitting}
+          size='small'
+          sx={(theme) => ({
+            alignSelf: 'flex-start',
+          })}
+        />
+      </Box>
+      {children}
+      <Box
+        className={classes.buttonWrapper}
+        sx={(theme) => ({
+          gridArea: 'itemCartButton',
+          alignSelf: 'flex-start',
+          position: 'absolute',
+          left: '0',
+          bottom: '-35px',
+        })}
+      >
+        <Button
+          type='submit'
+          className={classes.button}
+          loading={formState.isSubmitting}
+          color='primary'
+          variant='text'
+          size='medium'
+          {...buttonProps}
+        >
+          <Trans>Add to Cart</Trans>
+        </Button>
+      </Box>
+
+      <ApolloCartErrorAlert error={error} />
+
+      <AnimatePresence initial={false}>
+        {data?.addProductsToCart?.user_errors.map((e) => (
+          <AnimatedRow key={e?.code}>
+            <Alert severity='error'>{e?.message}</Alert>
+          </AnimatedRow>
+        ))}
+      </AnimatePresence>
+
+      <MessageSnackbar
+        open={
+          !formState.isSubmitting &&
+          formState.isSubmitSuccessful &&
+          !error?.message &&
+          !data?.addProductsToCart?.user_errors?.length
+        }
+        variant='pill'
+        action={
+          <PageLink href='/cart' passHref>
+            <Button
+              id='view-shopping-cart-button'
+              size='medium'
+              variant='pill'
+              color='secondary'
+              endIcon={<IconSvg src={iconChevronRight} />}
+            >
+              <Trans>View shopping cart</Trans>
+            </Button>
+          </PageLink>
+        }
+      >
+        <Trans>
+          <strong>{name}</strong> has been added to your shopping cart!
+        </Trans>
+      </MessageSnackbar>
+    </Box>
+  )
+}
+ProductAddToCart.selectors = selectors

package/components/WishlistItem/WishlistItem.graphql

@@ -0,0 +1,3 @@
+fragment WishlistItem on WishlistItemInterface @injectable {
+  id
+}

package/components/WishlistItem/WishlistItem.tsx

@@ -0,0 +1,30 @@
+/* eslint-disable @typescript-eslint/no-floating-promises */
+/* eslint-disable react-hooks/rules-of-hooks */
+import { SxProps, Theme } from '@mui/material'
+
+import { PropsWithChildren } from 'react'
+import { ProductAddToCart } from './ProductAddToCart'
+import { WishlistItemBase } from './WishlistItemBase'
+import { WishlistItemProductFragment } from './WishlistItemProduct.gql'
+
+type OptionalProductWishlistParent = {
+  wishlistItemId?: string
+}
+
+export type WishlistItemProps = PropsWithChildren<WishlistItemProductFragment> & {
+  sx?: SxProps<Theme>
+} & OptionalProductWishlistParent
+
+export function WishlistItem(props: WishlistItemProps) {
+  const { sku, name, price_range } = props
+
+  return (
+    <WishlistItemBase {...props}>
+      <ProductAddToCart
+        variables={{ sku: sku ?? '', quantity: 1 }}
+        name={name ?? ''}
+        price={price_range.minimum_price.regular_price}
+      />
+    </WishlistItemBase>
+  )
+}