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

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @graphcommerce/magento-payment-adyen
+
+## 4.14.0-canary.3
+
+### Minor Changes
+
+- [#1729](https://github.com/graphcommerce-org/graphcommerce/pull/1729) [`2e68e0560`](https://github.com/graphcommerce-org/graphcommerce/commit/2e68e0560690bbf9bad6dc2b33d6e2ddb16197ce) - Adyen Payment gateway support ([@paales](https://github.com/paales))

package/README.md

@@ -0,0 +1,41 @@
+# Magento Payment Adyen
+
+Integrates https://github.com/Adyen/adyen-magento2 with GraphCommerce.
+
+We currently have 'Alternative Payment Methods' implemented, this means that it
+supports all off-site payment methods that Adyen supports. This includes CC,
+iDeal, Bancontact, Sofort, etc.
+
+We do not support on-site credit cards yet. Let us know if you want to have
+this.
+
+## Requirements
+
+- Magento Adyen module version 8.5.0 or later
+
+## Installation
+
+1. Find current version of your `@graphcommerce/magento-cart-payment-method` in
+   your package.json.
+2. `yarn add @graphcommerce/magento-payment-adyen@1.2.3` (replace 1.2.3 with the
+   version of the step above)
+
+3. Configure the Adyen module in Magento Admin like you would normally do.
+4. Stores -> Configuration -> Sales -> Payment Methods -> Adyen Payment methods
+   -> Headless integration -> Payment Origin URL: `https://www.yourdomain.com`
+5. Stores -> Configuration -> Sales -> Payment Methods -> Adyen Payment methods
+   -> Headless integration -> Payment Return URL:
+   `https://www.yourdomain.com/checkout/payment?locked=1&adyen=1` (make sure the
+   URL's match for your storeview)
+
+This package uses GraphCommerce plugin systems, so there is no code modification
+required.
+
+## Known issues
+
+- We don't need to configure the Payment URL's anymore since the 8.3.3 release
+  https://github.com/Adyen/adyen-magento2/releases/tag/8.3.3, but that isn't
+  integrated in the frontend yet.
+
+- This package is currently untested inside the GraphCommerce repo, which it
+  should, but is used in production for multiple shops.

package/components/AdyenPaymentActionCard/AdyenPaymentActionCard.tsx

@@ -0,0 +1,34 @@
+import { Image } from '@graphcommerce/image'
+import { PaymentMethodActionCardProps } from '@graphcommerce/magento-cart-payment-method'
+import { ActionCard, useIconSvgSize } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+import { useAdyenPaymentMethod } from '../../hooks/useAdyenPaymentMethod'
+
+export function AdyenPaymentActionCard(props: PaymentMethodActionCardProps) {
+  const { child } = props
+  const iconSize = useIconSvgSize('large')
+
+  const icon = useAdyenPaymentMethod(child)?.icon
+
+  return (
+    <ActionCard
+      {...props}
+      details={child === 'ideal' && <Trans id='Pay with iDEAL' />}
+      image={
+        !!icon?.url &&
+        !!icon?.width &&
+        !!icon?.height && (
+          <Image
+            layout='fixed'
+            width={icon.width}
+            height={icon.height}
+            sx={{ width: `calc(${iconSize} / ${icon.height} *  ${icon.width})`, height: iconSize }}
+            sizes={iconSize}
+            unoptimized
+            src={icon.url}
+          />
+        )
+      }
+    />
+  )
+}

package/components/AdyenPaymentHandler/AdyenPaymentDetails.graphql

@@ -0,0 +1,5 @@
+mutation AdyenPaymentDetails($cartId: String!, $payload: String!) {
+  adyenPaymentDetails(cart_id: $cartId, payload: $payload) {
+    ...AdyenPaymentResponse
+  }
+}

package/components/AdyenPaymentHandler/AdyenPaymentHandler.tsx

@@ -0,0 +1,95 @@
+import { useLazyQuery, useMutation } from '@graphcommerce/graphql'
+import { useCurrentCartId } from '@graphcommerce/magento-cart'
+import { ErrorSnackbar } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+import { useEffect } from 'react'
+import { useAdyenCartLock } from '../../hooks/useAdyenCartLock'
+import {
+  ResultCodeEnum,
+  useAdyenHandlePaymentResponse,
+  useAdyenPaymentResponse,
+} from '../../hooks/useAdyenHandlePaymentResponse'
+import { AdyenPaymentDetailsDocument } from './AdyenPaymentDetails.gql'
+import { AdyenPaymentStatusDocument } from './AdyenPaymentStatus.gql'
+
+export function AdyenPaymentHandler() {
+  const [lockStatus] = useAdyenCartLock()
+
+  const [getDetails, { called }] = useMutation(AdyenPaymentDetailsDocument)
+  const [getStatus] = useLazyQuery(AdyenPaymentStatusDocument, { fetchPolicy: 'network-only' })
+  const { currentCartId } = useCurrentCartId()
+
+  const handleResponse = useAdyenHandlePaymentResponse()
+  const response = useAdyenPaymentResponse()
+
+  // This is actually due to a bug.
+  const isAdyen = lockStatus.adyen?.split('?')[0] === '1'
+  const orderNumber = lockStatus.merchantReference ?? lockStatus.adyen?.split('?')[1]?.slice(18)
+  const { redirectResult } = lockStatus
+
+  useEffect(() => {
+    const call = async () => {
+      if (!orderNumber || !isAdyen || !currentCartId || called) return
+
+      const payload = JSON.stringify({ orderId: orderNumber, details: { redirectResult } })
+
+      // Atempt 1; We first try and handle the payment for the order.
+      const details = await getDetails({
+        errorPolicy: 'all',
+        variables: { cartId: currentCartId, payload },
+      })
+
+      let paymentStatus = details.data?.adyenPaymentDetails
+
+      // Atempt 2; The adyenPaymentDetails mutation failed, because it was already called previously or no payment had been made.
+      if (details.errors) {
+        const status = await getStatus({
+          errorPolicy: 'all',
+          variables: { cartId: currentCartId, orderNumber },
+        })
+        paymentStatus = status.data?.adyenPaymentStatus
+      }
+      handleResponse(paymentStatus)
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    call()
+  }, [
+    redirectResult,
+    getDetails,
+    orderNumber,
+    isAdyen,
+    getStatus,
+    called,
+    handleResponse,
+    currentCartId,
+  ])
+
+  if (!response?.resultCode) return null
+
+  if (response.resultCode === ResultCodeEnum.RedirectShopper) {
+    return (
+      <ErrorSnackbar open>
+        <Trans id="The payment hasn't completed, please try again or select a different payment method." />
+      </ErrorSnackbar>
+    )
+  }
+
+  if (response.resultCode === ResultCodeEnum.Refused) {
+    return (
+      <ErrorSnackbar open>
+        <Trans id='The payment is refused, please try again or select a different payment method.' />
+      </ErrorSnackbar>
+    )
+  }
+
+  return (
+    <ErrorSnackbar open>
+      <Trans
+        id='We can not process your payment, we received an unsupported status "<0>{resultCode}</0>". Please try again or select a different payment method.'
+        values={{ resultCode: response.resultCode }}
+        components={{ 0: <strong /> }}
+      />
+    </ErrorSnackbar>
+  )
+}

package/components/AdyenPaymentHandler/AdyenPaymentStatus.graphql

@@ -0,0 +1,5 @@
+query AdyenPaymentStatus($cartId: String!, $orderNumber: String!) {
+  adyenPaymentStatus(cartId: $cartId, orderNumber: $orderNumber) {
+    ...AdyenPaymentResponse
+  }
+}

package/components/AdyenPaymentOptionsAndPlaceOrder/AdyenPaymentOptionsAndPlaceOrder.graphql

@@ -0,0 +1,29 @@
+mutation AdyenPaymentOptionsAndPlaceOrder(
+  $cartId: String!
+  $brandCode: String!
+  $stateData: String!
+) {
+  setPaymentMethodOnCart(
+    input: {
+      cart_id: $cartId
+      payment_method: {
+        code: "adyen_hpp"
+        adyen_additional_data_hpp: { brand_code: $brandCode, stateData: $stateData }
+      }
+    }
+  ) {
+    cart {
+      selected_payment_method {
+        ...SelectedPaymentMethod
+      }
+    }
+  }
+  placeOrder(input: { cart_id: $cartId }) {
+    order {
+      order_number
+      adyen_payment_status {
+        ...AdyenPaymentResponse
+      }
+    }
+  }
+}

package/components/AdyenPaymentOptionsAndPlaceOrder/AdyenPaymentOptionsAndPlaceOrder.tsx

@@ -0,0 +1,106 @@
+import { useFormCompose, useFormPersist, useFormValidFields } from '@graphcommerce/ecommerce-ui'
+import { useFormGqlMutationCart } from '@graphcommerce/magento-cart'
+import {
+  PaymentOptionsProps,
+  usePaymentMethodContext,
+} from '@graphcommerce/magento-cart-payment-method'
+import { FormRow, InputCheckmark } from '@graphcommerce/next-ui'
+import { TextField } from '@mui/material'
+import { useRouter } from 'next/router'
+import { useAdyenCartLock } from '../../hooks/useAdyenCartLock'
+import { useAdyenPaymentMethod } from '../../hooks/useAdyenPaymentMethod'
+import {
+  AdyenPaymentOptionsAndPlaceOrderMutation,
+  AdyenPaymentOptionsAndPlaceOrderMutationVariables,
+  AdyenPaymentOptionsAndPlaceOrderDocument,
+} from './AdyenPaymentOptionsAndPlaceOrder.gql'
+
+/** It sets the selected payment method on the cart. */
+export function HppOptions(props: PaymentOptionsProps) {
+  const { code, step, child: brandCode } = props
+
+  const conf = useAdyenPaymentMethod(brandCode)
+
+  const [, lock] = useAdyenCartLock()
+  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<
+    AdyenPaymentOptionsAndPlaceOrderMutation,
+    AdyenPaymentOptionsAndPlaceOrderMutationVariables & { issuer?: string }
+  >(AdyenPaymentOptionsAndPlaceOrderDocument, {
+    onBeforeSubmit: (vars) => ({
+      ...vars,
+      stateData: JSON.stringify({
+        paymentMethod: { type: brandCode, issuer: vars.issuer },
+        clientStateDataIndicator: true,
+      }),
+      brandCode,
+    }),
+    onComplete: async (result) => {
+      const merchantReference = result.data?.placeOrder?.order.order_number
+      const action = result?.data?.placeOrder?.order.adyen_payment_status?.action
+
+      if (result.errors || !merchantReference || !selectedMethod?.code || !action) return
+
+      const url = JSON.parse(action).url as string
+      lock({ method: selectedMethod.code, adyen: '1', merchantReference })
+      await push(url)
+    },
+  })
+
+  const { handleSubmit, muiRegister, formState, required } = form
+
+  const submit = handleSubmit(() => {})
+
+  const key = `PaymentMethodOptions_${code}${brandCode}`
+  useFormPersist({ form, name: key, persist: ['issuer'], 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 })
+
+  if (!conf?.issuers?.length) return <form onSubmit={submit} noValidate />
+
+  /** 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>
+      {conf?.issuers && (
+        <FormRow>
+          <TextField
+            defaultValue=''
+            variant='outlined'
+            color='secondary'
+            select
+            SelectProps={{ native: true, displayEmpty: true }}
+            error={formState.isSubmitted && !!formState.errors.issuer}
+            helperText={formState.isSubmitted && formState.errors.issuer?.message}
+            label={brandCode === 'ideal' ? 'Select your bank' : conf?.name}
+            required
+            {...muiRegister('issuer', {
+              required: { value: true, message: 'Please provide an issuer' },
+            })}
+            InputProps={{ endAdornment: <InputCheckmark show={valid.issuer} select /> }}
+          >
+            {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+            <option value='' />
+            {conf.issuers.map((issuer) => {
+              if (!issuer?.id || !issuer.name) return null
+
+              return (
+                <option key={issuer.id} value={issuer.id}>
+                  {issuer.name}
+                </option>
+              )
+            })}
+          </TextField>
+        </FormRow>
+      )}
+    </form>
+  )
+}

package/hooks/AdyenPaymentResponse.graphql

@@ -0,0 +1,6 @@
+fragment AdyenPaymentResponse on AdyenPaymentStatus {
+  action
+  additionalData
+  isFinal
+  resultCode
+}

package/hooks/UseAdyenPaymentMethods.graphql

@@ -0,0 +1,46 @@
+query UseAdyenPaymentMethods($cartId: String!) {
+  adyenPaymentMethods(cart_id: $cartId) {
+    paymentMethodsExtraDetails {
+      type
+      isOpenInvoice
+      configuration {
+        currency
+        amount {
+          currency
+          value
+        }
+      }
+      icon {
+        height
+        url
+        width
+      }
+    }
+    paymentMethodsResponse {
+      paymentMethods {
+        brand
+        brands
+        configuration {
+          merchantId
+          merchantName
+        }
+        details {
+          items {
+            id
+            name
+          }
+          key
+          optional
+          type
+          value
+        }
+        issuers {
+          id
+          name
+        }
+        name
+        type
+      }
+    }
+  }
+}

package/hooks/adyenHppExpandMethods.ts

@@ -0,0 +1,24 @@
+import { ExpandPaymentMethods } from '@graphcommerce/magento-cart-payment-method'
+import { UseAdyenPaymentMethodsDocument } from './UseAdyenPaymentMethods.gql'
+
+export const nonNullable = <T>(value: T): value is NonNullable<T> =>
+  value !== null && value !== undefined
+
+export const adyenHppExpandMethods: ExpandPaymentMethods = async (available, context) => {
+  if (!context.id) return []
+
+  const result = await context.client.query({
+    query: UseAdyenPaymentMethodsDocument,
+    variables: { cartId: context.id },
+  })
+
+  const methods = result.data.adyenPaymentMethods?.paymentMethodsResponse?.paymentMethods ?? []
+
+  return methods
+    .map((method) => {
+      if (!method?.name || !method.type) return null
+
+      return { title: method.name, code: available.code, child: method.type }
+    })
+    .filter(nonNullable)
+}

package/hooks/useAdyenCartLock.ts

@@ -0,0 +1,14 @@
+import { CartLockState, useCartLock } from '@graphcommerce/magento-cart-payment-method'
+
+type AdyenLockState = CartLockState & {
+  adyen: string | null
+  merchantReference?: string | null
+  redirectResult?: 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 useAdyenCartLock = () => useCartLock<AdyenLockState>()

package/hooks/useAdyenHandlePaymentResponse.ts

@@ -0,0 +1,122 @@
+import type { Types } from '@adyen/api-library'
+import { makeVar, useReactiveVar } from '@graphcommerce/graphql'
+import { useClearCurrentCartId, useCurrentCartId } from '@graphcommerce/magento-cart'
+import { useEventCallback } from '@mui/material'
+import { useRouter } from 'next/router'
+import { AdyenPaymentResponseFragment } from './AdyenPaymentResponse.gql'
+import { useAdyenCartLock } from './useAdyenCartLock'
+
+export enum ResultCodeEnum {
+  AuthenticationFinished = 'AuthenticationFinished',
+  Authorised = 'Authorised',
+  Cancelled = 'Cancelled',
+  ChallengeShopper = 'ChallengeShopper',
+  Error = 'Error',
+  IdentifyShopper = 'IdentifyShopper',
+  Pending = 'Pending',
+  PresentToShopper = 'PresentToShopper',
+  Received = 'Received',
+  RedirectShopper = 'RedirectShopper',
+  Refused = 'Refused',
+  Success = 'Success',
+}
+
+function isResultCodeEnum(value: string): value is ResultCodeEnum {
+  return Object.values(ResultCodeEnum).includes(value as ResultCodeEnum)
+}
+
+export type AdyenPaymentResponse = {
+  isFinal: boolean
+  resultCode: ResultCodeEnum
+  action?: Types.checkout.PaymentResponse['action']
+  additionalData?: Types.checkout.PaymentResponse['additionalData']
+}
+
+export function parsePaymentResponse(
+  status?: AdyenPaymentResponseFragment | null,
+): AdyenPaymentResponse {
+  if (!status?.resultCode) return { isFinal: false, resultCode: ResultCodeEnum.Error }
+
+  const { isFinal, resultCode, action, additionalData } = status
+
+  if (!isResultCodeEnum(resultCode) && process.env.NODE_ENV !== 'production')
+    throw Error(
+      `Returned resultCode ${resultCode} is not in available resultCodes: ${Object.values(
+        ResultCodeEnum,
+      )}`,
+    )
+
+  const response: AdyenPaymentResponse = {
+    isFinal: Boolean(isFinal),
+    // todo: do we need to check if these values are actually valid?
+    resultCode: isResultCodeEnum(resultCode) ? resultCode : ResultCodeEnum.Error,
+  }
+
+  if (action) {
+    try {
+      response.action = JSON.parse(action)
+    } catch (e) {
+      if (process.env.NODE_ENV !== 'production') {
+        throw Error('Could not parse AdyenPaymentStatusResult.action as JSON')
+      }
+      if (process.env.NODE_ENV === 'production') {
+        response.isFinal = false
+        response.resultCode = ResultCodeEnum.Error
+      }
+    }
+  }
+
+  if (additionalData) {
+    try {
+      response.additionalData = JSON.parse(additionalData)
+    } catch (e) {
+      if (process.env.NODE_ENV !== 'production') {
+        throw Error('Could not parse AdyenPaymentStatusResult.additionalData as JSON')
+      }
+      if (process.env.NODE_ENV === 'production') {
+        response.isFinal = false
+        response.resultCode = ResultCodeEnum.Error
+      }
+    }
+  }
+
+  return response
+}
+
+const paymentResult = makeVar<AdyenPaymentResponse | undefined>(undefined)
+
+export const useAdyenPaymentResponse = () => useReactiveVar(paymentResult)
+
+export function useAdyenHandlePaymentResponse() {
+  const clearCurrentCartId = useClearCurrentCartId()
+  const { currentCartId } = useCurrentCartId()
+  const { push } = useRouter()
+  const [, , unlockAdyen] = useAdyenCartLock()
+
+  const unlock = () => unlockAdyen({ adyen: null, redirectResult: null })
+
+  return useEventCallback((status?: AdyenPaymentResponseFragment | null) => {
+    const parsedResponse = parsePaymentResponse(status)
+    const resultCode = parsedResponse?.resultCode
+
+    // https://github.com/Adyen/adyen-magento2/blob/f814d4c095b04d775faced7bdad8f10866354612/Helper/PaymentResponseHandler.php#L91
+    switch (resultCode) {
+      case ResultCodeEnum.RedirectShopper:
+      case ResultCodeEnum.Refused:
+      case ResultCodeEnum.Pending:
+      case ResultCodeEnum.Error:
+        unlock()
+        break
+      case ResultCodeEnum.Authorised:
+        clearCurrentCartId()
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        push({ pathname: '/checkout/success', query: { cart_id: currentCartId } })
+        break
+      default:
+        if (process.env.NODE_ENV !== 'production') {
+          throw Error(`Unknown resultCode: ${resultCode}`)
+        }
+    }
+    paymentResult(parsedResponse)
+  })
+}

package/hooks/useAdyenPaymentMethod.ts

@@ -0,0 +1,31 @@
+import { useCartQuery } from '@graphcommerce/magento-cart'
+import { useMemo } from 'react'
+import { UseAdyenPaymentMethodsDocument } from './UseAdyenPaymentMethods.gql'
+
+export function useAdyenPaymentMethod(brandCode: string) {
+  const methods = useCartQuery(UseAdyenPaymentMethodsDocument)
+
+  const result = useMemo(() => {
+    const config = methods.data?.adyenPaymentMethods?.paymentMethodsExtraDetails?.find(
+      (extra) => extra?.type === brandCode,
+    )
+
+    const methodConf =
+      methods.data?.adyenPaymentMethods?.paymentMethodsResponse?.paymentMethods?.find(
+        (extra) => extra?.type === brandCode,
+      )
+
+    if (!methodConf || !config) return undefined
+
+    return {
+      ...methodConf,
+      ...config,
+    }
+  }, [
+    brandCode,
+    methods.data?.adyenPaymentMethods?.paymentMethodsExtraDetails,
+    methods.data?.adyenPaymentMethods?.paymentMethodsResponse?.paymentMethods,
+  ])
+
+  return result
+}

package/index.ts

@@ -0,0 +1,13 @@
+import { PaymentModule } from '@graphcommerce/magento-cart-payment-method'
+import { AdyenPaymentActionCard } from './components/AdyenPaymentActionCard/AdyenPaymentActionCard'
+import { AdyenPaymentHandler } from './components/AdyenPaymentHandler/AdyenPaymentHandler'
+import { HppOptions } from './components/AdyenPaymentOptionsAndPlaceOrder/AdyenPaymentOptionsAndPlaceOrder'
+import { adyenHppExpandMethods } from './hooks/adyenHppExpandMethods'
+
+export const adyen_hpp: PaymentModule = {
+  PaymentOptions: HppOptions,
+  PaymentPlaceOrder: () => null,
+  PaymentHandler: AdyenPaymentHandler,
+  PaymentActionCard: AdyenPaymentActionCard,
+  expandMethods: adyenHppExpandMethods,
+}

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-adyen",
+  "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/AddAdyenMethods.tsx

@@ -0,0 +1,27 @@
+import {
+  PaymentMethodContextProviderProps,
+  PaymentModule,
+} from '@graphcommerce/magento-cart-payment-method'
+import type { PluginProps } from '@graphcommerce/next-config'
+import { AdyenPaymentActionCard } from '../components/AdyenPaymentActionCard/AdyenPaymentActionCard'
+import { AdyenPaymentHandler } from '../components/AdyenPaymentHandler/AdyenPaymentHandler'
+import { HppOptions } from '../components/AdyenPaymentOptionsAndPlaceOrder/AdyenPaymentOptionsAndPlaceOrder'
+import { adyenHppExpandMethods } from '../hooks/adyenHppExpandMethods'
+
+export const adyen_hpp: PaymentModule = {
+  PaymentOptions: HppOptions,
+  PaymentPlaceOrder: () => null,
+  PaymentHandler: AdyenPaymentHandler,
+  PaymentActionCard: AdyenPaymentActionCard,
+  expandMethods: adyenHppExpandMethods,
+}
+
+export const component = 'PaymentMethodContextProvider'
+export const exported = '@graphcommerce/magento-cart-payment-method'
+
+function AddAdyenMethods(props: PluginProps<PaymentMethodContextProviderProps>) {
+  const { modules, Component } = props
+  return <Component {...props} modules={{ ...modules, adyen_hpp }} />
+}
+
+export const Plugin = AddAdyenMethods

package/tsconfig.json

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