@graphcommerce/magento-product 3.0.2 → 3.0.6

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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,6 +1,6 @@
 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'

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,8 +9,6 @@ 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'

package/components/ProductListFilters/FilterRangeType.tsx

@@ -1,8 +1,8 @@
 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 { makeStyles, Mark, Slider, Theme } from '@material-ui/core'
 import React from 'react'
 import { useProductListLinkPush } from '../../hooks/useProductListLinkPush'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'

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'

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,8 +1,8 @@
 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 { useProductListParamsContext } from '../../hooks/useProductListParamsContext'

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/magento-product",
-  "version": "3.0.2",
+  "version": "3.0.6",
   "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.1",
-    "@graphcommerce/prettier-config-pwa": "^3.0.1",
-    "@graphcommerce/typescript-config-pwa": "^3.0.1",
-    "@playwright/test": "^1.14.1"
+    "@graphcommerce/eslint-config-pwa": "^3.0.4",
+    "@graphcommerce/prettier-config-pwa": "^3.0.2",
+    "@graphcommerce/typescript-config-pwa": "^3.1.0",
+    "@playwright/test": "^1.15.0"
   },
   "dependencies": {
     "@apollo/client": "^3.3.21",
-    "@graphcommerce/framer-scroller": "^0.2.2",
-    "@graphcommerce/graphql": "^2.103.1",
-    "@graphcommerce/image": "^2.104.2",
-    "@graphcommerce/magento-store": "^3.0.2",
-    "@graphcommerce/next-ui": "^3.0.2",
+    "@graphcommerce/framer-scroller": "^0.2.5",
+    "@graphcommerce/graphql": "^2.103.4",
+    "@graphcommerce/image": "^2.104.5",
+    "@graphcommerce/magento-cart": "^3.0.6",
+    "@graphcommerce/magento-store": "^3.0.6",
+    "@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",
@@ -35,7 +36,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "schema-dts": "^1.0.0",
-    "type-fest": "^2.1.0"
+    "type-fest": "^2.3.4"
   },
-  "gitHead": "05d36d5da1bee914defba6d0ddb50d7fe1932866"
+  "gitHead": "cf2b61fa96aca043ff841b018334ca8c28e5e6cf"
 }