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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/Api/PaymentMethod.ts +16 -10
  2. package/CHANGELOG.md +43 -0
  3. package/PaymentMethodActionCardList/PaymentMethodActionCardListForm.tsx +135 -0
  4. package/PaymentMethodContext/PaymentMethodContext.tsx +13 -2
  5. package/PaymentMethodToggles/PaymentMethodToggles.tsx +0 -7
  6. package/README.md +0 -1
  7. package/index.ts +1 -0
  8. package/package.json +11 -11
package/Api/PaymentMethod.ts CHANGED
@@ -1,4 +1,5 @@
1
- import { LinkOrButtonProps } from '@graphcommerce/next-ui'
1
+ import { ApolloClient } from '@graphcommerce/graphql'
2
+ import { ActionCardProps, LinkOrButtonProps } from '@graphcommerce/next-ui'
2
3
  import { UseFormComposeOptions } from '@graphcommerce/react-hook-form'
3
4
  import React from 'react'
4
5
  import { AvailablePaymentMethodFragment } from './AvailablePaymentMethod/AvailablePaymentMethod.gql'
@@ -9,32 +10,37 @@ export type PaymentMethod = Partial<AvailablePaymentMethodFragment> &
9
10
  Pick<AvailablePaymentMethodFragment, 'code' | 'title'> & {
10
11
  child: string
11
12
  preferred?: boolean
12
- selected?: SelectedPaymentMethodFragment
13
+ selectedPm?: SelectedPaymentMethodFragment
13
14
  }
14
15
 
15
16
  export type PaymentMethodOptionsProps = Pick<UseFormComposeOptions, 'step'> & {
16
- Container: React.FC
17
+ Container: React.FC<{ children?: React.ReactNode }>
17
18
  }
18
19
  export type PaymentButtonProps = PaymentMethod & { buttonProps: LinkOrButtonProps }
19
20
  export type PaymentOptionsProps = PaymentMethod & PaymentMethodOptionsProps
20
21
 
21
- export type PaymentToggleProps = PaymentMethod
22
22
  export type PaymentHandlerProps = { code: string }
23
23
 
24
+ export type ExpandPaymentMethodsContext = Partial<PaymentMethodContextFragment> & {
25
+ client: ApolloClient<object>
26
+ }
27
+
24
28
  export type ExpandPaymentMethods = (
25
29
  available: AvailablePaymentMethodFragment,
26
- context: PaymentMethodContextFragment,
30
+ context: ExpandPaymentMethodsContext,
27
31
  ) => Promise<PaymentMethod[]> | PaymentMethod[]
28
32
 
29
33
  export type PaymentPlaceOrderProps = PaymentMethod & Pick<UseFormComposeOptions, 'step'>
30
34
 
35
+ export type PaymentMethodActionCardProps = ActionCardProps & PaymentMethod
36
+
31
37
  export interface PaymentModule {
32
- PaymentOptions: React.VFC<PaymentOptionsProps>
33
- PaymentPlaceOrder: React.VFC<PaymentPlaceOrderProps>
34
- PaymentButton?: React.VFC<PaymentButtonProps>
35
- PaymentToggle?: React.VFC<PaymentToggleProps>
38
+ PaymentOptions: React.FC<PaymentOptionsProps>
39
+ PaymentPlaceOrder: React.FC<PaymentPlaceOrderProps>
40
+ PaymentButton?: React.FC<PaymentButtonProps>
36
41
  expandMethods?: ExpandPaymentMethods
37
- PaymentHandler?: React.VFC<PaymentHandlerProps>
42
+ PaymentHandler?: React.FC<PaymentHandlerProps>
43
+ PaymentActionCard?: React.FC<PaymentMethodActionCardProps>
38
44
  }
39
45
 
40
46
  export type PaymentMethodModules = { [code: string]: PaymentModule }
package/CHANGELOG.md CHANGED
@@ -1,5 +1,48 @@
1
1
  # Change Log
2
2
 
