npm - @graphcommerce/magento-review - Versions diffs - 2.111.43 → 3.0.0 - Mend

@graphcommerce/magento-review 2.111.43 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/CHANGELOG.md +96 -96
package/components/AccountReviews/index.tsx +17 -26
package/components/CreateProductReviewForm/index.tsx +65 -52
package/components/CustomerReview/index.tsx +76 -67
package/components/ProductReviewChip/index.tsx +3 -14
package/components/ProductReviewSummary/index.tsx +60 -48
package/components/ProductReviews/index.tsx +171 -106
package/package.json +16 -24

package/CHANGELOG.md CHANGED Viewed

@@ -1,173 +1,173 @@
 # Change Log
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## 3.0.0
-# [2.111.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.110.2...@graphcommerce/magento-review@2.111.0) (2021-12-01)
+### Major Changes
+- [#1258](https://github.com/ho-nl/m2-pwa/pull/1258)
+  [`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)
+  Thanks [@paales](https://github.com/paales)! - Upgraded to Material UI 5
-### Features
+### Patch Changes
-* borderRadius based on theme.shape.borderRadius ([7c34937](https://github.com/ho-nl/m2-pwa/commit/7c349376cd41a131c628324c299106fdb7e60484))
+- Updated dependencies
+  [[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)]:
+  - @graphcommerce/graphql@3.0.0
+  - @graphcommerce/image@3.0.0
+  - @graphcommerce/magento-customer@4.0.0
+  - @graphcommerce/magento-product@4.0.0
+  - @graphcommerce/magento-store@4.0.0
+  - @graphcommerce/next-ui@4.0.0
+  - @graphcommerce/react-hook-form@3.0.0
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [2.111.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.110.2...@graphcommerce/magento-review@2.111.0) (2021-12-01)
+### Features
+- borderRadius based on theme.shape.borderRadius
+  ([7c34937](https://github.com/ho-nl/m2-pwa/commit/7c349376cd41a131c628324c299106fdb7e60484))
 # [2.110.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.109.1...@graphcommerce/magento-review@2.110.0) (2021-11-22)
 ### Bug Fixes
-* allow styling from parent ([ed1b4dc](https://github.com/ho-nl/m2-pwa/commit/ed1b4dc446fa19244cc73f87063256809b914d15))
-* cleanup ([7937ac5](https://github.com/ho-nl/m2-pwa/commit/7937ac5c6163a4ffe10d8a8d61847fcc86e82a9d))
-* make stylable ([54aea4c](https://github.com/ho-nl/m2-pwa/commit/54aea4c177c708de07df9ef9c590da6bff43aea8))
-* remove styles ([fabde1f](https://github.com/ho-nl/m2-pwa/commit/fabde1f1dba9f75dea60bb2c7c69d4793c6197cd))
-* rename summary chip fragment ([bb23dfc](https://github.com/ho-nl/m2-pwa/commit/bb23dfc8bb82e99832196b4080d2c4c9f269cc5d))
-* revert to SvgImageSimple ([b247c6b](https://github.com/ho-nl/m2-pwa/commit/b247c6b96979bc313e597a8ffe1275b73f38bd6a))
-* review form size large ([9f45336](https://github.com/ho-nl/m2-pwa/commit/9f45336d310b120088fe6440dd95a51944ff77cb))
-* use fragment types ([0a06309](https://github.com/ho-nl/m2-pwa/commit/0a0630916e191c59eed402904b9ace6b87831bd8))
+- allow styling from parent
+  ([ed1b4dc](https://github.com/ho-nl/m2-pwa/commit/ed1b4dc446fa19244cc73f87063256809b914d15))
+- cleanup
+  ([7937ac5](https://github.com/ho-nl/m2-pwa/commit/7937ac5c6163a4ffe10d8a8d61847fcc86e82a9d))
+- make stylable
+  ([54aea4c](https://github.com/ho-nl/m2-pwa/commit/54aea4c177c708de07df9ef9c590da6bff43aea8))
+- remove styles
+  ([fabde1f](https://github.com/ho-nl/m2-pwa/commit/fabde1f1dba9f75dea60bb2c7c69d4793c6197cd))
+- rename summary chip fragment
+  ([bb23dfc](https://github.com/ho-nl/m2-pwa/commit/bb23dfc8bb82e99832196b4080d2c4c9f269cc5d))
+- revert to SvgImageSimple
+  ([b247c6b](https://github.com/ho-nl/m2-pwa/commit/b247c6b96979bc313e597a8ffe1275b73f38bd6a))
+- review form size large
+  ([9f45336](https://github.com/ho-nl/m2-pwa/commit/9f45336d310b120088fe6440dd95a51944ff77cb))
+- use fragment types
+  ([0a06309](https://github.com/ho-nl/m2-pwa/commit/0a0630916e191c59eed402904b9ace6b87831bd8))
 ### Features
-* add ReviewSummary component ([b823669](https://github.com/ho-nl/m2-pwa/commit/b823669d32e92238d05cac181c3453a13da49601))
-* use Rating component ([ec54f45](https://github.com/ho-nl/m2-pwa/commit/ec54f4522adb2d330bbdecc2ce032f86f13fb7a6))
+- add ReviewSummary component
+  ([b823669](https://github.com/ho-nl/m2-pwa/commit/b823669d32e92238d05cac181c3453a13da49601))
+- use Rating component
+  ([ec54f45](https://github.com/ho-nl/m2-pwa/commit/ec54f4522adb2d330bbdecc2ce032f86f13fb7a6))
 # [2.109.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.108.6...@graphcommerce/magento-review@2.109.0) (2021-11-12)
 ### Bug Fixes
-* even more translations ([1a1f988](https://github.com/ho-nl/m2-pwa/commit/1a1f98837c704b978f6b42b619d9c52f540b2d48))
+- even more translations
+  ([1a1f988](https://github.com/ho-nl/m2-pwa/commit/1a1f98837c704b978f6b42b619d9c52f540b2d48))
 ### Features
-* added tons of translations ([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
+- added tons of translations
+  ([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
 # [2.108.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.107.21...@graphcommerce/magento-review@2.108.0) (2021-11-09)
 ### Features
-* added translations to all pages ([8cf4ecd](https://github.com/ho-nl/m2-pwa/commit/8cf4ecd5db5edfec04ab205aa49f5de433d26579))
+- added translations to all pages
+  ([8cf4ecd](https://github.com/ho-nl/m2-pwa/commit/8cf4ecd5db5edfec04ab205aa49f5de433d26579))
 ## [2.107.13](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.107.12...@graphcommerce/magento-review@2.107.13) (2021-11-03)
 ### Bug Fixes
-* various accessibility improvements ([47481a9](https://github.com/ho-nl/m2-pwa/commit/47481a9a882ba87968de6dd797557b0b275d75fb))
+- various accessibility improvements
+  ([47481a9](https://github.com/ho-nl/m2-pwa/commit/47481a9a882ba87968de6dd797557b0b275d75fb))
 ## [2.107.6](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.107.5...@graphcommerce/magento-review@2.107.6) (2021-11-02)
 ### Bug Fixes
-* remove text='bold', make contained button text stronger by default ([cd277c9](https://github.com/ho-nl/m2-pwa/commit/cd277c9f434a4a765eac372467e5a05c822d5512))
-* remove unused imports ([b832188](https://github.com/ho-nl/m2-pwa/commit/b8321887f10a4a026adc5ca39166eeef90e60669))
-* ReviewChip should only differ from default MuiChip in product grid ([c22a029](https://github.com/ho-nl/m2-pwa/commit/c22a0291afbbc03099fd0487421ff9fd31caf226))
+- remove text='bold', make contained button text stronger by default
+  ([cd277c9](https://github.com/ho-nl/m2-pwa/commit/cd277c9f434a4a765eac372467e5a05c822d5512))
+- remove unused imports
+  ([b832188](https://github.com/ho-nl/m2-pwa/commit/b8321887f10a4a026adc5ca39166eeef90e60669))
+- ReviewChip should only differ from default MuiChip in product grid
+  ([c22a029](https://github.com/ho-nl/m2-pwa/commit/c22a0291afbbc03099fd0487421ff9fd31caf226))
 ## [2.107.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.107.0...@graphcommerce/magento-review@2.107.1) (2021-10-28)
 ### Bug Fixes
-* External SVG's can't have alt tags ([1b1414a](https://github.com/ho-nl/m2-pwa/commit/1b1414a782d55d3acf7b0e6bcaa50f2ad5f18f39))
+- External SVG's can't have alt tags
+  ([1b1414a](https://github.com/ho-nl/m2-pwa/commit/1b1414a782d55d3acf7b0e6bcaa50f2ad5f18f39))
 # [2.107.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.106.2...@graphcommerce/magento-review@2.107.0) (2021-10-28)
 ### Bug Fixes
-* keep original review chip ([3f2f834](https://github.com/ho-nl/m2-pwa/commit/3f2f834478b7b8252f6164442815e5c081de6411))
-* keep original review chip for now ([9664cd9](https://github.com/ho-nl/m2-pwa/commit/9664cd90801c6776e1c694eec8f393118810a792))
-* review button size ([9074102](https://github.com/ho-nl/m2-pwa/commit/9074102c1866b14d0e7f1f0f3dfabe6e6c0b324d))
-* size of default ReviewChip ([e1d4969](https://github.com/ho-nl/m2-pwa/commit/e1d49699776b15fa056677f042f6c9939b6acada))
+- keep original review chip
+  ([3f2f834](https://github.com/ho-nl/m2-pwa/commit/3f2f834478b7b8252f6164442815e5c081de6411))
+- keep original review chip for now
+  ([9664cd9](https://github.com/ho-nl/m2-pwa/commit/9664cd90801c6776e1c694eec8f393118810a792))
+- review button size
+  ([9074102](https://github.com/ho-nl/m2-pwa/commit/9074102c1866b14d0e7f1f0f3dfabe6e6c0b324d))
+- size of default ReviewChip
+  ([e1d4969](https://github.com/ho-nl/m2-pwa/commit/e1d49699776b15fa056677f042f6c9939b6acada))
 ### Features
-* cleanup grid, add visual star chip ([0571569](https://github.com/ho-nl/m2-pwa/commit/057156937f603bc399f5f8f8ac2837ff5cfaef28))
-* dynamic icons, update SvgImage uses to SvgImageSimple ([3d3cc0e](https://github.com/ho-nl/m2-pwa/commit/3d3cc0e0336fcde1cce6ba19705f82c1edf9bfc6))
-* enable use of both small and medium chips in design ([4536f96](https://github.com/ho-nl/m2-pwa/commit/4536f96b031734a71faf7c10f94aa5d5da90b9a8))
+- cleanup grid, add visual star chip
+  ([0571569](https://github.com/ho-nl/m2-pwa/commit/057156937f603bc399f5f8f8ac2837ff5cfaef28))
+- dynamic icons, update SvgImage uses to SvgImageSimple
+  ([3d3cc0e](https://github.com/ho-nl/m2-pwa/commit/3d3cc0e0336fcde1cce6ba19705f82c1edf9bfc6))
+- enable use of both small and medium chips in design
+  ([4536f96](https://github.com/ho-nl/m2-pwa/commit/4536f96b031734a71faf7c10f94aa5d5da90b9a8))
 # [2.106.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.105.37...@graphcommerce/magento-review@2.106.0) (2021-10-27)
 ### Features
-* **nextjs:** upgraded to nextjs 12 ([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
+- **nextjs:** upgraded to nextjs 12
+  ([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
 ## [2.105.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.105.0...@graphcommerce/magento-review@2.105.1) (2021-09-27)
 **Note:** Version bump only for package @graphcommerce/magento-review
 # 2.105.0 (2021-09-27)
 ### Bug Fixes
-* customer-order folder structure ([b7fabd1](https://github.com/ho-nl/m2-pwa/commit/b7fabd12014b2925d0b89c21f58e9974ce1c8b40))
-* introduced SvgImageSimple and solve issue with review chips ([931d7fd](https://github.com/ho-nl/m2-pwa/commit/931d7fdcf0faa9d2264899b72e564138215b6bd8))
-* make separate queries folder, create injectable for account and inject reviews ([5d82a5d](https://github.com/ho-nl/m2-pwa/commit/5d82a5d9162f687c2678cce215b77eedbaf1669e))
-* remove coupon form style was too large ([30df274](https://github.com/ho-nl/m2-pwa/commit/30df274ecdffdcebd76710a5304d6fa248e81211))
-* **review:** make sure chip is rendered correctly ([387df34](https://github.com/ho-nl/m2-pwa/commit/387df3456973290f9ce98d47823a7c71a6d95850))
-* SvgSimpleImage sizing didn't use rem ([1ba07a5](https://github.com/ho-nl/m2-pwa/commit/1ba07a5694bd60ad3cee2e8102814643d2a7c79d))
+- customer-order folder structure
+  ([b7fabd1](https://github.com/ho-nl/m2-pwa/commit/b7fabd12014b2925d0b89c21f58e9974ce1c8b40))
+- introduced SvgImageSimple and solve issue with review chips
+  ([931d7fd](https://github.com/ho-nl/m2-pwa/commit/931d7fdcf0faa9d2264899b72e564138215b6bd8))
+- make separate queries folder, create injectable for account and inject reviews
+  ([5d82a5d](https://github.com/ho-nl/m2-pwa/commit/5d82a5d9162f687c2678cce215b77eedbaf1669e))
+- remove coupon form style was too large
+  ([30df274](https://github.com/ho-nl/m2-pwa/commit/30df274ecdffdcebd76710a5304d6fa248e81211))
+- **review:** make sure chip is rendered correctly
+  ([387df34](https://github.com/ho-nl/m2-pwa/commit/387df3456973290f9ce98d47823a7c71a6d95850))
+- SvgSimpleImage sizing didn't use rem
+  ([1ba07a5](https://github.com/ho-nl/m2-pwa/commit/1ba07a5694bd60ad3cee2e8102814643d2a7c79d))
 ### Features
-* **playwright:** added new playwright package to enable browser testing ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
-* renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of [@reachdigital](https://github.com/reachdigital) ([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
-* **theme:** restructured fonts and applied to home and category page ([6adf5f1](https://github.com/ho-nl/m2-pwa/commit/6adf5f11321bdfbf499125f1161c5abf5a1bfe4a))
-* upgraded to nextjs 11 ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
+- **playwright:** added new playwright package to enable browser testing
+  ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
+- renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of
+  [@reachdigital](https://github.com/reachdigital)
+  ([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
+- **theme:** restructured fonts and applied to home and category page
+  ([6adf5f1](https://github.com/ho-nl/m2-pwa/commit/6adf5f11321bdfbf499125f1161c5abf5a1bfe4a))
+- upgraded to nextjs 11
+  ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
 ### Reverts
-* Revert "chore: upgrade @apollo/client" ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
+- Revert "chore: upgrade @apollo/client"
+  ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
 # Change Log

package/components/AccountReviews/index.tsx CHANGED Viewed

@@ -1,48 +1,30 @@
-import { SectionContainer } from '@graphcommerce/next-ui'
-import { makeStyles, Theme } from '@material-ui/core'
-import { Skeleton } from '@material-ui/lab'
-import React from 'react'
+import { SectionContainer, extendableComponent } from '@graphcommerce/next-ui'
+import { Box, Skeleton } from '@mui/material'
 import CustomerReview from '../CustomerReview'
 import { AccountReviewsFragment } from './AccountReviews.gql'
 type AccountReviewsProps = AccountReviewsFragment & { loading: boolean }
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    reviewsContainer: {
-      marginBottom: theme.spacings.md,
-    },
-    olderReviewsContainer: {
-      [theme.breakpoints.up('md')]: {
-        marginTop: theme.spacings.lg,
-        marginBottom: theme.spacings.lg,
-      },
-      marginTop: theme.spacings.md,
-      marginBottom: theme.spacings.md,
-    },
-  }),
-  { name: 'AccountReviews' },
-)
+const { classes } = extendableComponent('AccountReviews', ['root', 'older'] as const)
 export default function AccountReviews(props: AccountReviewsProps) {
   const { items, loading } = props
-  const classes = useStyles()
   const showLatestReviews = 2
   const latestReviews = items?.slice(0, Math.min(items?.length, showLatestReviews))
   const olderReviews = items?.slice(Math.min(items?.length, showLatestReviews), items?.length)
   if (loading) {
     return (
-      <div className={classes.reviewsContainer}>
+      <Box className={classes.root} sx={(theme) => ({ marginBottom: theme.spacings.md })}>
         <SectionContainer labelLeft='Latest'>
           <Skeleton height={196} />
           <Skeleton height={196} />
         </SectionContainer>
-      </div>
+      </Box>
     )
   }
   return (
-    <div className={classes.reviewsContainer}>
+    <Box className={classes.root} sx={(theme) => ({ marginBottom: theme.spacings.md })}>
       <SectionContainer labelLeft='Latest'>
         {latestReviews?.map(
           (review) => review && <CustomerReview key={review.created_at} {...review} />,
@@ -52,13 +34,22 @@ export default function AccountReviews(props: AccountReviewsProps) {
       {items && items.length >= showLatestReviews + 1 && (
         <SectionContainer
           labelLeft='Older'
-          classes={{ sectionContainer: classes.olderReviewsContainer }}
+          sx={(theme) => ({
+            '&.SectionHeader': {
+              [theme.breakpoints.up('md')]: {
+                marginTop: theme.spacings.lg,
+                marginBottom: theme.spacings.lg,
+              },
+              marginTop: theme.spacings.md,
+              marginBottom: theme.spacings.md,
+            },
+          })}
         >
           {olderReviews?.map(
             (review) => review && <CustomerReview key={review.created_at} {...review} />,
           )}
         </SectionContainer>
       )}
-    </div>
+    </Box>
   )
 }

package/components/CreateProductReviewForm/index.tsx CHANGED Viewed

@@ -1,66 +1,42 @@
-import { useQuery } from '@apollo/client'
+import { useQuery } from '@graphcommerce/graphql'
 import { ProductReviewRatingInput } from '@graphcommerce/graphql'
 import { ApolloCustomerErrorAlert } from '@graphcommerce/magento-customer'
 import {
-  Button,
   Form,
-  UseStyles,
   responsiveVal,
   FormActions,
   FormRow,
   StarRatingField,
+  extendableComponent,
 } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/macro'
-import { Box, makeStyles, TextField, Theme, Typography } from '@material-ui/core'
-import { Alert } from '@material-ui/lab'
+import { Box, TextField, Typography, Alert, Button, SxProps, Theme } from '@mui/material'
 import { useRouter } from 'next/router'
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { CreateProductReviewDocument } from './CreateProductReview.gql'
 import { ProductReviewRatingsMetadataDocument } from './ProductReviewRatingsMetadata.gql'
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    ratingContainer: {
-      marginBottom: theme.spacings.xxs,
-    },
-    rating: {
-      paddingBottom: 'unset',
-      gridTemplateColumns: `minmax(${responsiveVal(60, 80)}, 0.1fr) max-content`,
-      alignItems: 'center',
-    },
-    ratingLabel: {
-      fontWeight: 'normal',
-      justifySelf: 'left',
-    },
-    submitButton: {
-      width: responsiveVal(200, 250),
-      height: responsiveVal(40, 50),
-    },
-    cancelButton: {
-      display: 'block',
-      maxWidth: 'max-content',
-      margin: '0 auto',
-    },
-    formActions: {
-      gridAutoFlow: 'row',
-      gap: 8,
-      marginTop: theme.spacings.xxs,
-    },
-  }),
-  {
-    name: 'CreateProductReviewForm',
-  },
-)
 type CreateProductReviewFormProps = {
   sku: string
   nickname?: string
-} & UseStyles<typeof useStyles>
+  sx?: SxProps<Theme>
+}
+const name = 'CreateProductReviewForm' as const
+const parts = [
+  'root',
+  'ratingContainer',
+  'rating',
+  'ratingLabel',
+  'submitButton',
+  'cancelButton',
+  'formActions',
+] as const
+const { classes } = extendableComponent(name, parts)
 export default function CreateProductReviewForm(props: CreateProductReviewFormProps) {
-  const { sku, nickname } = props
-  const classes = useStyles(props)
+  const { sku, nickname, sx = [] } = props
   const router = useRouter()
   const [ratings, setRatings] = useState<ProductReviewRatingInput[]>([])
@@ -112,7 +88,7 @@ export default function CreateProductReviewForm(props: CreateProductReviewFormPr
   }
   return (
-    <Form onSubmit={submitHandler} noValidate>
+    <Form onSubmit={submitHandler} noValidate className={classes.root}>
       <FormRow>
         <TextField
           variant='outlined'
@@ -129,10 +105,31 @@ export default function CreateProductReviewForm(props: CreateProductReviewFormPr
         />
       </FormRow>
-      <div className={classes.ratingContainer}>
+      <Box
+        className={classes.ratingContainer}
+        sx={(theme) => ({
+          marginBottom: theme.spacings.xxs,
+        })}
+      >
         {data?.productReviewRatingsMetadata?.items?.map((prrvm) => (
-          <FormRow key={prrvm?.id} className={classes.rating}>
-            <Typography variant='h5' component='span' className={classes.ratingLabel}>
+          <FormRow
+            key={prrvm?.id}
+            className={classes.rating}
+            sx={{
+              paddingBottom: 'unset',
+              gridTemplateColumns: `minmax(${responsiveVal(60, 80)}, 0.1fr) max-content`,
+              alignItems: 'center',
+            }}
+          >
+            <Typography
+              variant='h5'
+              component='span'
+              className={classes.ratingLabel}
+              sx={{
+                fontWeight: 'normal',
+                justifySelf: 'left',
+              }}
+            >
               {prrvm?.name}
             </Typography>
             {prrvm && (
@@ -168,7 +165,7 @@ export default function CreateProductReviewForm(props: CreateProductReviewFormPr
             )}
           </FormRow>
         ))}
-      </div>
+      </Box>
       <FormRow>
         <TextField
@@ -195,27 +192,43 @@ export default function CreateProductReviewForm(props: CreateProductReviewFormPr
           disabled={formState.isSubmitting}
           multiline
           rows={8}
-          rowsMax={8}
+          maxRows={8}
         />
       </FormRow>
-      <FormActions className={classes.formActions}>
+      <FormActions
+        className={classes.formActions}
+        sx={(theme) => ({
+          gridAutoFlow: 'row',
+          gap: 8,
+          marginTop: theme.spacings.xxs,
+        })}
+      >
         <Button
           variant='pill'
           color='primary'
           type='submit'
           size='medium'
           className={classes.submitButton}
+          sx={{
+            width: responsiveVal(200, 250),
+            height: responsiveVal(40, 50),
+          }}
         >
-          Submit review
+          <Trans>Submit review</Trans>
         </Button>
         <Button
           variant='text'
           color='primary'
           onClick={() => router.back()}
           className={classes.cancelButton}
+          sx={{
+            display: 'block',
+            maxWidth: 'max-content',
+            margin: '0 auto',
+          }}
         >
-          Cancel
+          <Trans>Cancel</Trans>
         </Button>
       </FormActions>

package/components/CustomerReview/index.tsx CHANGED Viewed

@@ -1,64 +1,26 @@
-import { useQuery } from '@apollo/client'
+import { useQuery } from '@graphcommerce/graphql'
 import { Image } from '@graphcommerce/image'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
-import { responsiveVal } from '@graphcommerce/next-ui'
-import { makeStyles, Theme } from '@material-ui/core'
+import { responsiveVal, extendableComponent } from '@graphcommerce/next-ui'
+import { Box, SxProps, Theme } from '@mui/material'
+import { useMemo } from 'react'
 import { CustomerReviewFragment } from './CustomerReview.gql'
 import filledStar from './review_star_filled.svg'
 import outlinedStar from './review_star_outlined.svg'
-type CustomerReviewProps = CustomerReviewFragment
+type CustomerReviewProps = CustomerReviewFragment & { sx?: SxProps<Theme> }
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    container: {
-      padding: `${theme.spacings.md} 0 ${theme.spacings.md} 0`,
-      display: 'grid',
-      gridTemplateAreas: `
-      'image stars'
-      'image title'
-      'image text'
-      'image date'`,
-      gridTemplateColumns: `${responsiveVal(96, 196)} 1fr`,
-      gridColumnGap: theme.spacings.md,
-      gridRowGap: theme.spacings.sm,
-      alignItems: 'start',
-      ...theme.typography.body1,
-      borderBottom: `1px solid ${theme.palette.divider}`,
-      [theme.breakpoints.up('sm')]: {
-        gridRowGap: theme.spacings.xxs,
-      },
-    },
-    image: {
-      gridArea: 'image',
-      '& img': {
-        width: '100%',
-        height: 'auto',
-      },
-    },
-    stars: {
-      gridArea: 'stars',
-      margin: '-6px 0 -6px -6px',
-    },
-    title: {
-      gridArea: 'title',
-      fontWeight: theme.typography.fontWeightBold,
-    },
-    text: {
-      gridArea: 'text',
-    },
-    date: {
-      gridArea: 'date',
-      fontStyle: 'italic',
-      color: theme.palette.text.disabled,
-    },
-  }),
-  { name: 'CustomerReview' },
-)
+const { classes } = extendableComponent('ScrollerDots', [
+  'container',
+  'image',
+  'stars',
+  'title',
+  'text',
+  'date',
+] as const)
 export default function CustomerReview(props: CustomerReviewProps) {
-  const { product, text, average_rating, created_at } = props
-  const classes = useStyles()
+  const { product, text, average_rating, created_at, sx = [] } = props
   const maxAverageRating = 100
   const totalStars = 5
@@ -68,15 +30,46 @@ export default function CustomerReview(props: CustomerReviewProps) {
   const { data: config } = useQuery(StoreConfigDocument)
   const locale = config?.storeConfig?.locale?.replace('_', '-')
-  const dateFormatter = new Intl.DateTimeFormat(locale, {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-  })
+  const dateFormatter = useMemo(
+    () => new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long', day: 'numeric' }),
+    [locale],
+  )
   return (
-    <div className={classes.container}>
-      <div className={classes.image}>
+    <Box
+      className={classes.container}
+      sx={[
+        (theme) => ({
+          padding: `${theme.spacings.md} 0 ${theme.spacings.md} 0`,
+          display: 'grid',
+          gridTemplateAreas: `
+            "image stars"
+            "image title"
+            "image text"
+            "image date"`,
+          gridTemplateColumns: `${responsiveVal(96, 196)} 1fr`,
+          gridColumnGap: theme.spacings.md,
+          gridRowGap: theme.spacings.sm,
+          alignItems: 'start',
+          typography: 'body1',
+          borderBottom: `1px solid ${theme.palette.divider}`,
+          [theme.breakpoints.up('sm')]: {
+            gridRowGap: theme.spacings.xxs,
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <Box
+        className={classes.image}
+        sx={{
+          gridArea: 'image',
+          '& img': {
+            width: '100%',
+            height: 'auto',
+          },
+        }}
+      >
         {product && product.thumbnail && (
           <Image
             src={product.thumbnail?.url ?? ''}
@@ -85,16 +78,32 @@ export default function CustomerReview(props: CustomerReviewProps) {
             alt={product.thumbnail?.label ?? ''}
           />
         )}
-      </div>
-      <div className={classes.stars}>
-        {[...new Array(totalStars)].map((value, index) => (
+      </Box>
+      <Box className={classes.stars} sx={{ gridArea: 'stars', margin: '-6px 0 -6px -6px' }}>
+        {[...new Array(totalStars)].map((_, index) => (
           // eslint-disable-next-line react/no-array-index-key
           <Image key={index} src={index < totalFilledStars ? filledStar : outlinedStar} />
         ))}
-      </div>
-      <div className={classes.title}>{product?.name}</div>
-      <div className={classes.text}>{text}</div>
-      <div className={classes.date}>{dateFormatter.format(new Date(created_at ?? ''))}</div>
-    </div>
+      </Box>
+      <Box
+        className={classes.title}
+        sx={(theme) => ({ gridArea: 'title', fontWeight: theme.typography.fontWeightBold })}
+      >
+        {product?.name}
+      </Box>
+      <Box className={classes.text} sx={{ gridArea: 'text' }}>
+        {text}
+      </Box>
+      <Box
+        className={classes.date}
+        sx={(theme) => ({
+          gridArea: 'date',
+          fontStyle: 'italic',
+          color: theme.palette.text.disabled,
+        })}
+      >
+        {dateFormatter.format(new Date(created_at ?? ''))}
+      </Box>
+    </Box>
   )
 }

package/components/ProductReviewChip/index.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
-import { SvgImageSimple, iconStar } from '@graphcommerce/next-ui'
-import { Chip, ChipProps, makeStyles } from '@material-ui/core'
+import { SvgIcon, iconStar } from '@graphcommerce/next-ui'
+import { Chip, ChipProps } from '@mui/material'
 import React from 'react'
 export type ProductReviewChipProps = {
@@ -8,19 +8,8 @@ export type ProductReviewChipProps = {
   max?: number
 } & ChipProps
-const useStyles = makeStyles(
-  {
-    iconStar: {
-      stroke: '#FFDA1C',
-      fill: '#FFDA1C',
-    },
-  },
-  { name: 'ProductListReviews' },
-)
 export default function ProductReviewChip(props: ProductReviewChipProps) {
   const { rating, reviewSectionId = '', max = 5, ...chipProps } = props
-  const classes = useStyles()
   if (!rating) return null
@@ -43,7 +32,7 @@ export default function ProductReviewChip(props: ProductReviewChipProps) {
       variant='outlined'
       clickable={!!reviewSectionId}
       onClick={handleClick}
-      icon={<SvgImageSimple src={iconStar} size='small' className={classes.iconStar} />}
+      icon={<SvgIcon src={iconStar} size='small' sx={{ stroke: '#FFDA1C', fill: '#FFDA1C' }} />}
       color='default'
       size='small'
       label={`${normalizedRating}/5`}

package/components/ProductReviewSummary/index.tsx CHANGED Viewed

@@ -1,63 +1,75 @@
-import { SvgImageSimple, iconStar, UseStyles } from '@graphcommerce/next-ui'
-import { makeStyles, Theme } from '@material-ui/core'
-import React from 'react'
+import { SvgIcon, iconStar, extendableComponent } from '@graphcommerce/next-ui'
+import { Box, SxProps, Theme } from '@mui/material'
 import { ProductReviewSummaryFragment } from './ProductReviewSummary.gql'
-export type ProductReviewSummaryProps = ProductReviewSummaryFragment & UseStyles<typeof useStyles>
+export type ProductReviewSummaryProps = ProductReviewSummaryFragment & { sx?: SxProps<Theme> }
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: {
-      width: 'max-content',
-      position: 'relative',
-      '& > div': {
-        lineHeight: 0,
-      },
-    },
-    rating: {
-      position: 'absolute',
-      top: 0,
-      overflow: 'hidden',
-      '& > div': {
-        whiteSpace: 'nowrap',
-      },
-    },
-    iconStar: {
-      stroke: 'none',
-      fill: '#FFDA1C',
-    },
-    iconStarDisabled: {
-      stroke: 'none',
-      fill: theme.palette.grey[300],
-    },
-  }),
-  { name: 'ProductListReviewSummary' },
-)
+const name = 'ProductReviewSummary' as const
+const parts = ['root', 'rating', 'iconStar', 'iconStarDisabled'] as const
+const { classes } = extendableComponent(name, parts)
 export default function ProductReviewSummary(props: ProductReviewSummaryProps) {
-  const { rating_summary } = props
-  const classes = useStyles(props)
+  const { rating_summary, sx = [] } = props
   if (!rating_summary) return null
+  const disabledStar = (
+    <SvgIcon
+      src={iconStar}
+      size='xs'
+      className={classes.iconStarDisabled}
+      sx={(theme) => ({ stroke: 'none', fill: theme.palette.grey[300] })}
+    />
+  )
+  const star = (
+    <SvgIcon
+      src={iconStar}
+      size='xs'
+      className={classes.iconStar}
+      sx={{ stroke: 'none', fill: '#FFDA1C' }}
+    />
+  )
   return (
-    <div className={classes.root}>
+    <Box
+      className={classes.root}
+      sx={[
+        {
+          width: 'max-content',
+          position: 'relative',
+          '& > div': {
+            lineHeight: 0,
+          },
+        },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
       <div>
-        <SvgImageSimple src={iconStar} size='xs' className={classes.iconStarDisabled} />
-        <SvgImageSimple src={iconStar} size='xs' className={classes.iconStarDisabled} />
-        <SvgImageSimple src={iconStar} size='xs' className={classes.iconStarDisabled} />
-        <SvgImageSimple src={iconStar} size='xs' className={classes.iconStarDisabled} />
-        <SvgImageSimple src={iconStar} size='xs' className={classes.iconStarDisabled} />
+        {disabledStar}
+        {disabledStar}
+        {disabledStar}
+        {disabledStar}
+        {disabledStar}
       </div>
-      <div className={classes.rating} style={{ width: `${rating_summary}%` }}>
+      <Box
+        className={classes.rating}
+        style={{ width: `${rating_summary}%` }}
+        sx={{
+          position: 'absolute',
+          top: 0,
+          overflow: 'hidden',
+          '& > div': { whiteSpace: 'nowrap' },
+        }}
+      >
         <div>
-          <SvgImageSimple src={iconStar} size='xs' className={classes.iconStar} />
-          <SvgImageSimple src={iconStar} size='xs' className={classes.iconStar} />
-          <SvgImageSimple src={iconStar} size='xs' className={classes.iconStar} />
-          <SvgImageSimple src={iconStar} size='xs' className={classes.iconStar} />
-          <SvgImageSimple src={iconStar} size='xs' className={classes.iconStar} />
+          {star}
+          {star}
+          {star}
+          {star}
+          {star}
         </div>
-      </div>
-    </div>
+      </Box>
+    </Box>
   )
 }

package/components/ProductReviews/index.tsx CHANGED Viewed

@@ -1,92 +1,39 @@
-import { useQuery } from '@apollo/client'
-import { Button, Pagination, responsiveVal, StarRatingField } from '@graphcommerce/next-ui'
-import { makeStyles, Theme, Typography } from '@material-ui/core'
+import { useQuery } from '@graphcommerce/graphql'
+import {
+  Pagination,
+  responsiveVal,
+  StarRatingField,
+  extendableComponent,
+} from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
+import { Typography, Button, Box, SxProps, Theme } from '@mui/material'
 import Link from 'next/link'
 import React, { useState } from 'react'
 import ProductReviewChip from '../ProductReviewChip'
 import { ProductReviewsFragment } from './ProductReviews.gql'
 import { ProductReviewsPageDocument } from './ProductReviewsPage.gql'
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    review: {
-      display: 'grid',
-      gap: theme.spacings.sm,
-      borderBottom: `1px solid ${theme.palette.divider}`,
-      padding: `${theme.spacings.md} 0`,
-      ...theme.typography.body1,
-    },
-    title: {
-      display: 'grid',
-      gridAutoFlow: 'column',
-      justifyContent: 'start',
-      gap: theme.spacings.xs,
-      alignItems: 'center',
-    },
-    meta: {
-      color: theme.palette.text.disabled,
-      display: 'grid',
-      gridAutoFlow: 'column',
-      justifyContent: 'space-between',
-    },
-    nickname: {
-      ...theme.typography.body2,
-    },
-    date: {
-      ...theme.typography.body2,
-    },
-    reviewsBottomContainer: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      marginTop: theme.spacings.sm,
-    },
-    paginationRoot: {
-      margin: `0 -16px 0`,
-    },
-    paginationButton: {
-      padding: 0,
-      minWidth: 'unset',
-      borderRadius: '100%',
-      '& > .MuiButton-label': {
-        padding: 0,
-      },
-    },
-    ratingRow: {
-      display: 'flex',
-      flexWrap: 'wrap',
-      gap: theme.spacings.sm,
-      color: theme.palette.text.disabled,
-      ...theme.typography.body2,
-    },
-    rating: {
-      display: 'grid',
-      gridAutoFlow: 'column',
-      gridTemplateColumns: '0.4fr 0.6fr',
-      justifyContent: 'space-between',
-      marginRight: theme.spacings.xxs,
-      rowGap: responsiveVal(8, 16),
-      gap: 8,
-      alignItems: 'center',
-    },
-    writeReviewButton: {
-      [theme.breakpoints.down('xs')]: {
-        padding: '8px 16px 8px',
-        whiteSpace: 'nowrap',
-      },
-    },
-    container: {
-      marginTop: `calc(${theme.spacings.xxs} * -1)`,
-    },
-  }),
-  { name: 'ProductReviews' },
-)
+export type ProductReviewsProps = ProductReviewsFragment & { sx?: SxProps<Theme> }
-export type ProductReviewsProps = ProductReviewsFragment
+const name = 'ProductReviews' as const
+const parts = [
+  'review',
+  'title',
+  'meta',
+  'nickname',
+  'date',
+  'reviewsBottomContainer',
+  'paginationRoot',
+  'paginationButton',
+  'ratingRow',
+  'rating',
+  'writeReviewButton',
+  'container',
+] as const
+const { classes } = extendableComponent(name, parts)
 export default function ProductReviews(props: ProductReviewsProps) {
-  const { reviews, url_key, sku } = props
-  const classes = useStyles()
+  const { reviews, url_key, sku, sx = [] } = props
   const config = 'en_US'
   const locale = config.replace('_', '-')
@@ -118,10 +65,28 @@ export default function ProductReviews(props: ProductReviewsProps) {
   }
   const actions = (
-    <div className={classes.reviewsBottomContainer}>
+    <Box
+      className={classes.reviewsBottomContainer}
+      sx={(theme) => ({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginTop: theme.spacings.sm,
+      })}
+    >
       <Link href={`/account/reviews/add?sku=${sku}`} passHref>
-        <Button variant='pill' color='primary' size='medium' className={classes.writeReviewButton}>
-          Write a review
+        <Button
+          variant='pill'
+          color='primary'
+          size='medium'
+          className={classes.writeReviewButton}
+          sx={(theme) => ({
+            [theme.breakpoints.down('sm')]: {
+              whiteSpace: 'nowrap',
+            },
+          })}
+        >
+          <Trans>Write a review</Trans>
         </Button>
       </Link>
@@ -130,67 +95,167 @@ export default function ProductReviews(props: ProductReviewsProps) {
           count={total_pages ?? 1}
           page={current_page ?? 1}
           classes={{ root: classes.paginationRoot }}
+          sx={{
+            margin: `0 -16px 0`,
+          }}
           renderLink={(p: number, icon: React.ReactNode) => (
-            <Button onClick={() => setPage(p)} className={classes.paginationButton}>
+            <Button
+              onClick={() => setPage(p)}
+              className={classes.paginationButton}
+              sx={{
+                padding: 0,
+                minWidth: 'unset',
+                borderRadius: '100%',
+                '& > .MuiButton-label': {
+                  padding: 0,
+                },
+              }}
+            >
               {icon}
             </Button>
           )}
         />
       )}
-    </div>
+    </Box>
   )
   if (reviews?.items.length === 0) {
     return (
-      <div className={classes.container}>
-        <div className={classes.review}>
-          <div className={classes.title}>
+      <Box
+        className={classes.container}
+        sx={[
+          (theme) => ({ marginTop: `calc(${theme.spacings.xxs} * -1)` }),
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
+      >
+        <Box
+          className={classes.review}
+          sx={(theme) => ({
+            display: 'grid',
+            gap: theme.spacings.sm,
+            borderBottom: `1px solid ${theme.palette.divider}`,
+            padding: `${theme.spacings.md} 0`,
+            typography: 'body1',
+          })}
+        >
+          <Box
+            className={classes.title}
+            sx={(theme) => ({
+              display: 'grid',
+              gridAutoFlow: 'column',
+              justifyContent: 'start',
+              gap: theme.spacings.xs,
+              alignItems: 'center',
+            })}
+          >
             <Typography variant='subtitle1'>Be the first to write a review!</Typography>
-          </div>
-        </div>
+          </Box>
+        </Box>
         {actions}
-      </div>
+      </Box>
     )
   }
   return (
-    <div className={classes.container}>
+    <Box
+      className={classes.container}
+      sx={[
+        (theme) => ({ marginTop: `calc(${theme.spacings.xxs} * -1)` }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
       {!loading &&
         myReviews.items.map((review) => (
-          <div key={review?.summary} className={classes.review}>
-            <div className={classes.title}>
+          <Box
+            key={review?.summary}
+            className={classes.review}
+            sx={(theme) => ({
+              display: 'grid',
+              gap: theme.spacings.sm,
+              borderBottom: `1px solid ${theme.palette.divider}`,
+              padding: `${theme.spacings.md} 0`,
+              typography: 'body1',
+            })}
+          >
+            <Box
+              className={classes.title}
+              sx={(theme) => ({
+                display: 'grid',
+                gridAutoFlow: 'column',
+                justifyContent: 'start',
+                gap: theme.spacings.xs,
+                alignItems: 'center',
+              })}
+            >
               <ProductReviewChip rating={review?.average_rating} size='small' />
               <Typography component='h3' variant='h5'>
                 {review?.summary}
               </Typography>
-            </div>
+            </Box>
             <Typography variant='body1'>{review?.text}</Typography>
             {(review?.ratings_breakdown ?? 0) > 1 && (
-              <div className={classes.ratingRow}>
+              <Box
+                className={classes.ratingRow}
+                sx={(theme) => ({
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  gap: theme.spacings.sm,
+                  color: theme.palette.text.disabled,
+                  typography: 'body2',
+                })}
+              >
                 {review?.ratings_breakdown.map((ratingBreakdown) => (
-                  <div key={`rating-${ratingBreakdown?.value}`} className={classes.rating}>
+                  <Box
+                    key={`rating-${ratingBreakdown?.value}`}
+                    className={classes.rating}
+                    sx={(theme) => ({
+                      display: 'grid',
+                      gridAutoFlow: 'column',
+                      gridTemplateColumns: '0.4fr 0.6fr',
+                      justifyContent: 'space-between',
+                      marginRight: theme.spacings.xxs,
+                      rowGap: responsiveVal(8, 16),
+                      gap: 8,
+                      alignItems: 'center',
+                    })}
+                  >
                     <span>{ratingBreakdown?.name}</span>
                     <StarRatingField
                       readOnly
                       size='small'
                       defaultValue={Number(ratingBreakdown?.value ?? 0)}
                     />
-                  </div>
+                  </Box>
                 ))}
-              </div>
+              </Box>
             )}
-            <div className={classes.meta}>
-              <div className={classes.nickname}>Written by {review?.nickname}</div>
-              <time className={classes.date} dateTime={review?.created_at}>
+            <Box
+              className={classes.meta}
+              sx={(theme) => ({
+                color: theme.palette.text.disabled,
+                display: 'grid',
+                gridAutoFlow: 'column',
+                justifyContent: 'space-between',
+              })}
+            >
+              <Box className={classes.nickname} sx={{ typography: 'body2' }}>
+                Written by {review?.nickname}
+              </Box>
+              <Box
+                component='time'
+                className={classes.date}
+                dateTime={review?.created_at}
+                sx={{ typography: 'body2' }}
+              >
                 {review?.created_at &&
                   formatter.format(new Date(review?.created_at.replace(/-/g, '/')))}
-              </time>
-            </div>
-          </div>
+              </Box>
+            </Box>
+          </Box>
         ))}
       {actions}
-    </div>
+    </Box>
   )
 }

package/package.json CHANGED Viewed

@@ -1,11 +1,8 @@
 {
   "name": "@graphcommerce/magento-review",
-  "version": "2.111.43",
+  "version": "3.0.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
-  "browserslist": [
-    "extends @graphcommerce/browserslist-config-pwa"
-  ],
   "eslintConfig": {
     "extends": "@graphcommerce/eslint-config-pwa",
     "parserOptions": {
@@ -13,29 +10,24 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/browserslist-config-pwa": "^3.0.3",
-    "@graphcommerce/eslint-config-pwa": "^3.1.10",
-    "@graphcommerce/prettier-config-pwa": "^3.0.5",
-    "@graphcommerce/typescript-config-pwa": "^3.1.2",
-    "@playwright/test": "^1.17.1"
+    "@graphcommerce/eslint-config-pwa": "^4.0.0",
+    "@graphcommerce/prettier-config-pwa": "^4.0.0",
+    "@graphcommerce/typescript-config-pwa": "^4.0.0",
+    "@playwright/test": "^1.18.1"
   },
   "dependencies": {
-    "@apollo/client": "^3.5.6",
-    "@graphcommerce/graphql": "^2.105.13",
-    "@graphcommerce/image": "^2.105.13",
-    "@graphcommerce/magento-customer": "^3.6.44",
-    "@graphcommerce/magento-product": "^3.8.13",
-    "@graphcommerce/magento-store": "^3.4.12",
-    "@graphcommerce/next-ui": "^3.25.3",
-    "@graphcommerce/react-hook-form": "^2.104.7",
-    "@lingui/macro": "^3.13.0",
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/lab": "^4.0.0-alpha.60",
-    "clsx": "^1.1.1",
-    "next": "^12.0.7",
+    "@graphcommerce/graphql": "^3.0.0",
+    "@graphcommerce/image": "^3.0.0",
+    "@graphcommerce/magento-customer": "^4.0.0",
+    "@graphcommerce/magento-product": "^4.0.0",
+    "@graphcommerce/magento-store": "^4.0.0",
+    "@graphcommerce/next-ui": "^4.0.0",
+    "@graphcommerce/react-hook-form": "^3.0.0",
+    "@lingui/macro": "^3.13.2",
+    "@mui/material": "^5.4.1",
+    "next": "^12.0.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "schema-dts": "^1.0.0"
-  },
-  "gitHead": "41e42c8cd6f565ab0cbba81a1954a0041dc46768"
+  }
 }