@graphcommerce/magento-compare 6.2.0-canary.9

package/components/CompareProductToggle.tsx

@@ -0,0 +1,155 @@
+import { useMutation } from '@graphcommerce/graphql'
+import { iconCompare, Button, Fab, FabProps } from '@graphcommerce/next-ui'
+import { i18n } from '@lingui/core'
+import { Trans } from '@lingui/react'
+import { alpha, Checkbox, NoSsr, SxProps, Theme, useTheme } from '@mui/material'
+import { useState } from 'react'
+import { CompareProductIdInternalFragment } from '../graphql'
+import { AddProductsToCompareListDocument } from '../graphql/AddProductsToCompareList.gql'
+import { RemoveProductsFromCompareListDocument } from '../graphql/RemoveProductsFromCompareList.gql'
+import { useCompareSummary } from '../hooks'
+import { useCompareListUidCreate } from '../hooks/useCompareListUidCreate'
+import { CompareMessageSnackbar } from './CompareMessageSnackbar'
+
+type CompareProductToggleProps = {
+  sx?: SxProps<Theme>
+  product: CompareProductIdInternalFragment
+} & Pick<FabProps, 'color'>
+
+function CompareProductToggleBase(
+  props: CompareProductToggleProps & { inCompareList: boolean; id: string },
+) {
+  const { id, sx, inCompareList, product, color = 'inherit' } = props
+  const create = useCompareListUidCreate()
+  const compareList = useCompareSummary()
+
+  const [add, addResult] = useMutation(AddProductsToCompareListDocument)
+  const [remove, removeResult] = useMutation(RemoveProductsFromCompareListDocument)
+  const loading = addResult.loading || removeResult.loading
+
+  const [displayMessageBar, setDisplayMessageBar] = useState(false)
+  const label = inCompareList
+    ? i18n._(/* i18n */ 'Remove from comparison')
+    : i18n._(/* i18n */ 'Add to comparison')
+
+  const handleClick: React.MouseEventHandler<HTMLButtonElement> = async (e) => {
+    e.preventDefault()
+
+    if (inCompareList) {
+      await remove({ variables: { products: [id], uid: await create() } })
+    } else {
+      await add({ variables: { products: [id], uid: await create() } })
+      setDisplayMessageBar(true)
+    }
+  }
+
+  const preventAnimationBubble = (
+    e: React.TouchEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>,
+  ) => {
+    e.stopPropagation()
+    if (e.type === 'mousedown') {
+      e.preventDefault()
+    }
+  }
+
+  const theme2 = useTheme()
+
+  let strokeColorPlp: string
+  if (!inCompareList) {
+    strokeColorPlp =
+      theme2.palette.mode === 'light'
+        ? theme2.palette.text.secondary
+        : theme2.palette.background.paper
+  } else {
+    strokeColorPlp = theme2.palette.primary.main
+  }
+
+  let strokeColorPdp: string
+  if (!inCompareList) {
+    strokeColorPdp =
+      theme2.palette.mode === 'light'
+        ? theme2.palette.text.secondary
+        : theme2.palette.primary.contrastText
+  } else {
+    strokeColorPdp = theme2.palette.primary.main
+  }
+
+  return (
+    <>
+      {import.meta.graphCommerce.compareVariant === 'CHECKBOX' ? (
+        <Button
+          variant='text'
+          size='small'
+          onMouseDown={preventAnimationBubble}
+          onTouchStart={preventAnimationBubble}
+          onClick={handleClick}
+          sx={{
+            padding: 0,
+            '&:hover': {
+              background: 'transparent',
+            },
+          }}
+          title={label}
+          aria-label={label}
+          loading={loading}
+        >
+          <Checkbox checked={inCompareList} />
+          <Trans id='Compare' />
+        </Button>
+      ) : (
+        <Fab
+          onClick={handleClick}
+          onMouseDown={preventAnimationBubble}
+          onTouchStart={preventAnimationBubble}
+          size='responsive'
+          color={color}
+          sx={[
+            (theme) => ({
+              flex: `0 0 auto`,
+              '& svg': {
+                stroke: strokeColorPlp,
+              },
+              '&:hover': {
+                backgroundColor: alpha(
+                  theme.palette.text.primary,
+                  theme.palette.action.hoverOpacity,
+                ),
+              },
+              '.SidebarGallery-root & svg': {
+                stroke: strokeColorPdp,
+              },
+            }),
+            ...(Array.isArray(sx) ? sx : [sx]),
+          ]}
+          title={label}
+          aria-label={label}
+          icon={iconCompare}
+          loading={loading}
+        />
+      )}
+
+      {displayMessageBar && (
+        <CompareMessageSnackbar
+          displayMessageBar={displayMessageBar}
+          setDisplayMessageBar={setDisplayMessageBar}
+          count={compareList.data?.compareList?.item_count}
+          name={product.name}
+        />
+      )}
+    </>
+  )
+}
+
+export function CompareProductToggle(props: CompareProductToggleProps) {
+  const { product } = props
+  const compareList = useCompareSummary()
+  const idString = String(product.compare_product_id)
+  const inCompareList =
+    compareList.data?.compareList?.items?.some((i) => i?.uid === idString) ?? false
+
+  return (
+    <NoSsr fallback={<CompareProductToggleBase {...props} inCompareList={false} id={idString} />}>
+      <CompareProductToggleBase {...props} inCompareList={inCompareList} id={idString} />
+    </NoSsr>
+  )
+}

