@graphcommerce/mollie-magento-payment 3.0.5 → 3.1.1

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # Change Log
 
+## 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
+
+- [#1353](https://github.com/graphcommerce-org/graphcommerce/pull/1353) [`0e5ee7ba8`](https://github.com/graphcommerce-org/graphcommerce/commit/0e5ee7ba89698e5e711001e846ed182528060cba) Thanks [@paales](https://github.com/paales)! - Eslint: enable rules that were previously disabled and make fixes
+
+- Updated dependencies [[`49a2d6617`](https://github.com/graphcommerce-org/graphcommerce/commit/49a2d661712e1787fba46c6195f7b559189e23d9), [`f67da3cfb`](https://github.com/graphcommerce-org/graphcommerce/commit/f67da3cfbe2dcf5ea23519d088c5aa0074029182), [`218766869`](https://github.com/graphcommerce-org/graphcommerce/commit/218766869f7468c067a590857c942f3819f8add4), [`0e5ee7ba8`](https://github.com/graphcommerce-org/graphcommerce/commit/0e5ee7ba89698e5e711001e846ed182528060cba), [`829b8690b`](https://github.com/graphcommerce-org/graphcommerce/commit/829b8690bc5d0a46e596299e4120e9837a9f179c), [`829b8690b`](https://github.com/graphcommerce-org/graphcommerce/commit/829b8690bc5d0a46e596299e4120e9837a9f179c)]:
+  - @graphcommerce/next-ui@4.4.0
+  - @graphcommerce/magento-cart@4.2.1
+
 ## 3.0.5
 
 ### 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/MollieIssuerOptions.tsx

@@ -13,7 +13,7 @@ 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 = [], selected } = props
   const { code, step, Container, label, title = '' } = props
 
   const form = useFormGqlMutationCart(SetMolliePaymentMethodIssuerOnCartDocument, {
@@ -51,7 +51,6 @@ export function MollieIssuerOptions(props: MollieIssuerOptionsProps) {
           >
             {/* 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,31 +59,19 @@ 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,
-          })}
+          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>
+            <Trans>Complete the payment on your bank’s website.</Trans>
           </li>
           <li>
             <Trans>

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 { ApolloCartErrorFullPage, useClearCurrentCartId } from '@graphcommerce/magento-cart'
+import { PaymentStatusEnum, useMutation } from '@graphcommerce/graphql'
+import {
+  ApolloCartErrorFullPage,
+  useClearCurrentCartId,
+  useCurrentCartId,
+} from '@graphcommerce/magento-cart'
+import { 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'
+
+const successStatusses: PaymentStatusEnum[] = ['AUTHORIZED', 'COMPLETED', 'PAID', 'SHIPPING']
 
 export function MolliePaymentHandler() {
-  const { error } = useMolliePaymentTokenHandler()
-  const clear = useClearCurrentCartId()
   const router = useRouter()
+  const method = usePaymentMethodContext()
+  const clear = useClearCurrentCartId()
+
+  const isMollie = method.selectedMethod?.code.startsWith('mollie_methods')
 
-  const handle = () => {
-    clear()
+  const [lockState] = useCartLockWithToken()
+
+  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 (lockState.locked && lockState.redirecting) 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, 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

@@ -3,18 +3,18 @@ import {
   useCurrentCartId,
   useFormGqlMutationCart,
 } from '@graphcommerce/magento-cart'
-import { PaymentPlaceOrderProps, useCartLock } from '@graphcommerce/magento-cart-payment-method'
+import { PaymentPlaceOrderProps } 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 form = useFormGqlMutationCart(MolliePlaceOrderDocument, { mode: 'onChange' })
 
@@ -22,32 +22,27 @@ export function MolliePlaceOrder(props: PaymentPlaceOrderProps) {
 
   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')
     const replaced = current.toString().replace('PAYMENT_TOKEN', '{{payment_token}}')
     setValue('returnUrl', replaced)
-  }, [setValue])
+  }, [cartId, 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)
-
-      setTimeout(() => {
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        router.push(redirectUrl)
-      }, 500)
-    }
-    if (!redirectUrl && molliePaymentToken) {
-      clear()
+    // When redirecting to the payment gateway
+    if (redirectUrl && mollie_payment_token) {
+      lock({ mollie_payment_token })
       // 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])
 
   useFormCompose({ form, step, submit, key: `PaymentMethodPlaceOrder_${code}` })
 

package/hooks/useCartLockWithToken.ts

@@ -0,0 +1,22 @@
+import { CartLockState, useCartLock } from '@graphcommerce/magento-cart-payment-method'
+import { useState } from 'react'
+
+type MollieLockState = { mollie_payment_token?: string }
+
+export const useCartLockWithToken = () => {
+  const [queryState, setRouterQuery] = useCartLock<MollieLockState>()
+  const [redirecting, setRedirecting] = useState(false)
+
+  const lock = (params: MollieLockState & CartLockState) => {
+    setRedirecting(true)
+    setRouterQuery(params)
+  }
+
+  const state = {
+    ...queryState,
+    locked: queryState.locked === '1',
+    redirecting,
+  }
+
+  return [state, lock] as const
+}

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,10 @@
-import { PaymentModule } from '@graphcommerce/magento-cart-payment-method'
+import { PaymentMethodOptionsNoop, PaymentModule } from '@graphcommerce/magento-cart-payment-method'
 import { MollieCreditCardOptions } from '../components/MollieOptionsToken/MollieCreditCardOptions'
 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,
 }

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.5",
+  "version": "3.1.1",
   "sideEffects": false,
   "engines": {
     "node": "14.x"
@@ -15,29 +15,29 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.0.5",
-    "@graphcommerce/magento-cart-shipping-address": "^3.0.4",
-    "@graphcommerce/magento-product": "^4.0.6",
-    "@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.6",
+    "@graphcommerce/magento-product": "4.1.4",
+    "@graphcommerce/magento-product-configurable": "4.0.8",
+    "@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.1.4",
-    "@graphcommerce/magento-cart-payment-method": "^3.0.5",
-    "@graphcommerce/magento-store": "^4.1.2",
-    "@graphcommerce/next-ui": "^4.2.4",
-    "@graphcommerce/react-hook-form": "^3.0.4",
-    "type-fest": "^2.12.0"
+    "@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"
   },
   "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,70 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { waitForGraphQlResponse } from '@graphcommerce/graphql/test/apolloClient.fixture'
+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, Page } from '@playwright/test'
+import { MolliePaymentHandlerDocument } from '../components/MolliePaymentHandler/MolliePaymentHandler.gql'
+
+const selectCreditCard = async (page: Page) => {
+  await page.click('button[value=mollie_methods_creditcard]')
+
+  // Select Rabobank
+}
+
+type Statuses = 'paid' | 'failed' | 'canceled' | 'open' | 'expired'
+
+const placeOrder = async (page: Page, status: Statuses) => {
+  await Promise.all([page.waitForNavigation(), page.click('#place-order')])
+
+  await page.pause()
+  // 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())
+}
+
+test.describe('mollie creditcard place order', () => {
+  // test('CANCELED', async ({ page, productURL, apolloClient }) => {
+  //   await addConfigurableProductToCart(page, productURL.ConfigurableProduct)
+  //   await goToPayment(page, apolloClient)
+  //   await selectCreditCard(page)
+  //   await placeOrder(page, 'canceled')
+  //   await placeOrder(page, 'paid')
+  //   expect(await page.locator('text=Back to home').innerText()).toBeDefined()
+  // })
+
+  // test('OPEN', async ({ page, productURL, apolloClient }) => {
+  //   await addConfigurableProductToCart(page, productURL.ConfigurableProduct)
+  //   await goToPayment(page, apolloClient)
+  //   await selectIdeal(page)
+  //   await placeOrder(page, 'open')
+  //   await placeOrder(page, 'paid')
+  //   expect(await page.locator('text=Back to home').innerText()).toBeDefined()
+  // })
+
+  test('PAID', async ({ page, productURL, apolloClient }) => {
+    await addConfigurableProductToCart(page, productURL.ConfigurableProduct)
+    await goToPayment(page, apolloClient)
+    await selectCreditCard(page)
+    await placeOrder(page, 'paid')
+    expect(await page.locator('text=Back to home').innerText()).toBeDefined()
+  })
+
+  // test('Pressed back', async ({ page, productURL, apolloClient }) => {
+  //   await addConfigurableProductToCart(page, productURL.ConfigurableProduct)
+  //   await goToPayment(page, apolloClient)
+  //   await selectIdeal(page)
+  //   await Promise.all([page.waitForNavigation(), page.click('#place-order')])
+
+  //   await page.pause()
+  //   await page.goBack()
+
+  //   expect(await page.locator('text=Payment failed with status: OPEN').innerText()).toBeDefined()
+
+  //   await placeOrder(page, 'paid')
+  //   expect(await page.locator('text=Back to home').innerText()).toBeDefined()
+  // })
+})

package/test/ideal.playwright.ts

@@ -0,0 +1,70 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { waitForGraphQlResponse } from '@graphcommerce/graphql/test/apolloClient.fixture'
+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, Page } from '@playwright/test'
+import { MolliePaymentHandlerDocument } from '../components/MolliePaymentHandler/MolliePaymentHandler.gql'
+
+const selectIdeal = async (page: Page) => {
+  await page.click('button[value=mollie_methods_ideal]')
+
+  // Select Rabobank
+  await page.selectOption('select[name="issuer"]', 'ideal_RABONL2U')
+}
+
+type Statuses = 'paid' | 'failed' | 'canceled' | 'open' | 'expired'
+
+const placeOrder = async (page: Page, status: Statuses) => {
+  await Promise.all([page.waitForNavigation(), page.click('#place-order')])
+
+  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())
+}
+
+test.describe('mollie ideal place order', () => {
+  test('CANCELED', async ({ page, productURL, apolloClient }) => {
+    await addConfigurableProductToCart(page, productURL.ConfigurableProduct)
+    await goToPayment(page, apolloClient)
+    await selectIdeal(page)
+    await placeOrder(page, 'canceled')
+    await placeOrder(page, 'paid')
+    expect(await page.locator('text=Back to home').innerText()).toBeDefined()
+  })
+
+  test('OPEN', async ({ page, productURL, apolloClient }) => {
+    await addConfigurableProductToCart(page, productURL.ConfigurableProduct)
+    await goToPayment(page, apolloClient)
+    await selectIdeal(page)
+    await placeOrder(page, 'open')
+    await placeOrder(page, 'paid')
+    expect(await page.locator('text=Back to home').innerText()).toBeDefined()
+  })
+
+  test('PAID', async ({ page, productURL, apolloClient }) => {
+    await addConfigurableProductToCart(page, productURL.ConfigurableProduct)
+    await goToPayment(page, apolloClient)
+    await selectIdeal(page)
+    await placeOrder(page, 'paid')
+    expect(await page.locator('text=Back to home').innerText()).toBeDefined()
+  })
+
+  test('Pressed back', async ({ page, productURL, apolloClient }) => {
+    await addConfigurableProductToCart(page, productURL.ConfigurableProduct)
+    await goToPayment(page, apolloClient)
+    await selectIdeal(page)
+    await Promise.all([page.waitForNavigation(), page.click('#place-order')])
+
+    await page.pause()
+    await page.goBack()
+
+    expect(await page.locator('text=Payment failed with status: OPEN').innerText()).toBeDefined()
+
+    await placeOrder(page, 'paid')
+    expect(await page.locator('text=Back to home').innerText()).toBeDefined()
+  })
+})

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
-}