@graphcommerce/magento-product 3.0.4 → 3.0.8

package/CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.8](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-product@3.0.7...@graphcommerce/magento-product@3.0.8) (2021-09-30)
+
+
+### Bug Fixes
+
+* **filter-range-type:** invalid filter value after browser back ([b1e0a78](https://github.com/ho-nl/m2-pwa/commit/b1e0a78bb92719fb0f23eef53053e825e78d7ed1))
+* **filters:** only push first filter to the history ([bbe1ac5](https://github.com/ho-nl/m2-pwa/commit/bbe1ac5b629f8ed7798094d64a413d0c27519854))
+
+
+
+
+
+## [3.0.7](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-product@3.0.6...@graphcommerce/magento-product@3.0.7) (2021-09-30)
+
+
+### Bug Fixes
+
+* with the latest version of graphql codegen the preresovled types inlined Maybe, make sure we reflect that ([7cb27b0](https://github.com/ho-nl/m2-pwa/commit/7cb27b04cbe31bee5ef4000d408f08bc9ac505c5))
+
+
+
+
+
+## [3.0.5](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-product@3.0.4...@graphcommerce/magento-product@3.0.5) (2021-09-28)
+
+
+### Bug Fixes
+
+* add to cart button ([8a69454](https://github.com/ho-nl/m2-pwa/commit/8a69454b1372a563020e1ef1b7c50363b8d29717))
+
+
+
+
+
 ## [3.0.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-product@3.0.0...@graphcommerce/magento-product@3.0.1) (2021-09-27)
 
 **Note:** Version bump only for package @graphcommerce/magento-product

package/components/ProductAddToCart/ProductAddToCart.tsx

@@ -0,0 +1,121 @@
+import { ProductInterface } from '@graphcommerce/graphql'
+import { ApolloCartErrorAlert, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
+import { Money, MoneyProps } from '@graphcommerce/magento-store'
+import {
+  Button,
+  ButtonProps,
+  MessageSnackbar,
+  SvgImage,
+  TextInputNumber,
+  iconCheckmark,
+  iconChevronRight,
+} from '@graphcommerce/next-ui'
+import { Divider, makeStyles, Theme, Typography } from '@material-ui/core'
+import PageLink from 'next/link'
+import React from 'react'
+import { ProductAddToCartDocument, ProductAddToCartMutationVariables } from './ProductAddToCart.gql'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    button: {
+      marginTop: theme.spacings.sm,
+      width: '100%',
+    },
+    messageIcon: {
+      marginBottom: '-2px',
+      marginRight: 5,
+    },
+    price: {
+      fontWeight: theme.typography.fontWeightBold,
+      margin: `${theme.spacings.sm} 0`,
+    },
+    divider: {
+      margin: `${theme.spacings.xs} 0`,
+    },
+  }),
+  { name: 'AddToCart' },
+)
+
+export type AddToCartProps = React.ComponentProps<typeof ProductAddToCart>
+
+export default function ProductAddToCart(
+  props: Pick<ProductInterface, 'name'> & {
+    variables: Omit<ProductAddToCartMutationVariables, 'cartId'>
+    name: string
+    price: MoneyProps
+    children?: React.ReactNode
+  } & Omit<ButtonProps, 'type' | 'name'>,
+) {
+  const { name, children, variables, price, ...buttonProps } = props
+
+  const form = useFormGqlMutationCart(ProductAddToCartDocument, {
+    defaultValues: variables,
+  })
+
+  const { handleSubmit, formState, error, muiRegister, required } = form
+  const submitHandler = handleSubmit(() => {})
+  const classes = useStyles()
+
+  return (
+    <form onSubmit={submitHandler} noValidate>
+      <Divider className={classes.divider} />
+
+      <Typography variant='h4' className={classes.price}>
+        <Money {...price} />
+      </Typography>
+
+      <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'
+      />
+      {children}
+      <Button
+        type='submit'
+        classes={{ root: classes.button }}
+        loading={formState.isSubmitting}
+        color='primary'
+        variant='pill'
+        size='large'
+        {...buttonProps}
+      >
+        Add to Cart
+      </Button>
+
+      <ApolloCartErrorAlert error={error} />
+
+      <MessageSnackbar
+        open={!formState.isSubmitting && formState.isSubmitSuccessful && !error?.message}
+        variant='pill'
+        color='default'
+        action={
+          <PageLink href='/cart'>
+            <Button
+              size='medium'
+              variant='pill'
+              color='secondary'
+              endIcon={<SvgImage src={iconChevronRight} shade='inverted' alt='chevron right' />}
+            >
+              View shopping cart
+            </Button>
+          </PageLink>
+        }
+      >
+        <div>
+          <SvgImage
+            src={iconCheckmark}
+            loading='eager'
+            alt='checkmark'
+            className={classes.messageIcon}
+          />
+          <strong>{name}</strong>&nbsp;has been added to your shopping cart!
+        </div>
+      </MessageSnackbar>
+    </form>
+  )
+}

package/components/ProductListCount/index.tsx

@@ -1,5 +1,5 @@
-import { makeStyles, Theme } from '@material-ui/core'
 import { UseStyles, responsiveVal } from '@graphcommerce/next-ui'
+import { makeStyles, Theme } from '@material-ui/core'
 
 import { ProductListCountFragment } from './ProductListCount.gql'
 

package/components/ProductListFilters/FilterCheckboxType.tsx

@@ -1,9 +1,9 @@
 import { cloneDeep } from '@apollo/client/utilities'
-import { Chip, ChipProps } from '@material-ui/core'
 import { useChipMenuStyles, SvgImage, iconCloseCircle } from '@graphcommerce/next-ui'
+import { Chip, ChipProps } from '@material-ui/core'
 import clsx from 'clsx'
 import React from 'react'
-import { useProductListLinkPush } from '../../hooks/useProductListLinkPush'
+import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
 import ProductListLink from '../ProductListLink/ProductListLink'
 import { FilterIn } from './FilterEqualType'
@@ -19,7 +19,7 @@ export default function FilterCheckboxType(props: FilterCheckboxTypeProps) {
   const { params } = useProductListParamsContext()
   const classes = useChipMenuStyles(props)
   const currentFilter = params.filters[attribute_code]
-  const pushRoute = useProductListLinkPush({ scroll: false })
+  const replaceRoute = useProductListLinkReplace({ scroll: false })
 
   if (!options?.[0]) return null
 
@@ -34,7 +34,7 @@ export default function FilterCheckboxType(props: FilterCheckboxTypeProps) {
       filters={{ ...params.filters, [attribute_code]: filter }}
       currentPage={undefined}
       noLink
-      link={{ scroll: false }}
+      link={{ scroll: false, replace: true }}
     >
       <Chip
         variant='outlined'
@@ -47,7 +47,7 @@ export default function FilterCheckboxType(props: FilterCheckboxTypeProps) {
                 delete linkParams.currentPage
                 delete linkParams.filters[attribute_code]
 
-                pushRoute(linkParams)
+                replaceRoute(linkParams)
               }
             : undefined
         }

package/components/ProductListFilters/FilterEqualType.tsx

@@ -1,4 +1,6 @@
 import { cloneDeep } from '@apollo/client/utilities'
+import { FilterEqualTypeInput } from '@graphcommerce/graphql'
+import { ChipMenu, ChipMenuProps, responsiveVal } from '@graphcommerce/next-ui'
 import {
   Checkbox,
   ListItem,
@@ -7,11 +9,9 @@ import {
   makeStyles,
   Theme,
 } from '@material-ui/core'
-import { FilterEqualTypeInput } from '@graphcommerce/graphql'
-import { ChipMenu, ChipMenuProps, responsiveVal } from '@graphcommerce/next-ui'
 import React from 'react'
 import { SetRequired } from 'type-fest'
-import { useProductListLinkPush } from '../../hooks/useProductListLinkPush'
+import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
 import ProductListLink from '../ProductListLink/ProductListLink'
 import { ProductListFiltersFragment } from './ProductListFilters.gql'
@@ -86,12 +86,14 @@ export default function FilterEqualType(props: FilterEqualTypeProps) {
   const { attribute_code, count, label, options, ...chipProps } = props
   const { params } = useProductListParamsContext()
   const classes = useFilterEqualStyles()
-  const pushRoute = useProductListLinkPush({ scroll: false })
+  const replaceRoute = useProductListLinkReplace({ scroll: false })
 
   const currentFilter: FilterEqualTypeInput = cloneDeep(params.filters[attribute_code]) ?? {
     in: [],
   }
 
+  const anyFilterActive = Object.keys(params?.filters ?? {}).length >= 1
+
   const currentLabels =
     options
       ?.filter((option) => option && currentFilter.in?.includes(option.value))
@@ -101,7 +103,8 @@ export default function FilterEqualType(props: FilterEqualTypeProps) {
     const linkParams = cloneDeep(params)
     delete linkParams.filters[attribute_code]
     delete linkParams.currentPage
-    pushRoute(linkParams)
+
+    replaceRoute(linkParams)
   }
 
   return (
@@ -138,6 +141,7 @@ export default function FilterEqualType(props: FilterEqualTypeProps) {
               currentPage={undefined}
               key={option?.value}
               color='inherit'
+              link={{ replace: anyFilterActive }}
             >
               <ListItem dense className={classes.listItem}>
                 <div className={classes.listItemInnerContainer}>

package/components/ProductListFilters/FilterRangeType.tsx

@@ -1,10 +1,10 @@
 import { cloneDeep } from '@apollo/client/utilities'
-import { makeStyles, Mark, Slider, Theme } from '@material-ui/core'
 import { FilterRangeTypeInput } from '@graphcommerce/graphql'
 import { Money } from '@graphcommerce/magento-store'
 import { ChipMenu, ChipMenuProps } from '@graphcommerce/next-ui'
-import React from 'react'
-import { useProductListLinkPush } from '../../hooks/useProductListLinkPush'
+import { makeStyles, Mark, Slider, Theme } from '@material-ui/core'
+import React, { useEffect } from 'react'
+import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
 import { ProductListFiltersFragment } from './ProductListFilters.gql'
 
@@ -51,7 +51,7 @@ export default function FilterRangeType(props: FilterRangeTypeProps) {
   const { attribute_code, label, options, ...chipProps } = props
   const classes = useFilterRangeType(props)
   const { params } = useProductListParamsContext()
-  const pushRoute = useProductListLinkPush({ scroll: false })
+  const replaceRoute = useProductListLinkReplace({ scroll: false })
 
   // eslint-disable-next-line no-case-declarations
   const marks: { [index: number]: Mark } = {}
@@ -80,6 +80,10 @@ export default function FilterRangeType(props: FilterRangeTypeProps) {
     paramValues ? [Number(paramValues.from), Number(paramValues.to)] : [min, max],
   )
 
+  useEffect(() => {
+    if (!paramValues) setValue([min, max])
+  }, [max, min, paramValues])
+
   const priceFilterUrl = cloneDeep(params)
   delete priceFilterUrl.currentPage
   priceFilterUrl.filters[attribute_code] = {
@@ -94,7 +98,7 @@ export default function FilterRangeType(props: FilterRangeTypeProps) {
     delete linkParams.filters[attribute_code]
 
     setValue([min, max])
-    pushRoute(linkParams)
+    replaceRoute(linkParams)
   }
 
   const currentFilter = params.filters[attribute_code] as FilterRangeTypeInput | undefined
@@ -156,7 +160,7 @@ export default function FilterRangeType(props: FilterRangeTypeProps) {
           }}
           onChangeCommitted={(e, newValue) => {
             if (newValue[0] > min || newValue[1] < max) {
-              pushRoute({ ...priceFilterUrl })
+              replaceRoute({ ...priceFilterUrl })
             } else {
               resetFilter()
             }

package/components/ProductListFiltersContainer/index.tsx

@@ -1,4 +1,3 @@
-import { makeStyles, Theme } from '@material-ui/core'
 import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
 import {
   iconChevronLeft,
@@ -6,6 +5,7 @@ import {
   SvgImageSimple,
   UseStyles,
 } from '@graphcommerce/next-ui'
+import { makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import { m, useMotionTemplate, useTransform, useViewportScroll } from 'framer-motion'
 import React, { PropsWithChildren, useEffect, useRef, useState } from 'react'

package/components/ProductListItem/index.tsx

@@ -1,6 +1,6 @@
-import { Link as MuiLink, makeStyles, Theme, Typography } from '@material-ui/core'
 import { Image, ImageProps } from '@graphcommerce/image'
 import { UseStyles, responsiveVal } from '@graphcommerce/next-ui'
+import { Link as MuiLink, makeStyles, Theme, Typography } from '@material-ui/core'
 import clsx from 'clsx'
 import PageLink from 'next/link'
 import { useRouter } from 'next/router'

package/components/ProductListItems/ProductListItemsBase.tsx

@@ -1,6 +1,6 @@
-import { Theme, makeStyles } from '@material-ui/core'
 import { Maybe } from '@graphcommerce/graphql'
 import { RenderType, UseStyles, responsiveVal } from '@graphcommerce/next-ui'
+import { Theme, makeStyles } from '@material-ui/core'
 import clsx from 'clsx'
 import React from 'react'
 import { ProductListItemFragment } from '../../Api/ProductListItem.gql'
@@ -23,7 +23,10 @@ export const useStyles = makeStyles(
 )
 
 export type ProductItemsGridProps = {
-  items?: Maybe<Array<Maybe<ProductListItemFragment & ProductListItemProps>>>
+  items?:
+    | Array<(ProductListItemFragment & ProductListItemProps) | null | undefined>
+    | null
+    | undefined
   renderers: ProductListItemRenderer
   loadingEager?: number
   size?: 'normal' | 'small'

package/components/ProductListLink/ProductListLink.tsx

@@ -7,7 +7,10 @@ import { ProductListParams } from '../ProductListItems/filterTypes'
 
 export type ProductListLinkProps = PropsWithChildren<
   LinkProps &
-    ProductListParams & { noLink?: boolean; link?: Omit<PageLinkProps, 'href' | 'passHref'> }
+    ProductListParams & {
+      noLink?: boolean
+      link?: Omit<PageLinkProps, 'href' | 'passHref'>
+    }
 >
 
 const ProductListLink = React.forwardRef<HTMLAnchorElement, ProductListLinkProps>((props, ref) => {

package/components/ProductListPagination/index.tsx

@@ -1,5 +1,5 @@
-import { PaginationProps } from '@material-ui/lab'
 import { Pagination } from '@graphcommerce/next-ui'
+import { PaginationProps } from '@material-ui/lab'
 import React from 'react'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
 import ProductListLink from '../ProductListLink/ProductListLink'

package/components/ProductListPrice/index.tsx

@@ -1,6 +1,6 @@
-import { makeStyles, Theme, Typography } from '@material-ui/core'
 import { Money } from '@graphcommerce/magento-store'
 import { UseStyles } from '@graphcommerce/next-ui'
+import { makeStyles, Theme, Typography } from '@material-ui/core'
 import React from 'react'
 import { ProductListPriceFragment } from './ProductListPrice.gql'
 

package/components/ProductListSort/index.tsx

@@ -1,10 +1,10 @@
 import { useQuery } from '@apollo/client'
 import { cloneDeep } from '@apollo/client/utilities'
-import { ListItem, ListItemText } from '@material-ui/core'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { ChipMenu, ChipMenuProps } from '@graphcommerce/next-ui'
+import { ListItem, ListItemText } from '@material-ui/core'
 import React from 'react'
-import { useProductListLinkPush } from '../../hooks/useProductListLinkPush'
+import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
 import ProductListLink from '../ProductListLink/ProductListLink'
 import { ProductListSortFragment } from './ProductListSort.gql'
@@ -15,7 +15,7 @@ export type ProductListSortProps = ProductListSortFragment &
 export default function ProductListSort(props: ProductListSortProps) {
   const { sort_fields, total_count, ...filterMenuProps } = props
   const { params } = useProductListParamsContext()
-  const pushRoute = useProductListLinkPush()
+  const replaceRoute = useProductListLinkReplace()
   const { data: storeConfigQuery } = useQuery(StoreConfigDocument)
   const defaultSort = storeConfigQuery?.storeConfig?.catalog_default_sort_by
 
@@ -27,7 +27,7 @@ export default function ProductListSort(props: ProductListSortProps) {
   const removeFilter = () => {
     const linkParams = cloneDeep(params)
     linkParams.sort = {}
-    pushRoute(linkParams)
+    replaceRoute(linkParams)
   }
 
   if (!total_count) return null
@@ -59,7 +59,7 @@ export default function ProductListSort(props: ProductListSortProps) {
                 {...linkParams}
                 color='inherit'
                 underline='none'
-                link={{ scroll: false }}
+                link={{ scroll: false, replace: true }}
               />
             )}
           >

package/components/ProductSidebarDelivery/index.tsx

@@ -1,5 +1,5 @@
-import { makeStyles, Theme, Typography } from '@material-ui/core'
 import { SvgImage, responsiveVal, iconBox } from '@graphcommerce/next-ui'
+import { makeStyles, Theme, Typography } from '@material-ui/core'
 import React from 'react'
 
 const useStyles = makeStyles(

package/components/ProductSpecs/index.tsx

@@ -1,5 +1,5 @@
-import { makeStyles, Theme } from '@material-ui/core'
 import { UseStyles, responsiveVal } from '@graphcommerce/next-ui'
+import { makeStyles, Theme } from '@material-ui/core'
 import { ProductSpecsFragment } from './ProductSpecs.gql'
 
 const useStyles = makeStyles((theme: Theme) => ({

package/components/index.ts

@@ -1,5 +1,7 @@
 export * from './JsonLdProduct'
-export * from './ProductAddToCart/ProductAddToCart.gql'
+
+export * from './ProductAddToCart/ProductAddToCart'
+export { default as ProductAddToCart } from './ProductAddToCart/ProductAddToCart'
 
 export * from './ProductList/ProductList.gql'
 

package/hooks/useProductListLinkReplace.ts

@@ -0,0 +1,32 @@
+import { default as Router } from 'next/router'
+import { ProductListParams } from '../components/ProductListItems/filterTypes'
+import { createProductListLink } from './useProductListLink'
+import { useProductListParamsContext } from './useProductListParamsContext'
+
+type UseProductLinkPushProps = {
+  shallow?: boolean
+  locale?: string | false
+  scroll?: boolean
+}
+
+export function useProductListLinkReplace(props?: UseProductLinkPushProps) {
+  const { setParams } = useProductListParamsContext()
+
+  return (params: ProductListParams) => {
+    const queryUrl = Router.query.url ?? []
+    const comingFromURLWithoutFilters = !queryUrl.includes('q')
+
+    setParams(params)
+
+    const path = createProductListLink(params)
+
+    // push the first filter, so the new route (on browser back) will be e.g. /women/fruit instead of /women
+    if (comingFromURLWithoutFilters) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      Router.push(path, path, props)
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      Router.replace(path, path, props)
+    }
+  }
+}

package/index.ts

@@ -4,6 +4,6 @@ export * from './Api/ProductListItem.gql'
 export * from './Api/ProductPageItem.gql'
 
 export * from './hooks/useProductLink'
-export * from './hooks/useProductListLinkPush'
+export * from './hooks/useProductListLinkReplace'
 export * from './hooks/useProductListParamsContext'
 export * from './hooks/ProductLink.gql'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/magento-product",
-  "version": "3.0.4",
+  "version": "3.0.8",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -14,18 +14,19 @@
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.1",
-    "@graphcommerce/eslint-config-pwa": "^3.0.2",
+    "@graphcommerce/eslint-config-pwa": "^3.0.4",
     "@graphcommerce/prettier-config-pwa": "^3.0.2",
-    "@graphcommerce/typescript-config-pwa": "^3.0.1",
+    "@graphcommerce/typescript-config-pwa": "^3.1.0",
     "@playwright/test": "^1.15.0"
   },
   "dependencies": {
     "@apollo/client": "^3.3.21",
-    "@graphcommerce/framer-scroller": "^0.2.3",
-    "@graphcommerce/graphql": "^2.103.2",
-    "@graphcommerce/image": "^2.104.3",
-    "@graphcommerce/magento-store": "^3.0.4",
-    "@graphcommerce/next-ui": "^3.0.4",
+    "@graphcommerce/framer-scroller": "^0.2.5",
+    "@graphcommerce/graphql": "^2.103.4",
+    "@graphcommerce/image": "^2.104.5",
+    "@graphcommerce/magento-cart": "^3.0.8",
+    "@graphcommerce/magento-store": "^3.0.7",
+    "@graphcommerce/next-ui": "^3.0.6",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -37,5 +38,5 @@
     "schema-dts": "^1.0.0",
     "type-fest": "^2.3.4"
   },
-  "gitHead": "aba0a6340e2d098313f1c25cc2047c18e5ea5db5"
+  "gitHead": "5045f247ba0d84c53b16a1cc924677cfcd53b4b7"
 }

package/hooks/useProductListLinkPush.ts

@@ -1,22 +0,0 @@
-import Router from 'next/router'
-import { ProductListParams } from '../components/ProductListItems/filterTypes'
-import { createProductListLink } from './useProductListLink'
-import { useProductListParamsContext } from './useProductListParamsContext'
-
-type UseProductLinkPushProps = {
-  shallow?: boolean
-  locale?: string | false
-  scroll?: boolean
-}
-
-export function useProductListLinkPush(props?: UseProductLinkPushProps) {
-  const { setParams } = useProductListParamsContext()
-
-  return (params: ProductListParams) => {
-    setParams(params)
-
-    const path = createProductListLink(params)
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    Router.push(path, path, props)
-  }
-}