@graphcommerce/mollie-magento-payment 2.106.48 → 3.0.0

package/CHANGELOG.md

@@ -1,115 +1,104 @@
 # 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.106.24](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/mollie-magento-payment@2.106.23...@graphcommerce/mollie-magento-payment@2.106.24) (2021-12-20)
+### 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
 
-### Bug Fixes
+### Patch Changes
 
-* animations would run on background page, make sure animations are not running when page is not active ([2fcf4b8](https://github.com/ho-nl/m2-pwa/commit/2fcf4b8a853108147477e3a67c7ea202abb2842f))
+- Updated dependencies
+  [[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)]:
+  - @graphcommerce/graphql@3.0.0
+  - @graphcommerce/image@3.0.0
+  - @graphcommerce/magento-cart@4.0.0
+  - @graphcommerce/magento-cart-payment-method@3.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.106.24](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/mollie-magento-payment@2.106.23...@graphcommerce/mollie-magento-payment@2.106.24) (2021-12-20)
 
+### Bug Fixes
 
+- animations would run on background page, make sure animations are not running when page is not
+  active
+  ([2fcf4b8](https://github.com/ho-nl/m2-pwa/commit/2fcf4b8a853108147477e3a67c7ea202abb2842f))
 
 # [2.106.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/mollie-magento-payment@2.105.32...@graphcommerce/mollie-magento-payment@2.106.0) (2021-11-12)
 
-
 ### 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.105.9](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/mollie-magento-payment@2.105.8...@graphcommerce/mollie-magento-payment@2.105.9) (2021-11-02)
 
-
 ### Bug Fixes
 
-* input labels ([ba46c9a](https://github.com/ho-nl/m2-pwa/commit/ba46c9a17b3b460daab5015df39ac9ae66858df4))
-* overlapping checkmark icon ([b4da61a](https://github.com/ho-nl/m2-pwa/commit/b4da61ae33ab058a56f0f32c2874a2e77d77d01d))
-
-
-
-
+- input labels
+  ([ba46c9a](https://github.com/ho-nl/m2-pwa/commit/ba46c9a17b3b460daab5015df39ac9ae66858df4))
+- overlapping checkmark icon
+  ([b4da61a](https://github.com/ho-nl/m2-pwa/commit/b4da61ae33ab058a56f0f32c2874a2e77d77d01d))
 
 # [2.105.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/mollie-magento-payment@2.104.33...@graphcommerce/mollie-magento-payment@2.105.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.104.13](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/mollie-magento-payment@2.104.12...@graphcommerce/mollie-magento-payment@2.104.13) (2021-10-08)
 
-
 ### Bug Fixes
 
-* **mollie:** make sure we're redirected to the success page ([316d2b2](https://github.com/ho-nl/m2-pwa/commit/316d2b2a99189f093e74db98521c27e8e7267dd4))
-
-
-
-
+- **mollie:** make sure we're redirected to the success page
+  ([316d2b2](https://github.com/ho-nl/m2-pwa/commit/316d2b2a99189f093e74db98521c27e8e7267dd4))
 
 ## [2.104.11](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/mollie-magento-payment@2.104.10...@graphcommerce/mollie-magento-payment@2.104.11) (2021-10-07)
 
-
 ### Bug Fixes
 
-* make sure if no payment method is filled in we get an error shown ([a203e57](https://github.com/ho-nl/m2-pwa/commit/a203e570caad0732427a178e8e8b10b4a15d676b))
-
-
-
-
+- make sure if no payment method is filled in we get an error shown
+  ([a203e57](https://github.com/ho-nl/m2-pwa/commit/a203e570caad0732427a178e8e8b10b4a15d676b))
 
 # 2.104.0 (2021-09-29)
 
-
 ### Bug Fixes
 
-* make sure mollie only gets build optionally ([e5e2347](https://github.com/ho-nl/m2-pwa/commit/e5e23475e170dc2fc0c13103dfb8fbdb9009715f))
-* make sure the mollie module doesn't start with magento- to prevent building from node moduels ([ed406b9](https://github.com/ho-nl/m2-pwa/commit/ed406b9f56bd8cb5df0463cc50e4b1e9a728d4ca))
-
+- make sure mollie only gets build optionally
+  ([e5e2347](https://github.com/ho-nl/m2-pwa/commit/e5e23475e170dc2fc0c13103dfb8fbdb9009715f))
+- make sure the mollie module doesn't start with magento- to prevent building from node moduels
+  ([ed406b9](https://github.com/ho-nl/m2-pwa/commit/ed406b9f56bd8cb5df0463cc50e4b1e9a728d4ca))
 
 ### Features
 
-* 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))
-
-
-
-
+- 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))
 
 ## [2.103.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-payment-mollie@2.103.0...@graphcommerce/magento-payment-mollie@2.103.1) (2021-09-27)
 
 **Note:** Version bump only for package @graphcommerce/magento-payment-mollie
 
-
-
-
-
 # 2.103.0 (2021-09-27)
 
-
 ### Bug Fixes
 
-* make sure mollie only gets build optionally ([e5e2347](https://github.com/ho-nl/m2-pwa/commit/e5e23475e170dc2fc0c13103dfb8fbdb9009715f))
-
+- make sure mollie only gets build optionally
+  ([e5e2347](https://github.com/ho-nl/m2-pwa/commit/e5e23475e170dc2fc0c13103dfb8fbdb9009715f))
 
 ### Features
 
-* 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))
-
-
-
-
+- 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))
 
 # Change Log
 

package/components/MollieOptionsIssuer/MollieIssuerOptions.tsx

@@ -1,29 +1,20 @@
 import { useFormGqlMutationCart } from '@graphcommerce/magento-cart'
 import { PaymentOptionsProps } from '@graphcommerce/magento-cart-payment-method'
-import { FormRow, InputCheckmark } from '@graphcommerce/next-ui'
+import { extendableComponent, FormRow, InputCheckmark } from '@graphcommerce/next-ui'
 import { useFormCompose, useFormPersist, useFormValidFields } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/macro'
-import { makeStyles, TextField, Theme, Typography } from '@material-ui/core'
-import React from 'react'
+import { Box, TextField, Typography } from '@mui/material'
 import { SetMolliePaymentMethodIssuerOnCartDocument } from './SetMolliePaymentMethodIssuerOnCart.gql'
 
 type MollieIssuerOptionsProps = PaymentOptionsProps & { label: string }
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: {
-      ...theme.typography.body2,
-      paddingLeft: theme.spacings.xs,
-      margin: 0,
-    },
-  }),
-  { name: 'MollieIssuerOptions' },
-)
+const compName = 'MollieIssuerOptions' as const
+const parts = ['root', 'list'] as const
+const { classes } = extendableComponent(compName, parts)
 
 export default function MollieIssuerOptions(props: MollieIssuerOptionsProps) {
   const { mollie_available_issuers = [] } = props
-  const { code, step, Container, label, title } = props
-  const classes = useStyles()
+  const { code, step, Container, label, title = '' } = props
 
   const form = useFormGqlMutationCart(SetMolliePaymentMethodIssuerOnCartDocument, {
     mode: 'onChange',
@@ -40,7 +31,7 @@ export default function MollieIssuerOptions(props: MollieIssuerOptionsProps) {
   return (
     <Container>
       <Typography variant='h5' component='span'>
-        Pay with {title}
+        <Trans>Pay with {title}</Trans>
       </Typography>
       <form onSubmit={submit} noValidate>
         <FormRow>
@@ -71,7 +62,7 @@ export default function MollieIssuerOptions(props: MollieIssuerOptionsProps) {
               // return (
               //   <MenuItem key={issuer.code} value={issuer.code}>
               //     <ListItemIcon>
-              //       <SvgImageSimple src={issuer.svg} alt={issuer.name} size='small' />
+              //       <SvgIcon src={issuer.svg} alt={issuer.name} size='small' />
               //     </ListItemIcon>
               //     <Typography variant='inherit'>{issuer.name}</Typography>
               //   </MenuItem>
@@ -79,7 +70,15 @@ export default function MollieIssuerOptions(props: MollieIssuerOptionsProps) {
             })}
           </TextField>
         </FormRow>
-        <ul className={classes.root}>
+        <Box
+          component='ul'
+          className={classes.list}
+          sx={(theme) => ({
+            typography: 'body2',
+            paddingLeft: theme.spacings.xs,
+            margin: 0,
+          })}
+        >
           <li>
             <Trans>Choose your bank, and place your order.</Trans>
           </li>
@@ -91,7 +90,7 @@ export default function MollieIssuerOptions(props: MollieIssuerOptionsProps) {
               As soon as the payment is completed, you will automatically return to the webshop.
             </Trans>
           </li>
-        </ul>
+        </Box>
       </form>
     </Container>
   )

package/components/MollieOptionsToken/MollieCreditCardOptions.tsx

@@ -1,11 +1,11 @@
-import { useQuery } from '@apollo/client'
+import { useQuery } from '@graphcommerce/graphql'
 import { useFormGqlMutationCart } from '@graphcommerce/magento-cart'
 import { PaymentOptionsProps } from '@graphcommerce/magento-cart-payment-method'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { FormRow } from '@graphcommerce/next-ui'
 import { useFormCompose } from '@graphcommerce/react-hook-form'
-import { Typography } from '@material-ui/core'
-import { Alert } from '@material-ui/lab'
+import { Trans } from '@lingui/macro'
+import { Typography, Alert } from '@mui/material'
 import Script from 'next/script'
 import React, { useEffect, useState } from 'react'
 import { Mollie } from '../../Mollie'
@@ -14,7 +14,7 @@ import { SetMolliePaymentMethodTokenOnCartDocument } from './SetMolliePaymentMet
 import { mollieContext, MollieContext } from './mollieContext'
 
 export default function MollieCreditCardOptions(props: PaymentOptionsProps) {
-  const { code, step, Container, title } = props
+  const { code, step, Container, title = '' } = props
   const [loaded, setLoaded] = useState<boolean>(false)
   const [mollie, setMollie] = useState<MollieContext>(undefined)
   const conf = useQuery(StoreConfigDocument)
@@ -63,7 +63,7 @@ export default function MollieCreditCardOptions(props: PaymentOptionsProps) {
       <Script src='https://js.mollie.com/v1/mollie.js' onLoad={() => setLoaded(true)} />
       <mollieContext.Provider value={mollie}>
         <Typography variant='h5' component='span'>
-          Pay with {title}
+          <Trans>Pay with {title}</Trans>
         </Typography>
         <form onSubmit={submit} noValidate>
           <FormRow>

package/components/MollieOptionsToken/MollieField.tsx

@@ -1,10 +1,4 @@
-import {
-  InputBaseComponentProps,
-  makeStyles,
-  TextField,
-  TextFieldProps,
-  Theme,
-} from '@material-ui/core'
+import { InputBaseComponentProps, TextField, TextFieldProps } from '@mui/material'
 import React, {
   Dispatch,
   SetStateAction,
@@ -104,19 +98,9 @@ type MollieFieldProps = {
   isSubmitted?: boolean
 } & TextFieldProps
 
-const useStyles = makeStyles((theme: Theme) => ({
-  label: {
-    background:
-      theme.palette.type === 'light'
-        ? theme.palette.secondary.light
-        : theme.palette.background.paper,
-  },
-}))
-
 export default function MollieField(props: MollieFieldProps) {
   const { isSubmitted = false, label, ...fieldProps } = props
 
-  const classes = useStyles()
   const [state, setState] = useState<ComponentFieldState>({
     dirty: false,
     touched: false,
@@ -136,8 +120,13 @@ export default function MollieField(props: MollieFieldProps) {
           inputProps: { component: IframeField },
         }}
         InputLabelProps={{
+          sx: (theme) => ({
+            background:
+              theme.palette.mode === 'light'
+                ? theme.palette.secondary.light
+                : theme.palette.background.paper,
+          }),
           shrink: true,
-          classes: { root: classes.label },
         }}
       />
     </mollieFieldContext.Provider>

package/components/MolliePaymentHandler/MolliePaymentHandler.tsx

@@ -1,5 +1,5 @@
 import { ApolloCartErrorFullPage, useClearCurrentCartId } from '@graphcommerce/magento-cart'
-import { Button, Dialog } from '@material-ui/core'
+import { Button, Dialog } from '@mui/material'
 import { useRouter } from 'next/router'
 import React from 'react'
 import { useMolliePaymentTokenHandler } from '../../hooks/useMolliePaymentTokenHandler'

package/hooks/useMolliePaymentTokenHandler.ts

@@ -1,4 +1,4 @@
-import { useMutation } from '@apollo/client'
+import { useMutation } from '@graphcommerce/graphql'
 import { PaymentStatusEnum } from '@graphcommerce/graphql'
 import { useClearCurrentCartId, useCurrentCartId } from '@graphcommerce/magento-cart'
 import { useCartLock, usePaymentMethodContext } from '@graphcommerce/magento-cart-payment-method'

package/package.json

@@ -1,14 +1,11 @@
 {
   "name": "@graphcommerce/mollie-magento-payment",
-  "version": "2.106.48",
+  "version": "3.0.0",
   "sideEffects": false,
   "engines": {
     "node": "14.x"
   },
   "prettier": "@graphcommerce/prettier-config-pwa",
-  "browserslist": [
-    "extends @graphcommerce/browserslist-config-pwa"
-  ],
   "eslintConfig": {
     "extends": "@graphcommerce/eslint-config-pwa",
     "parserOptions": {
@@ -16,33 +13,28 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/browserslist-config-pwa": "^3.0.3",
-    "@graphcommerce/eslint-config-pwa": "^3.1.10",
-    "@graphcommerce/magento-cart-shipping-address": "^2.106.47",
-    "@graphcommerce/magento-product": "^3.8.13",
-    "@graphcommerce/magento-product-configurable": "^3.6.43",
-    "@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/magento-cart-shipping-address": "^3.0.0",
+    "@graphcommerce/magento-product": "^4.0.0",
+    "@graphcommerce/magento-product-configurable": "^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-cart": "^3.10.3",
-    "@graphcommerce/magento-cart-payment-method": "^2.111.47",
-    "@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",
-    "framer-motion": "^5.5.5",
-    "next": "^12.0.7",
+    "@graphcommerce/graphql": "^3.0.0",
+    "@graphcommerce/image": "^3.0.0",
+    "@graphcommerce/magento-cart": "^4.0.0",
+    "@graphcommerce/magento-cart-payment-method": "^3.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",
+    "framer-motion": "^6.2.4",
+    "next": "^12.0.10",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "type-fest": "^2.8.0"
-  },
-  "gitHead": "41e42c8cd6f565ab0cbba81a1954a0041dc46768"
+    "type-fest": "^2.11.2"
+  }
 }