@graphcommerce/magento-cart-items 2.104.29 → 2.105.3

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.
 
+# [2.105.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-items@2.104.29...@graphcommerce/magento-cart-items@2.105.0) (2021-10-18)
+
+
+### Features
+
+* **message-snackbar:** severity props ([c7be8a5](https://github.com/ho-nl/m2-pwa/commit/c7be8a51faf7a5937b7fab5bb352df2089ae4eea))
+
+
+
+
+
 ## [2.104.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-items@2.104.0...@graphcommerce/magento-cart-items@2.104.1) (2021-09-27)
 
 **Note:** Version bump only for package @graphcommerce/magento-cart-items

package/CartItem/CartItem.tsx

@@ -2,11 +2,11 @@ import { Image } from '@graphcommerce/image'
 import { useDisplayInclTax } from '@graphcommerce/magento-cart'
 import { useProductLink } from '@graphcommerce/magento-product'
 import { Money } from '@graphcommerce/magento-store'
-import { UseStyles, responsiveVal } from '@graphcommerce/next-ui'
+import { UseStyles, responsiveVal, MessageSnackbar } from '@graphcommerce/next-ui'
 import { Badge, makeStyles, Theme, Link } from '@material-ui/core'
 import clsx from 'clsx'
 import PageLink from 'next/link'
-import React, { PropsWithChildren } from 'react'
+import React, { PropsWithChildren, useState } from 'react'
 import { CartItemFragment } from '../Api/CartItem.gql'
 import DeliveryLabel from '../DeliveryLabel/DeliveryLabel'
 import RemoveItemFromCartFab from '../RemoveItemFromCart/RemoveItemFromCartFab'

package/UpdateItemQuantity/UpdateItemQuantity.tsx

@@ -1,5 +1,5 @@
-import { useFormGqlMutationCart, ApolloCartErrorAlert } from '@graphcommerce/magento-cart'
-import { TextInputNumber } from '@graphcommerce/next-ui'
+import { useFormGqlMutationCart } from '@graphcommerce/magento-cart'
+import { Button, MessageSnackbar, TextInputNumber } from '@graphcommerce/next-ui'
 import { useFormAutoSubmit } from '@graphcommerce/react-hook-form'
 import React from 'react'
 import {
@@ -7,20 +7,26 @@ import {
   UpdateItemQuantityMutationVariables,
 } from './UpdateItemQuantity.gql'
 
-export type UpdateItemQuantityProps = Omit<UpdateItemQuantityMutationVariables, 'cartId'>
+export type UpdateItemQuantityProps = Omit<UpdateItemQuantityMutationVariables, 'cartId'> & {
+  onError?: (err: any) => void
+}
 
 export default function UpdateItemQuantity(props: UpdateItemQuantityProps) {
-  const { uid, quantity } = props
+  const { uid, quantity, onError } = props
   const form = useFormGqlMutationCart(UpdateItemQuantityDocument, {
     defaultValues: { uid, quantity },
     mode: 'onChange',
   })
 
-  const { muiRegister, required, handleSubmit, formState, error } = form
+  const { muiRegister, required, handleSubmit, formState, error, reset, getValues } = form
 
   const submit = handleSubmit(() => {})
   useFormAutoSubmit({ form, submit })
 
+  if (error && onError) {
+    onError(error)
+  }
+
   return (
     <form noValidate onSubmit={submit}>
       <TextInputNumber
@@ -32,7 +38,24 @@ export default function UpdateItemQuantity(props: UpdateItemQuantityProps) {
         {...muiRegister('quantity', { required: required.quantity })}
         helperText={formState.errors.quantity?.message}
       />
-      <ApolloCartErrorAlert error={error} />
+
+      {error && (
+        <>
+          <MessageSnackbar
+            open={!!error}
+            variant='pill'
+            severity='error'
+            onClose={() => reset({ quantity })}
+            action={
+              <Button size='medium' variant='pill' color='secondary'>
+                Ok
+              </Button>
+            }
+          >
+            <>{error?.message}</>
+          </MessageSnackbar>
+        </>
+      )}
     </form>
   )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/magento-cart-items",
-  "version": "2.104.29",
+  "version": "2.105.3",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -14,21 +14,21 @@
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.2",
-    "@graphcommerce/eslint-config-pwa": "^3.0.7",
+    "@graphcommerce/eslint-config-pwa": "^3.0.8",
     "@graphcommerce/prettier-config-pwa": "^3.0.3",
     "@graphcommerce/typescript-config-pwa": "^3.1.1",
     "@playwright/test": "^1.15.2"
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
-    "@graphcommerce/graphql": "^2.103.7",
-    "@graphcommerce/image": "^2.104.10",
-    "@graphcommerce/magento-cart": "^3.1.14",
-    "@graphcommerce/magento-customer": "^3.1.1",
-    "@graphcommerce/magento-product": "^3.0.29",
-    "@graphcommerce/magento-store": "^3.0.25",
-    "@graphcommerce/next-ui": "^3.5.0",
-    "@graphcommerce/react-hook-form": "^2.102.8",
+    "@graphcommerce/graphql": "^2.103.8",
+    "@graphcommerce/image": "^2.104.11",
+    "@graphcommerce/magento-cart": "^3.2.2",
+    "@graphcommerce/magento-customer": "^3.1.5",
+    "@graphcommerce/magento-product": "^3.2.2",
+    "@graphcommerce/magento-store": "^3.0.28",
+    "@graphcommerce/next-ui": "^3.7.1",
+    "@graphcommerce/react-hook-form": "^2.102.9",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -38,5 +38,5 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "gitHead": "08f4dbe739a38ece2c47aa1e94c10f8397da27fa"
+  "gitHead": "99b31bb867bc0a28b1687fe2c7a67f67f0b1e8e3"
 }