@graphcommerce/magento-cart-payment-method 2.105.1

package/Api/AvailablePaymentMethod/AvailablePaymentMethod.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type AvailablePaymentMethodFragment = { code: string, title: string, mollie_available_issuers?: Types.Maybe<Array<Types.Maybe<{ code?: Types.Maybe<string>, image: string, name?: Types.Maybe<string>, svg: string }>>>, mollie_meta: { image?: Types.Maybe<string> } };

package/Api/AvailablePaymentMethod/AvailablePaymentMethod.graphql

@@ -0,0 +1,4 @@
+fragment AvailablePaymentMethod on AvailablePaymentMethod @injectable {
+  code
+  title
+}

package/Api/OrderPlaced.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type OrderPlacedFragment = { order_number: string };

package/Api/OrderPlaced.graphql

@@ -0,0 +1,3 @@
+fragment OrderPlaced on Order @injectable {
+  order_number
+}

package/Api/PaymentMethod.ts

@@ -0,0 +1,38 @@
+import { AvailablePaymentMethod } from '@graphcommerce/graphql'
+import { ButtonProps } from '@graphcommerce/next-ui/Button'
+import { UseFormComposeOptions } from '@graphcommerce/react-hook-form'
+import React from 'react'
+import { AvailablePaymentMethodFragment } from './AvailablePaymentMethod/AvailablePaymentMethod.gql'
+import { PaymentMethodContextFragment } from './PaymentMethodContext.gql'
+import { SelectedPaymentMethodFragment } from './SelectedPaymentMethod/SelectedPaymentMethod.gql'
+
+export type PaymentMethod = Partial<AvailablePaymentMethodFragment> &
+  Pick<AvailablePaymentMethod, 'code' | 'title'> & {
+    child: string
+    preferred?: boolean
+    selected?: SelectedPaymentMethodFragment
+  }
+
+export type PaymentMethodOptionsProps = Pick<UseFormComposeOptions, 'step'> & {
+  Container: React.FC
+}
+export type PaymentButtonProps = PaymentMethod & { buttonProps: ButtonProps }
+export type PaymentOptionsProps = PaymentMethod & PaymentMethodOptionsProps
+
+export type PaymentToggleProps = PaymentMethod
+export type ExpandPaymentMethods = (
+  available: AvailablePaymentMethodFragment,
+  context: PaymentMethodContextFragment,
+) => Promise<PaymentMethod[]> | PaymentMethod[]
+
+export type PaymentPlaceOrderProps = PaymentMethod & Pick<UseFormComposeOptions, 'step'>
+
+export interface PaymentModule {
+  PaymentOptions: React.VFC<PaymentOptionsProps>
+  PaymentPlaceOrder: React.VFC<PaymentPlaceOrderProps>
+  PaymentButton?: React.VFC<PaymentButtonProps>
+  PaymentToggle?: React.VFC<PaymentToggleProps>
+  expandMethods?: ExpandPaymentMethods
+}
+
+export type PaymentMethodModules = { [code: string]: PaymentModule }

package/Api/PaymentMethodContext.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type PaymentMethodContextFragment = { available_payment_methods?: Types.Maybe<Array<Types.Maybe<{ code: string, title: string, mollie_available_issuers?: Types.Maybe<Array<Types.Maybe<{ code?: Types.Maybe<string>, image: string, name?: Types.Maybe<string>, svg: string }>>>, mollie_meta: { image?: Types.Maybe<string> } }>>>, selected_payment_method?: Types.Maybe<{ code: string, title: string, purchase_order_number?: Types.Maybe<string>, mollie_meta: { image?: Types.Maybe<string> } }>, shipping_addresses: Array<Types.Maybe<{ country: { code: string } }>>, prices?: Types.Maybe<{ grand_total?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }> };

package/Api/PaymentMethodContext.graphql

@@ -0,0 +1,8 @@
+fragment PaymentMethodContext on Cart @injectable {
+  available_payment_methods {
+    ...AvailablePaymentMethod
+  }
+  selected_payment_method {
+    ...SelectedPaymentMethod
+  }
+}

package/Api/PaymentMethodUpdated.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type PaymentMethodUpdatedFragment = { id: string, selected_payment_method?: Types.Maybe<{ code: string, title: string, purchase_order_number?: Types.Maybe<string>, mollie_meta: { image?: Types.Maybe<string> } }> };

package/Api/PaymentMethodUpdated.graphql

@@ -0,0 +1,6 @@
+fragment PaymentMethodUpdated on Cart @injectable {
+  id
+  selected_payment_method {
+    ...SelectedPaymentMethod
+  }
+}

package/Api/SelectedPaymentMethod/SelectedPaymentMethod.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type SelectedPaymentMethodFragment = { code: string, title: string, purchase_order_number?: Types.Maybe<string>, mollie_meta: { image?: Types.Maybe<string> } };