package/components/EmptyCompareList.tsx

@@ -0,0 +1,19 @@
+import { FullPageMessage, IconSvg, iconCompare } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+import { Button } from '@mui/material'
+
+export function EmptyCompareList() {
+  return (
+    <FullPageMessage
+      title={<Trans id='Your comparelist is empty' />}
+      icon={<IconSvg src={iconCompare} size='xxl' />}
+      button={
+        <Button href='/' variant='pill' color='secondary' size='large'>
+          <Trans id='Continue shopping' />
+        </Button>
+      }
+    >
+      <Trans id='Discover our collection and add items to your comparelist!' />
+    </FullPageMessage>
+  )
+}

package/components/EmptyCompareListButton.tsx

@@ -0,0 +1,58 @@
+import { usePageContext, useGo } from '@graphcommerce/framer-next-pages'
+import { useMutation } from '@graphcommerce/graphql'
+import { LinkOrButton, LinkOrButtonProps } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+import { DeleteCompareListDocument } from '../graphql/DeleteCompareList.gql'
+import { useCompareList } from '../hooks'
+import { useClearCurrentCompareListUid } from '../hooks/useClearCurrentCompareListUid'
+
+type EmptyCompareListButtonProps = Omit<LinkOrButtonProps, 'onClick' | 'children'>
+
+export function EmptyCompareListButton(props: EmptyCompareListButtonProps) {
+  const { button = {}, link = {} } = props
+  const compareList = useCompareList()
+
+  const onCompleted = useClearCurrentCompareListUid()
+  const [deleteCompareList] = useMutation(DeleteCompareListDocument, {
+    variables: { uid: compareList.data?.compareList?.uid ?? '' },
+    onCompleted,
+  })
+  const { closeSteps } = usePageContext()
+  const go = useGo(closeSteps * -1)
+
+  if (!compareList.data?.compareList?.uid) return null
+
+  return (
+    <LinkOrButton
+      {...props}
+      color='secondary'
+      button={{
+        variant: 'pill',
+        ...button,
+        sx: [
+          {
+            whiteSpace: 'nowrap',
+          },
+          ...(Array.isArray(button.sx) ? button.sx : [button.sx]),
+        ],
+      }}
+      link={{
+        ...link,
+        sx: [
+          {
+            whiteSpace: 'nowrap',
+          },
+          ...(Array.isArray(link.sx) ? link.sx : [link.sx]),
+        ],
+      }}
+      onClick={() => {
+        go()
+
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        deleteCompareList()
+      }}
+    >
+      <Trans id='Empty comparelist' />
+    </LinkOrButton>
+  )
+}

package/components/index.ts

@@ -0,0 +1,13 @@
+export * from './CompareFab'
+export * from './CompareListAttributes'
+export * from './CompareListForm'
+export * from './CompareListIntroText'
+export * from './CompareListItems'
+export * from './CompareListSelect'
+export * from './CompareMessageSnackbar'
+export * from './CompareProductButton'
+export * from './CompareProductToggle'
+export * from './CompareListRow'
+export * from './EmptyCompareList'
+export * from './EmptyCompareListButton'
+export * from './CompareListRowMoreInformation'

package/graphql/AddProductsToCompareList.graphql

