@graphcommerce/mollie-magento-payment 3.1.1 → 3.2.2

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # Change Log
 
+## 3.2.2
+
+### Patch Changes
+
+- [#1399](https://github.com/graphcommerce-org/graphcommerce/pull/1399) [`fb277d8e1`](https://github.com/graphcommerce-org/graphcommerce/commit/fb277d8e1e3612c5e9cf890a30d19cfd1ff70542) Thanks [@paales](https://github.com/paales)! - Now using [@graphql-yoga](https://github.com/dotansimha/graphql-yoga) for GraphQL which has full support for [envelop](https://www.envelop.dev/) plugins.
+
+* [#1399](https://github.com/graphcommerce-org/graphcommerce/pull/1399) [`fb277d8e1`](https://github.com/graphcommerce-org/graphcommerce/commit/fb277d8e1e3612c5e9cf890a30d19cfd1ff70542) Thanks [@paales](https://github.com/paales)! - Added a new @graphcommerce/cli package to generate the mesh so it can be generated _inside_ the @graphcommerce/graphql-mesh package to allow for better future extensibility.
+
+- [#1399](https://github.com/graphcommerce-org/graphcommerce/pull/1399) [`da0ae7d02`](https://github.com/graphcommerce-org/graphcommerce/commit/da0ae7d0236e4908ba0bf0fa16656be516e841d4) Thanks [@paales](https://github.com/paales)! - Updated dependencies
+
+- Updated dependencies [[`fb277d8e1`](https://github.com/graphcommerce-org/graphcommerce/commit/fb277d8e1e3612c5e9cf890a30d19cfd1ff70542), [`fb277d8e1`](https://github.com/graphcommerce-org/graphcommerce/commit/fb277d8e1e3612c5e9cf890a30d19cfd1ff70542), [`8652662cf`](https://github.com/graphcommerce-org/graphcommerce/commit/8652662cf9a8711d1c685d4f5cd788870a8242e2), [`da0ae7d02`](https://github.com/graphcommerce-org/graphcommerce/commit/da0ae7d0236e4908ba0bf0fa16656be516e841d4)]:
+  - @graphcommerce/graphql@3.1.0
+  - @graphcommerce/graphql-mesh@4.1.0
+  - @graphcommerce/magento-cart@4.2.6
+  - @graphcommerce/magento-cart-payment-method@3.1.2
+  - @graphcommerce/magento-store@4.1.7
+  - @graphcommerce/next-ui@4.6.1
+  - @graphcommerce/react-hook-form@3.1.1
+  - @graphcommerce/image@3.1.5
+
+## 3.2.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @graphcommerce/magento-cart@4.2.5
+  - @graphcommerce/magento-cart-payment-method@3.1.1
+
+## 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

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

@@ -1,23 +1,18 @@
 import { useFormGqlMutationCart } from '@graphcommerce/magento-cart'
 import { PaymentOptionsProps } from '@graphcommerce/magento-cart-payment-method'
-import { extendableComponent, FormRow, InputCheckmark } from '@graphcommerce/next-ui'
+import { FormRow, InputCheckmark } from '@graphcommerce/next-ui'
 import { useFormCompose, useFormPersist, useFormValidFields } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/macro'
-import { Box, TextField, Typography } from '@mui/material'
+import { TextField, Typography } from '@mui/material'
 import { SetMolliePaymentMethodIssuerOnCartDocument } from './SetMolliePaymentMethodIssuerOnCart.gql'
 
-type MollieIssuerOptionsProps = PaymentOptionsProps & { label: string }
-
-const compName = 'MollieIssuerOptions' as const
-const parts = ['root', 'list'] as const
-const { classes } = extendableComponent(compName, parts)
+type MollieIssuerOptionsProps = PaymentOptionsProps & { label: string; children?: React.ReactNode }
 
 export function MollieIssuerOptions(props: MollieIssuerOptionsProps) {
-  const { mollie_available_issuers = [], selected } = props
+  const { mollie_available_issuers = [], children } = props
   const { code, step, Container, label, title = '' } = props
 
   const form = useFormGqlMutationCart(SetMolliePaymentMethodIssuerOnCartDocument, {
-    mode: 'onChange',
     defaultValues: { code },
   })
 
@@ -25,7 +20,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,7 +45,9 @@ 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 />,
             }}
@@ -62,24 +65,8 @@ export function MollieIssuerOptions(props: MollieIssuerOptionsProps) {
             })}
           </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.tsx

@@ -1,10 +1,10 @@
-import { PaymentStatusEnum, useMutation } from '@graphcommerce/graphql'
+import { useMutation } from '@graphcommerce/graphql'
+import { PaymentStatusEnum } from '@graphcommerce/graphql-mesh'
+import { ApolloCartErrorFullPage, useClearCurrentCartId } from '@graphcommerce/magento-cart'
 import {
-  ApolloCartErrorFullPage,
-  useClearCurrentCartId,
-  useCurrentCartId,
-} from '@graphcommerce/magento-cart'
-import { usePaymentMethodContext } from '@graphcommerce/magento-cart-payment-method'
+  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'
@@ -16,15 +16,15 @@ import { MollieRecoverCartDocument } from './MollieRecoverCart.gql'
 
 const successStatusses: PaymentStatusEnum[] = ['AUTHORIZED', 'COMPLETED', 'PAID', 'SHIPPING']
 
-export function MolliePaymentHandler() {
+export function MolliePaymentHandler({ code }: PaymentHandlerProps) {
   const router = useRouter()
   const method = usePaymentMethodContext()
   const clear = useClearCurrentCartId()
 
-  const isMollie = method.selectedMethod?.code.startsWith('mollie_methods')
-
   const [lockState] = useCartLockWithToken()
 
+  const isActive = method.selectedMethod?.code === code || lockState.method === code
+
   const [handle, handleResult] = useMutation(MolliePaymentHandlerDocument)
   const [recoverCart, recoverResult] = useMutation(MollieRecoverCartDocument)
 
@@ -33,7 +33,8 @@ export function MolliePaymentHandler() {
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     ;(async () => {
-      if (lockState.locked && lockState.redirecting) return
+      if (!isActive) return
+      if (lockState.locked && lockState.justLocked) return
 
       if (!lockState.mollie_payment_token) return
       if (called || error) return
@@ -61,7 +62,7 @@ export function MolliePaymentHandler() {
         router.replace('/checkout/payment')
       }
     })()
-  }, [called, clear, error, handle, lockState, recoverCart, router])
+  }, [called, clear, error, handle, isActive, lockState, recoverCart, router])
 
   const paymentStatus = data?.mollieProcessTransaction?.paymentStatus
   if (paymentStatus)

package/components/MolliePlaceOrder/MolliePlaceOrder.tsx

@@ -1,9 +1,8 @@
+import { useCurrentCartId, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
 import {
-  useClearCurrentCartId,
-  useCurrentCartId,
-  useFormGqlMutationCart,
-} from '@graphcommerce/magento-cart'
-import { PaymentPlaceOrderProps } 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'
@@ -15,8 +14,9 @@ export function MolliePlaceOrder(props: PaymentPlaceOrderProps) {
   const { push } = useRouter()
   const cartId = useCurrentCartId()
   const [, lock] = useCartLockWithToken()
+  const { selectedMethod } = usePaymentMethodContext()
 
-  const form = useFormGqlMutationCart(MolliePlaceOrderDocument, { mode: 'onChange' })
+  const form = useFormGqlMutationCart(MolliePlaceOrderDocument)
 
   const { handleSubmit, data, error, register, setValue } = form
 
@@ -25,9 +25,11 @@ export function MolliePlaceOrder(props: PaymentPlaceOrderProps) {
     // 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)
-  }, [cartId, setValue])
+  }, [cartId, selectedMethod?.code, setValue])
 
   const submit = handleSubmit(() => {})
 
