@graphcommerce/magento-cart-payment-method 3.1.19 → 3.3.1

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 +39 -0
  3. package/PaymentMethodActionCardList/PaymentMethodActionCardListForm.tsx +122 -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,44 @@
1
1
  # Change Log
2
2
 
3
+ ## 3.3.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#1519](https://github.com/graphcommerce-org/graphcommerce/pull/1519) [`64c7b6b45`](https://github.com/graphcommerce-org/graphcommerce/commit/64c7b6b4595a13110453f98680ffd69f27f2c656) Thanks [@paales](https://github.com/paales)! - mollie_meta should not be in general package
8
+
9
+ ## 3.3.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [#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
14
+
15
+ ### Patch Changes
16
+
17
+ - Updated dependencies [[`371e6cf52`](https://github.com/graphcommerce-org/graphcommerce/commit/371e6cf52916a3b6c44192bd40cc8271bd608832), [`4143483f3`](https://github.com/graphcommerce-org/graphcommerce/commit/4143483f37c038d2bbf218be2685e27a31a35745)]:
18
+ - @graphcommerce/next-ui@4.10.0
19
+ - @graphcommerce/magento-cart@4.4.4
20
+ - @graphcommerce/framer-scroller@2.1.17
21
+ - @graphcommerce/magento-store@4.2.11
22
+
23
+ ## 3.2.0
24
+
25
+ ### Minor Changes
26
+
27
+ - [#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
28
+
29
+ ### Patch Changes
30
+
31
+ - [#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
32
+
33
+ - 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)]:
34
+ - @graphcommerce/next-ui@4.9.0
35
+ - @graphcommerce/framer-scroller@2.1.16
36
+ - @graphcommerce/graphql@3.2.1
37
+ - @graphcommerce/image@3.1.7
38
+ - @graphcommerce/magento-cart@4.4.3
39
+ - @graphcommerce/magento-store@4.2.10
40
+ - @graphcommerce/react-hook-form@3.2.2
41
+
3
42
  ## 3.1.19
4
43
 
5
44
  ### Patch Changes
package/PaymentMethodActionCardList/PaymentMethodActionCardListForm.tsx ADDED
@@ -0,0 +1,122 @@
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, 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
+
36
+ return (
37
+ <Card
38
+ sx={[
39
+ {
40
+ '& .ActionCard-title': { typography: 'h5', lineHeight: 0 },
41
+ '& .ActionCard-details': { lineHeight: 1.5 },
42
+ },
43
+ ...(Array.isArray(sx) ? sx : [sx]),
44
+ ]}
45
+ action={
46
+ <Button disableRipple variant='inline' color='secondary'>
47
+ <Trans id='Select' />
48
+ </Button>
49
+ }
50
+ reset={
51
+ <Button disableRipple variant='inline' color='secondary' onClick={onReset}>
52
+ <Trans id='Change' />
53
+ </Button>
54
+ }
55
+ after={
56
+ selectedAndOptions && (
57
+ <selectedModule.PaymentOptions {...selectedMethod} step={step} Container={Container} />
58
+ )
59
+ }
60
+ {...props}
61
+ />
62
+ )
63
+ }
64
+
65
+ export type PaymentMethodActionCardListFormProps = Pick<UseFormComposeOptions, 'step'>
66
+
67
+ export function PaymentMethodActionCardListForm(props: PaymentMethodActionCardListFormProps) {
68
+ const { step } = props
69
+ const { methods, selectedMethod, setSelectedMethod, setSelectedModule, modules } =
70
+ usePaymentMethodContext()
71
+
72
+ const [lockState] = useCartLock()
73
+ const form = useForm<{ code: string | null; paymentMethod?: string }>({
74
+ defaultValues: { code: lockState.method },
75
+ })
76
+
77
+ const { control, handleSubmit, watch, setValue } = form
78
+ const submit = handleSubmit(() => {})
79
+
80
+ const paymentMethod = watch('paymentMethod')
81
+
82
+ useFormPersist({ form, name: 'PaymentMethodActionCardList' })
83
+ useFormCompose({ form, step: 1, submit, key: 'PaymentMethodActionCardList' })
84
+
85
+ useEffect(() => {
86
+ const [code, child] = paymentMethod?.split('___') ?? ['']
87
+ if (code === selectedMethod?.code) return
88
+
89
+ const foundMethod = methods.find(
90
+ (method) => method.code === code && (!child || method.child === child),
91
+ )
92
+ if (foundMethod && !modules?.[foundMethod?.code ?? '']) {
93
+ console.error(`No PaymentModule found for method ${foundMethod.code}`)
94
+ }
95
+ setSelectedMethod(foundMethod)
96
+ setSelectedModule(modules?.[foundMethod?.code ?? ''])
97
+ }, [methods, modules, paymentMethod, selectedMethod?.code, setSelectedMethod, setSelectedModule])
98
+
99
+ useEffect(() => {
100
+ if (selectedMethod?.code) setValue('code', selectedMethod.code)
101
+ }, [selectedMethod?.code, setValue])
102
+
103
+ if (!methods || methods.length < 1) return null
104
+
105
+ return (
106
+ <Form onSubmit={submit} noValidate>
107
+ <ActionCardListForm<PaymentOptionsProps & ActionCardItemBase>
108
+ control={control}
109
+ name='paymentMethod'
110
+ errorMessage='Please select a shipping address'
111
+ items={methods.map((method) => ({
112
+ ...method,
113
+ value: method.code,
114
+ step,
115
+ Container: FormDiv,
116
+ }))}
117
+ render={PaymentMethodActionCard}
118
+ />
119
+ {/* <ApolloCartErrorAlert error={error} /> */}
120
+ </Form>
121
+ )
122
+ }
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.19",
5
+ "version": "3.3.1",
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.27",
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.15",
24
- "@graphcommerce/graphql": "3.2.0",
25
- "@graphcommerce/image": "3.1.6",
26
- "@graphcommerce/magento-cart": "4.4.2",
27
- "@graphcommerce/magento-store": "4.2.9",
28
- "@graphcommerce/next-ui": "4.8.4",
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
  }