@@ -0,0 +1,5 @@
+mutation AddProductsToCompareList($uid: ID!, $products: [ID!]!) {
+  compareList: addProductsToCompareList(input: { uid: $uid, products: $products }) {
+    ...CompareSummaryFragment
+  }
+}

package/graphql/AssignCustomerToCompareList.graphql

@@ -0,0 +1,5 @@
+mutation AssignCompareListToCustomer($uid: ID!) {
+  assignCompareListToCustomer(uid: $uid) {
+    result
+  }
+}

package/graphql/ComparableItem.graphql

@@ -0,0 +1,11 @@
+fragment ComparableItem on ComparableItem {
+  uid
+  attributes {
+    code
+    value
+  }
+  product {
+    uid
+    ...ProductListItem
+  }
+}

package/graphql/CompareList.graphql

@@ -0,0 +1,5 @@
+query CompareList($uid: ID!) {
+  compareList(uid: $uid) {
+    ...CompareListFragment
+  }
+}

package/graphql/CompareListFragment.graphql

@@ -0,0 +1,12 @@
+fragment CompareListFragment on CompareList {
+  uid
+  attributes {
+    code
+    label
+  }
+  item_count
+
+  items {
+    ...ComparableItem
+  }
+}

package/graphql/CompareProductIdInternal.graphql

@@ -0,0 +1,6 @@
+fragment CompareProductIdInternal on ProductInterface
+@inject(into: ["UseAddProductsToCartAction", "ProductListItem"]) {
+  __typename
+  compare_product_id: id
+  name
+}

package/graphql/CompareSummary.graphql

@@ -0,0 +1,5 @@
+query CompareSummary($uid: ID!) {
+  compareList(uid: $uid) {
+    ...CompareSummaryFragment
+  }
+}

package/graphql/CompareSummaryFragment.graphql

@@ -0,0 +1,7 @@
+fragment CompareSummaryFragment on CompareList {
+  uid
+  item_count
+  items {
+    uid
+  }
+}

package/graphql/CreateCompareList.graphql

@@ -0,0 +1,5 @@
+mutation CreateCompareList($products: [ID!]!) {
+  createCompareList(input: { products: $products }) {
+    ...CompareSummaryFragment
+  }
+}

package/graphql/CurrentCompareUid.graphql

@@ -0,0 +1,6 @@
+query CurrentCompareUid {
+  currentCompareUid @client {
+    __typename
+    uid
+  }
+}

package/graphql/CurrentCompareUid.graphqls

@@ -0,0 +1,7 @@
+extend type Query {
+  currentCompareUid: CurrentCompareUid
+}
+
+type CurrentCompareUid {
+  uid: String
+}

package/graphql/CustomerCompareList.graphql

@@ -0,0 +1,7 @@
+query CustomerCompareList {
+  customer {
+    compare_list {
+      ...CompareListFragment
+    }
+  }
+}

package/graphql/DeleteCompareList.graphql

@@ -0,0 +1,5 @@
+mutation DeleteCompareList($uid: ID!) {
+  deleteCompareList(uid: $uid) {
+    result
+  }
+}

package/graphql/RemoveProductsFromCompareList.graphql

@@ -0,0 +1,5 @@
+mutation RemoveProductsFromCompareList($uid: ID!, $products: [ID!]!) {
+  compareList: removeProductsFromCompareList(input: { uid: $uid, products: $products }) {
+    ...CompareSummaryFragment
+  }
+}

package/graphql/index.ts

@@ -0,0 +1,12 @@
+export * from './AddProductsToCompareList.gql'
+export * from './AssignCustomerToCompareList.gql'
+export * from './CompareList.gql'
+export * from './CompareListFragment.gql'
+export * from './CompareProductIdInternal.gql'
+export * from './CreateCompareList.gql'
+export * from './CurrentCompareUid.gql'
+export * from './CustomerCompareList.gql'
+export * from './DeleteCompareList.gql'
+export * from './RemoveProductsFromCompareList.gql'
+export * from './CompareSummary.gql'
+export * from './ComparableItem.gql'

package/hooks/index.ts

@@ -0,0 +1,6 @@
+export * from './useAssignCurrentCompareListUid'
+export * from './useClearCurrentCompareListUid'
+export * from './useCompareList'
+export * from './useCompareListStyles'
+export * from './useCompareListUidCreate'
+export * from './useCompareSummary'

package/hooks/useAssignCurrentCompareListUid.ts

