@graphcommerce/magento-compare 6.2.0-canary.9

package/CHANGELOG.md

@@ -0,0 +1,3 @@
+# @graphcommerce/magento-compare
+
+## 6.2.0-canary.9

package/Config.graphqls

@@ -0,0 +1,17 @@
+enum CompareVariant {
+  ICON
+  CHECKBOX
+}
+
+extend input GraphCommerceConfig {
+  """
+  Use compare functionality
+  """
+  compare: Boolean
+
+  """
+  By default the compare feature is denoted with a 'compare ICON' (2 arrows facing one another).
+  This may be fine for experienced users, but for more clarity it's also possible to present the compare feature as a CHECKBOX accompanied by the 'Compare' label
+  """
+  compareVariant: CompareVariant
+}

package/components/CompareFab.tsx

@@ -0,0 +1,100 @@
+import {
+  extendableComponent,
+  IconSvg,
+  useFabSize,
+  iconCompare,
+  useScrollY,
+} from '@graphcommerce/next-ui'
+import { i18n } from '@lingui/core'
+import { Trans } from '@lingui/react'
+import { styled, Box, SxProps, Theme, NoSsr, Badge, Button, ButtonProps } from '@mui/material'
+import { m, useTransform } from 'framer-motion'
+import React from 'react'
+import { useCompareSummary } from '../hooks'
+
+export type CompareFabProps = {
+  icon?: React.ReactNode
+  sx?: SxProps<Theme>
+} & Pick<ButtonProps, 'color' | 'size' | 'variant'>
+
+type CompareFabContentProps = CompareFabProps & { total_quantity: number }
+
+const MotionDiv = styled(m.div)({})
+
+const MotionFab = m(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  React.forwardRef<any, Omit<ButtonProps, 'style' | 'onDrag'>>((props, ref) => (
+    <Button variant='pill' {...props} ref={ref} />
+  )),
+)
+
+const { classes } = extendableComponent('CompareFab', ['root', 'compare', 'shadow'] as const)
+
+function CompareFabContent(props: CompareFabContentProps) {
+  const { total_quantity, icon, sx = [], ...rest } = props
+  const scrollY = useScrollY()
+  const opacity = useTransform(scrollY, [50, 60], [0, 1])
+
+  const compareIcon = icon ?? <IconSvg src={iconCompare} size='large' />
+  const fabIconSize = useFabSize('responsive')
+
+  if (total_quantity === 0) return null
+
+  return (
+    <Box
+      className={classes.root}
+      sx={[{ position: 'relative', height: fabIconSize }, ...(Array.isArray(sx) ? sx : [sx])]}
+    >
+      <Badge
+        color='primary'
+        variant='standard'
+        overlap='circular'
+        badgeContent={total_quantity}
+        sx={{ height: '100%', '& .MuiBadge-badge': { zIndex: 2000 } }}
+      >
+        <MotionFab
+          href='/compare'
+          className={classes.compare}
+          aria-label={i18n._(/* i18n */ 'Compare')}
+          color='inherit'
+          sx={(theme) => ({
+            width: 'unset',
+            backgroundColor: `${theme.palette.background.paper} !important`,
+            [theme.breakpoints.down('md')]: {},
+          })}
+          {...rest}
+        >
+          {compareIcon} <Trans id='Compare' />
+        </MotionFab>
+      </Badge>
+
+      <MotionDiv
+        className={classes.shadow}
+        sx={(theme) => ({
+          pointerEvents: 'none',
+          borderRadius: '99em',
+          position: 'absolute',
+          height: '100%',
+          width: '100%',
+          boxShadow: 5,
+          top: 0,
+          [theme.breakpoints.down('md')]: {
+            opacity: '1 !important',
+          },
+        })}
+        style={{ opacity }}
+      />
+    </Box>
+  )
+}
+
+export function CompareFab(props: CompareFabProps) {
+  const compareList = useCompareSummary()
+  const totalQuantity = compareList.data?.compareList?.item_count ?? 0
+
+  return (
+    <NoSsr fallback={<CompareFabContent total_quantity={0} {...props} />}>
+      {totalQuantity > 0 && <CompareFabContent total_quantity={totalQuantity} {...props} />}
+    </NoSsr>
+  )
+}

package/components/CompareListAttributes.tsx