@@ -38,11 +40,15 @@ export function MolliePlaceOrder(props: PaymentPlaceOrderProps) {
 
     // When redirecting to the payment gateway
     if (redirectUrl && mollie_payment_token) {
-      lock({ mollie_payment_token })
+      lock({
+        mollie_payment_token,
+        method: selectedMethod?.code ?? null,
+      })
+
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       push(redirectUrl)
     }
-  }, [cartId, data?.placeOrder?.order, error, lock, push])
+  }, [cartId, data?.placeOrder?.order, error, lock, push, selectedMethod?.code])
 
   useFormCompose({ form, step, submit, key: `PaymentMethodPlaceOrder_${code}` })
 

package/hooks/useCartLockWithToken.ts

@@ -1,22 +1,5 @@
 import { CartLockState, useCartLock } from '@graphcommerce/magento-cart-payment-method'
-import { useState } from 'react'
 
-type MollieLockState = { mollie_payment_token?: string }
+type MollieLockState = CartLockState & { mollie_payment_token: string | null }
 
-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
-}
+export const useCartLockWithToken = () => useCartLock<MollieLockState>()

package/methods/mollie_methods_creditcard.ts

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/mollie-magento-payment",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.1.1",
+  "version": "3.2.2",
   "sideEffects": false,
   "engines": {
     "node": "14.x"
@@ -15,23 +15,24 @@
     }
   },
   "devDependencies": {
-    "@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/eslint-config-pwa": "^4.1.5",
+    "@graphcommerce/magento-cart-shipping-address": "3.0.9",
+    "@graphcommerce/magento-product": "4.1.7",
+    "@graphcommerce/magento-product-configurable": "4.0.11",
+    "@graphcommerce/prettier-config-pwa": "^4.0.6",
     "@graphcommerce/typescript-config-pwa": "^4.0.2",
-    "@playwright/test": "^1.20.1",
-    "type-fest": "2.12.1"
+    "@playwright/test": "^1.21.1",
+    "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@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"
+    "@graphcommerce/graphql": "3.1.0",
+    "@graphcommerce/graphql-mesh": "4.1.0",
+    "@graphcommerce/image": "3.1.5",
+    "@graphcommerce/magento-cart": "4.2.6",
+    "@graphcommerce/magento-cart-payment-method": "3.1.2",
+    "@graphcommerce/magento-store": "4.1.7",
+    "@graphcommerce/next-ui": "4.6.1",
+    "@graphcommerce/react-hook-form": "3.1.1"
   },
   "peerDependencies": {
     "@lingui/macro": "^3.13.2",

package/test/creditcard.playwright.ts

@@ -1,70 +1,55 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { waitForGraphQlResponse } from '@graphcommerce/graphql/test/apolloClient.fixture'
+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, Page } from '@playwright/test'
-import { MolliePaymentHandlerDocument } from '../components/MolliePaymentHandler/MolliePaymentHandler.gql'
+import { expect } from '@playwright/test'
+import { placeOrderOffsite } from './utils'
 
