@graphcommerce/magento-cart 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-cart@3.0.4...@graphcommerce/magento-cart@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-cart@3.0.0...@graphcommerce/magento-cart@3.0.1) (2021-09-27)
 
 **Note:** Version bump only for package @graphcommerce/magento-cart

package/components/CartFab/CartFab.tsx

@@ -1,10 +1,10 @@
-import { Fab, FabProps, NoSsr } from '@material-ui/core'
 import {
   iconShoppingBag,
   StyledBadge,
   SvgImageSimple,
   useFixedFabAnimation,
 } from '@graphcommerce/next-ui'
+import { Fab, FabProps, NoSsr } from '@material-ui/core'
 import { m } from 'framer-motion'
 import PageLink from 'next/link'
 import React from 'react'

package/components/CartItemSummary/index.tsx

@@ -1,4 +1,3 @@
-import { Divider, makeStyles, Theme } from '@material-ui/core'
 import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
 import { Image } from '@graphcommerce/image'
 import {
@@ -9,6 +8,7 @@ import {
   SvgImageSimple,
   UseStyles,
 } from '@graphcommerce/next-ui'
+import { Divider, makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import React from 'react'
 import { useCartQuery } from '../../hooks'

package/components/CartStartCheckout/CartStartCheckout.tsx

@@ -1,6 +1,6 @@
-import { makeStyles, Theme } from '@material-ui/core'
 import { Money } from '@graphcommerce/magento-store'
 import { Button, iconChevronRight, responsiveVal, SvgImage } from '@graphcommerce/next-ui'
+import { makeStyles, Theme } from '@material-ui/core'
 import PageLink from 'next/link'
 import React, { PropsWithChildren } from 'react'
 import { CartStartCheckoutFragment } from './CartStartCheckout.gql'

package/components/CartSummary/index.tsx

@@ -1,6 +1,6 @@
-import { Link, makeStyles, Theme, Typography } from '@material-ui/core'
 import { CartAddressMultiLine } from '@graphcommerce/magento-cart-address'
 import { SectionContainer, UseStyles } from '@graphcommerce/next-ui'
+import { Link, makeStyles, Theme, Typography } from '@material-ui/core'
 import PageLink from 'next/link'
 import React from 'react'
 import { useCartQuery } from '../../hooks'

package/components/CartTotals/CartTotals.tsx

@@ -1,6 +1,6 @@
-import { Divider, makeStyles, Theme } from '@material-ui/core'
 import { Money, MoneyProps } from '@graphcommerce/magento-store'
 import { AnimatedRow, UseStyles } from '@graphcommerce/next-ui'
+import { Divider, makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import { AnimatePresence } from 'framer-motion'
 import React from 'react'

package/components/EmptyCart/EmptyCart.tsx

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

package/components/index.ts

@@ -1,6 +1,3 @@
-export * from './AddToCartButton/AddToCartButton'
-export { default as AddToCartButton } from './AddToCartButton/AddToCartButton'
-
 export * from './CartFab/CartFab'
 export { default as CartFab } from './CartFab/CartFab'
 

package/hooks/useFormGqlMutationCart.ts

@@ -1,5 +1,4 @@
 import { MutationHookOptions, TypedDocumentNode } from '@apollo/client'
-import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
 import {
   useFormGqlMutation,
   UseFormGqlMutationReturn,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/magento-cart",
-  "version": "3.0.2",
+  "version": "3.0.6",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -14,22 +14,22 @@
   },
   "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-cart-address": "^2.103.2",
-    "@graphcommerce/magento-customer": "^3.0.2",
-    "@graphcommerce/magento-graphql": "^2.103.1",
-    "@graphcommerce/magento-store": "^3.0.2",
-    "@graphcommerce/next-ui": "^3.0.2",
-    "@graphcommerce/react-hook-form": "^2.102.1",
+    "@graphcommerce/framer-scroller": "^0.2.5",
+    "@graphcommerce/graphql": "^2.103.4",
+    "@graphcommerce/image": "^2.104.5",
+    "@graphcommerce/magento-cart-address": "^2.103.6",
+    "@graphcommerce/magento-customer": "^3.0.6",
+    "@graphcommerce/magento-graphql": "^2.103.4",
+    "@graphcommerce/magento-store": "^3.0.6",
+    "@graphcommerce/next-ui": "^3.0.6",
+    "@graphcommerce/react-hook-form": "^2.102.4",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -39,5 +39,5 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "gitHead": "05d36d5da1bee914defba6d0ddb50d7fe1932866"
+  "gitHead": "cf2b61fa96aca043ff841b018334ca8c28e5e6cf"
 }

package/components/AddToCartButton/AddToCartButton.tsx

@@ -1,127 +0,0 @@
-import { TypedDocumentNode, useQuery } from '@apollo/client'
-import { Divider, makeStyles, Theme, Typography } from '@material-ui/core'
-import { ProductInterface } from '@graphcommerce/graphql'
-import { CustomerTokenDocument } from '@graphcommerce/magento-customer'
-import { Money, MoneyProps } from '@graphcommerce/magento-store'
-import {
-  Button,
-  ButtonProps,
-  MessageSnackbar,
-  SvgImage,
-  TextInputNumber,
-  iconCheckmark,
-  iconChevronRight,
-} from '@graphcommerce/next-ui'
-import { DeepPartial, UnpackNestedValue, Path } from '@graphcommerce/react-hook-form'
-import PageLink from 'next/link'
-import React from 'react'
-import { useFormGqlMutationCart } from '../../hooks/useFormGqlMutationCart'
-import ApolloCartErrorAlert from '../ApolloCartError/ApolloCartErrorAlert'
-
-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 AddToCartButton>
-
-export default function AddToCartButton<Q, V extends { cartId: string; [index: string]: unknown }>(
-  props: Pick<ProductInterface, 'name'> & {
-    mutation: TypedDocumentNode<Q, V>
-    variables: Omit<V, 'cartId'>
-    name: string
-    price: MoneyProps
-    children?: React.ReactNode
-  } & Omit<ButtonProps, 'type' | 'name'>,
-) {
-  const { name, children, mutation, variables, price, ...buttonProps } = props
-
-  const form = useFormGqlMutationCart<Q, V>(mutation, {
-    defaultValues: variables as UnpackNestedValue<DeepPartial<V>>,
-  })
-
-  const { handleSubmit, formState, error, muiRegister, required } = form
-  const submitHandler = handleSubmit(() => {})
-  const classes = useStyles()
-
-  const { data: tokenQuery } = useQuery(CustomerTokenDocument)
-
-  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' as Path<V>, { 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>
-  )
-}