package/Api/SelectedPaymentMethod/SelectedPaymentMethod.graphql

@@ -0,0 +1,4 @@
+fragment SelectedPaymentMethod on SelectedPaymentMethod @injectable {
+  code
+  title
+}

package/CHANGELOG.md

@@ -0,0 +1,135 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [2.105.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-payment-method@2.105.0...@graphcommerce/magento-cart-payment-method@2.105.1) (2021-09-27)
+
+**Note:** Version bump only for package @graphcommerce/magento-cart-payment-method
+
+
+
+
+
+# 2.105.0 (2021-09-27)
+
+
+### Bug Fixes
+
+* **checkout:** purchaseorder and other build in methods wouldnt properly submit ([331cb8e](https://github.com/ho-nl/m2-pwa/commit/331cb8e2bed58c14cd41fceeab03e2cdfbe7e6a9))
+* do not use ToggleButtonGroup, only use the ToggleButton ([5172f70](https://github.com/ho-nl/m2-pwa/commit/5172f709ee26122b0a8700afb4325f23cb9ba9b9))
+* ignore md files from triggering version updates ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
+* implement next-ui barrel imports ([75bea70](https://github.com/ho-nl/m2-pwa/commit/75bea703dba898f18a2a1dfa3243ebd0a4e6f0e1))
+* paymentDone removed in favor of a more simple clearCart method ([5314f77](https://github.com/ho-nl/m2-pwa/commit/5314f7752c2f75a55dcd926bfc26607124561e5d))
+* playwright can't find the place order button ([b1fda5b](https://github.com/ho-nl/m2-pwa/commit/b1fda5b3e403dad621aba8ed895427f2166bc985))
+* **playwright:** checkout button was renamed ([09e5b79](https://github.com/ho-nl/m2-pwa/commit/09e5b79333708cfac04232d8071d1dad72968297))
+* rename NextButton to Button, change imports ([976adb0](https://github.com/ho-nl/m2-pwa/commit/976adb0bf906310d1efce888dcc9be1e28ce0f1b))
+
+
+### Features
+
+* **cart:** when a cart is not active anymore show a clear cart button ([5d04a14](https://github.com/ho-nl/m2-pwa/commit/5d04a14726c040b20b34c0b88f923aee1dff22e5))
+* coupon form on payment page ([a163961](https://github.com/ho-nl/m2-pwa/commit/a1639617be756b357177fcce255cf662c5314499))
+* **graphql:** introduced new graphql package that holds all generated files ([a3e7aa0](https://github.com/ho-nl/m2-pwa/commit/a3e7aa05540540533b5ced9a95f1f802ecbe499f))
+* **image:** introduced completely rewritten Image component ([e3413b3](https://github.com/ho-nl/m2-pwa/commit/e3413b3a57392d6571ea64cb8d9c8dca05ea31df))
+* implemented checkmo payment method ([18525b2](https://github.com/ho-nl/m2-pwa/commit/18525b2f4efe9bd0eea12a7a992d284f341e0c68))
+* implemented purchase order ([3a40033](https://github.com/ho-nl/m2-pwa/commit/3a40033cd4d6712a17bb9c41a8841ebf7aa2f025))
+* implemented the new mollie payment api ([a8b38a9](https://github.com/ho-nl/m2-pwa/commit/a8b38a9a45207e180f795e81bf5ac759f01a583d))
+* **mollie:** first version of mollie payment methods ([e2f7d78](https://github.com/ho-nl/m2-pwa/commit/e2f7d78e50a9afe928f1d8c478f946e03c63b0f2))
+* **mollie:** pay with credit card made working ([5cda84e](https://github.com/ho-nl/m2-pwa/commit/5cda84e0b9c54238ae6adaa34f9e2ad77a708508))
+* next.js 11 ([7d61407](https://github.com/ho-nl/m2-pwa/commit/7d614075a778f488045034f74be4f75b93f63c43))
+* only show free payment method when zero subtotal quote ([fd3ba86](https://github.com/ho-nl/m2-pwa/commit/fd3ba86d3060ebe7dc72ce27fca21464b46b4392))
+* **payment-agreements-form:** checkout agreements checkboxes ([13c8164](https://github.com/ho-nl/m2-pwa/commit/13c816499d220a2ce940672a95beca508b78ddc9))
+* **payments:** make PaymentMethodContext injectable ([68c664a](https://github.com/ho-nl/m2-pwa/commit/68c664adb7eb6eb86d7a819213deb87152392347))
+* **playwright:** added new playwright package to enable browser testing ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
+* **react-hook-form:** added buttonState to ComposedSubmit ([57e77c2](https://github.com/ho-nl/m2-pwa/commit/57e77c29f17720f7f3ee3b63be82779c0e5d8714))
+* renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of [@reachdigital](https://github.com/reachdigital) ([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
+* solve issue where the order couldn’t be submitted ([ec0d357](https://github.com/ho-nl/m2-pwa/commit/ec0d3579a1277976e2dc515f420996cf716f83a6))
+* upgraded to nextjs 11 ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
+* useFormMutationCart and simpler imports ([012f090](https://github.com/ho-nl/m2-pwa/commit/012f090e8f54d09f35d393c61ad1e2319f5a90ff))
+
+
+### Reverts
+
+* Revert "chore: upgrade @apollo/client" ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
+
+
+
+
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [2.104.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-payment-method@2.103.18...@graphcommerce/magento-cart-payment-method@2.104.0) (2021-09-24)
+
+### Features
+
+- **payment-agreements-form:** checkout agreements checkboxes
+  ([13c8164](https://github.com/ho-nl/m2-pwa/commit/13c816499d220a2ce940672a95beca508b78ddc9))
+
+## [2.103.15](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-payment-method@2.103.14...@graphcommerce/magento-cart-payment-method@2.103.15) (2021-09-23)
+
+## [2.103.15](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-payment-method@2.103.14...@graphcommerce/magento-cart-payment-method@2.103.15) (2021-09-23)
+
+### Bug Fixes
+
+- do not use ToggleButtonGroup, only use the ToggleButton
+  ([5172f70](https://github.com/ho-nl/m2-pwa/commit/5172f709ee26122b0a8700afb4325f23cb9ba9b9))
+
+## [2.103.12](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-payment-method@2.103.11...@graphcommerce/magento-cart-payment-method@2.103.12) (2021-09-01)
+
+### Bug Fixes
+
+- playwright can't find the place order button
+  ([b1fda5b](https://github.com/ho-nl/m2-pwa/commit/b1fda5b3e403dad621aba8ed895427f2166bc985))
+
+## [2.103.4](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-payment-method@2.103.3...@graphcommerce/magento-cart-payment-method@2.103.4) (2021-08-17)
+
+### Bug Fixes
+
+- **playwright:** checkout button was renamed
+  ([09e5b79](https://github.com/ho-nl/m2-pwa/commit/09e5b79333708cfac04232d8071d1dad72968297))
+
+# [2.103.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-payment-method@2.102.2...@graphcommerce/magento-cart-payment-method@2.103.0) (2021-08-13)
+
+### Features
+
+- coupon form on payment page
+  ([a163961](https://github.com/ho-nl/m2-pwa/commit/a1639617be756b357177fcce255cf662c5314499))
+
+# [2.102.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-payment-method@2.101.10...@graphcommerce/magento-cart-payment-method@2.102.0) (2021-08-12)
+
+### Features
+
+- upgraded to nextjs 11
+  ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
+
+## [2.101.9](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-payment-method@2.101.8...@graphcommerce/magento-cart-payment-method@2.101.9) (2021-08-09)
+
+### Reverts
+
+- Revert "chore: upgrade @apollo/client"
+  ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
+
+## [2.101.3](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-payment-method@2.101.2...@graphcommerce/magento-cart-payment-method@2.101.3) (2021-07-29)
+
+### Bug Fixes
+
+- paymentDone removed in favor of a more simple clearCart method
+  ([5314f77](https://github.com/ho-nl/m2-pwa/commit/5314f7752c2f75a55dcd926bfc26607124561e5d))
+
+# [2.101.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-payment-method@2.100.19...@graphcommerce/magento-cart-payment-method@2.101.0) (2021-07-26)
+
+### Features
+
+- **playwright:** added new playwright package to enable browser testing
+  ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
+
+## [2.100.11](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-payment-method@2.100.10...@graphcommerce/magento-cart-payment-method@2.100.11) (2021-07-20)
+
+### Bug Fixes
+
+- ignore md files from triggering version updates
+  ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))

package/PaymentMethodButton/PaymentMethodButton.tsx

@@ -0,0 +1,77 @@
+import { ApolloCartErrorAlert } from '@graphcommerce/magento-cart'
+import { Button, ButtonProps, FormRow } from '@graphcommerce/next-ui'
+import { ComposedSubmit, ComposedSubmitRenderComponentProps } from '@graphcommerce/react-hook-form'
+import React from 'react'
+import { usePaymentMethodContext } from '../PaymentMethodContext/PaymentMethodContext'
+
+export type PaymentMethodButtonProps = ButtonProps & { display?: 'inline' | 'block' }
+
+export function PaymentMethodButtonRenderer(
+  props: { buttonProps: ButtonProps } & ComposedSubmitRenderComponentProps,
+) {
+  const { buttonProps, error, buttonState, submit } = props
+  const { selectedMethod, selectedModule } = usePaymentMethodContext()
+
+  const btnProps = { ...buttonProps, name: 'placeOrder' }
+
+  const PaymentButton = selectedModule?.PaymentButton
+
+  return (
+    <>
+      {!PaymentButton || !selectedMethod?.code ? (
+        <Button
+          {...btnProps}
+          onClick={submit}
+          loading={buttonState.isSubmitting || (buttonState.isSubmitSuccessful && !error)}
+        >
+          {btnProps.children}
+          {selectedMethod?.title && (
+            <>
+              {' '}
+              (<em>{selectedMethod?.title}</em>)
+            </>
+          )}
+        </Button>
+      ) : (
+        <PaymentButton
+          {...selectedMethod}
+          buttonProps={{
+            ...btnProps,
+            onClick: submit,
+            loading: buttonState.isSubmitting || (buttonState.isSubmitSuccessful && !error),
+          }}
+        />
+      )}
+    </>
+  )
+}
+
+export default function PaymentMethodButton(props: PaymentMethodButtonProps) {
+  const { display, ...buttonProps } = props
+
+  return (
+    <ComposedSubmit
+      render={({ submit, buttonState, error }) => {
+        const button = (
+          <PaymentMethodButtonRenderer
+            buttonProps={buttonProps}
+            submit={submit}
+            buttonState={buttonState}
+            error={error}
+          />
+        )
+        return display === 'inline' ? (
+          button
+        ) : (
+          <>
+            <FormRow>{button}</FormRow>
+            <ApolloCartErrorAlert
+              key='error'
+              error={buttonState.isSubmitting ? undefined : error}
+            />
+          </>
+        )
+      }}
+    />
+  )
+}

package/PaymentMethodContext/GetPaymentMethodContext.gql.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const GetPaymentMethodContextDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetPaymentMethodContext"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cart"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"cart_id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"available_payment_methods"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"code"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"mollie_available_issuers"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"code"}},{"kind":"Field","name":{"kind":"Name","value":"image"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"svg"}}]}},{"kind":"Field","name":{"kind":"Name","value":"mollie_meta"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"image"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"selected_payment_method"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"code"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"purchase_order_number"}},{"kind":"Field","name":{"kind":"Name","value":"mollie_meta"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"image"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"shipping_addresses"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"country"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"code"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"prices"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"grand_total"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}}]}}]}}]} as unknown as DocumentNode<GetPaymentMethodContextQuery, GetPaymentMethodContextQueryVariables>;
+export type GetPaymentMethodContextQueryVariables = Types.Exact<{
+  cartId: Types.Scalars['String'];
+}>;
+
+
+export type GetPaymentMethodContextQuery = { cart?: Types.Maybe<{ __typename: 'Cart', id: string, available_payment_methods?: Types.Maybe<Array<Types.Maybe<{ code: string, title: string, mollie_available_issuers?: Types.Maybe<Array<Types.Maybe<{ code?: Types.Maybe<string>, image: string, name?: Types.Maybe<string>, svg: string }>>>, mollie_meta: { image?: Types.Maybe<string> } }>>>, selected_payment_method?: Types.Maybe<{ code: string, title: string, purchase_order_number?: Types.Maybe<string>, mollie_meta: { image?: Types.Maybe<string> } }>, shipping_addresses: Array<Types.Maybe<{ country: { code: string } }>>, prices?: Types.Maybe<{ grand_total?: Types.Maybe<{ currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }> }> }> };

package/PaymentMethodContext/GetPaymentMethodContext.graphql

@@ -0,0 +1,7 @@
+query GetPaymentMethodContext($cartId: String!) {
+  cart(cart_id: $cartId) {
+    id
+    __typename
+    ...PaymentMethodContext
+  }
+}

package/PaymentMethodContext/PaymentMethodContext.tsx

@@ -0,0 +1,76 @@
+import { useCartQuery } from '@graphcommerce/magento-cart'
+import React, { PropsWithChildren, useContext, useEffect, useState } from 'react'
+import { PaymentMethod, PaymentMethodModules, PaymentModule } from '../Api/PaymentMethod'
+import { GetPaymentMethodContextDocument } from './GetPaymentMethodContext.gql'
+
+type PaymentMethodContextProps = {
+  methods: PaymentMethod[]
+  selectedMethod?: PaymentMethod
+  setSelectedMethod(method: PaymentMethod | undefined): void
+  modules: PaymentMethodModules
+  selectedModule?: PaymentModule
+  setSelectedModule(module: PaymentModule | undefined): void
+}
+
+const paymentMethodContext = React.createContext<PaymentMethodContextProps>({
+  methods: [],
+  setSelectedMethod: () => {},
+  modules: {},
+  setSelectedModule: () => {},
+})
+paymentMethodContext.displayName = 'PaymentMethodContext'
+
+type PaymentMethodContextProviderProps = PropsWithChildren<{ modules: PaymentMethodModules }>
+
+export default function PaymentMethodContextProvider(props: PaymentMethodContextProviderProps) {
+  const { modules, children } = props
+
+  const context = useCartQuery(GetPaymentMethodContextDocument)
+  const cartContext = context?.data?.cart
+  const [methods, setMethods] = useState<PaymentMethod[]>([])
+  const [selectedMethod, setSelectedMethod] = useState<PaymentMethod>()
+  const [selectedModule, setSelectedModule] = useState<PaymentModule>()
+
+  // Expand the payment methods
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    ;(async () => {
+      if (!cartContext) return
+
+      const freeMethod = cartContext.available_payment_methods?.find(
+        (method) => method?.code === 'free',
+      )
+
+      const promises =
+        [...(freeMethod ? [freeMethod] : cartContext.available_payment_methods ?? [])].map(
+          async (method) =>
+            method
+              ? modules?.[method.code]?.expandMethods?.(method, cartContext) ?? [
+                  { ...method, child: '' },
+                ]
+              : Promise.resolve([]),
+        ) ?? []
+
+      setMethods((await Promise.all(promises)).flat(1).sort((a) => (a.preferred ? 1 : 0)))
+    })()
+  }, [cartContext, modules])
+
+  return (
+    <paymentMethodContext.Provider
+      value={{
+        methods,
+        selectedMethod,
+        setSelectedMethod,
+        modules,
+        selectedModule,
+        setSelectedModule,
+      }}
+    >
+      {children}
+    </paymentMethodContext.Provider>
+  )
+}
+
+export function usePaymentMethodContext() {
+  return useContext(paymentMethodContext)
+}

package/PaymentMethodOptions/PaymentMethodOptions.tsx

@@ -0,0 +1,31 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import { AnimatedRow } from '@graphcommerce/next-ui'
+import { AnimatePresence } from 'framer-motion'
+import { PaymentMethodOptionsProps } from '../Api/PaymentMethod'
+import { usePaymentMethodContext } from '../PaymentMethodContext/PaymentMethodContext'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      marginBottom: theme.spacings.sm,
+    },
+  }),
+  { name: 'PaymentMethodOptions' },
+)
+
+export default function PaymentMethodOptions(props: PaymentMethodOptionsProps) {
+  const { selectedMethod, selectedModule } = usePaymentMethodContext()
+  const classes = useStyles()
+
+  return (
+    <div className={classes.root}>
+      <AnimatePresence initial={false}>
+        {selectedModule && selectedMethod && (
+          <AnimatedRow key={selectedMethod.code}>
+            <selectedModule.PaymentOptions {...selectedMethod} {...props} />
+          </AnimatedRow>
+        )}
+      </AnimatePresence>
+    </div>
+  )
+}

package/PaymentMethodOptionsNoop/PaymentMethodOptionsNoop.gql.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const PaymentMethodOptionsNoopDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"PaymentMethodOptionsNoop"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"code"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"setPaymentMethodOnCart"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"cart_id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"payment_method"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"code"},"value":{"kind":"Variable","name":{"kind":"Name","value":"code"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cart"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"selected_payment_method"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"code"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"purchase_order_number"}},{"kind":"Field","name":{"kind":"Name","value":"mollie_meta"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"image"}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<PaymentMethodOptionsNoopMutation, PaymentMethodOptionsNoopMutationVariables>;
+export type PaymentMethodOptionsNoopMutationVariables = Types.Exact<{
+  cartId: Types.Scalars['String'];
+  code: Types.Scalars['String'];
+}>;
+
+
+export type PaymentMethodOptionsNoopMutation = { setPaymentMethodOnCart?: Types.Maybe<{ cart: { id: string, selected_payment_method?: Types.Maybe<{ code: string, title: string, purchase_order_number?: Types.Maybe<string>, mollie_meta: { image?: Types.Maybe<string> } }> } }> };

package/PaymentMethodOptionsNoop/PaymentMethodOptionsNoop.graphql

@@ -0,0 +1,7 @@
+mutation PaymentMethodOptionsNoop($cartId: String!, $code: String!) {
+  setPaymentMethodOnCart(input: { cart_id: $cartId, payment_method: { code: $code } }) {
+    cart {
+      ...PaymentMethodUpdated
+    }
+  }
+}

package/PaymentMethodOptionsNoop/PaymentMethodOptionsNoop.tsx

@@ -0,0 +1,30 @@
+import { useFormGqlMutationCart } from '@graphcommerce/magento-cart'
+import { useFormCompose } from '@graphcommerce/react-hook-form'
+import { PaymentOptionsProps } from '../Api/PaymentMethod'
+import { PaymentMethodOptionsNoopDocument } from './PaymentMethodOptionsNoop.gql'
+
+/** It sets the selected payment method on the cart. */
+function PaymentMethodOptionsNoop(props: PaymentOptionsProps) {
+  const { code, step } = props
+
+  /**
+   * 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(PaymentMethodOptionsNoopDocument, { defaultValues: { code } })
+
+  const { handleSubmit, register } = form
+  const submit = handleSubmit(() => {})
+
+  /** To use an external Pay button we register the current form to be handled there as well. */
+  useFormCompose({ form, step, submit, key: `PaymentMethodOptions_${code}` })
+
+  /** 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 onSubmit={submit} style={{ visibility: 'hidden' }}>
+      <input type='hidden' {...register('code')} />
+    </form>
+  )
+}
+
+export default PaymentMethodOptionsNoop

package/PaymentMethodPlaceOrder/PaymentMethodPlaceOrder.tsx

@@ -0,0 +1,12 @@
+import { UseFormComposeOptions } from '@graphcommerce/react-hook-form'
+import { usePaymentMethodContext } from '../PaymentMethodContext/PaymentMethodContext'
+
+export type PaymentMethodPlaceOrderProps = Pick<UseFormComposeOptions, 'step'>
+
+export default function PaymentMethodPlaceOrder(props: PaymentMethodPlaceOrderProps) {
+  const { step } = props
+  const { selectedMethod, selectedModule } = usePaymentMethodContext()
+
+  if (!selectedModule || !selectedMethod?.code) return null
+  return <selectedModule.PaymentPlaceOrder {...selectedMethod} step={step} />
+}

package/PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop.gql.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const PaymentMethodPlaceOrderNoopDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"PaymentMethodPlaceOrderNoop"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"placeOrder"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"cart_id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"order"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"order_number"}}]}}]}}]}}]} as unknown as DocumentNode<PaymentMethodPlaceOrderNoopMutation, PaymentMethodPlaceOrderNoopMutationVariables>;
+export type PaymentMethodPlaceOrderNoopMutationVariables = Types.Exact<{
+  cartId: Types.Scalars['String'];
+}>;
+
+
+export type PaymentMethodPlaceOrderNoopMutation = { placeOrder?: Types.Maybe<{ order: { order_number: string } }> };

package/PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop.graphql

@@ -0,0 +1,7 @@
+mutation PaymentMethodPlaceOrderNoop($cartId: String!) {
+  placeOrder(input: { cart_id: $cartId }) {
+    order {
+      order_number
+    }
+  }
+}

package/PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop.tsx

@@ -0,0 +1,34 @@
+import {
+  useFormGqlMutationCart,
+  useCurrentCartId,
+  useClearCurrentCartId,
+} from '@graphcommerce/magento-cart'
+import { useFormCompose } from '@graphcommerce/react-hook-form'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import { PaymentPlaceOrderProps } from '../Api/PaymentMethod'
+import { PaymentMethodPlaceOrderNoopDocument } from './PaymentMethodPlaceOrderNoop.gql'
+
+export default function PaymentMethodPlaceOrderNoop(props: PaymentPlaceOrderProps) {
+  const { step, code } = props
+  const clearCurrentCartId = useClearCurrentCartId()
+
+  const cartId = useCurrentCartId()
+  const form = useFormGqlMutationCart(PaymentMethodPlaceOrderNoopDocument, { mode: 'onChange' })
+
+  const { handleSubmit, data, error } = form
+  const router = useRouter()
+
+  useEffect(() => {
+    if (!data?.placeOrder?.order || error || !cartId) return
+    clearCurrentCartId?.()
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    router.push({ pathname: '/checkout/success', query: { cartId } })
+  }, [cartId, clearCurrentCartId, data?.placeOrder?.order, error, router])
+
+  const submit = handleSubmit(() => {})
+
+  useFormCompose({ form, step, submit, key: `PaymentMethodPlaceOrder_${code}` })
+
+  return <form onSubmit={submit} />
+}

package/PaymentMethodToggle/PaymentMethodToggle.tsx

@@ -0,0 +1,205 @@
+import { FormControl, makeStyles, Theme } from '@material-ui/core'
+import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
+import {
+  Form,
+  FormRow,
+  iconChevronLeft,
+  iconChevronRight,
+  responsiveVal,
+  SvgImage,
+  ToggleButton,
+} from '@graphcommerce/next-ui'
+import { Controller, useForm, useFormPersist } from '@graphcommerce/react-hook-form'
+import clsx from 'clsx'
+import { m } from 'framer-motion'
+import React, { useEffect } from 'react'
+import { PaymentMethod, PaymentToggleProps } from '../Api/PaymentMethod'
+import { usePaymentMethodContext } from '../PaymentMethodContext/PaymentMethodContext'
+
+export type PaymentMethodToggleProps = Record<string, unknown>
+
+function Content(props: PaymentMethod) {
+  const { code } = props
+  const { modules } = usePaymentMethodContext()
+  const Component = modules[code]?.PaymentToggle ?? ((p: PaymentToggleProps) => <>{p.title}</>)
+  return <Component {...props} />
+}
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    formRoot: {
+      padding: '5px 0',
+    },
+    root: {
+      position: 'relative',
+      padding: 0,
+    },
+    toggleGroup: {
+      display: 'inline-flex',
+      gap: 10,
+    },
+    buttonRoot: {
+      background: theme.palette.background.default,
+      borderRadius: 0,
+      width: 30,
+      height: responsiveVal(60, 85),
+      boxShadow: 'none',
+      border: '1px solid #eee',
+      '&:focus': {
+        boxShadow: 'none',
+      },
+    },
+    leftButtonRoot: {
+      borderTopLeftRadius: 4,
+      borderBottomLeftRadius: 4,
+    },
+    rightButtonRoot: {
+      borderTopRightRadius: 4,
+      borderBottomRightRadius: 4,
+    },
+    scrollerRoot: {
+      display: `grid`,
+      gridAutoFlow: `column`,
+      gridTemplateColumns: `repeat(30, max-content)`,
+      gridTemplateRows: `100%`,
+      gap: responsiveVal(4, 8),
+      height: responsiveVal(60, 85),
+      borderRadius: 5,
+    },
+    toggleButton: {
+      ...theme.typography.h5,
+      border: '1px solid #eee',
+      borderRadius: 4,
+      boxShadow: 'none',
+      transition: 'color .15s ease',
+      whiteSpace: 'nowrap',
+      fontSize: responsiveVal(14, 20),
+      [theme.breakpoints.up('sm')]: {
+        fontSize: responsiveVal(17, 20),
+      },
+    },
+    toggleButtonSelected: {
+      border: `1px solid ${theme.palette.secondary.main}`,
+      background: `${theme.palette.secondary.main}`,
+      color: `${theme.palette.secondary.contrastText}`,
+      '&:hover': {
+        background: `${theme.palette.secondary.main}`,
+      },
+    },
+    buttonContainer: {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      zIndex: 2,
+      height: '100%',
+    },
+    buttonContainerRight: {
+      left: 'unset',
+      right: 0,
+    },
+  }),
+  { name: 'PaymentMethodToggle' },
+)
+
+export default function PaymentMethodToggle(props: PaymentMethodToggleProps) {
+  const { methods, selectedMethod, setSelectedMethod, setSelectedModule, modules } =
+    usePaymentMethodContext()
+
+  const classes = useStyles()
+
+  const form = useForm<{ code: string; paymentMethod?: string }>({
+    mode: 'onChange',
+    defaultValues: { code: selectedMethod?.code },
+  })
+  useFormPersist({ form, name: 'PaymentMethodToggle' })
+
+  const { control, handleSubmit, watch, register, setValue } = form
+  const submitHandler = handleSubmit(() => {})
+
+  const paymentMethod = watch('paymentMethod')
+  useEffect(() => {
+    const [code, child] = paymentMethod?.split('___') ?? ['']
+    if (code === selectedMethod?.code) return
+
+    const foundMethod = methods.find(
+      (method) => method.code === code && (!child || method.child === child),
+    )
+    if (foundMethod && !modules?.[foundMethod?.code ?? '']) {
+      console.error(`No PaymentModule found for method ${foundMethod.code}`)
+    }
+    setSelectedMethod(foundMethod)
+    setSelectedModule(modules?.[foundMethod?.code ?? ''])
+  }, [methods, modules, paymentMethod, selectedMethod?.code, setSelectedMethod, setSelectedModule])
+
+  if (!methods || methods.length < 1) return <></>
+
+  return (
+    <Form onSubmit={submitHandler} noValidate classes={{ root: classes.formRoot }}>
+      <input type='hidden' {...register('code', { required: true })} required />
+      <FormRow className={classes.root}>
+        <ScrollerProvider scrollSnapType='none'>
+          <m.div className={classes.buttonContainer}>
+            <ScrollerButton
+              direction='left'
+              classes={{
+                root: clsx(classes.buttonRoot, classes.leftButtonRoot),
+              }}
+            >
+              <SvgImage src={iconChevronLeft} alt='chevron left' size='small' loading='eager' />
+            </ScrollerButton>
+          </m.div>
+
+          <FormControl>
+            <Controller
+              defaultValue=''
+              control={control}
+              name='paymentMethod'
+              rules={{ required: 'Please select a payment method' }}
+              render={({ field: { onChange, value, name, ref, onBlur } }) => (
+                <Scroller className={classes.scrollerRoot} hideScrollbar>
+                  {methods?.map((pm) => {
+                    const buttonValue = `${pm.code}___${pm.child}`
+
+                    return (
+                      <ToggleButton
+                        name={name}
+                        aria-label={`payment_method_${pm.code}___${pm.child}`}
+                        key={buttonValue}
+                        value={buttonValue}
+                        color='secondary'
+                        disabled={!modules?.[pm.code]}
+                        classes={{
+                          root: classes.toggleButton,
+                          selected: classes.toggleButtonSelected,
+                        }}
+                        onChange={(_, v: string) => {
+                          onChange(v)
+                          setValue('code', v)
+                        }}
+                        onBlur={onBlur}
+                        selected={value === buttonValue}
+                      >
+                        {!modules?.[pm.code] ? <>{pm.code}</> : <>{pm.title}</>}
+                      </ToggleButton>
+                    )
+                  })}
+                </Scroller>
+              )}
+            />
+          </FormControl>
+
+          <m.div className={clsx(classes.buttonContainer, classes.buttonContainerRight)}>
+            <ScrollerButton
+              direction='right'
+              classes={{
+                root: clsx(classes.buttonRoot, classes.rightButtonRoot),
+              }}
+            >
+              <SvgImage src={iconChevronRight} alt='chevron right' size='small' loading='eager' />
+            </ScrollerButton>
+          </m.div>
+        </ScrollerProvider>
+      </FormRow>
+    </Form>
+  )
+}

package/README.md

@@ -0,0 +1,56 @@
+# Magento Payment
+
+Defines the API's and building blocks to create payment methods in the checkout.
+
+## Flow
+
+## Payment Method module
+
+A Magento Payment Method module must implement
+[`PaymentModule`]('./PaymentMethods')
+
+```tsx
+export interface PaymentModule {
+  PaymentOptions: React.VFC<PaymentOptionsProps>
+  PaymentButton?: React.VFC<PaymentButtonProps>
+  PaymentToggle?: React.VFC<PaymentToggleProps>
+  expandMethods?: ExpandPaymentMethods
+}
+```
+
+## Creating a payment method
+
+If a payment method is not implemented it will show a console error
+`No PaymentModule found for method ${code}`
+
+### 1. Create the module
+
+```tsx
+import {
+  PaymentMethodOptionsNoop,
+  PaymentMethodPlaceOrderNoop,
+  PaymentModule,
+} from '@graphcommerce/magento-cart-payment-method'
+
+// This is the internal code of the payment method provided by Magento
+export const braintree_local_payment = {
+  PaymentOptions: PaymentMethodOptionsNoop,
+  PaymentPlaceOrder: PaymentMethodPlaceOrderNoop,
+} as PaymentModule
+```
+
+### 2. Register the module
+
+On your payment page (`pages/checkout/payment.tsx` by default) pass in the
+payment method into the PaymentMethodContextProvider:
+
+```tsx
+<PaymentMethodContextProvider
+  modules={{ ...included_methods, braintree_local_payment }}
+>
+```
+
+### 3. Customize setPaymentMethodOnCart
+
+Open `PaymentMethodOptionsNoop` and `PaymentMethodPlaceOrderNoop` for details
+how it is used.

package/index.ts

@@ -0,0 +1,18 @@
+export * from './Api/PaymentMethod'
+
+export * from './PaymentMethodContext/PaymentMethodContext'
+export { default as PaymentMethodContextProvider } from './PaymentMethodContext/PaymentMethodContext'
+
+export * from './PaymentMethodButton/PaymentMethodButton'
+export { default as PaymentMethodButton } from './PaymentMethodButton/PaymentMethodButton'
+
+export { default as PaymentMethodOptions } from './PaymentMethodOptions/PaymentMethodOptions'
+
+export * from './PaymentMethodOptionsNoop/PaymentMethodOptionsNoop.gql'
+export { default as PaymentMethodOptionsNoop } from './PaymentMethodOptionsNoop/PaymentMethodOptionsNoop'
+
+export { default as PaymentMethodPlaceOrder } from './PaymentMethodPlaceOrder/PaymentMethodPlaceOrder'
+export { default as PaymentMethodPlaceOrderNoop } from './PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop'
+
+export * from './PaymentMethodToggle/PaymentMethodToggle'
+export { default as PaymentMethodToggle } from './PaymentMethodToggle/PaymentMethodToggle'

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@graphcommerce/magento-cart-payment-method",
+  "version": "2.105.1",
+  "sideEffects": false,
+  "engines": {
+    "node": "14.x"
+  },
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "browserslist": [
+    "extends @graphcommerce/browserslist-config-pwa"
+  ],
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
+  },
+  "devDependencies": {
+    "@graphcommerce/browserslist-config-pwa": "^3.0.1",
+    "@graphcommerce/eslint-config-pwa": "^3.0.1",
+    "@graphcommerce/prettier-config-pwa": "^3.0.1",
+    "@graphcommerce/typescript-config-pwa": "^3.0.1",
+    "@playwright/test": "^1.14.1"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.3.21",
+    "@graphcommerce/graphql": "^2.103.1",
+    "@graphcommerce/image": "^2.104.1",
+    "@graphcommerce/magento-cart": "^3.0.1",
+    "@graphcommerce/magento-store": "^3.0.1",
+    "@graphcommerce/next-ui": "^3.0.1",
+    "@graphcommerce/react-hook-form": "^2.102.1",
+    "@graphql-typed-document-node/core": "^3.1.0",
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/lab": "^4.0.0-alpha.60",
+    "clsx": "^1.1.1",
+    "framer-motion": "^4.1.17",
+    "next": "^11.1.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "type-fest": "^2.1.0"
+  }
+}

package/tsconfig.json

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