@graphcommerce/magento-payment-multisafepay 4.14.0-canary.3

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @graphcommerce/magento-payment-multisafepay
+
+## 4.14.0-canary.3
+
+### Minor Changes
+
+- [#1729](https://github.com/graphcommerce-org/graphcommerce/pull/1729) [`366b05a7d`](https://github.com/graphcommerce-org/graphcommerce/commit/366b05a7da174a8a7c665b44e11422d8c873e4ed) - MultiSafePay Payment gateway support ([@paales](https://github.com/paales))

package/README.md

@@ -0,0 +1,21 @@
+# MultiSafePay
+
+## Requirements
+
+- MultiSafePay Magento module: https://github.com/MultiSafepay/magento2
+- MultiSafePay Magento GraphQL module:
+  https://github.com/MultiSafepay/magento2-graphql
+
+## Installation
+
+1.  Find current version of your `@graphcommerce/magento-cart-payment-method` in
+    your package.json.
+2.  `yarn add @graphcommerce/magento-payment-multisafepay@1.2.3` (replace 1.2.3
+    with the version of the step above)
+3.  Sales -> MultiSafePay -> General Settings -> Advanced Settings (this should
+    be configured per storeview)
+    - _Use custom return urls for PWA storefront integration_: Yes
+    - _Custom redirect url after cancelling the payment_:
+      `https://$domain/$locale/checkout/payment?locked=1&success=0&cart_id={{quote.masked_id}}&method={{payment.code}}`
+    - _Custom "Success page" url_:
+      `https://$domain/$locale/checkout/payment?locked=1&success=1&cart_id={{quote.masked_id}}&method={{payment.code}}`

package/components/MSPPaymentActionCard/MSPPaymentActionCard.tsx

@@ -0,0 +1,29 @@
+import { Image } from '@graphcommerce/image'
+import { PaymentMethodActionCardProps } from '@graphcommerce/magento-cart-payment-method'
+import { ActionCard, responsiveVal as rv } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+
+export function MSPPaymentActionCard(props: PaymentMethodActionCardProps) {
+  const { child, multisafepay_additional_data } = props
+  const iconSize = rv(30, 44)
+
+  return (
+    <ActionCard
+      {...props}
+      details={child === 'ideal' && <Trans id='Pay with iDEAL' />}
+      image={
+        multisafepay_additional_data?.image && (
+          <Image
+            layout='fixed'
+            width={100}
+            height={100}
+            sx={{ width: iconSize, height: iconSize, objectFit: 'contain' }}
+            sizes={iconSize}
+            unoptimized
+            src={multisafepay_additional_data?.image}
+          />
+        )
+      }
+    />
+  )
+}

package/components/MSPPaymentHandler/MSPPaymentHandler.graphql

@@ -0,0 +1,3 @@
+mutation MSPPaymentHandler($cartId: String!) {
+  getPaymentMeta(input: { cart_id: $cartId })
+}

package/components/MSPPaymentHandler/MSPPaymentHandler.tsx

@@ -0,0 +1,57 @@
+import { useMutation } from '@graphcommerce/graphql'
+import { useAssignCurrentCartId, useClearCurrentCartId } from '@graphcommerce/magento-cart'
+import { PaymentHandlerProps } from '@graphcommerce/magento-cart-payment-method'
+import { ErrorSnackbar } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import { useMSPCartLock } from '../../hooks/useMSPCartLock'
+import { MSPPaymentHandlerDocument } from './MSPPaymentHandler.gql'
+
+export const MSPPaymentHandler = (props: PaymentHandlerProps) => {
+  const { code } = props
+  const { push } = useRouter()
+  const [lockStatus, , unlock] = useMSPCartLock()
+  const assignCurrentCartId = useAssignCurrentCartId()
+  const clearCurrentCartId = useClearCurrentCartId()
+
+  const [restore, { error }] = useMutation(MSPPaymentHandlerDocument)
+
+  const { justLocked, success, cart_id: cartId, locked, method } = lockStatus
+
+  const canProceed = !(justLocked || !locked || !cartId || method !== code)
+
+  // When the payment has failed we restore the current cart
+  const shouldRestore = canProceed && success !== '1'
+  useEffect(() => {
+    if (!shouldRestore) return
+
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    restore({ variables: { cartId } }).then(({ data }) => {
+      if (!data?.getPaymentMeta) return
+
+      assignCurrentCartId(data.getPaymentMeta)
+      unlock({ success: null })
+    })
+  }, [assignCurrentCartId, cartId, restore, shouldRestore, unlock])
+
+  // If successfull we clear it's cart and redirect to the success page.
+  const shouldRedirect = canProceed && success === '1'
+  useEffect(() => {
+    if (!shouldRedirect) return
+
+    // We're done with the current cart, we clear the current cartId.
+    clearCurrentCartId()
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    push({ pathname: '/checkout/success', query: { cart_id: cartId } })
+  }, [cartId, clearCurrentCartId, push, shouldRedirect])
+
+  if (error) {
+    return (
+      <ErrorSnackbar open>
+        <Trans id='Payment has not completed succesfully, please try again.' />
+      </ErrorSnackbar>
+    )
+  }
+  return null
+}

package/components/MSPPaymentOptionsAndPlaceOrder/MSPPaymentOptionsAndPlaceOrder.graphql

@@ -0,0 +1,18 @@
+mutation MSPPaymentOptionsAndPlaceOrder($cartId: String!, $paymentMethod: PaymentMethodInput!) {
+  setPaymentMethodOnCart(input: { cart_id: $cartId, payment_method: $paymentMethod }) {
+    cart {
+      selected_payment_method {
+        ...SelectedPaymentMethod
+      }
+    }
+  }
+  placeOrder(input: { cart_id: $cartId }) {
+    order {
+      order_number
+      multisafepay_payment_url {
+        error
+        payment_url
+      }
+    }
+  }
+}

package/components/MSPPaymentOptionsAndPlaceOrder/MSPPaymentOptionsAndPlaceOrder.tsx

@@ -0,0 +1,88 @@
+import {
+  useFormCompose,
+  useFormPersist,
+  useFormValidFields,
+  SelectElement,
+} from '@graphcommerce/ecommerce-ui'
+import { useFormGqlMutationCart } from '@graphcommerce/magento-cart'
+import {
+  PaymentOptionsProps,
+  usePaymentMethodContext,
+} from '@graphcommerce/magento-cart-payment-method'
+import { filterNonNullableKeys, FormRow } from '@graphcommerce/next-ui'
+import { useRouter } from 'next/router'
+import { useMSPCartLock } from '../../hooks/useMSPCartLock'
+import {
+  MSPPaymentOptionsAndPlaceOrderMutation,
+  MSPPaymentOptionsAndPlaceOrderMutationVariables,
+  MSPPaymentOptionsAndPlaceOrderDocument,
+} from './MSPPaymentOptionsAndPlaceOrder.gql'
+
+/** It sets the selected payment method on the cart. */
+export function MSPPaymentOptionsAndPlaceOrder(props: PaymentOptionsProps) {
+  const { code, step, multisafepay_available_issuers } = props
+
+  const [, lock] = useMSPCartLock()
+  const { selectedMethod } = usePaymentMethodContext()
+  const { push } = useRouter()
+
+  /**
+   * In the this folder you'll also find a PaymentMethodOptionsNoop.graphql document that is
+   * imported here and used as the basis for the form below.
+   */
+  const form = useFormGqlMutationCart<
+    MSPPaymentOptionsAndPlaceOrderMutation,
+    MSPPaymentOptionsAndPlaceOrderMutationVariables
+  >(MSPPaymentOptionsAndPlaceOrderDocument, {
+    onComplete: async (result) => {
+      const url = result.data?.placeOrder?.order.multisafepay_payment_url
+
+      if (result.errors || !selectedMethod?.code || url?.error || !url?.payment_url) return
+
+      lock({ method: selectedMethod.code })
+      await push(url.payment_url)
+    },
+  })
+
+  const { handleSubmit, muiRegister, formState, required, register, control } = form
+
+  const submit = handleSubmit(() => {})
+
+  const key = `PaymentMethodOptions_${code}`
+  useFormPersist({
+    form,
+    name: key,
+    persist: ['paymentMethod.multisafepay_ideal.issuer_id'],
+    storage: 'localStorage',
+  })
+
+  const valid = useFormValidFields(form, required)
+
+  /** To use an external Pay button we register the current form to be handled there as well. */
+  useFormCompose({ form, step, submit, key })
+
+  const issuers = filterNonNullableKeys(multisafepay_available_issuers, ['code', 'description'])
+
+  /** This is the form that the user can fill in. In this case we don't wat the user to fill in anything. */
+  return (
+    <form key={key} onSubmit={submit} noValidate>
+      <input type='hidden' value={code} {...register('paymentMethod.code')} />
+
+      {code === 'multisafepay_ideal' && issuers.length && (
+        <FormRow>
+          <SelectElement
+            control={control}
+            name='paymentMethod.multisafepay_ideal.issuer_id'
+            required
+            validation={{ required: { message: 'Please provide an issuer', value: true } }}
+            variant='outlined'
+            color='secondary'
+            select
+            label='Select your bank'
+            options={issuers.map(({ code: id, description: label }) => ({ id, label }))}
+          />
+        </FormRow>
+      )}
+    </form>
+  )
+}

package/graphql/MSPAvailablePaymentMethod.graphql

@@ -0,0 +1,11 @@
+fragment MSPAvailablePaymentMethod on AvailablePaymentMethod
+@inject(into: ["AvailablePaymentMethod"]) {
+  multisafepay_additional_data {
+    image
+    is_preselected
+  }
+  multisafepay_available_issuers {
+    code
+    description
+  }
+}

package/hooks/useMSPCartLock.ts

@@ -0,0 +1,14 @@
+import { CartLockState, useCartLock } from '@graphcommerce/magento-cart-payment-method'
+
+type MSPLockState = CartLockState & {
+  success?: string | null
+}
+
+/**
+ * The cart lock situation is a bit odd since are unable to actually influence the return URL we
+ * can't safely remember the cart ID.
+ *
+ * This is a potential bug because when the customer is returning from an icognito session, the cart
+ * ID is not available.
+ */
+export const useMSPCartLock = () => useCartLock<MSPLockState>()

package/index.ts

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

package/methods.ts

@@ -0,0 +1,100 @@
+import { PaymentModule } from '@graphcommerce/magento-cart-payment-method'
+import { MSPPaymentActionCard } from './components/MSPPaymentActionCard/MSPPaymentActionCard'
+import { MSPPaymentHandler } from './components/MSPPaymentHandler/MSPPaymentHandler'
+import { MSPPaymentOptionsAndPlaceOrder } from './components/MSPPaymentOptionsAndPlaceOrder/MSPPaymentOptionsAndPlaceOrder'
+
+const mspModule: PaymentModule = {
+  PaymentOptions: MSPPaymentOptionsAndPlaceOrder,
+  PaymentActionCard: MSPPaymentActionCard,
+  PaymentHandler: MSPPaymentHandler,
+  PaymentPlaceOrder: () => null,
+}
+
+/**
+ * List is extracted from https://github.com/MultiSafepay/magento2-core/blob/master/etc/config.xml
+ *
+ * All payment methods are enabled except the ones that require additional imputs:
+ *
+ * - `multisafepay_afterpay`
+ * - `multisafepay_directbanktransfer`
+ * - `multisafepay_directdebit`
+ * - `multisafepay_einvoicing`
+ * - `multisafepay_in3`
+ * - `multisafepay_payafter`
+ *
+ * Excluded taken from:
+ * https://github.com/MultiSafepay/magento2-graphql/blob/53db83f1b3382c8e11c22a1fa2170b8b17ecb7d7/etc/schema.graphqls#L36-L41
+ */
+export const multisafepay: Record<string, PaymentModule> = {
+  multisafepay_ideal: mspModule,
+  multisafepay_ideal_recurring: mspModule,
+  multisafepay_ideal_vault: mspModule,
+  // multisafepay_payafter: mspModule,
+  multisafepay_klarna: mspModule,
+  // multisafepay_afterpay: mspModule,
+  multisafepay_bancontact: mspModule,
+  multisafepay_amex: mspModule,
+  multisafepay_applepay: mspModule,
+  multisafepay_belfius: mspModule,
+  multisafepay_creditcard: mspModule,
+  multisafepay_creditcard_recurring: mspModule,
+  multisafepay_creditcard_vault: mspModule,
+  multisafepay_visa_recurring: mspModule,
+  multisafepay_visa_vault: mspModule,
+  multisafepay_mastercard_recurring: mspModule,
+  multisafepay_mastercard_vault: mspModule,
+  multisafepay_amex_recurring: mspModule,
+  multisafepay_amex_vault: mspModule,
+  multisafepay_dotpay: mspModule,
+  multisafepay_eps: mspModule,
+  multisafepay_giropay: mspModule,
+  multisafepay_googlepay: mspModule,
+  multisafepay_idealqr: mspModule,
+  multisafepay_maestro: mspModule,
+  multisafepay_maestro_recurring: mspModule,
+  multisafepay_maestro_vault: mspModule,
+  multisafepay_mastercard: mspModule,
+  multisafepay_mybank: mspModule,
+  multisafepay_paysafecard: mspModule,
+  multisafepay_sofort: mspModule,
+  multisafepay_trustpay: mspModule,
+  multisafepay_visa: mspModule,
+  multisafepay_alipay: mspModule,
+  multisafepay_alipayplus: mspModule,
+  // multisafepay_directbanktransfer: mspModule,
+  multisafepay_banktransfer: mspModule,
+  multisafepay_santander: mspModule,
+  multisafepay_cbc: mspModule,
+  // multisafepay_directdebit: mspModule,
+  // multisafepay_directdebit_recurring: mspModule,
+  // multisafepay_directdebit_vault: mspModule,
+  // multisafepay_einvoicing: mspModule,
+  multisafepay_inghomepay: mspModule,
+  multisafepay_kbc: mspModule,
+  multisafepay_paypal: mspModule,
+  multisafepay_trustly: mspModule,
+  // multisafepay_in3: mspModule,
+  multisafepay_genericgateway: mspModule,
+  multisafepay_babygiftcard: mspModule,
+  multisafepay_beautyandwellness: mspModule,
+  multisafepay_boekenbon: mspModule,
+  multisafepay_fashioncheque: mspModule,
+  multisafepay_fashiongiftcard: mspModule,
+  multisafepay_fietsenbon: mspModule,
+  multisafepay_edenred: mspModule,
+  multisafepay_gezondheidsbon: mspModule,
+  multisafepay_givacard: mspModule,
+  multisafepay_good4fun: mspModule,
+  multisafepay_goodcard: mspModule,
+  multisafepay_nationaletuinbon: mspModule,
+  multisafepay_parfumcadeaukaart: mspModule,
+  multisafepay_podiumcadeaukaart: mspModule,
+  multisafepay_sportenfit: mspModule,
+  multisafepay_vvvcadeaukaart: mspModule,
+  multisafepay_webshopgiftcard: mspModule,
+  multisafepay_wechatpay: mspModule,
+  multisafepay_wellnessgiftcard: mspModule,
+  multisafepay_wijncadeau: mspModule,
+  multisafepay_winkelcheque: mspModule,
+  multisafepay_yourgift: mspModule,
+}

package/next-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+/// <reference types="@graphcommerce/next-ui/types" />

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@graphcommerce/magento-payment-multisafepay",
+  "homepage": "https://www.graphcommerce.org/",
+  "repository": "github:graphcommerce-org/graphcommerce",
+  "version": "4.14.0-canary.3",
+  "sideEffects": false,
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
+  },
+  "devDependencies": {
+    "@graphcommerce/next-ui": "4.31.0-canary.2",
+    "@graphcommerce/eslint-config-pwa": "^4.1.11",
+    "@graphcommerce/magento-cart-shipping-address": "4.14.0-canary.3",
+    "@graphcommerce/magento-product": "4.14.0-canary.3",
+    "@graphcommerce/magento-product-configurable": "4.14.0-canary.3",
+    "@graphcommerce/prettier-config-pwa": "^4.0.7",
+    "@graphcommerce/typescript-config-pwa": "^4.0.5",
+    "@playwright/test": "^1.21.1",
+    "type-fest": "^2.12.2"
+  },
+  "dependencies": {
+    "@graphcommerce/graphql": "4.31.0-canary.2",
+    "@graphcommerce/graphql-mesh": "4.31.0-canary.2",
+    "@graphcommerce/image": "4.31.0-canary.2",
+    "@graphcommerce/magento-cart": "4.14.0-canary.3",
+    "@graphcommerce/magento-cart-payment-method": "4.14.0-canary.3",
+    "@graphcommerce/magento-store": "4.14.0-canary.3",
+    "@graphcommerce/next-ui": "4.31.0-canary.2",
+    "@graphcommerce/react-hook-form": "4.31.0-canary.2"
+  },
+  "peerDependencies": {
+    "@lingui/react": "^3.13.2",
+    "@lingui/core": "^3.13.2",
+    "@mui/material": "5.5.3",
+    "next": "^12.1.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  }
+}

package/plugins/AddMultisafepayMethods.tsx

@@ -0,0 +1,13 @@
+import { PaymentMethodContextProviderProps } from '@graphcommerce/magento-cart-payment-method'
+import type { PluginProps } from '@graphcommerce/next-config'
+import { multisafepay } from '../methods'
+
+export const component = 'PaymentMethodContextProvider'
+export const exported = '@graphcommerce/magento-cart-payment-method'
+
+function AddMultisafepayMethods(props: PluginProps<PaymentMethodContextProviderProps>) {
+  const { modules, Component } = props
+  return <Component {...props} modules={{ ...modules, ...multisafepay }} />
+}
+
+export const Plugin = AddMultisafepayMethods

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "exclude": ["node_modules"],
+  "include": ["**/*.ts", "**/*.tsx"],
+  "extends": "@graphcommerce/typescript-config-pwa/nextjs.json"
+}