@graphcommerce/magento-product 4.0.4 → 4.0.5

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Change Log
 
+## 4.0.5
+
+### Patch Changes
+
+- [#1292](https://github.com/ho-nl/m2-pwa/pull/1292)
+  [`5a1ba9e66`](https://github.com/ho-nl/m2-pwa/commit/5a1ba9e664abbac89c4f5f71f7d6d6ed1aefa5c0)
+  Thanks [@paales](https://github.com/paales)! - Renamed SvgIcon to IconSvg to prevent collisions
+  with MUI
+
+- Updated dependencies
+  [[`5a1ba9e66`](https://github.com/ho-nl/m2-pwa/commit/5a1ba9e664abbac89c4f5f71f7d6d6ed1aefa5c0),
+  [`990df655b`](https://github.com/ho-nl/m2-pwa/commit/990df655b73b469718d6cb5837ee65dfe2ad6a1d),
+  [`63f9b56eb`](https://github.com/ho-nl/m2-pwa/commit/63f9b56eb68ba790567ff1427e599fd2c3c8f1ee)]:
+  - @graphcommerce/magento-cart@4.1.3
+  - @graphcommerce/next-ui@4.2.0
+
 ## 4.0.4
 
 ### Patch Changes

package/components/ProductAddToCart/ProductAddToCart.tsx

@@ -6,11 +6,13 @@ import {
   MessageSnackbar,
   TextInputNumber,
   iconChevronRight,
-  SvgIcon,
+  IconSvg,
   extendableComponent,
+  AnimatedRow,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
-import { Divider, Typography, ButtonProps, Box } from '@mui/material'
+import { Divider, Typography, ButtonProps, Box, Alert } from '@mui/material'
+import { AnimatePresence } from 'framer-motion'
 import PageLink from 'next/link'
 import React from 'react'
 import { ProductAddToCartDocument, ProductAddToCartMutationVariables } from './ProductAddToCart.gql'
@@ -38,7 +40,7 @@ export default function ProductAddToCart(
     defaultValues: { ...variables },
   })
 
-  const { handleSubmit, formState, error, muiRegister, required } = form
+  const { handleSubmit, formState, error, muiRegister, required, data } = form
   const submitHandler = handleSubmit(() => {})
 
   return (
@@ -85,8 +87,21 @@ export default function ProductAddToCart(
 
       <ApolloCartErrorAlert error={error} />
 
+      <AnimatePresence initial={false}>
+        {data?.addProductsToCart?.user_errors.map((e) => (
+          <AnimatedRow key={e?.code}>
+            <Alert severity='error'>{e?.message}</Alert>
+          </AnimatedRow>
+        ))}
+      </AnimatePresence>
+
       <MessageSnackbar
-        open={!formState.isSubmitting && formState.isSubmitSuccessful && !error?.message}
+        open={
+          !formState.isSubmitting &&
+          formState.isSubmitSuccessful &&
+          !error?.message &&
+          !data?.addProductsToCart?.user_errors?.length
+        }
         variant='pill'
         action={
           <PageLink href='/cart' passHref>
@@ -94,7 +109,7 @@ export default function ProductAddToCart(
               size='medium'
               variant='pill'
               color='secondary'
-              endIcon={<SvgIcon src={iconChevronRight} />}
+              endIcon={<IconSvg src={iconChevronRight} />}
             >
               <Trans>View shopping cart</Trans>
             </Button>

package/components/ProductListFilters/FilterCheckboxType.tsx

@@ -1,5 +1,5 @@
 import { cloneDeep } from '@graphcommerce/graphql'
-import { iconCancelAlt, SvgIcon } from '@graphcommerce/next-ui'
+import { iconCancelAlt, IconSvg } from '@graphcommerce/next-ui'
 import { Chip, ChipProps, SxProps, Theme } from '@mui/material'
 import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
@@ -45,7 +45,7 @@ export default function FilterCheckboxType(props: FilterCheckboxTypeProps) {
               }
             : undefined
         }
-        deleteIcon={isActive ? <SvgIcon src={iconCancelAlt} size='small' /> : undefined}
+        deleteIcon={isActive ? <IconSvg src={iconCancelAlt} size='small' /> : undefined}
         label={label}
         clickable
         {...chipProps}

package/components/ProductListFiltersContainer/index.tsx

@@ -3,7 +3,7 @@ import {
   iconChevronLeft,
   iconChevronRight,
   responsiveVal,
-  SvgIcon,
+  IconSvg,
   useScrollY,
   extendableComponent,
 } from '@graphcommerce/next-ui'
@@ -107,7 +107,7 @@ export default function ProductListFiltersContainer(props: ProductListFiltersCon
           size='small'
           sx={{ position: 'absolute', top: 2, left: 2, zIndex: 10 }}
         >
-          <SvgIcon src={iconChevronLeft} />
+          <IconSvg src={iconChevronLeft} />
         </ScrollerButton>
         <Box
           className={classes.container}
@@ -165,7 +165,7 @@ export default function ProductListFiltersContainer(props: ProductListFiltersCon
           size='small'
           sx={{ position: 'absolute', top: 2, right: 2, zIndex: 10 }}
         >
-          <SvgIcon src={iconChevronRight} />
+          <IconSvg src={iconChevronRight} />
         </ScrollerButton>
       </ScrollerProvider>
     </MotionDiv>

package/components/ProductSidebarDelivery/index.tsx

@@ -1,7 +1,7 @@
 import {
   responsiveVal,
   iconOrderBefore,
-  SvgIcon,
+  IconSvg,
   extendableComponent,
 } from '@graphcommerce/next-ui'
 import { Box, darken, lighten, Typography } from '@mui/material'
@@ -31,7 +31,7 @@ export default function ProductSidebarDelivery() {
         borderRadius: responsiveVal(theme.shape.borderRadius * 3, theme.shape.borderRadius * 4),
       })}
     >
-      <SvgIcon
+      <IconSvg
         className={classes.image}
         src={iconOrderBefore}
         size='small'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.0.4",
+  "version": "4.0.5",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -21,9 +21,9 @@
     "@graphcommerce/framer-scroller": "^2.0.4",
     "@graphcommerce/graphql": "^3.0.3",
     "@graphcommerce/image": "^3.1.0",
-    "@graphcommerce/magento-cart": "^4.1.2",
+    "@graphcommerce/magento-cart": "^4.1.3",
     "@graphcommerce/magento-store": "^4.1.0",
-    "@graphcommerce/next-ui": "^4.1.3",
+    "@graphcommerce/next-ui": "^4.2.0",
     "schema-dts": "^1.1.0",
     "type-fest": "^2.12.0"
   },