@@ -0,0 +1,16 @@
+import { ApolloCache, useApolloClient } from '@graphcommerce/graphql'
+import { useCallback } from 'react'
+import { CurrentCompareUidDocument } from '../graphql'
+
+function writeCompareUid(cache: ApolloCache<object>, uid: string | null = null) {
+  cache.writeQuery({
+    query: CurrentCompareUidDocument,
+    data: { currentCompareUid: { __typename: 'CurrentCompareUid', uid } },
+    broadcast: true,
+  })
+}
+
+export function useAssignCurrentCompareListUid() {
+  const { cache } = useApolloClient()
+  return useCallback((uid: string) => writeCompareUid(cache, uid), [cache])
+}

package/hooks/useClearCurrentCompareListUid.ts

@@ -0,0 +1,15 @@
+import { useApolloClient } from '@graphcommerce/graphql'
+import { CurrentCompareUidDocument } from '../graphql'
+
+export function useClearCurrentCompareListUid() {
+  const { cache } = useApolloClient()
+
+  return () => {
+    const id = cache.readQuery({ query: CurrentCompareUidDocument })?.currentCompareUid?.uid
+    if (!id) return
+
+    cache.evict({ fieldName: 'currentCompareUid', broadcast: true })
+    cache.evict({ fieldName: 'compareList', broadcast: true })
+    cache.gc()
+  }
+}

package/hooks/useCompareList.ts

@@ -0,0 +1,10 @@
+import { useQuery } from '@graphcommerce/graphql'
+import { CompareListDocument, CurrentCompareUidDocument } from '../graphql'
+
+export function useCompareList() {
+  const currentCompareUid = useQuery(CurrentCompareUidDocument)
+  const uid = currentCompareUid.data?.currentCompareUid?.uid
+  const compareList = useQuery(CompareListDocument, { variables: { uid: uid ?? '' }, skip: !uid })
+
+  return compareList
+}

package/hooks/useCompareListStyles.ts

@@ -0,0 +1,21 @@
+import { useTheme } from '@mui/material'
+
+export function useCompareListStyles() {
+  const theme = useTheme()
+  return {
+    display: 'flex ',
+    justifyContent: 'center',
+    gap: theme.spacings.md,
+    '& > *': {
+      width: {
+        md: `calc(100% / 3)`,
+        xs: `calc(100% / 2)`,
+      },
+    },
+    [theme.breakpoints.down('md')]: {
+      '> *:nth-of-type(2) ~ *': {
+        display: 'none',
+      },
+    },
+  }
+}

package/hooks/useCompareListUidCreate.ts

@@ -0,0 +1,27 @@
+import { useApolloClient } from '@graphcommerce/graphql'
+import { i18n } from '@lingui/core'
+import { CreateCompareListDocument, CurrentCompareUidDocument } from '../graphql'
+import { useAssignCurrentCompareListUid } from './useAssignCurrentCompareListUid'
+
+export function useCompareListUidCreate() {
+  const client = useApolloClient()
+  const assign = useAssignCurrentCompareListUid()
+
+  return async (): Promise<string> => {
+    const uid = client.cache.readQuery({ query: CurrentCompareUidDocument })?.currentCompareUid?.uid
+
+    if (uid) return uid
+
+    const { data } = await client.mutate({
+      mutation: CreateCompareListDocument,
+      variables: { products: [] },
+    })
+    if (!data?.createCompareList)
+      throw Error(i18n._(/* i18n */ 'Could not create a new compare list'))
+
+    // We store the uid that is returned as the currentCompareList result
+    assign(data.createCompareList.uid)
+
+    return data.createCompareList.uid
+  }
+}

package/hooks/useCompareSummary.ts

@@ -0,0 +1,13 @@
+import { useQuery } from '@graphcommerce/graphql'
+import { CurrentCompareUidDocument, CompareSummaryDocument } from '../graphql'
+
+export function useCompareSummary() {
+  const currentCompareUid = useQuery(CurrentCompareUidDocument)
+  const uid = currentCompareUid.data?.currentCompareUid?.uid
+  const compareList = useQuery(CompareSummaryDocument, {
+    variables: { uid: uid ?? '' },
+    skip: !uid,
+  })
+
+  return compareList
+}

package/index.ts

@@ -0,0 +1,3 @@
+export * from './components'
+export * from './graphql'
+export * from './hooks'

