@graphcommerce/magento-cart-payment-method 3.2.0 → 3.3.0

package/Api/PaymentMethod.ts

@@ -1,5 +1,5 @@
 import { ApolloClient } from '@graphcommerce/graphql'
-import { LinkOrButtonProps } from '@graphcommerce/next-ui'
+import { ActionCardProps, LinkOrButtonProps } from '@graphcommerce/next-ui'
 import { UseFormComposeOptions } from '@graphcommerce/react-hook-form'
 import React from 'react'
 import { AvailablePaymentMethodFragment } from './AvailablePaymentMethod/AvailablePaymentMethod.gql'
@@ -10,7 +10,7 @@ export type PaymentMethod = Partial<AvailablePaymentMethodFragment> &
   Pick<AvailablePaymentMethodFragment, 'code' | 'title'> & {
     child: string
     preferred?: boolean
-    selected?: SelectedPaymentMethodFragment
+    selectedPm?: SelectedPaymentMethodFragment
   }
 
 export type PaymentMethodOptionsProps = Pick<UseFormComposeOptions, 'step'> & {
@@ -19,7 +19,6 @@ export type PaymentMethodOptionsProps = Pick<UseFormComposeOptions, 'step'> & {
 export type PaymentButtonProps = PaymentMethod & { buttonProps: LinkOrButtonProps }
 export type PaymentOptionsProps = PaymentMethod & PaymentMethodOptionsProps
 
-export type PaymentToggleProps = PaymentMethod
 export type PaymentHandlerProps = { code: string }
 
 export type ExpandPaymentMethodsContext = Partial<PaymentMethodContextFragment> & {
@@ -33,13 +32,15 @@ export type ExpandPaymentMethods = (
 
 export type PaymentPlaceOrderProps = PaymentMethod & Pick<UseFormComposeOptions, 'step'>
 
+export type PaymentMethodActionCardProps = ActionCardProps & PaymentMethod
+
 export interface PaymentModule {
-  PaymentOptions: React.VFC<PaymentOptionsProps>
-  PaymentPlaceOrder: React.VFC<PaymentPlaceOrderProps>
-  PaymentButton?: React.VFC<PaymentButtonProps>
-  PaymentToggle?: React.VFC<PaymentToggleProps>
+  PaymentOptions: React.FC<PaymentOptionsProps>
+  PaymentPlaceOrder: React.FC<PaymentPlaceOrderProps>
+  PaymentButton?: React.FC<PaymentButtonProps>
   expandMethods?: ExpandPaymentMethods
-  PaymentHandler?: React.VFC<PaymentHandlerProps>
+  PaymentHandler?: React.FC<PaymentHandlerProps>
+  PaymentActionCard?: React.FC<PaymentMethodActionCardProps>
 }
 
 export type PaymentMethodModules = { [code: string]: PaymentModule }

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+## 3.3.0
+
+### Minor Changes
+
+- [#1518](https://github.com/graphcommerce-org/graphcommerce/pull/1518) [`4143483f3`](https://github.com/graphcommerce-org/graphcommerce/commit/4143483f37c038d2bbf218be2685e27a31a35745) Thanks [@mikekeehnen](https://github.com/mikekeehnen)! - New ActionCardListForm implementation for Payment Methods
+
+### Patch Changes
+
+- Updated dependencies [[`371e6cf52`](https://github.com/graphcommerce-org/graphcommerce/commit/371e6cf52916a3b6c44192bd40cc8271bd608832), [`4143483f3`](https://github.com/graphcommerce-org/graphcommerce/commit/4143483f37c038d2bbf218be2685e27a31a35745)]:
+  - @graphcommerce/next-ui@4.10.0
+  - @graphcommerce/magento-cart@4.4.4
+  - @graphcommerce/framer-scroller@2.1.17
+  - @graphcommerce/magento-store@4.2.11
+
 ## 3.2.0
 
 ### Minor Changes

package/PaymentMethodActionCardList/PaymentMethodActionCardListForm.tsx

@@ -0,0 +1,135 @@
+import { Image } from '@graphcommerce/image'
+import { ActionCard, Button, Form, FormDiv, useIconSvgSize } from '@graphcommerce/next-ui'
+import {
+  ActionCardItemBase,
+  ActionCardItemRenderProps,
+  ActionCardListForm,
+} from '@graphcommerce/next-ui/ActionCard/ActionCardListForm'
+import {
+  useForm,
+  useFormCompose,
+  UseFormComposeOptions,
+  useFormPersist,
+} from '@graphcommerce/react-hook-form'
+import { Trans } from '@lingui/react'
+import { SxProps, Theme } from '@mui/material'
+import { useEffect } from 'react'
+import { PaymentMethodActionCardProps, PaymentOptionsProps } from '../Api/PaymentMethod'
+import { usePaymentMethodContext } from '../PaymentMethodContext/PaymentMethodContext'
+import { useCartLock } from '../hooks'
+
+function DefaultPaymentActionCard(props: PaymentMethodActionCardProps) {
+  return <ActionCard {...props} />
+}
+
+function PaymentMethodActionCard(
+  props: ActionCardItemRenderProps<PaymentOptionsProps> & {
+    sx?: SxProps<Theme>
+  },
+) {
+  const { onReset, code, step, Container, mollie_meta, sx = [] } = props
+  const { selectedMethod, selectedModule, modules } = usePaymentMethodContext()
+
+  const selectedAndOptions = selectedMethod?.code === code && selectedModule?.PaymentOptions
+  const Card = modules[code]?.PaymentActionCard ?? DefaultPaymentActionCard
+  const iconSize = useIconSvgSize('large')
+
+  return (
+    <Card
+      sx={[
+        {
+          '& .ActionCard-title': { typography: 'h5', lineHeight: 0 },
+          '& .ActionCard-details': { lineHeight: 1.5 },
+        },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+      image={
+        mollie_meta?.image && (
+          <Image
+            layout='fixed'
+            sx={{ width: iconSize, height: iconSize }}
+            width={0}
+            height={0}
+            unoptimized
+            src={mollie_meta?.image}
+          />
+        )
+      }
+      action={
+        <Button disableRipple variant='inline' color='secondary'>
+          <Trans id='Select' />
+        </Button>
+      }
+      reset={
+        <Button disableRipple variant='inline' color='secondary' onClick={onReset}>
+          <Trans id='Change' />
+        </Button>
+      }
+      after={
+        selectedAndOptions && (
+          <selectedModule.PaymentOptions {...selectedMethod} step={step} Container={Container} />
+        )
+      }
+      {...props}
+    />
+  )
+}
+
+export type PaymentMethodActionCardListFormProps = Pick<UseFormComposeOptions, 'step'>
+
+export function PaymentMethodActionCardListForm(props: PaymentMethodActionCardListFormProps) {
+  const { step } = props
+  const { methods, selectedMethod, setSelectedMethod, setSelectedModule, modules } =
+    usePaymentMethodContext()
+
+  const [lockState] = useCartLock()
+  const form = useForm<{ code: string | null; paymentMethod?: string }>({
+    defaultValues: { code: lockState.method },
+  })
+
+  const { control, handleSubmit, watch, setValue } = form
+  const submit = handleSubmit(() => {})
+
+  const paymentMethod = watch('paymentMethod')
+
+  useFormPersist({ form, name: 'PaymentMethodActionCardList' })
+  useFormCompose({ form, step: 1, submit, key: 'PaymentMethodActionCardList' })
+
+  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])
+
+  useEffect(() => {
+    if (selectedMethod?.code) setValue('code', selectedMethod.code)
+  }, [selectedMethod?.code, setValue])
+
+  if (!methods || methods.length < 1) return null
+
+  return (
+    <Form onSubmit={submit} noValidate>
+      <ActionCardListForm<PaymentOptionsProps & ActionCardItemBase>
+        control={control}
+        name='paymentMethod'
+        errorMessage='Please select a shipping address'
+        items={methods.map((method) => ({
+          ...method,
+          value: method.code,
+          step,
+          Container: FormDiv,
+        }))}
+        render={PaymentMethodActionCard}
+      />
+      {/* <ApolloCartErrorAlert error={error} /> */}
+    </Form>
+  )
+}

package/PaymentMethodToggles/PaymentMethodToggles.tsx

@@ -26,13 +26,6 @@ export type PaymentMethodTogglesProps = Pick<UseFormComposeOptions, 'step'> & {
   sx?: SxProps<Theme>
 }
 
-// function Content(props: PaymentMethod) {
-//   const { code } = props
-//   const { modules } = usePaymentMethodContext()
-//   const Component = modules[code]?.PaymentToggle ?? ((p: PaymentToggleProps) => <>{p.title}</>)
-//   return <Component {...props} />
-// }
-
 const cmpName = 'PaymentMethodToggles' as const
 const parts = [
   'formRoot',

package/README.md

@@ -13,7 +13,6 @@ A Magento Payment Method module must implement
 export interface PaymentModule {
   PaymentOptions: React.VFC<PaymentOptionsProps>
   PaymentButton?: React.VFC<PaymentButtonProps>
-  PaymentToggle?: React.VFC<PaymentToggleProps>
   expandMethods?: ExpandPaymentMethods
 }
 ```

package/index.ts

@@ -8,3 +8,4 @@ export * from './PaymentMethodOptionsNoop/PaymentMethodOptionsNoop.gql'
 export * from './PaymentMethodPlaceOrder/PaymentMethodPlaceOrder'
 export * from './PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop'
 export * from './PaymentMethodToggles/PaymentMethodToggles'
+export * from './PaymentMethodActionCardList/PaymentMethodActionCardListForm'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart-payment-method",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -15,17 +15,17 @@
     "@graphcommerce/eslint-config-pwa": "^4.1.8",
     "@graphcommerce/prettier-config-pwa": "^4.0.6",
     "@graphcommerce/typescript-config-pwa": "^4.0.3",
-    "@graphcommerce/magento-cart-shipping-address": "3.1.0",
+    "@graphcommerce/magento-cart-shipping-address": "3.2.0",
     "@playwright/test": "^1.21.1",
     "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@graphcommerce/framer-scroller": "2.1.16",
+    "@graphcommerce/framer-scroller": "2.1.17",
     "@graphcommerce/graphql": "3.2.1",
     "@graphcommerce/image": "3.1.7",
-    "@graphcommerce/magento-cart": "4.4.3",
-    "@graphcommerce/magento-store": "4.2.10",
-    "@graphcommerce/next-ui": "4.9.0",
+    "@graphcommerce/magento-cart": "4.4.4",
+    "@graphcommerce/magento-store": "4.2.11",
+    "@graphcommerce/next-ui": "4.10.0",
     "@graphcommerce/react-hook-form": "3.2.2"
   },
   "peerDependencies": {