@graphcommerce/magento-wishlist 1.0.0

package/components/WishlistItem/WishlistItemBase.tsx

@@ -0,0 +1,303 @@
+/* eslint-disable @typescript-eslint/no-floating-promises */
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useQuery, useMutation, useApolloClient } from '@graphcommerce/graphql'
+import { Image } from '@graphcommerce/image'
+import { useDisplayInclTax } from '@graphcommerce/magento-cart'
+import { CustomerTokenDocument } 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'
+import { Trans, t } from '@lingui/macro'
+import { Badge, Box, Link, SxProps, Theme, Typography } from '@mui/material'
+import IconButton from '@mui/material/IconButton'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+import PageLink from 'next/link'
+import { useState, PropsWithChildren } from 'react'
+import { GetIsInWishlistsDocument } from '../../queries/GetIsInWishlists.gql'
+import { RemoveProductFromWishlistDocument } from '../../queries/RemoveProductFromWishlist.gql'
+import { WishlistItemProductFragment } from './WishlistItemProduct.gql'
+
+const rowImageSize = responsiveVal(70, 125)
+
+type OptionalProductWishlistParent = {
+  wishlistItemId?: string
+}
+
+export type WishlistItemBaseProps = PropsWithChildren<WishlistItemProductFragment> & {
+  sx?: SxProps<Theme>
+} & OwnerState &
+  OptionalProductWishlistParent
+
+type OwnerState = { withOptions?: boolean }
+const compName = 'WishlistItemBase' as const
+const parts = [
+  'item',
+  'picture',
+  'badge',
+  'productLink',
+  'image',
+  'itemName',
+  'itemPrice',
+  'discountPrice',
+  'root',
+] as const
+const { classes } = extendableComponent<OwnerState, typeof compName, typeof parts>(compName, parts)
+
+export function WishlistItemBase(props: WishlistItemBaseProps) {
+  const {
+    sku,
+    name,
+    url_key,
+    price_range,
+    small_image,
+    __typename: productType,
+    children,
+    sx = [],
+    wishlistItemId,
+  } = props
+
+  const productLink = useProductLink({ url_key, __typename: productType })
+  const inclTaxes = useDisplayInclTax()
+  const { cache } = useApolloClient()
+
+  const { data: token } = useQuery(CustomerTokenDocument)
+  const isLoggedIn = token?.customerToken && token?.customerToken.valid
+
+  const { data: GetCustomerWishlistData, loading } = useQuery(GetIsInWishlistsDocument, {
+    skip: !isLoggedIn,
+  })
+
+  const [removeWishlistItem] = useMutation(RemoveProductFromWishlistDocument)
+
+  const [anchorEl, setAnchorEl] = useState(null)
+  const open = Boolean(anchorEl)
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = (event) => {
+    if (event.target.id === 'remove') {
+      if (isLoggedIn) {
+        let itemIdToDelete = wishlistItemId
+
+        /** When no internal ID is provided, fetch it by sku */
+        if (!itemIdToDelete) {
+          const wishlistItemsInSession =
+            GetCustomerWishlistData?.customer?.wishlists[0]?.items_v2?.items || []
+
+          const item = wishlistItemsInSession.find((element) => element?.product?.sku === sku)
+          if (item?.id) {
+            itemIdToDelete = item.id
+          }
+        }
+
+        if (itemIdToDelete) {
+          removeWishlistItem({ variables: { wishlistItemId: itemIdToDelete } })
+        }
+      } else {
+        cache.modify({
+          id: cache.identify({ __typename: 'GuestWishlist' }),
+          fields: {
+            items(existingItems = []) {
+              const items = existingItems.filter((guestItem) => guestItem.sku !== sku)
+              return items
+            },
+          },
+        })
+      }
+    }
+    setAnchorEl(null)
+  }
+
+  return (
+    <Box
+      className={classes.item}
+      sx={[
+        (theme) => ({
+          position: 'relative',
+          display: 'grid',
+          gridTemplate: `
+            "picture itemName itemName iconMenu"
+            "picture itemOptions itemOptions"
+            "picture itemQuantity itemQuantity itemPrice"
+            "itemCartButton itemCartButton itemCartButton itemCartButton"`,
+          gridTemplateColumns: `${rowImageSize} 1fr minmax(120px, 1fr) 1fr`,
+          columnGap: theme.spacings.sm,
+          alignItems: 'baseline',
+          typography: 'body1',
+          paddingBottom: theme.spacings.xl,
+          paddingTop: theme.spacings.sm,
+          [theme.breakpoints.up('sm')]: {
+            paddingBottom: theme.spacings.md,
+            gridTemplate: `
+              "picture itemName itemName itemName iconMenu"
+              "picture itemQuantity itemOptions itemPrice itemPrice"
+              "itemCartButton itemCartButton itemCartButton itemCartButton itemCartButton"`,
+            gridTemplateColumns: `${rowImageSize} 4fr 1fr minmax(120px, 1fr) minmax(120px, 1fr)`,
+          },
+          borderBottom: `1px solid ${theme.palette.divider}`,
+
+          '&:not(.withOptions)': {
+            display: 'grid',
+            gridTemplate: `
+            "picture itemName itemName iconMenu"
+            "picture itemQuantity itemPrice itemPrice"
+            "itemCartButton itemCartButton itemCartButton itemCartButton"`,
+            alignItems: 'center',
+            paddingBottom: theme.spacings.xl,
+            gridTemplateColumns: `${rowImageSize} 1fr minmax(120px, 1fr) 1fr`,
+            [theme.breakpoints.up('sm')]: {
+              paddingBottom: theme.spacings.md,
+              gridTemplate: `
+              "picture itemName itemName itemName iconMenu"
+              "picture itemQuantity itemQuantity itemQuantity itemPrice"
+              "itemCartButton itemCartButton itemCartButton itemCartButton itemCartButton"
+            `,
+              gridTemplateColumns: `${rowImageSize} 4fr 1fr minmax(120px, 1fr) minmax(120px, 1fr)`,
+            },
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <Badge
+        color='default'
+        component='div'
+        className={classes.picture}
+        anchorOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+        sx={(theme) => ({
+          gridArea: 'picture',
+          width: rowImageSize,
+          height: rowImageSize,
+          padding: responsiveVal(5, 10),
+          alignSelf: 'flex-start',
+        })}
+      >
+        <PageLink href={productLink} passHref>
+          <Box
+            component='a'
+            className={classes.productLink}
+            sx={{ display: 'block', width: '100%', overflow: 'hidden' }}
+          >
+            {small_image?.url && (
+              <Image
+                src={small_image.url ?? ''}
+                layout='fill'
+                alt={small_image.label ?? name ?? ''}
+                sizes={responsiveVal(70, 125)}
+                className={classes.image}
+                sx={(theme) => ({
+                  gridColumn: 1,
+                  backgroundColor: theme.palette.background.image,
+                  objectFit: 'cover',
+                  display: 'block',
+                  width: '110% !important',
+                  height: '110% !important',
+                  marginLeft: '-5%',
+                  marginTop: '-5%',
+                })}
+              />
+            )}
+          </Box>
+        </PageLink>
+      </Badge>
+
+      <PageLink href={productLink} passHref>
+        <Link
+          variant='body1'
+          className={classes.itemName}
+          underline='hover'
+          sx={(theme) => ({
+            typgrapht: 'subtitle1',
+            fontWeight: theme.typography.fontWeightBold,
+            gridArea: 'itemName',
+            color: theme.palette.text.primary,
+            textDecoration: 'none',
+            flexWrap: 'nowrap',
+            maxWidth: 'max-content',
+            '&:not(.withOptions)': {
+              alignSelf: 'flex-start',
+            },
+          })}
+        >
+          {name}
+        </Link>
+      </PageLink>
+
+      <Typography
+        component='div'
+        variant='body1'
+        className={classes.root}
+        sx={[
+          (theme) => ({ gridArea: 'itemPrice', marginLeft: 'auto' }),
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
+      >
+        {price_range.minimum_price.regular_price.value !==
+          price_range.minimum_price.final_price.value && (
+          <Box
+            component='span'
+            sx={{
+              textDecoration: 'line-through',
+              color: 'text.disabled',
+              marginRight: '8px',
+            }}
+            className={classes.discountPrice}
+          >
+            <Money {...price_range.minimum_price.regular_price} />
+          </Box>
+        )}
+        <Money {...price_range.minimum_price.final_price} />
+      </Typography>
+
+      <IconButton
+        aria-label='more'
+        id='long-button'
+        aria-controls={open ? 'long-menu' : undefined}
+        aria-expanded={open ? 'true' : undefined}
+        aria-haspopup='true'
+        onClick={handleClick}
+        sx={(theme) => ({
+          gridArea: 'iconMenu',
+          alignSelf: 'flex-start',
+          padding: '0',
+          marginLeft: 'auto',
+          borderRadius: '0',
+        })}
+      >
+        <IconSvg
+          src={iconEllypsis}
+          size='medium'
+          sx={(theme) => ({
+            fill: theme.palette.text.primary,
+          })}
+        />
+      </IconButton>
+      <Menu
+        id='long-menu'
+        MenuListProps={{
+          'aria-labelledby': 'long-button',
+        }}
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        PaperProps={{
+          style: {
+            maxHeight: 65,
+            justifyContent: 'center',
+          },
+        }}
+      >
+        <MenuItem key='remove' id='remove' onClick={handleClose}>
+          <Trans>Remove Product</Trans>
+        </MenuItem>
+      </Menu>
+
+      {children}
+    </Box>
+  )
+}

package/components/WishlistItem/WishlistItemConfigurable.graphql

@@ -0,0 +1,8 @@
+fragment WishlistItemConfigurable on ConfigurableWishlistItem {
+  configurable_options {
+    configurable_product_option_uid
+    configurable_product_option_value_uid
+    option_label
+    value_label
+  }
+}

package/components/WishlistItem/WishlistItemConfigurable.tsx

@@ -0,0 +1,11 @@
+import { WishlistItem, WishlistItemProps } from './WishlistItem'
+import { WishlistItemFragment } from './WishlistItem.gql'
+import { WishlistItemConfigurableFragment } from './WishlistItemConfigurable.gql'
+
+export function WishlistItemConfigurable(
+  props: WishlistItemConfigurableFragment & WishlistItemProps,
+) {
+  const { configurable_options, ...wishlistItemProps } = props
+
+  return <WishlistItem {...wishlistItemProps} />
+}

package/components/WishlistItem/WishlistItemProduct.graphql

@@ -0,0 +1,11 @@
+fragment WishlistItemProduct on ProductInterface @injectable {
+  uid
+  ...ProductLink
+  name
+  url_key
+  thumbnail {
+    url
+    label
+  }
+  ...ProductListItem
+}

package/components/WishlistItems/WishlistItems.graphql

@@ -0,0 +1,12 @@
+fragment WishlistItems on Wishlist @injectable {
+  id
+  items_v2 {
+    items {
+      id
+      __typename
+      product {
+        ...WishlistItemProduct
+      }
+    }
+  }
+}

package/components/WishlistItems/WishlistItems.tsx

@@ -0,0 +1,33 @@
+import { AnimatedRow, RenderType, TypeRenderer } from '@graphcommerce/next-ui'
+import { AnimatePresence } from 'framer-motion'
+import { useWishlistItems } from '../../hooks'
+import { WishlistItemsFragment } from './WishlistItems.gql'
+
+export type WishlistItemRenderer = TypeRenderer<
+  NonNullable<
+    NonNullable<NonNullable<NonNullable<WishlistItemsFragment['items_v2']>['items']>[0]>['product']
+  >
+>
+
+export type WishlistProps = { renderer: WishlistItemRenderer }
+
+export function WishlistItems(props: WishlistProps) {
+  const { renderer } = props
+  const wishlistItemsData = useWishlistItems()
+
+  /** Structure between guest and customer wishlist differs */
+  return (
+    <AnimatePresence initial={false}>
+      {wishlistItemsData.items?.map((item) => {
+        if (!item?.uid && !item?.id) return null
+
+        const productData = item?.product ? item?.product : item
+        return (
+          <AnimatedRow key={item.id || item.uid}>
+            <RenderType renderer={renderer} wishlistItemId={item.id || null} {...productData} />
+          </AnimatedRow>
+        )
+      })}
+    </AnimatePresence>
+  )
+}

package/components/WishlistMenuFabItem/WishlistMenuFabItem.tsx

@@ -0,0 +1,81 @@
+import { useQuery } from '@graphcommerce/graphql'
+import { CustomerTokenDocument } from '@graphcommerce/magento-customer'
+import { MenuFabSecondaryItem, iconHeart, IconSvg } from '@graphcommerce/next-ui'
+import { Badge, NoSsr, SxProps, Theme } from '@mui/material'
+import React from 'react'
+import { useWishlistEnabled } from '../../hooks'
+import { GetIsInWishlistsDocument } from '../../queries/GetIsInWishlists.gql'
+import { GuestWishlistDocument } from '../../queries/GuestWishlist.gql'
+
+type WishlistMenuFabItemProps = {
+  icon?: React.ReactNode
+  children: React.ReactNode
+  sx?: SxProps<Theme>
+}
+
+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, loading } = useQuery(GetIsInWishlistsDocument, {
+    ssr: false,
+    skip: !isLoggedIn,
+  })
+
+  const { data: guestWishlistData, loading: loadingGuestWishlistData } = 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
+  }
+
+  return (
+    <MenuFabSecondaryItem
+      sx={sx}
+      icon={
+        <Badge
+          badgeContent={activeWishlist ? 1 : 0}
+          color='primary'
+          variant='dot'
+          overlap='circular'
+        >
+          {icon ?? <IconSvg src={iconHeart} size='medium' />}
+        </Badge>
+      }
+      href='/wishlist'
+    >
+      {children}
+    </MenuFabSecondaryItem>
+  )
+}
+
+export function WishlistMenuFabItem(props: WishlistMenuFabItemProps) {
+  const isWishlistEnabled = useWishlistEnabled()
+
+  const { data: token } = useQuery(CustomerTokenDocument)
+  const isLoggedIn = token?.customerToken && token?.customerToken.valid
+
+  return (
+    <>
+      {isWishlistEnabled && (!hideForGuest || isLoggedIn) && (
+        <NoSsr fallback={<WishlistMenuFabItemContent {...props} />}>
+          <WishlistMenuFabItemContent {...props} />
+        </NoSsr>
+      )}
+    </>
+  )
+}

package/components/index.ts

@@ -0,0 +1,10 @@
+export * from './ProductWishlistChip/ProductWishlistChipDetail'
+export * from './ProductWishlistChip/ProductWishlistChipDetailConfigurable'
+export * from './ProductWishlistChip/ProductWishlistChip'
+export * from './ProductWishlistChip/ProductWishlistChipBase'
+export * from './WishlistItems/WishlistItems'
+export * from './WishlistItem/WishlistItem'
+export * from './WishlistItem/WishlistItemBase'
+export * from './WishlistItem/WishlistItemConfigurable'
+export * from './WishlistFab/WishlistFab'
+export * from './WishlistMenuFabItem/WishlistMenuFabItem'

package/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useMergeGuestWishlistWithCustomer'
+export * from './useWishlistItems'
+export * from './useWishlistEnabled'

package/hooks/useMergeGuestWishlistWithCustomer.tsx

@@ -0,0 +1,64 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable @typescript-eslint/no-floating-promises */
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useMutation, useQuery, useApolloClient } from '@graphcommerce/graphql'
+import { CustomerTokenDocument } from '@graphcommerce/magento-customer'
+import { useEffect } from 'react'
+import { AddProductToWishlistDocument } from '../queries/AddProductToWishlist.gql'
+import { GetGuestWishlistProductsDocument } from '../queries/GetGuestWishlistProducts.gql'
+import { GuestWishlistDocument } from '../queries/GuestWishlist.gql'
+
+/** Merge guest wishlist items to customer session upon login */
+export function useMergeGuestWishlistWithCustomer() {
+  const customerToken = useQuery(CustomerTokenDocument)?.data?.customerToken
+  const isLoggedIn = customerToken?.token && customerToken?.valid
+  const { cache } = useApolloClient()
+
+  const guestWishlistData = useQuery(GuestWishlistDocument, {
+    ssr: false,
+  }).data?.guestWishlist
+
+  const guestDataSkus = guestWishlistData?.items.map((item) => item?.sku) || []
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const validatedItems =
+    useQuery(GetGuestWishlistProductsDocument, {
+      ssr: false,
+      variables: {
+        filters: { sku: { in: guestDataSkus } },
+      },
+      skip: guestDataSkus.length === 0,
+    }).data?.products?.items?.map((item) => item?.sku) || []
+
+  const [addWishlistItem] = useMutation(AddProductToWishlistDocument)
+
+  useEffect(() => {
+    if (!isLoggedIn) return
+
+    if (!guestDataSkus.length) return
+
+    if (!validatedItems.length) {
+      /** Only outdated items were found, purge them */
+      cache.evict({
+        id: cache.identify({ __typename: 'GuestWishlist' }),
+      })
+      return
+    }
+
+    const wishlist =
+      guestWishlistData?.items.filter((item) => validatedItems.includes(item.sku)) || []
+
+    if (!wishlist.length) return
+
+    const payload = wishlist.map((item) => ({
+      sku: item.sku,
+      selected_options: item.selected_options,
+      quantity: item.quantity,
+    }))
+
+    addWishlistItem({ variables: { input: payload } }).then(() => 
+      cache.evict({
+        id: cache.identify({ __typename: 'GuestWishlist' }),
+      })
+    )
+  }, [isLoggedIn])
+}

package/hooks/useWishlistEnabled.tsx

@@ -0,0 +1,9 @@
+import { useQuery } from '@graphcommerce/graphql'
+import { StoreConfigDocument } from '@graphcommerce/magento-store'
+
+export function useWishlistEnabled() {
+  const isEnabled =
+    useQuery(StoreConfigDocument).data?.storeConfig?.magento_wishlist_general_is_enabled === '1'
+
+  return isEnabled
+}

package/hooks/useWishlistItems.tsx

@@ -0,0 +1,53 @@
+import { useQuery } from '@graphcommerce/graphql'
+import { CustomerTokenDocument } from '@graphcommerce/magento-customer'
+import { GetGuestWishlistProductsDocument } from '../queries/GetGuestWishlistProducts.gql'
+import { GetWishlistProductsDocument } from '../queries/GetWishlistProducts.gql'
+import { GuestWishlistDocument } from '../queries/GuestWishlist.gql'
+
+export function useWishlistItems() {
+  const { data: token } = useQuery(CustomerTokenDocument)
+  const isLoggedIn = token?.customerToken && token?.customerToken.valid
+
+  let wishlistItems
+
+  /** Get customer wishlist from session */
+  const { data: GetCustomerWishlistData, loading: loadingCustomerItems } = useQuery(
+    GetWishlistProductsDocument,
+    {
+      skip: !isLoggedIn,
+      ssr: false,
+    },
+  )
+
+  /** Get guest wishlist items from cache and hydrate with catalog data */
+  const { data: guestWishlistData, loading: loadingGuestWishlistData } = useQuery(
+    GuestWishlistDocument,
+    {
+      ssr: false,
+      skip: isLoggedIn === true,
+    },
+  )
+  const guestData = guestWishlistData?.guestWishlist?.items.map((item) => item?.sku) || []
+
+  const { data: productGuestItems, loading: loadingGuestItems } = useQuery(
+    GetGuestWishlistProductsDocument,
+    {
+      ssr: false,
+      variables: {
+        filters: { sku: { in: guestData } },
+      },
+      skip: loadingGuestWishlistData || guestData.length === 0,
+    },
+  )
+
+  if (isLoggedIn) {
+    wishlistItems = GetCustomerWishlistData?.customer?.wishlists[0]?.items_v2?.items
+  } else {
+    wishlistItems = productGuestItems?.products?.items || []
+  }
+
+  return {
+    items: wishlistItems,
+    loading: loadingGuestWishlistData || loadingGuestItems || loadingCustomerItems,
+  }
+}

package/index.ts

@@ -0,0 +1,12 @@
+export * from './components'
+export * from './hooks'
+
+export * from './queries/GetGuestWishlistProducts.gql'
+export * from './queries/GetWishlistProducts.gql'
+export * from './queries/AddProductToWishlist.gql'
+export * from './queries/RemoveProductFromWishlist.gql'
+export * from './queries/WishlistSummaryFragment.gql'
+export * from './queries/GetIsInWishlists.gql'
+export * from './queries/GuestWishlist.gql'
+
+export * from './typePolicies'

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@graphcommerce/magento-wishlist",
+  "version": "1.0.0",
+  "sideEffects": false,
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "browserslist": [
+    "extends @graphcommerce/browserslist-config-pwa"
+  ],
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
+  },
+  "devDependencies": {
+    "@graphcommerce/eslint-config-pwa": "^4.1.6",
+    "@graphcommerce/prettier-config-pwa": "^4.0.6",
+    "@graphcommerce/typescript-config-pwa": "^4.0.2",
+    "@playwright/test": "^1.21.1"
+  },
+  "dependencies": {
+    "@graphcommerce/graphql": "3.1.1",
+    "@graphcommerce/image": "3.1.5",
+    "@graphcommerce/magento-cart": "4.2.10",
+    "@graphcommerce/magento-customer": "4.2.8",
+    "@graphcommerce/magento-product": "4.3.0",
+    "@graphcommerce/magento-product-configurable": "4.1.0",
+    "@graphcommerce/magento-store": "4.2.0",
+    "@graphcommerce/next-ui": "4.7.0"
+  },
+  "peerDependencies": {
+    "@lingui/macro": "^3.13.2",
+    "@mui/material": "^5.5.3",
+    "framer-motion": "^6.2.4",
+    "next": "^12.1.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}

package/queries/AddProductToWishlist.graphql

@@ -0,0 +1,13 @@
+type WishlistItemInput {
+  sku: String
+  quantity: Int!
+  selected_options: [ID]
+}
+
+mutation addProductToWishlist($input: [WishlistItemInput!]!) {
+  addProductsToWishlist(wishlistId: 0, wishlistItems: $input) {
+    wishlist {
+      ...WishlistSummaryFragment
+    }
+  }
+}