package/next-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+/// <reference types="@graphcommerce/next-ui/types" />

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@graphcommerce/magento-compare",
+  "homepage": "https://www.graphcommerce.org/",
+  "repository": "github:graphcommerce-org/graphcommerce",
+  "version": "6.2.0-canary.9",
+  "sideEffects": false,
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
+  },
+  "devDependencies": {
+    "@graphcommerce/eslint-config-pwa": "6.2.0-canary.9",
+    "@graphcommerce/prettier-config-pwa": "6.2.0-canary.9",
+    "@graphcommerce/typescript-config-pwa": "6.2.0-canary.9"
+  },
+  "dependencies": {
+    "@graphcommerce/ecommerce-ui": "6.2.0-canary.9",
+    "@graphcommerce/framer-utils": "6.2.0-canary.9",
+    "@graphcommerce/magento-cart": "6.2.0-canary.9",
+    "@graphcommerce/magento-product": "6.2.0-canary.9",
+    "@graphcommerce/framer-next-pages": "6.2.0-canary.9",
+    "@graphcommerce/graphql": "6.2.0-canary.9",
+    "@graphcommerce/next-ui": "6.2.0-canary.9"
+  },
+  "peerDependencies": {
+    "@lingui/react": "^3.13.2",
+    "@lingui/core": "^3.13.2",
+    "@mui/material": "^5.10.16",
+    "framer-motion": "^10.0.0",
+    "graphql": "^16.0.0",
+    "next": "^13.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

package/plugins/AddCompareFabNextToCart.tsx

@@ -0,0 +1,19 @@
+import { CartFabProps } from '@graphcommerce/magento-cart'
+import type { IfConfig, PluginProps } from '@graphcommerce/next-config'
+import { CompareFab } from '../components'
+
+export const component = 'CartFab'
+export const exported = '@graphcommerce/magento-cart'
+export const ifConfig: IfConfig = 'compare'
+
+function MagentoCompareListGraphqlProvider(props: PluginProps<CartFabProps>) {
+  const { Prev, ...rest } = props
+  return (
+    <>
+      <Prev {...rest} />
+      <CompareFab />
+    </>
+  )
+}
+
+export const Plugin = MagentoCompareListGraphqlProvider

package/plugins/AddCompareToProductPage.tsx

@@ -0,0 +1,36 @@
+import { ProductPageAddToCartRowProps } from '@graphcommerce/magento-product'
+import type { IfConfig, PluginProps } from '@graphcommerce/next-config'
+import { CompareProductToggle } from '../components'
+
+export const component = 'ProductPageAddToCartActionsRow'
+export const exported = '@graphcommerce/magento-product'
+export const ifConfig: IfConfig = 'compare'
+
+function AddCompareToProductPage(props: PluginProps<ProductPageAddToCartRowProps>) {
+  const { Prev, ...rest } = props
+  const { children, after, product } = props
+  if (import.meta.graphCommerce.compareVariant === 'CHECKBOX')
+    return (
+      <Prev
+        {...rest}
+        after={
+          <>
+            {after}
+            <CompareProductToggle product={product} />
+          </>
+        }
+      />
+    )
+
+  if (
+    import.meta.graphCommerce.compareVariant === 'ICON' ||
+    !import.meta.graphCommerce.compareVariant
+  )
+    return (
+      <Prev {...rest}>
+        {children}
+        <CompareProductToggle product={product} color='default' />
+      </Prev>
+    )
+}
+export const Plugin = AddCompareToProductPage

package/plugins/AddCompareTypePolicies.tsx

@@ -0,0 +1,25 @@
+import { GraphQLProviderProps } from '@graphcommerce/graphql'
+import type { IfConfig, PluginProps } from '@graphcommerce/next-config'
+import { compareTypePolicies } from '../typePolicies'
+
+export const component = 'GraphQLProvider'
+export const exported = '@graphcommerce/graphql'
+export const ifConfig: IfConfig = 'compare'
+
+function MagentoCompareListGraphqlProvider(props: PluginProps<GraphQLProviderProps>) {
+  const {
+    Prev,
+    policies = [],
+    // migrations = [],
+    ...rest
+  } = props
+  return (
+    <Prev
+      {...rest}
+      policies={[...policies, compareTypePolicies]}
+      // migrations={[...migrations, migrateCart]}
+    />
+  )
+}
+
+export const Plugin = MagentoCompareListGraphqlProvider