@graphcommerce/mollie-magento-payment 3.0.6 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # Change Log
 
+## 3.2.0
+
+### Minor Changes
+
+- [#1379](https://github.com/graphcommerce-org/graphcommerce/pull/1379) [`7c1b45348`](https://github.com/graphcommerce-org/graphcommerce/commit/7c1b45348bcf99a0dd16d2079893680c5cb6ffc9) Thanks [@paales](https://github.com/paales)! - Support for mollie credit cards and playwright tests
+
+### Patch Changes
+
+- [#1379](https://github.com/graphcommerce-org/graphcommerce/pull/1379) [`b8d04130a`](https://github.com/graphcommerce-org/graphcommerce/commit/b8d04130a1b1cb8fc85308939235140288744465) Thanks [@paales](https://github.com/paales)! - Removed unused trigger: onChange for useForm handler
+
+- Updated dependencies [[`3c801f45c`](https://github.com/graphcommerce-org/graphcommerce/commit/3c801f45c7df55131acf30ae2fe0d2344830d480), [`b8d04130a`](https://github.com/graphcommerce-org/graphcommerce/commit/b8d04130a1b1cb8fc85308939235140288744465), [`3192fab82`](https://github.com/graphcommerce-org/graphcommerce/commit/3192fab82560e2211dfcacadc3b0b305260527d8), [`104abd14e`](https://github.com/graphcommerce-org/graphcommerce/commit/104abd14e1585ef0d8de77937d25156b8fa1e201), [`0e425e85e`](https://github.com/graphcommerce-org/graphcommerce/commit/0e425e85ee8fed280349317ee0440c7bceea5823), [`2a125b1f9`](https://github.com/graphcommerce-org/graphcommerce/commit/2a125b1f98bb9272d96c3577f21d6c984caad892), [`8a354d1cd`](https://github.com/graphcommerce-org/graphcommerce/commit/8a354d1cd4757497ddfc9b1969a0addbc8ff616b), [`6ebe9d12d`](https://github.com/graphcommerce-org/graphcommerce/commit/6ebe9d12db9fcaa2af67a475e64a08d63e232b46)]:
+  - @graphcommerce/next-ui@4.6.0
+  - @graphcommerce/magento-cart@4.2.4
+  - @graphcommerce/magento-cart-payment-method@3.1.0
+  - @graphcommerce/react-hook-form@3.1.0
+  - @graphcommerce/image@3.1.4
+  - @graphcommerce/magento-store@4.1.6
+
+## 3.1.1
+
+### Patch Changes
+
+- [#1378](https://github.com/graphcommerce-org/graphcommerce/pull/1378) [`b610a6e40`](https://github.com/graphcommerce-org/graphcommerce/commit/b610a6e4049e8c9e8b5d2aeff31b8e1bfc24abe5) Thanks [@paales](https://github.com/paales)! - Pin all versions internally so we can’t end up in an unfixable state for the user
+
+- Updated dependencies [[`b610a6e40`](https://github.com/graphcommerce-org/graphcommerce/commit/b610a6e4049e8c9e8b5d2aeff31b8e1bfc24abe5), [`22ff9df16`](https://github.com/graphcommerce-org/graphcommerce/commit/22ff9df1677742ae8e07d9b7e5b12fbb487580dc)]:
+  - @graphcommerce/graphql@3.0.7
+  - @graphcommerce/image@3.1.3
+  - @graphcommerce/magento-cart@4.2.3
+  - @graphcommerce/magento-cart-payment-method@3.0.7
+  - @graphcommerce/magento-store@4.1.5
+  - @graphcommerce/next-ui@4.5.1
+  - @graphcommerce/react-hook-form@3.0.7
+
+## 3.1.0
+
+### Minor Changes
+
+- [#1368](https://github.com/graphcommerce-org/graphcommerce/pull/1368) [`892018809`](https://github.com/graphcommerce-org/graphcommerce/commit/8920188093d0422ec50580e408dc28ac5f93e46a) Thanks [@paales](https://github.com/paales)! - Fix issue where the cart couldn't be properly restored when a payment was cancelled
+
+### Patch Changes
+
+- [#1369](https://github.com/graphcommerce-org/graphcommerce/pull/1369) [`ae6449502`](https://github.com/graphcommerce-org/graphcommerce/commit/ae64495024a455bbe5188588604368c1542840c9) Thanks [@paales](https://github.com/paales)! - Upgraded dependencies
+
+- Updated dependencies [[`892018809`](https://github.com/graphcommerce-org/graphcommerce/commit/8920188093d0422ec50580e408dc28ac5f93e46a), [`892018809`](https://github.com/graphcommerce-org/graphcommerce/commit/8920188093d0422ec50580e408dc28ac5f93e46a), [`ae6449502`](https://github.com/graphcommerce-org/graphcommerce/commit/ae64495024a455bbe5188588604368c1542840c9), [`892018809`](https://github.com/graphcommerce-org/graphcommerce/commit/8920188093d0422ec50580e408dc28ac5f93e46a), [`892018809`](https://github.com/graphcommerce-org/graphcommerce/commit/8920188093d0422ec50580e408dc28ac5f93e46a), [`892018809`](https://github.com/graphcommerce-org/graphcommerce/commit/8920188093d0422ec50580e408dc28ac5f93e46a)]:
+  - @graphcommerce/graphql@3.0.6
+  - @graphcommerce/next-ui@4.5.0
+  - @graphcommerce/image@3.1.2
+  - @graphcommerce/magento-cart@4.2.2
+  - @graphcommerce/magento-cart-payment-method@3.0.6
+  - @graphcommerce/magento-store@4.1.4
+  - @graphcommerce/react-hook-form@3.0.6
+
 ## 3.0.6
 
 ### Patch Changes

package/Inject/MolliePaymentMethod.graphql

@@ -2,11 +2,7 @@ fragment MollieAvailablePaymentMethod on AvailablePaymentMethod
 @inject(into: ["AvailablePaymentMethod"]) {
   mollie_available_issuers {
     code
-    image
     name
     svg
   }
-  mollie_meta {
-    image
-  }
 }

package/components/MollieOptionsIssuer/MollieIdealOptions.tsx

@@ -1,6 +1,27 @@
 import { PaymentOptionsProps } from '@graphcommerce/magento-cart-payment-method'
+import { Trans } from '@lingui/macro'
+import { Box } from '@mui/material'
 import { MollieIssuerOptions } from './MollieIssuerOptions'
 
 export function MollieIdealOptions(props: PaymentOptionsProps) {
-  return <MollieIssuerOptions label='Choose your bank' {...props} />
+  return (
+    <MollieIssuerOptions label='Choose your bank' {...props}>
+      <Box
+        component='ul'
+        sx={(theme) => ({ typography: 'body2', paddingLeft: theme.spacings.xs, margin: 0 })}
+      >
+        <li>
+          <Trans>Choose your bank, and place your order.</Trans>
+        </li>
+        <li>
+          <Trans>Complete the payment on your bank’s website.</Trans>
+        </li>
+        <li>
+          <Trans>
+            As soon as the payment is completed, you will automatically return to the webshop.
+          </Trans>
+        </li>
+      </Box>
+    </MollieIssuerOptions>
+  )
 }

package/components/MollieOptionsIssuer/MollieIssuerOptions.tsx

@@ -6,18 +6,15 @@ import { Trans } from '@lingui/macro'
 import { Box, TextField, Typography } from '@mui/material'
 import { SetMolliePaymentMethodIssuerOnCartDocument } from './SetMolliePaymentMethodIssuerOnCart.gql'
 
-type MollieIssuerOptionsProps = PaymentOptionsProps & { label: string }
+type MollieIssuerOptionsProps = PaymentOptionsProps & { label: string; children?: React.ReactNode }
 
 const compName = 'MollieIssuerOptions' as const
-const parts = ['root', 'list'] as const
-const { classes } = extendableComponent(compName, parts)
 
 export function MollieIssuerOptions(props: MollieIssuerOptionsProps) {
-  const { mollie_available_issuers = [] } = props
+  const { mollie_available_issuers = [], children } = props
   const { code, step, Container, label, title = '' } = props
 
   const form = useFormGqlMutationCart(SetMolliePaymentMethodIssuerOnCartDocument, {
-    mode: 'onChange',
     defaultValues: { code },
   })
 
@@ -25,7 +22,13 @@ export function MollieIssuerOptions(props: MollieIssuerOptionsProps) {
   const submit = handleSubmit(() => {})
   const valid = useFormValidFields(form, required)
 
-  useFormPersist({ form, name: `PaymentMethodOptions_${code}` })
+  // Since the issuer isn't retrievable from Magento we persist this value.
+  useFormPersist({
+    form,
+    name: `PaymentMethodOptions_${code}`,
+    persist: ['issuer'],
+    storage: 'localStorage',
+  })
   useFormCompose({ form, step, submit, key: `PaymentMethodOptions_${code}` })
 
   return (
@@ -44,14 +47,15 @@ export function MollieIssuerOptions(props: MollieIssuerOptionsProps) {
             helperText={formState.isSubmitted && formState.errors.issuer?.message}
             label={label}
             required={required.issuer}
-            {...muiRegister('issuer', { required: required.issuer })}
+            {...muiRegister('issuer', {
+              required: { value: required.issuer, message: 'Please provide an issuer' },
+            })}
             InputProps={{
               endAdornment: <InputCheckmark show={valid.issuer} select />,
             }}
           >
             {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
             <option value='' />
-            {/* <MenuItem value='' /> */}
             {mollie_available_issuers?.map((issuer) => {
               if (!issuer?.code || !issuer.name) return null
 
@@ -60,39 +64,11 @@ export function MollieIssuerOptions(props: MollieIssuerOptionsProps) {
                   {issuer.name}
                 </option>
               )
-              // return (
-              //   <MenuItem key={issuer.code} value={issuer.code}>
-              //     <ListItemIcon>
-              //       <IconSvg src={issuer.svg} alt={issuer.name} size='small' />
-              //     </ListItemIcon>
-              //     <Typography variant='inherit'>{issuer.name}</Typography>
-              //   </MenuItem>
-              // )
             })}
           </TextField>
         </FormRow>
-        <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>
-          <li>
-            <Trans>Complete the payment on your bank’s website.</Trans>
-          </li>
-          <li>
-            <Trans>
-              As soon as the payment is completed, you will automatically return to the webshop.
-            </Trans>
-          </li>
-        </Box>
       </form>
+      {children}
     </Container>
   )
 }

package/components/MollieOptionsToken/MollieCreditCardOptions.tsx

@@ -20,7 +20,6 @@ export function MollieCreditCardOptions(props: PaymentOptionsProps) {
   const conf = useQuery(StoreConfigDocument)
 
   const form = useFormGqlMutationCart(SetMolliePaymentMethodTokenOnCartDocument, {
-    mode: 'onChange',
     defaultValues: { code },
     onBeforeSubmit: async (variables) => {
       const result = await mollie?.createToken()

package/components/MolliePaymentHandler/MolliePaymentHandler.graphql

@@ -0,0 +1,8 @@
+mutation MolliePaymentHandler($mollie_payment_token: String!) {
+  mollieProcessTransaction(input: { payment_token: $mollie_payment_token }) {
+    cart {
+      id
+    }
+    paymentStatus
+  }
+}

package/components/MolliePaymentHandler/MolliePaymentHandler.tsx

@@ -1,34 +1,102 @@
+import { PaymentStatusEnum, useMutation } from '@graphcommerce/graphql'
 import { ApolloCartErrorFullPage, useClearCurrentCartId } from '@graphcommerce/magento-cart'
+import {
+  PaymentHandlerProps,
+  usePaymentMethodContext,
+} from '@graphcommerce/magento-cart-payment-method'
+import { ErrorSnackbar } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
 import { Button, Dialog } from '@mui/material'
 import { useRouter } from 'next/router'
-import React from 'react'
-import { useMolliePaymentTokenHandler } from '../../hooks/useMolliePaymentTokenHandler'
+import { useEffect } from 'react'
+import { useCartLockWithToken } from '../../hooks/useCartLockWithToken'
+import { MolliePaymentHandlerDocument } from './MolliePaymentHandler.gql'
+import { MollieRecoverCartDocument } from './MollieRecoverCart.gql'
 
-export function MolliePaymentHandler() {
-  const { error } = useMolliePaymentTokenHandler()
-  const clear = useClearCurrentCartId()
+const successStatusses: PaymentStatusEnum[] = ['AUTHORIZED', 'COMPLETED', 'PAID', 'SHIPPING']
+
+export function MolliePaymentHandler({ code }: PaymentHandlerProps) {
   const router = useRouter()
+  const method = usePaymentMethodContext()
+  const clear = useClearCurrentCartId()
+
+  const [lockState] = useCartLockWithToken()
 
-  const handle = () => {
-    clear()
+  const isActive = method.selectedMethod?.code === code || lockState.method === code
+
+  const [handle, handleResult] = useMutation(MolliePaymentHandlerDocument)
+  const [recoverCart, recoverResult] = useMutation(MollieRecoverCartDocument)
+
+  const { called, error, data } = handleResult
+
+  useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    router.push('/')
-  }
+    ;(async () => {
+      if (!isActive) return
+      if (lockState.locked && lockState.justLocked) return
+
+      if (!lockState.mollie_payment_token) return
+      if (called || error) return
+
+      const result = await handle({
+        variables: { mollie_payment_token: lockState.mollie_payment_token },
+      })
+
+      const paymentStatus = result.data?.mollieProcessTransaction?.paymentStatus
+      let returnedCartId = result.data?.mollieProcessTransaction?.cart?.id
+
+      if (paymentStatus === 'OPEN' && lockState.cart_id) {
+        const res = await recoverCart({ variables: { cartId: lockState.cart_id } })
+        returnedCartId = res.data?.mollieRestoreCart?.cart.id
+      }
+
+      if (result.errors || !paymentStatus) return
+
+      if (successStatusses.includes(paymentStatus)) {
+        clear()
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        await router.push({ pathname: '/checkout/success', query: { cart_id: lockState.cart_id } })
+      } else if (returnedCartId) {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        router.replace('/checkout/payment')
+      }
+    })()
+  }, [called, clear, error, handle, isActive, lockState, recoverCart, router])
+
+  const paymentStatus = data?.mollieProcessTransaction?.paymentStatus
+  if (paymentStatus)
+    return (
+      <ErrorSnackbar open>
+        <Trans>Payment failed with status: {paymentStatus}</Trans>
+      </ErrorSnackbar>
+    )
+
+  if (!error || recoverResult.loading) return null
 
-  if (!error) return null
   return (
     <Dialog open fullWidth>
       <ApolloCartErrorFullPage
         error={error}
         disableMargin
         button={
-          <Button variant='contained' color='primary' size='large' onClick={handle}>
-            Reset Cart and Return to home
+          <Button
+            variant='contained'
+            color='primary'
+            size='large'
+            onClick={() => {
+              clear()
+              // eslint-disable-next-line @typescript-eslint/no-floating-promises
+              router.push('/')
+            }}
+          >
+            <Trans>Reset Cart and Return to home</Trans>
           </Button>
         }
       >
-        If you’ve successfully paid your order, the order <strong>will</strong> come through, but
-        there is a communication error with the website.
+        <Trans>
+          If you’ve successfully paid your order, the order <strong>will</strong> come through, but
+          there is a communication error with the website.
+        </Trans>
       </ApolloCartErrorFullPage>
     </Dialog>
   )

package/components/MolliePaymentHandler/MollieRecoverCart.graphql

@@ -0,0 +1,7 @@
+mutation MollieRecoverCart($cartId: String!) {
+  mollieRestoreCart(input: { cart_id: $cartId }) {
+    cart {
+      id
+    }
+  }
+}

package/components/MolliePaymentToggle/MolliePaymentToggle.tsx

@@ -1,16 +1,7 @@
-import { Image } from '@graphcommerce/image'
 import { PaymentToggleProps } from '@graphcommerce/magento-cart-payment-method'
 
 export function PaymentToggle(props: PaymentToggleProps) {
-  const { mollie_meta, title } = props
+  const { title } = props
 
-  return (
-    <>
-      {mollie_meta?.image && (
-        <Image layout='fixed' src={mollie_meta?.image} unoptimized alt={title} />
-      )}
-      &nbsp;
-      {title}
-    </>
-  )
+  return <>{title}</>
 }

package/components/MolliePlaceOrder/MolliePlaceOrder.tsx

@@ -1,53 +1,54 @@
+import { useCurrentCartId, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
 import {
-  useClearCurrentCartId,
-  useCurrentCartId,
-  useFormGqlMutationCart,
-} from '@graphcommerce/magento-cart'
-import { PaymentPlaceOrderProps, useCartLock } from '@graphcommerce/magento-cart-payment-method'
+  PaymentPlaceOrderProps,
+  usePaymentMethodContext,
+} from '@graphcommerce/magento-cart-payment-method'
 import { useFormCompose } from '@graphcommerce/react-hook-form'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
+import { useCartLockWithToken } from '../../hooks/useCartLockWithToken'
 import { MolliePlaceOrderDocument } from './MolliePlaceOrder.gql'
 
 export function MolliePlaceOrder(props: PaymentPlaceOrderProps) {
   const { step, code } = props
-  const router = useRouter()
+  const { push } = useRouter()
   const cartId = useCurrentCartId()
-  const clear = useClearCurrentCartId()
-  const { lock } = useCartLock()
+  const [, lock] = useCartLockWithToken()
+  const { selectedMethod } = usePaymentMethodContext()
 
-  const form = useFormGqlMutationCart(MolliePlaceOrderDocument, { mode: 'onChange' })
+  const form = useFormGqlMutationCart(MolliePlaceOrderDocument)
 
   const { handleSubmit, data, error, register, setValue } = form
 
   useEffect(() => {
     const current = new URL(window.location.href.replace(window.location.hash, ''))
-    current.searchParams.append('payment_token', 'PAYMENT_TOKEN')
+    // current.searchParams.append('locked', '1')
+    current.searchParams.set('cart_id', cartId ?? '')
+    current.searchParams.set('mollie_payment_token', 'PAYMENT_TOKEN')
+    current.searchParams.set('method', selectedMethod?.code ?? '')
+    current.searchParams.set('locked', '1')
     const replaced = current.toString().replace('PAYMENT_TOKEN', '{{payment_token}}')
     setValue('returnUrl', replaced)
-  }, [setValue])
+  }, [cartId, selectedMethod?.code, setValue])
 
   const submit = handleSubmit(() => {})
 
   useEffect(() => {
     if (!data?.placeOrder?.order || error || !cartId) return
     const redirectUrl = data?.placeOrder?.order.mollie_redirect_url
-    const molliePaymentToken = data?.placeOrder?.order.mollie_payment_token
+    const mollie_payment_token = data?.placeOrder?.order.mollie_payment_token
 
-    if (redirectUrl) {
-      lock(true)
+    // When redirecting to the payment gateway
+    if (redirectUrl && mollie_payment_token) {
+      lock({
+        mollie_payment_token,
+        method: selectedMethod?.code ?? null,
+      })
 
-      setTimeout(() => {
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        router.push(redirectUrl)
-      }, 500)
-    }
-    if (!redirectUrl && molliePaymentToken) {
-      clear()
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      router.push({ pathname: '/checkout/success', query: { cartId, molliePaymentToken } })
+      push(redirectUrl)
     }
-  }, [cartId, clear, data?.placeOrder?.order, error, lock, router])
+  }, [cartId, data?.placeOrder?.order, error, lock, push, selectedMethod?.code])
 
   useFormCompose({ form, step, submit, key: `PaymentMethodPlaceOrder_${code}` })
 

package/hooks/useCartLockWithToken.ts

@@ -0,0 +1,5 @@
+import { CartLockState, useCartLock } from '@graphcommerce/magento-cart-payment-method'
+
+type MollieLockState = CartLockState & { mollie_payment_token: string | null }
+
+export const useCartLockWithToken = () => useCartLock<MollieLockState>()

package/index.ts

@@ -1,3 +1,2 @@
-export * from './hooks'
 export * as mollie_methods from './methods'
 export * from './components/MolliePaymentToggle/MolliePaymentToggle'

package/methods/mollie_methods_creditcard.ts

@@ -1,10 +1,11 @@
-import { PaymentModule } from '@graphcommerce/magento-cart-payment-method'
-import { MollieCreditCardOptions } from '../components/MollieOptionsToken/MollieCreditCardOptions'
+import { PaymentMethodOptionsNoop, PaymentModule } from '@graphcommerce/magento-cart-payment-method'
+import { MolliePaymentHandler } from '../components/MolliePaymentHandler/MolliePaymentHandler'
 import { PaymentToggle } from '../components/MolliePaymentToggle/MolliePaymentToggle'
 import { MolliePlaceOrder } from '../components/MolliePlaceOrder/MolliePlaceOrder'
 
 export const mollie_methods_creditcard: PaymentModule = {
   PaymentToggle,
-  PaymentOptions: MollieCreditCardOptions,
+  PaymentOptions: PaymentMethodOptionsNoop,
   PaymentPlaceOrder: MolliePlaceOrder,
+  PaymentHandler: MolliePaymentHandler,
 }

package/methods/mollie_methods_klarnapaylater.ts

@@ -1,9 +1,7 @@
 import { PaymentMethodOptionsNoop, PaymentModule } from '@graphcommerce/magento-cart-payment-method'
-import { PaymentToggle } from '../components/MolliePaymentToggle/MolliePaymentToggle'
 import { MolliePlaceOrder } from '../components/MolliePlaceOrder/MolliePlaceOrder'
 
 export const mollie_methods_klarnapaylater: PaymentModule = {
-  PaymentToggle,
   PaymentOptions: PaymentMethodOptionsNoop,
   PaymentPlaceOrder: MolliePlaceOrder,
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/mollie-magento-payment",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.0.6",
+  "version": "3.2.0",
   "sideEffects": false,
   "engines": {
     "node": "14.x"
@@ -15,29 +15,29 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.2",
-    "@graphcommerce/magento-cart-shipping-address": "^3.0.4",
-    "@graphcommerce/magento-product": "^4.1.2",
-    "@graphcommerce/magento-product-configurable": "^4.0.6",
-    "@graphcommerce/prettier-config-pwa": "^4.0.3",
+    "@graphcommerce/eslint-config-pwa": "^4.1.4",
+    "@graphcommerce/magento-cart-shipping-address": "3.0.7",
+    "@graphcommerce/magento-product": "4.1.5",
+    "@graphcommerce/magento-product-configurable": "4.0.9",
+    "@graphcommerce/prettier-config-pwa": "^4.0.5",
     "@graphcommerce/typescript-config-pwa": "^4.0.2",
-    "@playwright/test": "^1.19.2"
+    "@playwright/test": "^1.20.1",
+    "type-fest": "2.12.1"
   },
   "dependencies": {
-    "@graphcommerce/graphql": "^3.0.4",
-    "@graphcommerce/image": "^3.1.1",
-    "@graphcommerce/magento-cart": "^4.2.1",
-    "@graphcommerce/magento-cart-payment-method": "^3.0.5",
-    "@graphcommerce/magento-store": "^4.1.2",
-    "@graphcommerce/next-ui": "^4.4.0",
-    "@graphcommerce/react-hook-form": "^3.0.4",
-    "type-fest": "^2.12.0"
+    "@graphcommerce/graphql": "3.0.7",
+    "@graphcommerce/image": "3.1.4",
+    "@graphcommerce/magento-cart": "4.2.4",
+    "@graphcommerce/magento-cart-payment-method": "3.1.0",
+    "@graphcommerce/magento-store": "4.1.6",
+    "@graphcommerce/next-ui": "4.6.0",
+    "@graphcommerce/react-hook-form": "3.1.0"
   },
   "peerDependencies": {
     "@lingui/macro": "^3.13.2",
-    "@mui/material": "^5.4.1",
+    "@mui/material": "5.5.3",
     "framer-motion": "^6.2.4",
-    "next": "^12.0.10",
+    "next": "12.1.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   }

package/test/creditcard.playwright.ts

@@ -0,0 +1,55 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { selectPaymentMethod } from '@graphcommerce/magento-cart-payment-method/test'
+import { goToPayment } from '@graphcommerce/magento-cart-payment-method/test/goToPayment'
+import { addConfigurableProductToCart } from '@graphcommerce/magento-product-configurable/test/addConfigurableProductToCart'
+import { test } from '@graphcommerce/magento-product/test/productURL.fixture'
+import { expect } from '@playwright/test'
+import { placeOrderOffsite } from './utils'
+
+const method = 'mollie_methods_creditcard'
+
+test.describe.only('mollie creditcard place order', () => {
+  test('Should be able to place an order and return on the success page', async ({
+    page,
+    productURL,
+    apolloClient,
+  }) => {
+    await addConfigurableProductToCart(page, productURL.ConfigurableProduct)
+    await goToPayment(page, apolloClient)
+    await selectPaymentMethod(page, method)
+
+    await placeOrderOffsite(page, 'paid')
+    expect(await page.locator('#back-to-home').innerText()).toBeDefined()
+  })
+
+  test('Should be possible to cancel an order and then place the order', async ({
+    page,
+    productURL,
+    apolloClient,
+  }) => {
+    await addConfigurableProductToCart(page, productURL.ConfigurableProduct)
+    await goToPayment(page, apolloClient)
+    await selectPaymentMethod(page, method)
+    await placeOrderOffsite(page, 'canceled')
+    await placeOrderOffsite(page, 'paid')
+    expect(await page.locator('#back-to-home').innerText()).toBeDefined()
+  })
+
+  test.only('Should be possible to press back on the payment gateway and then place the order', async ({
+    page,
+    productURL,
+    apolloClient,
+  }) => {
+    await addConfigurableProductToCart(page, productURL.ConfigurableProduct)
+    await goToPayment(page, apolloClient)
+    await selectPaymentMethod(page, method)
+    await Promise.all([page.waitForNavigation(), page.click('#place-order')])
+
+    await page.goBack()
+
+    expect(await page.locator('text=Payment failed with status: OPEN').innerText()).toBeDefined()
+
+    await placeOrderOffsite(page, 'paid')
+    expect(await page.locator('#back-to-home').innerText()).toBeDefined()
+  })
+})

package/test/ideal.playwright.ts

@@ -0,0 +1,91 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { goToPayment, selectPaymentMethod } from '@graphcommerce/magento-cart-payment-method/test'
+import { addConfigurableProductToCart } from '@graphcommerce/magento-product-configurable/test/addConfigurableProductToCart'
+import { test } from '@graphcommerce/magento-product/test/productURL.fixture'
+import { expect } from '@playwright/test'
+import { handleOffsitePayment, placeOrderOffsite, selectIssuer } from './utils'
+
+const method = 'mollie_methods_ideal'
+
+test.describe(method, () => {
+  test('Should be able to place an order and return on the success page', async ({
+    page,
+    productURL,
+    apolloClient,
+  }) => {
+    await addConfigurableProductToCart(page, productURL.ConfigurableProduct)
+    await goToPayment(page, apolloClient)
+    await selectPaymentMethod(page, method)
+
+    await selectIssuer(page, 'ideal_RABONL2U')
+    await placeOrderOffsite(page, 'paid')
+    expect(await page.locator('#back-to-home').innerText()).toBeDefined()
+  })
+
+  test("Should not allow submission when all fields aren't filled yet", async ({
+    page,
+    productURL,
+    apolloClient,
+  }) => {
+    await addConfigurableProductToCart(page, productURL.ConfigurableProduct)
+    await goToPayment(page, apolloClient)
+    await selectPaymentMethod(page, method)
+    await page.click('#place-order')
+
+    await expect(page.locator('select[name="issuer"]')).toHaveAttribute('aria-invalid', 'true')
+  })
+
+  test('Should be possible to cancel an order and then place the order', async ({
+    page,
+    productURL,
+    apolloClient,
+  }) => {
+    await addConfigurableProductToCart(page, productURL.ConfigurableProduct)
+    await goToPayment(page, apolloClient)
+    await selectPaymentMethod(page, method)
+    await selectIssuer(page, 'ideal_RABONL2U')
+    await placeOrderOffsite(page, 'canceled')
+    await placeOrderOffsite(page, 'paid')
+    expect(await page.locator('#back-to-home').innerText()).toBeDefined()
+  })
+
+  test('Should be possible to press back on the payment gateway and then place the order', async ({
+    page,
+    productURL,
+    apolloClient,
+  }) => {
+    await addConfigurableProductToCart(page, productURL.ConfigurableProduct)
+    await goToPayment(page, apolloClient)
+    await selectPaymentMethod(page, method)
+    await selectIssuer(page, 'ideal_RABONL2U')
+    await Promise.all([page.waitForNavigation(), page.click('#place-order')])
+
+    await page.goBack()
+
+    expect(await page.locator('text=Payment failed with status: OPEN').innerText()).toBeDefined()
+
+    await placeOrderOffsite(page, 'paid')
+    expect(await page.locator('#back-to-home').innerText()).toBeDefined()
+  })
+
+  test('Should be possible to place the order even though there is a completely separate session', async ({
+    page,
+    productURL,
+    apolloClient,
+    context,
+  }) => {
+    await addConfigurableProductToCart(page, productURL.ConfigurableProduct)
+    await goToPayment(page, apolloClient)
+    await selectPaymentMethod(page, method)
+    await selectIssuer(page, 'ideal_RABONL2U')
+    await Promise.all([page.waitForNavigation(), page.click('#place-order')])
+
+    const page2 = await context.newPage()
+    await Promise.all([page2.waitForNavigation(), page2.goto(page.url())])
+    await page.close()
+
+    await handleOffsitePayment(page2, 'paid')
+
+    expect(await page.locator('#back-to-home').innerText()).toBeDefined()
+  })
+})

package/test/utils.ts

@@ -0,0 +1,25 @@
+import { waitForGraphQlResponse } from '@graphcommerce/graphql/test/apolloClient.fixture'
+import { Page, expect } from '@playwright/test'
+import { MolliePaymentHandlerDocument } from '../components/MolliePaymentHandler/MolliePaymentHandler.gql'
+
+type Statuses = 'paid' | 'failed' | 'canceled' | 'open' | 'expired'
+
+export const handleOffsitePayment = async (page: Page, status: Statuses) => {
+  await page.click(`input[name="final_state"][value=${status}]`)
+
+  await Promise.all([page.waitForNavigation(), page.click('.footer button')])
+
+  const result = await waitForGraphQlResponse(page, MolliePaymentHandlerDocument)
+  expect(result.errors).toBeUndefined()
+  expect(result.data?.mollieProcessTransaction?.paymentStatus).toBe(status.toUpperCase())
+}
+
+export const placeOrderOffsite = async (page: Page, status: Statuses) => {
+  await Promise.all([page.waitForNavigation(), page.click('#place-order')])
+
+  await handleOffsitePayment(page, status)
+}
+
+export const selectIssuer = async (page: Page, issuer: string) => {
+  await page.locator('select[name="issuer"]').selectOption(issuer)
+}

package/Inject/MollieSelectedPaymentMethod.graphql

@@ -1,6 +0,0 @@
-fragment MollieSelectedPaymentMethod on SelectedPaymentMethod
-@inject(into: ["SelectedPaymentMethod"]) {
-  mollie_meta {
-    image
-  }
-}

package/_playwright/mollie_methods_ideal.spec.ts

@@ -1,101 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { waitForGraphQlResponse } from '@graphcommerce/graphql/_playwright/apolloClient.fixture'
-import { fillShippingAddressForm } from '@graphcommerce/magento-cart-shipping-address/_playwright/fillShippingAddressForm'
-import { fillCartAgreementsForm } from '@graphcommerce/magento-cart/_playwright/fillCartAgreementsForm'
-import { addConfigurableProductToCart } from '@graphcommerce/magento-product-configurable/_playwright/addConfigurableProductToCart'
-import { test } from '@graphcommerce/magento-product/_playwright/productURL.fixture'
-import { expect, Page } from '@playwright/test'
-import { MolliePlaceOrderDocument } from '../components/MolliePlaceOrder/MolliePlaceOrder.gql'
-import { UseMolliePaymentTokenHandlerDocument } from '../hooks/UseMolliePaymentTokenHandler.gql'
-
-const goToPayment = async (page: Page) => {
-  await page.click('a:has-text("View shopping cart")')
-
-  await page.click('a[href="/checkout"]:last-of-type')
-
-  await page.click('input[name="email"]')
-  await page.fill('input[name="email"]', 'test@test.com')
-
-  await fillShippingAddressForm(page)
-
-  await page.click('button[value=flatrate-flatrate]')
-  await page.click('button:has-text("Next")')
-
-  // Select the iDEAL option
-  await page.click('button[value=mollie_methods_ideal___]')
-
-  // Select Rabobank
-  await page.selectOption('select[name="issuer"]', 'ideal_RABONL2U')
-
-  await fillCartAgreementsForm(page)
-}
-
-test.describe('mollie ideal place order', () => {
-  test('CANCELED', async ({ page, productURL }) => {
-    test.fixme()
-    await addConfigurableProductToCart(page, productURL.ConfigurableProduct)
-    await goToPayment(page)
-
-    // Place the order and wait for the the redirect to the new page.
-    await Promise.all([page.waitForNavigation(), page.click('button[name="placeOrder"]')])
-
-    // Let the order fail
-    await page.click('input[name="final_state"][value=canceled]')
-
-    // Return to the website.
-    await Promise.all([page.waitForNavigation(), page.click('.footer button')])
-
-    const result = await waitForGraphQlResponse(page, UseMolliePaymentTokenHandlerDocument)
-    expect(result.errors).toBeUndefined()
-    expect(result.data?.mollieProcessTransaction?.paymentStatus).toBe('CANCELED')
-
-    // Select Rabobank
-    await page.selectOption('select[name="issuer"]', 'ideal_RABONL2U')
-
-    // Place the order and wait for the the redirect to the new page.
-    await Promise.all([page.waitForNavigation(), page.click('button[name="placeOrder"]')])
-
-    const placeOrder = await waitForGraphQlResponse(page, MolliePlaceOrderDocument)
-    expect(placeOrder.errors).toBeUndefined()
-  })
-
-  test('PAID', async ({ page, productURL }) => {
-    await addConfigurableProductToCart(page, productURL.ConfigurableProduct)
-    await goToPayment(page)
-
-    await page.pause()
-
-    // Place the order and wait for the the redirect to the new page.
-    await Promise.all([page.waitForNavigation(), page.click('button[name="placeOrder"]')])
-
-    // Let the order fail
-    await page.click('input[name="final_state"][value=paid]')
-
-    // Return to the website.
-    await Promise.all([page.waitForNavigation(), page.click('.footer button')])
-
-    const result = await waitForGraphQlResponse(page, UseMolliePaymentTokenHandlerDocument)
-    expect(result.errors).toBeUndefined()
-    expect(result.data?.mollieProcessTransaction?.paymentStatus).toBe('PAID')
-
-    await page.waitForNavigation()
-  })
-})
-
-// test('place order failed', async ({ page, productURL }) => {
-//   await addConfigurableProductToCart(page, productURL.ConfigurableProduct)
-//   await goToPayment(page)
-
-//   // Place the order and wait for the the redirect to the new page.
-//   await Promise.all([page.waitForNavigation(), page.click('button[name="placeOrder"]')])
-
-//   // Let the order fail
-//   await page.click('input[name="final_state"][value=failed]')
-
-//   // Return to the website.
-//   await Promise.all([page.waitForNavigation(), page.click('.footer button')])
-
-//   const result = await waitForGraphQlResponse(page, UseMolliePaymentTokenHandlerDocument)
-//   expect(result.errors).toBeUndefined()
-//   expect(result.data?.mollieProcessTransaction?.paymentStatus).toBeDefined()
-// })

package/hooks/UseMolliePaymentTokenHandler.graphql

@@ -1,8 +0,0 @@
-mutation UseMolliePaymentTokenHandler($paymentToken: String!) {
-  mollieProcessTransaction(input: { payment_token: $paymentToken }) {
-    cart {
-      id
-    }
-    paymentStatus
-  }
-}

package/hooks/index.ts

@@ -1 +0,0 @@
-export * from './useMolliePaymentTokenHandler'

package/hooks/useMolliePaymentTokenHandler.ts

@@ -1,65 +0,0 @@
-import { useMutation , PaymentStatusEnum } from '@graphcommerce/graphql'
-import { useClearCurrentCartId, useCurrentCartId } from '@graphcommerce/magento-cart'
-import { useCartLock, usePaymentMethodContext } from '@graphcommerce/magento-cart-payment-method'
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
-import { UseMolliePaymentTokenHandlerDocument } from './UseMolliePaymentTokenHandler.gql'
-
-const successStatusses: PaymentStatusEnum[] = ['AUTHORIZED', 'COMPLETED', 'PAID', 'SHIPPING']
-
-export function useMolliePaymentTokenHandler() {
-  const router = useRouter()
-  const method = usePaymentMethodContext()
-  const cartId = useCurrentCartId()
-  const clear = useClearCurrentCartId()
-
-  const isMollie = method.selectedMethod?.code.startsWith('mollie_methods')
-
-  const paymentToken = router.query.payment_token as string | undefined
-  // const orderHash = router.query.orderHash
-  const [handlePaymentToken, res] = useMutation(UseMolliePaymentTokenHandlerDocument, {
-    errorPolicy: 'all',
-  })
-  const { lock, locked } = useCartLock()
-
-  useEffect(() => {
-    if (locked && !paymentToken && isMollie) lock(false)
-  }, [isMollie, lock, locked, paymentToken])
-
-  useEffect(() => {
-    if (!paymentToken || res.called || res.error)
-      return // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    ;(async () => {
-      const result = await handlePaymentToken({ variables: { paymentToken } })
-
-      const paymentStatus = result.data?.mollieProcessTransaction?.paymentStatus
-      const returnedCartId = result.data?.mollieProcessTransaction?.cart?.id
-
-      if (result.errors || !paymentStatus) return
-
-      if (successStatusses.includes(paymentStatus)) {
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        await router.push({ pathname: '/checkout/success', query: { cartId } })
-        clear()
-      } else if (returnedCartId) {
-        lock(false)
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        router.replace('/checkout/payment')
-      } else {
-        throw Error('Mollie backend error occured')
-      }
-    })()
-  }, [
-    cartId,
-    clear,
-    handlePaymentToken,
-    isMollie,
-    lock,
-    paymentToken,
-    res.called,
-    res.error,
-    router,
-  ])
-
-  return res
-}