-const selectCreditCard = async (page: Page) => {
-  await page.click('button[value=mollie_methods_creditcard]')
+const method = '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.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)
 
-  // 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()
-  // })
+    await placeOrderOffsite(page, 'paid')
+    expect(await page.locator('#back-to-home').innerText()).toBeDefined()
+  })
 
-  test('PAID', async ({ page, productURL, apolloClient }) => {
+  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 selectCreditCard(page)
-    await placeOrder(page, 'paid')
-    expect(await page.locator('text=Back to home').innerText()).toBeDefined()
+    await selectPaymentMethod(page, method)
+    await placeOrderOffsite(page, 'canceled')
+    await placeOrderOffsite(page, 'paid')
+    expect(await page.locator('#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')])
+  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.pause()
-  //   await page.goBack()
+    await page.goBack()
 
-  //   expect(await page.locator('text=Payment failed with status: OPEN').innerText()).toBeDefined()
+    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()
-  // })
+    await placeOrderOffsite(page, 'paid')
+    expect(await page.locator('#back-to-home').innerText()).toBeDefined()
+  })
 })

package/test/ideal.playwright.ts

@@ -1,70 +1,91 @@
 /* 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 { 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, Page } from '@playwright/test'
-import { MolliePaymentHandlerDocument } from '../components/MolliePaymentHandler/MolliePaymentHandler.gql'
+import { expect } from '@playwright/test'
+import { handleOffsitePayment, placeOrderOffsite, selectIssuer } from './utils'
 
-const selectIdeal = async (page: Page) => {
-  await page.click('button[value=mollie_methods_ideal]')
+const method = '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 }) => {
+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 selectIdeal(page)
-    await placeOrder(page, 'canceled')
-    await placeOrder(page, 'paid')
-    expect(await page.locator('text=Back to home').innerText()).toBeDefined()
+    await selectPaymentMethod(page, method)
+
+    await selectIssuer(page, 'ideal_RABONL2U')
+    await placeOrderOffsite(page, 'paid')
+    expect(await page.locator('#back-to-home').innerText()).toBeDefined()
   })
 
-  test('OPEN', async ({ page, productURL, apolloClient }) => {
+  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 selectIdeal(page)
-    await placeOrder(page, 'open')
-    await placeOrder(page, 'paid')
-    expect(await page.locator('text=Back to home').innerText()).toBeDefined()
+    await selectPaymentMethod(page, method)
+    await page.click('#place-order')
+
+    await expect(page.locator('select[name="issuer"]')).toHaveAttribute('aria-invalid', 'true')
   })
 
-  test('PAID', async ({ page, productURL, apolloClient }) => {
+  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 selectIdeal(page)
-    await placeOrder(page, 'paid')
-    expect(await page.locator('text=Back to home').innerText()).toBeDefined()
+    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('Pressed back', async ({ page, productURL, apolloClient }) => {
+  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 selectIdeal(page)
+    await selectPaymentMethod(page, method)
+    await selectIssuer(page, 'ideal_RABONL2U')
     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()
+    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)
+}