@@ -0,0 +1,45 @@
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { Box, SxProps, Theme } from '@mui/material'
+import { useCompareList } from '../hooks/useCompareList'
+import { useCompareVisibleItems } from './CompareListForm'
+import { CompareListRow } from './CompareListRow'
+import { CompareListRowMoreInformation } from './CompareListRowMoreInformation'
+
+export type CompareListAttributesProps = {
+  sx?: SxProps<Theme>
+}
+
+export function CompareListAttributes(props: CompareListAttributesProps) {
+  const { sx } = props
+  const compareList = useCompareList()
+  const compareListAttributes = filterNonNullableKeys(compareList.data?.compareList?.attributes)
+  const items = useCompareVisibleItems()
+
+  return (
+    <Box
+      sx={[
+        (theme) => ({
+          bgcolor: theme.palette.background.default,
+          '& :first-of-type > div': {
+            mt: 0,
+          },
+          mx: `calc(${theme.page.horizontal} * -1)`,
+          py: theme.spacings.md,
+          px: theme.page.horizontal,
+          [theme.breakpoints.up('lg')]: {
+            borderRadius: theme.shape.borderRadius * 1.5,
+            mx: `calc(${theme.spacings.lg} * -1)`,
+            p: theme.spacings.lg,
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      {compareListAttributes.map((attribute) => (
+        <CompareListRow compareAbleItems={items} attribute={attribute} key={attribute?.code} />
+      ))}
+
+      <CompareListRowMoreInformation compareAbleItems={items} />
+    </Box>
+  )
+}

package/components/CompareListForm.tsx

@@ -0,0 +1,83 @@
+import { useForm, useFormPersist, UseFormReturn, useWatch } from '@graphcommerce/ecommerce-ui'
+import { filterNonNullableKeys, nonNullable } from '@graphcommerce/next-ui'
+import React, { createContext, useContext, useEffect, useMemo, useRef } from 'react'
+import { useCompareList } from '../hooks'
+
+type CompareListFormProps = { children?: React.ReactNode }
+
+type FormFields = { selected: number[] }
+
+type CompareFormContextType = Omit<UseFormReturn<FormFields>, 'formState' | 'watch'> & {
+  selectedPrevious: React.MutableRefObject<number[]>
+}
+
+const CompareFormContext = createContext<CompareFormContextType | undefined>(undefined)
+
+export function CompareListForm(props: CompareListFormProps) {
+  const { children } = props
+
+  const compareList = useCompareList()
+  const compareListData = compareList.data
+  const compareListCount = compareListData?.compareList?.item_count ?? 0
+  const gridColumns = compareListCount <= 3 ? compareListCount : 3
+
+  const form = useForm<FormFields>({
+    defaultValues: { selected: [...Array(gridColumns).keys()] },
+  })
+
+  useFormPersist({ form, name: 'CompareList', storage: 'localStorage' })
+  const selectedState = form.watch('selected')
+  const selectedPrevious = useRef<number[]>(selectedState)
+  const compareAbleItems = compareListData?.compareList?.items
+
+  useEffect(() => {
+    if (compareAbleItems?.length) {
+      selectedPrevious.current = selectedState
+
+      /*
+       * It's possible that the user has 5 items in his comparelist, so [0,1,2,3,4] are all selectable indexes
+       * If the user has a selected state of indexes [0,3,4] but then removes the 4th item, the currentCompareProducts[4] would be undefined and the UI would be corrupt
+       * So we need to get the first index that isnt already in the selectedState array (as we cant have duplicates)
+       */
+      selectedState.forEach((selectedIndex, index) => {
+        if (selectedIndex >= compareAbleItems.length) {
+          const allIndexes = [...Array(compareAbleItems.length).keys()]
+          const allowedIndexes = allIndexes.filter((el) => !selectedState.includes(el))
+          form.setValue(`selected.${index}`, allowedIndexes[0])
+        }
+      })
+
+      // if there are less items in the compare list than in our selectedState
+      if (compareListCount < selectedState.length) {
+        form.setValue(`selected`, [...Array(compareListCount).keys()])
+      }
+
+      // if there are less items in our selectedState than we have columns
+      if (selectedState.length < gridColumns) {
+        form.setValue(`selected`, [...Array(gridColumns).keys()])
+      }
+    }
+  }, [compareAbleItems?.length, compareListCount, form, gridColumns, selectedState])
+
+  const value = useMemo(
+    () => ({ ...form, selectedPrevious } satisfies CompareFormContextType),
+    [form],
+  )
+  return <CompareFormContext.Provider value={value}>{children}</CompareFormContext.Provider>
+}
+
+export function useCompareForm() {
+  const context = useContext(CompareFormContext)
+  if (!context) throw Error('useCompareForm must be used inside a CompareForm')
+  return context
+}
+
+export function useCompareVisibleItems() {
+  const { control } = useCompareForm()
+  const selected = useWatch<FormFields>({ control, name: 'selected' })
+
+  const selectedState = Array.isArray(selected) ? selected : [selected]
+
+  const compareList = filterNonNullableKeys(useCompareList().data?.compareList?.items)
+  return selectedState.map((i) => compareList[i]).filter(nonNullable)
+}

package/components/CompareListIntroText.tsx

@@ -0,0 +1,21 @@
+import { Box, Container } from '@mui/material'
+
+type CompareListIntroTextProps = {
+  children: React.ReactNode
+}
+
+export function CompareListIntroText({ children }: CompareListIntroTextProps) {
+  return (
+    <Box
+      sx={(theme) => ({
+        position: 'relative',
+        textAlign: 'center',
+        paddingBottom: 2,
+        background: theme.palette.background.paper,
+        zIndex: 11,
+      })}
+    >
+      <Container>{children}</Container>
+    </Box>
+  )
+}

package/components/CompareListItems.tsx

@@ -0,0 +1,28 @@
+import {
+  AddProductsToCartForm,
+  ProductItemsGridProps,
+  ProductListItemsBase,
+} from '@graphcommerce/magento-product'
+import { useCompareListStyles } from '../hooks/useCompareListStyles'
+import { useCompareVisibleItems } from './CompareListForm'
+
+export type CompareListItemsProps = Pick<ProductItemsGridProps, 'renderers' | 'sx'>
+
+export function CompareListItems(props: CompareListItemsProps) {
+  const { renderers, sx } = props
+
+  const compareListStyles = useCompareListStyles()
+
+  const items = useCompareVisibleItems().map((i) => i.product)
+
+  return (
+    <AddProductsToCartForm>
+      <ProductListItemsBase
+        title='Compare items'
+        items={items}
+        renderers={renderers}
+        sx={[compareListStyles, ...(Array.isArray(sx) ? sx : [sx])]}
+      />
+    </AddProductsToCartForm>
+  )
+}

package/components/CompareListRow.tsx

@@ -0,0 +1,62 @@
+import { SectionContainer } from '@graphcommerce/next-ui'
+import { Box } from '@mui/material'
+import { ComparableItemFragment } from '../graphql'
+import { useCompareListStyles } from '../hooks/useCompareListStyles'
+
+export type CompareRowProps = {
+  compareAbleItems: ComparableItemFragment[]
+  attribute: {
+    code: string
+    label: string
+  } | null
+}
+
+export function CompareListRow(props: CompareRowProps) {
+  const { attribute, compareAbleItems } = props
+  const columnCount = compareAbleItems.length <= 3 ? compareAbleItems.length : 3
+
+  const compareListStyles = useCompareListStyles()
+
+  return (
+    <Box>
+      <SectionContainer
+        labelLeft={attribute?.label}
+        sx={(theme) => ({
+          '& .SectionHeader-root': {
+            justifyContent: 'center',
+            borderBottom: 'none',
+            pb: 0,
+            '& > .MuiTypography-root': {
+              pb: theme.spacings.xxs,
+              borderBottom: `1px solid ${theme.palette.divider}`,
+              width: `calc(calc(calc(100% / 3) * ${columnCount}) + ${
+                columnCount > 1 ? theme.spacings.md : '0px'
+              })`,
+              [theme.breakpoints.down('md')]: {
+                width: '100%',
+              },
+            },
+          },
+        })}
+      >
+        <Box sx={[compareListStyles, (theme) => ({ mb: theme.spacings.lg })]}>
+          {compareAbleItems?.map((item, idx) => (
+            <Box
+              // eslint-disable-next-line react/no-array-index-key
+              key={idx}
+              sx={{
+                '& > p:first-of-type': { marginTop: 0 },
+                '& > p:last-of-type': { marginBottom: 0 },
+              }}
+              dangerouslySetInnerHTML={{
+                __html:
+                  item?.attributes.find((itemAttribute) => itemAttribute?.code === attribute?.code)
+                    ?.value ?? '',
+              }}
+            />
+          ))}
+        </Box>
+      </SectionContainer>
+    </Box>
+  )
+}

package/components/CompareListRowMoreInformation.tsx

@@ -0,0 +1,58 @@
+import { productLink } from '@graphcommerce/magento-product'
+import { Button, iconChevronRight, IconSvg, SectionContainer } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+import { Box } from '@mui/material'
+import { useCompareListStyles } from '../hooks/useCompareListStyles'
+import { CompareRowProps } from './CompareListRow'
+
+export type CompareListRowMoreInformationProps = Pick<CompareRowProps, 'compareAbleItems'>
+
+export function CompareListRowMoreInformation(props: CompareListRowMoreInformationProps) {
+  const { compareAbleItems } = props
+  const columnCount = compareAbleItems.length <= 3 ? compareAbleItems.length : 3
+
+  const compareListStyles = useCompareListStyles()
+
+  return (
+    <Box>
+      <SectionContainer
+        labelLeft={<Trans id='More information' />}
+        sx={(theme) => ({
+          '& .SectionHeader-root': {
+            justifyContent: 'center',
+            borderBottom: 'none',
+            pb: 0,
+            '& > .MuiTypography-root': {
+              pb: theme.spacings.xxs,
+              borderBottom: `1px solid ${theme.palette.divider}`,
+              width: `calc(calc(calc(100% / 3) * ${columnCount}) + ${
+                columnCount > 1 ? theme.spacings.md : '0px'
+              })`,
+              [theme.breakpoints.down('md')]: {
+                width: '100%',
+              },
+            },
+          },
+        })}
+      >
+        <Box sx={compareListStyles}>
+          {compareAbleItems?.map((item) => {
+            if (!item?.product) return null
+            return (
+              <Box key={item.uid}>
+                <Button
+                  variant='inline'
+                  href={productLink(item?.product)}
+                  endIcon={<IconSvg key='icon' src={iconChevronRight} size='inherit' />}
+                  sx={{ justifyContent: 'flex-start' }}
+                >
+                  <Trans id='View Product' />
+                </Button>
+              </Box>
+            )
+          })}
+        </Box>
+      </SectionContainer>
+    </Box>
+  )
+}

package/components/CompareListSelect.tsx

@@ -0,0 +1,77 @@
+import { SelectElement } from '@graphcommerce/ecommerce-ui'
+import { useMotionValueValue } from '@graphcommerce/framer-utils'
+import { useScrollY } from '@graphcommerce/next-ui'
+import { Box, Container, FormControl, SxProps, Theme, useTheme } from '@mui/material'
+import { useCompareList, useCompareListStyles } from '../hooks'
+import { useCompareForm } from './CompareListForm'
+
+export type CompareListSelectProps = {
+  bgColor?: 'default' | 'paper'
+  sx?: SxProps<Theme>
+}
+
+export function CompareListSelect(props: CompareListSelectProps) {
+  const { bgColor = 'paper', sx = [] } = props
+
+  const compareList = useCompareList().data?.compareList
+  const compareListCount = compareList?.item_count ?? 0
+  const gridColumns = compareListCount <= 3 ? compareListCount : 3
+  const compareAbleItems = compareList?.items ?? []
+
+  const { control, selectedPrevious, setValue } = useCompareForm()
+
+  const compareListStyles = useCompareListStyles()
+  const theme2 = useTheme()
+  const scrollY = useScrollY()
+  const scrolled = useMotionValueValue(scrollY, (y) => ({
+    xs:
+      y >
+      parseInt(theme2.appShell.headerHeightSm, 10) -
+        parseInt(theme2.appShell.headerHeightSm, 10) * 0.5,
+    md: y > parseInt(theme2.appShell.headerHeightSm, 10),
+  }))
+
+  return (
+    <Box
+      sx={[
+        (theme) => ({
+          pt: 1,
+          pb: theme.spacings.xxs,
+          background: theme.palette.background[bgColor],
+          position: 'sticky',
+          zIndex: 10,
+          top: {
+            xs: `calc(${theme.appShell.headerHeightSm} / 2)`,
+            lg: theme.page.vertical,
+          },
+          boxShadow: {
+            xs: scrolled.xs ? theme.shadows[1] : 'none',
+            md: scrolled.md ? theme.shadows[1] : 'none',
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <Container sx={{ ...compareListStyles }}>
+        {[...Array(gridColumns).keys()].map((compareSelectIndex) => (
+          <FormControl key={compareSelectIndex}>
+            <SelectElement
+              control={control}
+              name={`selected.${compareSelectIndex}`}
+              options={compareAbleItems.map((i, id) => ({
+                id,
+                label: i?.product?.name ?? '',
+              }))}
+              size='small'
+              onChange={(to) => {
+                const from = selectedPrevious.current?.[compareSelectIndex]
+                const found = selectedPrevious.current?.indexOf(Number(to))
+                if (found > -1) setValue(`selected.${found}`, from)
+              }}
+            />
+          </FormControl>
+        ))}
+      </Container>
+    </Box>
+  )
+}

package/components/CompareMessageSnackbar.tsx

@@ -0,0 +1,59 @@
+import { Button, iconChevronRight, IconSvg, MessageSnackbar } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+import { SetStateAction } from 'react'
+
+type CompareMessageSnackbarProps = {
+  count: number | undefined
+  name: string | null | undefined
+  displayMessageBar: boolean
+  setDisplayMessageBar: (value: SetStateAction<boolean>) => void
+}
+
+export function CompareMessageSnackbar(props: CompareMessageSnackbarProps) {
+  const { count, name, displayMessageBar, setDisplayMessageBar } = props
+
+  return (
+    <MessageSnackbar
+      open={displayMessageBar}
+      onMouseDown={(e) => {
+        e.stopPropagation()
+      }}
+      onClick={(e) => {
+        e.stopPropagation()
+      }}
+      onClose={() => {
+        setDisplayMessageBar(false)
+      }}
+      variant='pill'
+      action={
+        count && count > 1 ? (
+          <Button
+            href='/compare'
+            id='view-wishlist-button'
+            size='medium'
+            variant='pill'
+            color='secondary'
+            fullWidth
+            endIcon={<IconSvg src={iconChevronRight} />}
+          >
+            <Trans id='View comparison' />
+          </Button>
+        ) : null
+      }
+    >
+      <>
+        <Trans
+          id='<0>{name}</0> has been added to your comparison!'
+          components={{ 0: <strong /> }}
+          values={{ name }}
+        />
+        {count === 1 ? (
+          <>
+            {' '}
+            <Trans id='Add another product to start comparing.' />
+          </>
+        ) : null}
+      </>
+    </MessageSnackbar>
+  )
+}

package/components/CompareProductButton.tsx

@@ -0,0 +1,59 @@
+import { useMutation } from '@graphcommerce/graphql'
+import { Trans } from '@lingui/react'
+import { Badge, Box, Button, Checkbox, SxProps, Theme } from '@mui/material'
+import { useState } from 'react'
+import {
+  AddProductsToCompareListDocument,
+  CompareProductIdInternalFragment,
+  RemoveProductsFromCompareListDocument,
+} from '../graphql'
+import { useCompareSummary } from '../hooks'
+import { useCompareListUidCreate } from '../hooks/useCompareListUidCreate'
+import { CompareMessageSnackbar } from './CompareMessageSnackbar'
+
+type CompareProductButtonProps = CompareProductIdInternalFragment & { sx?: SxProps<Theme> }
+
+export function CompareProductButton(props: CompareProductButtonProps) {
+  const { compare_product_id, name, sx } = props
+  const idString = String(compare_product_id)
+  const create = useCompareListUidCreate()
+  const compareList = useCompareSummary()
+  const inCompareList =
+    compareList.data?.compareList?.items?.some((i) => i?.uid === idString) ?? false
+  const [add] = useMutation(AddProductsToCompareListDocument)
+  const [remove] = useMutation(RemoveProductsFromCompareListDocument)
+  const [displayMessageBar, setDisplayMessageBar] = useState(false)
+
+  const handleClick: React.MouseEventHandler<HTMLButtonElement> = async (e) => {
+    if (inCompareList) {
+      await remove({ variables: { products: [idString], uid: await create() } })
+    } else {
+      await add({ variables: { products: [idString], uid: await create() } })
+      setDisplayMessageBar(true)
+    }
+  }
+
+  return (
+    <Box sx={[...(Array.isArray(sx) ? sx : [sx])]}>
+      <Badge badgeContent={compareList.data?.compareList?.item_count} color='primary'>
+        <Button
+          variant='contained'
+          onClick={handleClick}
+          onMouseDown={(e) => e.stopPropagation()}
+          startIcon={<Checkbox checked={inCompareList} />}
+        >
+          {inCompareList ? <Trans id='In comparelist' /> : <Trans id='Compare' />}
+        </Button>
+      </Badge>
+
+      {displayMessageBar && (
+        <CompareMessageSnackbar
+          displayMessageBar={displayMessageBar}
+          setDisplayMessageBar={setDisplayMessageBar}
+          count={compareList.data?.compareList?.item_count}
+          name={name}
+        />
+      )}
+    </Box>
+  )
+}