3
+ ## 3.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#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
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies [[`371e6cf52`](https://github.com/graphcommerce-org/graphcommerce/commit/371e6cf52916a3b6c44192bd40cc8271bd608832), [`4143483f3`](https://github.com/graphcommerce-org/graphcommerce/commit/4143483f37c038d2bbf218be2685e27a31a35745)]:
12
+ - @graphcommerce/next-ui@4.10.0
13
+ - @graphcommerce/magento-cart@4.4.4
14
+ - @graphcommerce/framer-scroller@2.1.17
15
+ - @graphcommerce/magento-store@4.2.11
16
+
17
+ ## 3.2.0
18
+
19
+ ### Minor Changes
20
+
21
+ - [#1511](https://github.com/graphcommerce-org/graphcommerce/pull/1511) [`a2b4d7804`](https://github.com/graphcommerce-org/graphcommerce/commit/a2b4d78046a55d70194bd8bcd1efa499d5a73b74) Thanks [@paales](https://github.com/paales)! - make the apollo client available in the expandMethods call
22
+
23
+ ### Patch Changes
24
+
25
+ - [#1490](https://github.com/graphcommerce-org/graphcommerce/pull/1490) [`d311ef48b`](https://github.com/graphcommerce-org/graphcommerce/commit/d311ef48bb3e97806d992af5516d6b7f183ec9cb) Thanks [@paales](https://github.com/paales)! - upgraded packages
26
+
27
+ - Updated dependencies [[`a9213f1f5`](https://github.com/graphcommerce-org/graphcommerce/commit/a9213f1f5a410d217768386ccb6d9b5ce7bd5782), [`ddb6d6329`](https://github.com/graphcommerce-org/graphcommerce/commit/ddb6d6329bfad361b2fbe96402ca2bfc0ab3d98c), [`d311ef48b`](https://github.com/graphcommerce-org/graphcommerce/commit/d311ef48bb3e97806d992af5516d6b7f183ec9cb)]:
28
+ - @graphcommerce/next-ui@4.9.0
29
+ - @graphcommerce/framer-scroller@2.1.16
30
+ - @graphcommerce/graphql@3.2.1
31
+ - @graphcommerce/image@3.1.7
32
+ - @graphcommerce/magento-cart@4.4.3
33
+ - @graphcommerce/magento-store@4.2.10
34
+ - @graphcommerce/react-hook-form@3.2.2
35
+
36
+ ## 3.1.19
37
+
38
+ ### Patch Changes
39
+
40
+ - Updated dependencies [[`0ab7c5465`](https://github.com/graphcommerce-org/graphcommerce/commit/0ab7c5465441cba9bf8cd185a6790ce2f443f4ed)]:
41
+ - @graphcommerce/framer-scroller@2.1.15
42
+ - @graphcommerce/next-ui@4.8.4
43
+ - @graphcommerce/magento-cart@4.4.2
44
+ - @graphcommerce/magento-store@4.2.9
45
+
3
46
  ## 3.1.18
4
47
 
5
48
  ### Patch Changes
package/PaymentMethodActionCardList/PaymentMethodActionCardListForm.tsx ADDED
@@ -0,0 +1,135 @@
1
+ import { Image } from '@graphcommerce/image'
2
+ import { ActionCard, Button, Form, FormDiv, useIconSvgSize } from '@graphcommerce/next-ui'
3
+ import {
4
+ ActionCardItemBase,
5
+ ActionCardItemRenderProps,
6
+ ActionCardListForm,
7
+ } from '@graphcommerce/next-ui/ActionCard/ActionCardListForm'
8
+ import {
9
+ useForm,
10
+ useFormCompose,
11
+ UseFormComposeOptions,
12
+ useFormPersist,
13
+ } from '@graphcommerce/react-hook-form'
14
+ import { Trans } from '@lingui/react'
15
+ import { SxProps, Theme } from '@mui/material'
16
+ import { useEffect } from 'react'
17
+ import { PaymentMethodActionCardProps, PaymentOptionsProps } from '../Api/PaymentMethod'
18
+ import { usePaymentMethodContext } from '../PaymentMethodContext/PaymentMethodContext'
19
+ import { useCartLock } from '../hooks'
20
+
21
+ function DefaultPaymentActionCard(props: PaymentMethodActionCardProps) {
22
+ return <ActionCard {...props} />
23
+ }
24
+
25
+ function PaymentMethodActionCard(
26
+ props: ActionCardItemRenderProps<PaymentOptionsProps> & {
27
+ sx?: SxProps<Theme>
28
+ },
29
+ ) {
30
+ const { onReset, code, step, Container, mollie_meta, sx = [] } = props
31
+ const { selectedMethod, selectedModule, modules } = usePaymentMethodContext()
32
+
33
+ const selectedAndOptions = selectedMethod?.code === code && selectedModule?.PaymentOptions
34
+ const Card = modules[code]?.PaymentActionCard ?? DefaultPaymentActionCard
35
+ const iconSize = useIconSvgSize('large')
36
+
37
+ return (
38
+ <Card
39
+ sx={[
40
+ {
41
+ '& .ActionCard-title': { typography: 'h5', lineHeight: 0 },
42
+ '& .ActionCard-details': { lineHeight: 1.5 },
43
+ },
44
+ ...(Array.isArray(sx) ? sx : [sx]),
45
+ ]}
46
+ image={
47
+ mollie_meta?.image && (
48
+ <Image
49
+ layout='fixed'
50
+ sx={{ width: iconSize, height: iconSize }}
51
+ width={0}
52
+ height={0}
53
+ unoptimized
54
+ src={mollie_meta?.image}
55
+ />
56
+ )
57
+ }
58
+ action={
59
+ <Button disableRipple variant='inline' color='secondary'>
60
+ <Trans id='Select' />
61
+ </Button>
62
+ }
63
+ reset={
64
+ <Button disableRipple variant='inline' color='secondary' onClick={onReset}>
65
+ <Trans id='Change' />
66
+ </Button>
67
+ }
68
+ after={
69
+ selectedAndOptions && (
70
+ <selectedModule.PaymentOptions {...selectedMethod} step={step} Container={Container} />
71
+ )
72
+ }
73
+ {...props}
74
+ />
75
+ )
76
+ }
77
+
78
+ export type PaymentMethodActionCardListFormProps = Pick<UseFormComposeOptions, 'step'>
79
+
80
+ export function PaymentMethodActionCardListForm(props: PaymentMethodActionCardListFormProps) {
81
+ const { step } = props
82
+ const { methods, selectedMethod, setSelectedMethod, setSelectedModule, modules } =
83
+ usePaymentMethodContext()
84
+
85
+ const [lockState] = useCartLock()
86
+ const form = useForm<{ code: string | null; paymentMethod?: string }>({
87
+ defaultValues: { code: lockState.method },
88
+ })
89
+
90
+ const { control, handleSubmit, watch, setValue } = form
91
+ const submit = handleSubmit(() => {})
92
+
93
+ const paymentMethod = watch('paymentMethod')
94
+
95
+ useFormPersist({ form, name: 'PaymentMethodActionCardList' })
96
+ useFormCompose({ form, step: 1, submit, key: 'PaymentMethodActionCardList' })
97
+
98
+ useEffect(() => {
99
+ const [code, child] = paymentMethod?.split('___') ?? ['']
100
+ if (code === selectedMethod?.code) return
101
+
102
+ const foundMethod = methods.find(
103
+ (method) => method.code === code && (!child || method.child === child),
104
+ )
105
+ if (foundMethod && !modules?.[foundMethod?.code ?? '']) {
106
+ console.error(`No PaymentModule found for method ${foundMethod.code}`)
107
+ }
108
+ setSelectedMethod(foundMethod)
109
+ setSelectedModule(modules?.[foundMethod?.code ?? ''])
110
+ }, [methods, modules, paymentMethod, selectedMethod?.code, setSelectedMethod, setSelectedModule])
111
+
112
+ useEffect(() => {
113
+ if (selectedMethod?.code) setValue('code', selectedMethod.code)
114
+ }, [selectedMethod?.code, setValue])
115
+
116
+ if (!methods || methods.length < 1) return null
117
+
118
+ return (
119
+ <Form onSubmit={submit} noValidate>
120
+ <ActionCardListForm<PaymentOptionsProps & ActionCardItemBase>
121
+ control={control}
122
+ name='paymentMethod'
123
+ errorMessage='Please select a shipping address'
124
+ items={methods.map((method) => ({
125
+ ...method,
126
+ value: method.code,
127
+ step,
128
+ Container: FormDiv,
129
+ }))}
130
+ render={PaymentMethodActionCard}
131
+ />
132
+ {/* <ApolloCartErrorAlert error={error} /> */}
133
+ </Form>
134
+ )
135
+ }
package/PaymentMethodContext/PaymentMethodContext.tsx CHANGED
@@ -1,6 +1,12 @@
1
+ import { useApolloClient } from '@graphcommerce/graphql'
1
2
  import { useCartQuery } from '@graphcommerce/magento-cart'
2
3
  import React, { PropsWithChildren, useContext, useEffect, useMemo, useState } from 'react'
3
- import { PaymentMethod, PaymentMethodModules, PaymentModule } from '../Api/PaymentMethod'
4
+ import {
5
+ ExpandPaymentMethodsContext,
6
+ PaymentMethod,
7
+ PaymentMethodModules,
8
+ PaymentModule,
9
+ } from '../Api/PaymentMethod'
4
10
  import { GetPaymentMethodContextDocument } from './GetPaymentMethodContext.gql'
5
11
 
6
12
  type PaymentMethodContextProps = {
@@ -26,8 +32,13 @@ export function PaymentMethodContextProvider(props: PaymentMethodContextProvider
26
32
  const { modules, children } = props
27
33
 
28
34
  const context = useCartQuery(GetPaymentMethodContextDocument)
35
+ const client = useApolloClient()
36
+
37
+ const cartContext: ExpandPaymentMethodsContext = useMemo(
38
+ () => ({ ...context?.data?.cart, client }),
39
+ [client, context?.data?.cart],
40
+ )
29
41
 
30
- const cartContext = context?.data?.cart
31
42
  const [methods, setMethods] = useState<PaymentMethod[]>([])
32
43
  const [selectedMethod, setSelectedMethod] = useState<PaymentMethod>()
33
44
  const [selectedModule, setSelectedModule] = useState<PaymentModule>()
package/PaymentMethodToggles/PaymentMethodToggles.tsx CHANGED
@@ -26,13 +26,6 @@ export type PaymentMethodTogglesProps = Pick<UseFormComposeOptions, 'step'> & {
26
26
  sx?: SxProps<Theme>
27
27
  }
28
28
 
29
- // function Content(props: PaymentMethod) {
30
- // const { code } = props
31
- // const { modules } = usePaymentMethodContext()
32
- // const Component = modules[code]?.PaymentToggle ?? ((p: PaymentToggleProps) => <>{p.title}</>)
33
- // return <Component {...props} />
34
- // }
35
-
36
29
  const cmpName = 'PaymentMethodToggles' as const
37
30
  const parts = [
38
31
  'formRoot',
package/README.md CHANGED
@@ -13,7 +13,6 @@ A Magento Payment Method module must implement
13
13
  export interface PaymentModule {
14
14
  PaymentOptions: React.VFC<PaymentOptionsProps>
15
15
  PaymentButton?: React.VFC<PaymentButtonProps>
16
- PaymentToggle?: React.VFC<PaymentToggleProps>
17
16
  expandMethods?: ExpandPaymentMethods
18
17
  }
19
18
  ```
package/index.ts CHANGED
@@ -8,3 +8,4 @@ export * from './PaymentMethodOptionsNoop/PaymentMethodOptionsNoop.gql'
8
8
  export * from './PaymentMethodPlaceOrder/PaymentMethodPlaceOrder'
9
9
  export * from './PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop'
10
10
  export * from './PaymentMethodToggles/PaymentMethodToggles'
11
+ export * from './PaymentMethodActionCardList/PaymentMethodActionCardListForm'
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@graphcommerce/magento-cart-payment-method",
3
3
  "homepage": "https://www.graphcommerce.org/",
4
4
  "repository": "github:graphcommerce-org/graphcommerce",
5
- "version": "3.1.18",
5
+ "version": "3.3.0",
6
6
  "sideEffects": false,
7
7
  "prettier": "@graphcommerce/prettier-config-pwa",
8
8
  "eslintConfig": {
@@ -12,28 +12,28 @@
12
12
  }
13
13
  },
14
14
  "devDependencies": {
15
- "@graphcommerce/eslint-config-pwa": "^4.1.7",
15
+ "@graphcommerce/eslint-config-pwa": "^4.1.8",
16
16
  "@graphcommerce/prettier-config-pwa": "^4.0.6",
17
17
  "@graphcommerce/typescript-config-pwa": "^4.0.3",
18
- "@graphcommerce/magento-cart-shipping-address": "3.0.26",
18
+ "@graphcommerce/magento-cart-shipping-address": "3.2.0",
19
19
  "@playwright/test": "^1.21.1",
20
20
  "type-fest": "^2.12.2"
21
21
  },
22
22
  "dependencies": {
23
- "@graphcommerce/framer-scroller": "2.1.14",
24
- "@graphcommerce/graphql": "3.2.0",
25
- "@graphcommerce/image": "3.1.6",
26
- "@graphcommerce/magento-cart": "4.4.1",
27
- "@graphcommerce/magento-store": "4.2.8",
28
- "@graphcommerce/next-ui": "4.8.3",
29
- "@graphcommerce/react-hook-form": "3.2.1"
23
+ "@graphcommerce/framer-scroller": "2.1.17",
24
+ "@graphcommerce/graphql": "3.2.1",
25
+ "@graphcommerce/image": "3.1.7",
26
+ "@graphcommerce/magento-cart": "4.4.4",
27
+ "@graphcommerce/magento-store": "4.2.11",
28
+ "@graphcommerce/next-ui": "4.10.0",
29
+ "@graphcommerce/react-hook-form": "3.2.2"
30
30
  },
31
31
  "peerDependencies": {
32
32
  "@lingui/react": "^3.13.2",
33
33
  "@lingui/core": "^3.13.2",
34
34
  "@mui/material": "5.5.3",
35
35
  "framer-motion": "^6.2.4",
36
- "next": "12.1.2",
36
+ "next": "^12.1.2",
37
37
  "react": "^17.0.1",
38
38
  "react-dom": "^17.0.1"
39
39
  }