@graphcommerce/magento-cart-payment-method 2.111.45 → 3.0.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.
- package/CHANGELOG.md +101 -107
- package/PaymentMethodButton/PaymentMethodButton.tsx +0 -1
- package/PaymentMethodOptions/PaymentMethodOptions.tsx +15 -15
- package/PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop.tsx +3 -3
- package/PaymentMethodToggles/PaymentMethodToggles.tsx +102 -92
- package/hooks/useCartLock.ts +1 -1
- package/package.json +18 -26
package/CHANGELOG.md
CHANGED
|
@@ -1,187 +1,181 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
|
-
|
|
6
|
-
# [2.111.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-payment-method@2.110.20...@graphcommerce/magento-cart-payment-method@2.111.0) (2021-11-12)
|
|
3
|
+
## 3.0.0
|
|
7
4
|
|
|
5
|
+
### Major Changes
|
|
8
6
|
|
|
9
|
-
|
|
7
|
+
- [#1258](https://github.com/ho-nl/m2-pwa/pull/1258)
|
|
8
|
+
[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)
|
|
9
|
+
Thanks [@paales](https://github.com/paales)! - Upgraded to Material UI 5
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
### Patch Changes
|
|
12
12
|
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
[[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)]:
|
|
15
|
+
- @graphcommerce/framer-scroller@2.0.0
|
|
16
|
+
- @graphcommerce/graphql@3.0.0
|
|
17
|
+
- @graphcommerce/image@3.0.0
|
|
18
|
+
- @graphcommerce/magento-cart@4.0.0
|
|
19
|
+
- @graphcommerce/magento-store@4.0.0
|
|
20
|
+
- @graphcommerce/next-ui@4.0.0
|
|
21
|
+
- @graphcommerce/react-hook-form@3.0.0
|
|
13
22
|
|
|
14
|
-
|
|
23
|
+
All notable changes to this project will be documented in this file. See
|
|
24
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
15
25
|
|
|
16
|
-
|
|
26
|
+
# [2.111.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-payment-method@2.110.20...@graphcommerce/magento-cart-payment-method@2.111.0) (2021-11-12)
|
|
17
27
|
|
|
28
|
+
### Bug Fixes
|
|
18
29
|
|
|
30
|
+
- even more translations
|
|
31
|
+
([1a1f988](https://github.com/ho-nl/m2-pwa/commit/1a1f98837c704b978f6b42b619d9c52f540b2d48))
|
|
19
32
|
|
|
33
|
+
### Features
|
|
20
34
|
|
|
35
|
+
- added tons of translations
|
|
36
|
+
([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
|
|
21
37
|
|
|
22
38
|
## [2.110.7](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-payment-method@2.110.6...@graphcommerce/magento-cart-payment-method@2.110.7) (2021-11-04)
|
|
23
39
|
|
|
24
|
-
|
|
25
40
|
### Bug Fixes
|
|
26
41
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
42
|
+
- remove hardcoded fontSize
|
|
43
|
+
([e4e09e1](https://github.com/ho-nl/m2-pwa/commit/e4e09e11baeb8edeff634550b8cdb88571d96911))
|
|
32
44
|
|
|
33
45
|
# [2.110.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-payment-method@2.109.1...@graphcommerce/magento-cart-payment-method@2.110.0) (2021-11-02)
|
|
34
46
|
|
|
35
|
-
|
|
36
47
|
### Features
|
|
37
48
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
49
|
+
- shipping methods scroller
|
|
50
|
+
([3cc4413](https://github.com/ho-nl/m2-pwa/commit/3cc441320d2a3dd003c499be358a118a17e528c3))
|
|
43
51
|
|
|
44
52
|
# [2.109.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-payment-method@2.108.8...@graphcommerce/magento-cart-payment-method@2.109.0) (2021-11-02)
|
|
45
53
|
|
|
46
|
-
|
|
47
54
|
### Features
|
|
48
55
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
56
|
+
- darkTheme
|
|
57
|
+
([968f4f1](https://github.com/ho-nl/m2-pwa/commit/968f4f1360417bf7daa36454c19e6bc5cf53ae90))
|
|
54
58
|
|
|
55
59
|
## [2.108.4](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-payment-method@2.108.3...@graphcommerce/magento-cart-payment-method@2.108.4) (2021-10-28)
|
|
56
60
|
|
|
57
|
-
|
|
58
61
|
### Bug Fixes
|
|
59
62
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
63
|
+
- External SVG's can't have alt tags
|
|
64
|
+
([1b1414a](https://github.com/ho-nl/m2-pwa/commit/1b1414a782d55d3acf7b0e6bcaa50f2ad5f18f39))
|
|
65
65
|
|
|
66
66
|
## [2.108.3](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-payment-method@2.108.2...@graphcommerce/magento-cart-payment-method@2.108.3) (2021-10-28)
|
|
67
67
|
|
|
68
|
-
|
|
69
68
|
### Bug Fixes
|
|
70
69
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
70
|
+
- update SvgImage to SvgImageSimple
|
|
71
|
+
([f116543](https://github.com/ho-nl/m2-pwa/commit/f116543730853fa9782abff0ccacee7032e85789))
|
|
76
72
|
|
|
77
73
|
# [2.108.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-payment-method@2.107.6...@graphcommerce/magento-cart-payment-method@2.108.0) (2021-10-27)
|
|
78
74
|
|
|
79
|
-
|
|
80
75
|
### Features
|
|
81
76
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
77
|
+
- **nextjs:** upgraded to nextjs 12
|
|
78
|
+
([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
|
|
87
79
|
|
|
88
80
|
# [2.107.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-payment-method@2.106.16...@graphcommerce/magento-cart-payment-method@2.107.0) (2021-10-19)
|
|
89
81
|
|
|
90
|
-
|
|
91
82
|
### Features
|
|
92
83
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
84
|
+
- **framer-scroller:** better defaults so the Scroller doesn't look broken when providing no props
|
|
85
|
+
([b177ce9](https://github.com/ho-nl/m2-pwa/commit/b177ce9570abb9ccfd4eb5cc34e43d157bb4e81a))
|
|
98
86
|
|
|
99
87
|
## [2.106.5](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-payment-method@2.106.4...@graphcommerce/magento-cart-payment-method@2.106.5) (2021-10-08)
|
|
100
88
|
|
|
101
|
-
|
|
102
89
|
### Bug Fixes
|
|
103
90
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
91
|
+
- make sure we can useCartLock on the success page
|
|
92
|
+
([139349a](https://github.com/ho-nl/m2-pwa/commit/139349a73836c0c58c5d8000a801c912dbe23b3b))
|
|
109
93
|
|
|
110
94
|
## [2.106.4](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-payment-method@2.106.3...@graphcommerce/magento-cart-payment-method@2.106.4) (2021-10-07)
|
|
111
95
|
|
|
112
|
-
|
|
113
96
|
### Bug Fixes
|
|
114
97
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
98
|
+
- make sure if no payment method is filled in we get an error shown
|
|
99
|
+
([a203e57](https://github.com/ho-nl/m2-pwa/commit/a203e570caad0732427a178e8e8b10b4a15d676b))
|
|
120
100
|
|
|
121
101
|
# [2.106.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-payment-method@2.105.11...@graphcommerce/magento-cart-payment-method@2.106.0) (2021-10-04)
|
|
122
102
|
|
|
123
|
-
|
|
124
103
|
### Features
|
|
125
104
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
105
|
+
- sort payment methods by availability
|
|
106
|
+
([52f5d45](https://github.com/ho-nl/m2-pwa/commit/52f5d450a7a2fdec0c7eea9cd5d48336cb304138))
|
|
131
107
|
|
|
132
108
|
## [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)
|
|
133
109
|
|
|
134
110
|
**Note:** Version bump only for package @graphcommerce/magento-cart-payment-method
|
|
135
111
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
112
|
# 2.105.0 (2021-09-27)
|
|
141
113
|
|
|
142
|
-
|
|
143
114
|
### Bug Fixes
|
|
144
115
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
116
|
+
- **checkout:** purchaseorder and other build in methods wouldnt properly submit
|
|
117
|
+
([331cb8e](https://github.com/ho-nl/m2-pwa/commit/331cb8e2bed58c14cd41fceeab03e2cdfbe7e6a9))
|
|
118
|
+
- do not use ToggleButtonGroup, only use the ToggleButton
|
|
119
|
+
([5172f70](https://github.com/ho-nl/m2-pwa/commit/5172f709ee26122b0a8700afb4325f23cb9ba9b9))
|
|
120
|
+
- ignore md files from triggering version updates
|
|
121
|
+
([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
|
|
122
|
+
- implement next-ui barrel imports
|
|
123
|
+
([75bea70](https://github.com/ho-nl/m2-pwa/commit/75bea703dba898f18a2a1dfa3243ebd0a4e6f0e1))
|
|
124
|
+
- paymentDone removed in favor of a more simple clearCart method
|
|
125
|
+
([5314f77](https://github.com/ho-nl/m2-pwa/commit/5314f7752c2f75a55dcd926bfc26607124561e5d))
|
|
126
|
+
- playwright can't find the place order button
|
|
127
|
+
([b1fda5b](https://github.com/ho-nl/m2-pwa/commit/b1fda5b3e403dad621aba8ed895427f2166bc985))
|
|
128
|
+
- **playwright:** checkout button was renamed
|
|
129
|
+
([09e5b79](https://github.com/ho-nl/m2-pwa/commit/09e5b79333708cfac04232d8071d1dad72968297))
|
|
130
|
+
- rename NextButton to Button, change imports
|
|
131
|
+
([976adb0](https://github.com/ho-nl/m2-pwa/commit/976adb0bf906310d1efce888dcc9be1e28ce0f1b))
|
|
154
132
|
|
|
155
133
|
### Features
|
|
156
134
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
135
|
+
- **cart:** when a cart is not active anymore show a clear cart button
|
|
136
|
+
([5d04a14](https://github.com/ho-nl/m2-pwa/commit/5d04a14726c040b20b34c0b88f923aee1dff22e5))
|
|
137
|
+
- coupon form on payment page
|
|
138
|
+
([a163961](https://github.com/ho-nl/m2-pwa/commit/a1639617be756b357177fcce255cf662c5314499))
|
|
139
|
+
- **graphql:** introduced new graphql package that holds all generated files
|
|
140
|
+
([a3e7aa0](https://github.com/ho-nl/m2-pwa/commit/a3e7aa05540540533b5ced9a95f1f802ecbe499f))
|
|
141
|
+
- **image:** introduced completely rewritten Image component
|
|
142
|
+
([e3413b3](https://github.com/ho-nl/m2-pwa/commit/e3413b3a57392d6571ea64cb8d9c8dca05ea31df))
|
|
143
|
+
- implemented checkmo payment method
|
|
144
|
+
([18525b2](https://github.com/ho-nl/m2-pwa/commit/18525b2f4efe9bd0eea12a7a992d284f341e0c68))
|
|
145
|
+
- implemented purchase order
|
|
146
|
+
([3a40033](https://github.com/ho-nl/m2-pwa/commit/3a40033cd4d6712a17bb9c41a8841ebf7aa2f025))
|
|
147
|
+
- implemented the new mollie payment api
|
|
148
|
+
([a8b38a9](https://github.com/ho-nl/m2-pwa/commit/a8b38a9a45207e180f795e81bf5ac759f01a583d))
|
|
149
|
+
- **mollie:** first version of mollie payment methods
|
|
150
|
+
([e2f7d78](https://github.com/ho-nl/m2-pwa/commit/e2f7d78e50a9afe928f1d8c478f946e03c63b0f2))
|
|
151
|
+
- **mollie:** pay with credit card made working
|
|
152
|
+
([5cda84e](https://github.com/ho-nl/m2-pwa/commit/5cda84e0b9c54238ae6adaa34f9e2ad77a708508))
|
|
153
|
+
- next.js 11
|
|
154
|
+
([7d61407](https://github.com/ho-nl/m2-pwa/commit/7d614075a778f488045034f74be4f75b93f63c43))
|
|
155
|
+
- only show free payment method when zero subtotal quote
|
|
156
|
+
([fd3ba86](https://github.com/ho-nl/m2-pwa/commit/fd3ba86d3060ebe7dc72ce27fca21464b46b4392))
|
|
157
|
+
- **payment-agreements-form:** checkout agreements checkboxes
|
|
158
|
+
([13c8164](https://github.com/ho-nl/m2-pwa/commit/13c816499d220a2ce940672a95beca508b78ddc9))
|
|
159
|
+
- **payments:** make PaymentMethodContext injectable
|
|
160
|
+
([68c664a](https://github.com/ho-nl/m2-pwa/commit/68c664adb7eb6eb86d7a819213deb87152392347))
|
|
161
|
+
- **playwright:** added new playwright package to enable browser testing
|
|
162
|
+
([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
|
|
163
|
+
- **react-hook-form:** added buttonState to ComposedSubmit
|
|
164
|
+
([57e77c2](https://github.com/ho-nl/m2-pwa/commit/57e77c29f17720f7f3ee3b63be82779c0e5d8714))
|
|
165
|
+
- renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of
|
|
166
|
+
[@reachdigital](https://github.com/reachdigital)
|
|
167
|
+
([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
|
|
168
|
+
- solve issue where the order couldn’t be submitted
|
|
169
|
+
([ec0d357](https://github.com/ho-nl/m2-pwa/commit/ec0d3579a1277976e2dc515f420996cf716f83a6))
|
|
170
|
+
- upgraded to nextjs 11
|
|
171
|
+
([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
|
|
172
|
+
- useFormMutationCart and simpler imports
|
|
173
|
+
([012f090](https://github.com/ho-nl/m2-pwa/commit/012f090e8f54d09f35d393c61ad1e2319f5a90ff))
|
|
177
174
|
|
|
178
175
|
### Reverts
|
|
179
176
|
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
177
|
+
- Revert "chore: upgrade @apollo/client"
|
|
178
|
+
([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
|
|
185
179
|
|
|
186
180
|
# Change Log
|
|
187
181
|
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { ApolloCartErrorAlert } from '@graphcommerce/magento-cart'
|
|
2
2
|
import { Button, ButtonProps } from '@graphcommerce/next-ui'
|
|
3
3
|
import { ComposedSubmit, ComposedSubmitRenderComponentProps } from '@graphcommerce/react-hook-form'
|
|
4
|
-
import React from 'react'
|
|
5
4
|
import { usePaymentMethodContext } from '../PaymentMethodContext/PaymentMethodContext'
|
|
6
5
|
|
|
7
6
|
export type PaymentMethodButtonProps = ButtonProps & { display?: 'inline' | 'block' }
|
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
import { AnimatedRow } from '@graphcommerce/next-ui'
|
|
2
|
-
import {
|
|
1
|
+
import { AnimatedRow, extendableComponent } from '@graphcommerce/next-ui'
|
|
2
|
+
import { Box, SxProps, Theme } from '@mui/material'
|
|
3
3
|
import { AnimatePresence } from 'framer-motion'
|
|
4
4
|
import { PaymentMethodOptionsProps } from '../Api/PaymentMethod'
|
|
5
5
|
import { usePaymentMethodContext } from '../PaymentMethodContext/PaymentMethodContext'
|
|
6
6
|
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
marginBottom: theme.spacings.sm,
|
|
11
|
-
},
|
|
12
|
-
}),
|
|
13
|
-
{ name: 'PaymentMethodOptions' },
|
|
14
|
-
)
|
|
7
|
+
const name = 'PaymentMethodOptions' as const
|
|
8
|
+
const parts = ['root'] as const
|
|
9
|
+
const { classes } = extendableComponent(name, parts)
|
|
15
10
|
|
|
16
|
-
export default function PaymentMethodOptions(
|
|
11
|
+
export default function PaymentMethodOptions(
|
|
12
|
+
props: PaymentMethodOptionsProps & { sx?: SxProps<Theme> },
|
|
13
|
+
) {
|
|
14
|
+
const { sx = [], ...optionsProps } = props
|
|
17
15
|
const { selectedMethod, selectedModule } = usePaymentMethodContext()
|
|
18
|
-
const classes = useStyles()
|
|
19
16
|
|
|
20
17
|
return (
|
|
21
|
-
<
|
|
18
|
+
<Box
|
|
19
|
+
className={classes.root}
|
|
20
|
+
sx={[(theme) => ({ marginBottom: theme.spacings.sm }), ...(Array.isArray(sx) ? sx : [sx])]}
|
|
21
|
+
>
|
|
22
22
|
<AnimatePresence initial={false}>
|
|
23
23
|
{selectedModule && selectedMethod && (
|
|
24
24
|
<AnimatedRow key={selectedMethod.code}>
|
|
25
|
-
<selectedModule.PaymentOptions {...selectedMethod} {...
|
|
25
|
+
<selectedModule.PaymentOptions {...selectedMethod} {...optionsProps} />
|
|
26
26
|
</AnimatedRow>
|
|
27
27
|
)}
|
|
28
28
|
</AnimatePresence>
|
|
29
|
-
</
|
|
29
|
+
</Box>
|
|
30
30
|
)
|
|
31
31
|
}
|
|
@@ -17,14 +17,14 @@ export default function PaymentMethodPlaceOrderNoop(props: PaymentPlaceOrderProp
|
|
|
17
17
|
const form = useFormGqlMutationCart(PaymentMethodPlaceOrderNoopDocument, { mode: 'onChange' })
|
|
18
18
|
|
|
19
19
|
const { handleSubmit, data, error } = form
|
|
20
|
-
const
|
|
20
|
+
const { push } = useRouter()
|
|
21
21
|
|
|
22
22
|
useEffect(() => {
|
|
23
23
|
if (!data?.placeOrder?.order || error || !cartId) return
|
|
24
24
|
clearCurrentCartId()
|
|
25
25
|
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
|
26
|
-
|
|
27
|
-
}, [cartId, clearCurrentCartId, data?.placeOrder?.order, error,
|
|
26
|
+
push({ pathname: '/checkout/success', query: { cartId } })
|
|
27
|
+
}, [cartId, clearCurrentCartId, data?.placeOrder?.order, error, push])
|
|
28
28
|
|
|
29
29
|
const submit = handleSubmit(() => {})
|
|
30
30
|
|
|
@@ -5,8 +5,9 @@ import {
|
|
|
5
5
|
iconChevronLeft,
|
|
6
6
|
iconChevronRight,
|
|
7
7
|
responsiveVal,
|
|
8
|
-
|
|
8
|
+
SvgIcon,
|
|
9
9
|
ToggleButton,
|
|
10
|
+
extendableComponent,
|
|
10
11
|
} from '@graphcommerce/next-ui'
|
|
11
12
|
import {
|
|
12
13
|
Controller,
|
|
@@ -16,13 +17,13 @@ import {
|
|
|
16
17
|
useFormPersist,
|
|
17
18
|
} from '@graphcommerce/react-hook-form'
|
|
18
19
|
import { t } from '@lingui/macro'
|
|
19
|
-
import { FormControl, FormHelperText,
|
|
20
|
-
import
|
|
21
|
-
import { m } from 'framer-motion'
|
|
22
|
-
import React, { useEffect } from 'react'
|
|
20
|
+
import { Box, FormControl, FormHelperText, SxProps, Theme } from '@mui/material'
|
|
21
|
+
import { useEffect } from 'react'
|
|
23
22
|
import { usePaymentMethodContext } from '../PaymentMethodContext/PaymentMethodContext'
|
|
24
23
|
|
|
25
|
-
export type PaymentMethodTogglesProps = Pick<UseFormComposeOptions, 'step'>
|
|
24
|
+
export type PaymentMethodTogglesProps = Pick<UseFormComposeOptions, 'step'> & {
|
|
25
|
+
sx?: SxProps<Theme>
|
|
26
|
+
}
|
|
26
27
|
|
|
27
28
|
// function Content(props: PaymentMethod) {
|
|
28
29
|
// const { code } = props
|
|
@@ -31,78 +32,26 @@ export type PaymentMethodTogglesProps = Pick<UseFormComposeOptions, 'step'>
|
|
|
31
32
|
// return <Component {...props} />
|
|
32
33
|
// }
|
|
33
34
|
|
|
34
|
-
const
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
boxShadow: 'none',
|
|
49
|
-
border: `1px solid ${theme.palette.divider}`,
|
|
50
|
-
'&:focus': {
|
|
51
|
-
boxShadow: 'none',
|
|
52
|
-
},
|
|
53
|
-
},
|
|
54
|
-
leftButtonRoot: {
|
|
55
|
-
borderTopLeftRadius: 4,
|
|
56
|
-
borderBottomLeftRadius: 4,
|
|
57
|
-
},
|
|
58
|
-
rightButtonRoot: {
|
|
59
|
-
borderTopRightRadius: 4,
|
|
60
|
-
borderBottomRightRadius: 4,
|
|
61
|
-
},
|
|
62
|
-
scrollerRoot: {
|
|
63
|
-
gridAutoColumns: `max-content`,
|
|
64
|
-
gridTemplateRows: `100%`,
|
|
65
|
-
gap: responsiveVal(4, 8),
|
|
66
|
-
height: responsiveVal(60, 85),
|
|
67
|
-
borderRadius: 5,
|
|
68
|
-
},
|
|
69
|
-
toggleButton: {
|
|
70
|
-
...theme.typography.h6,
|
|
71
|
-
border: `1px solid ${theme.palette.divider}`,
|
|
72
|
-
boxShadow: 'none',
|
|
73
|
-
transition: 'color .15s ease',
|
|
74
|
-
whiteSpace: 'nowrap',
|
|
75
|
-
},
|
|
76
|
-
toggleButtonSelected: {
|
|
77
|
-
border: `1px solid ${theme.palette.secondary.main}`,
|
|
78
|
-
background: `${theme.palette.secondary.main}`,
|
|
79
|
-
color: `${theme.palette.secondary.contrastText}`,
|
|
80
|
-
'&:hover': {
|
|
81
|
-
background: `${theme.palette.secondary.main}`,
|
|
82
|
-
},
|
|
83
|
-
},
|
|
84
|
-
buttonContainer: {
|
|
85
|
-
position: 'absolute',
|
|
86
|
-
left: 0,
|
|
87
|
-
top: 0,
|
|
88
|
-
zIndex: 2,
|
|
89
|
-
height: '100%',
|
|
90
|
-
},
|
|
91
|
-
buttonContainerRight: {
|
|
92
|
-
left: 'unset',
|
|
93
|
-
right: 0,
|
|
94
|
-
},
|
|
95
|
-
}),
|
|
96
|
-
{ name: 'PaymentMethodToggles' },
|
|
97
|
-
)
|
|
35
|
+
const cmpName = 'PaymentMethodToggles' as const
|
|
36
|
+
const parts = [
|
|
37
|
+
'formRoot',
|
|
38
|
+
'root',
|
|
39
|
+
'buttonRoot',
|
|
40
|
+
'leftButtonRoot',
|
|
41
|
+
'rightButtonRoot',
|
|
42
|
+
'scrollerRoot',
|
|
43
|
+
'toggleButton',
|
|
44
|
+
'toggleButtonSelected',
|
|
45
|
+
'buttonContainer',
|
|
46
|
+
'buttonContainerRight',
|
|
47
|
+
] as const
|
|
48
|
+
const { classes } = extendableComponent(cmpName, parts)
|
|
98
49
|
|
|
99
50
|
export default function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
|
|
100
|
-
const { step } = props
|
|
51
|
+
const { step, sx = [] } = props
|
|
101
52
|
const { methods, selectedMethod, setSelectedMethod, setSelectedModule, modules } =
|
|
102
53
|
usePaymentMethodContext()
|
|
103
54
|
|
|
104
|
-
const classes = useStyles()
|
|
105
|
-
|
|
106
55
|
const form = useForm<{ code: string; paymentMethod?: string }>({
|
|
107
56
|
mode: 'onChange',
|
|
108
57
|
defaultValues: { code: selectedMethod?.code },
|
|
@@ -133,20 +82,44 @@ export default function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
|
|
|
133
82
|
if (!methods || methods.length < 1) return null
|
|
134
83
|
|
|
135
84
|
return (
|
|
136
|
-
<Form
|
|
85
|
+
<Form
|
|
86
|
+
onSubmit={submitHandler}
|
|
87
|
+
noValidate
|
|
88
|
+
className={classes.formRoot}
|
|
89
|
+
sx={[
|
|
90
|
+
{
|
|
91
|
+
padding: '5px 0',
|
|
92
|
+
},
|
|
93
|
+
...(Array.isArray(sx) ? sx : [sx]),
|
|
94
|
+
]}
|
|
95
|
+
>
|
|
137
96
|
<input type='hidden' {...register('code', { required: true })} required />
|
|
138
|
-
<FormRow className={classes.root}>
|
|
97
|
+
<FormRow className={classes.root} sx={{ position: 'relative', padding: 0 }}>
|
|
139
98
|
<ScrollerProvider scrollSnapAlign='center'>
|
|
140
|
-
<
|
|
99
|
+
<Box
|
|
100
|
+
className={classes.buttonContainer}
|
|
101
|
+
sx={{ position: 'absolute', left: 0, top: 0, zIndex: 2, height: '100%' }}
|
|
102
|
+
>
|
|
141
103
|
<ScrollerButton
|
|
142
104
|
direction='left'
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
105
|
+
className={(classes.buttonRoot, classes.leftButtonRoot)}
|
|
106
|
+
sx={(theme) => ({
|
|
107
|
+
background: theme.palette.background.paper,
|
|
108
|
+
borderRadius: 0,
|
|
109
|
+
width: 30,
|
|
110
|
+
height: responsiveVal(60, 85),
|
|
111
|
+
boxShadow: 'none',
|
|
112
|
+
border: `1px solid ${theme.palette.divider}`,
|
|
113
|
+
'&:focus': {
|
|
114
|
+
boxShadow: 'none',
|
|
115
|
+
},
|
|
116
|
+
borderTopLeftRadius: 4,
|
|
117
|
+
borderBottomLeftRadius: 4,
|
|
118
|
+
})}
|
|
146
119
|
>
|
|
147
|
-
<
|
|
120
|
+
<SvgIcon src={iconChevronLeft} size='small' />
|
|
148
121
|
</ScrollerButton>
|
|
149
|
-
</
|
|
122
|
+
</Box>
|
|
150
123
|
|
|
151
124
|
<FormControl>
|
|
152
125
|
<Controller
|
|
@@ -155,7 +128,18 @@ export default function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
|
|
|
155
128
|
name='paymentMethod'
|
|
156
129
|
rules={{ required: t`Please select a payment method` }}
|
|
157
130
|
render={({ field: { onChange, value, name, onBlur } }) => (
|
|
158
|
-
<Scroller
|
|
131
|
+
<Scroller
|
|
132
|
+
className={classes.scrollerRoot}
|
|
133
|
+
hideScrollbar
|
|
134
|
+
tabIndex={0}
|
|
135
|
+
sx={{
|
|
136
|
+
gridAutoColumns: `max-content`,
|
|
137
|
+
gridTemplateRows: `100%`,
|
|
138
|
+
gap: responsiveVal(4, 8),
|
|
139
|
+
height: responsiveVal(60, 85),
|
|
140
|
+
borderRadius: '5px',
|
|
141
|
+
}}
|
|
142
|
+
>
|
|
159
143
|
{methods?.map((pm) => {
|
|
160
144
|
const buttonValue = `${pm.code}___${pm.child}`
|
|
161
145
|
return (
|
|
@@ -166,16 +150,28 @@ export default function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
|
|
|
166
150
|
value={buttonValue}
|
|
167
151
|
color='secondary'
|
|
168
152
|
disabled={!modules?.[pm.code]}
|
|
169
|
-
|
|
170
|
-
root: classes.toggleButton,
|
|
171
|
-
selected: classes.toggleButtonSelected,
|
|
172
|
-
}}
|
|
153
|
+
className={classes.toggleButton}
|
|
173
154
|
onChange={(_, v: string) => {
|
|
174
155
|
onChange(v)
|
|
175
156
|
setValue('code', v)
|
|
176
157
|
}}
|
|
177
158
|
onBlur={onBlur}
|
|
178
159
|
selected={value === buttonValue}
|
|
160
|
+
sx={(theme) => ({
|
|
161
|
+
typography: 'h6',
|
|
162
|
+
border: `1px solid ${theme.palette.divider}`,
|
|
163
|
+
boxShadow: 'none',
|
|
164
|
+
transition: 'color .15s ease',
|
|
165
|
+
whiteSpace: 'nowrap',
|
|
166
|
+
'&.selected': {
|
|
167
|
+
border: `1px solid ${theme.palette.secondary.main}`,
|
|
168
|
+
background: `${theme.palette.secondary.main}`,
|
|
169
|
+
color: `${theme.palette.secondary.contrastText}`,
|
|
170
|
+
'&:hover': {
|
|
171
|
+
background: `${theme.palette.secondary.main}`,
|
|
172
|
+
},
|
|
173
|
+
},
|
|
174
|
+
})}
|
|
179
175
|
>
|
|
180
176
|
{!modules?.[pm.code] ? <>{pm.code}</> : <>{pm.title}</>}
|
|
181
177
|
</ToggleButton>
|
|
@@ -192,16 +188,30 @@ export default function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
|
|
|
192
188
|
)}
|
|
193
189
|
</FormControl>
|
|
194
190
|
|
|
195
|
-
<
|
|
191
|
+
<Box
|
|
192
|
+
className={`${classes.buttonContainer} ${classes.buttonContainerRight}`}
|
|
193
|
+
sx={{ position: 'absolute', right: 0, top: 0, zIndex: 2, height: '100%' }}
|
|
194
|
+
>
|
|
196
195
|
<ScrollerButton
|
|
197
196
|
direction='right'
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
197
|
+
className={`${classes.buttonRoot} ${classes.rightButtonRoot}`}
|
|
198
|
+
sx={(theme) => ({
|
|
199
|
+
background: theme.palette.background.paper,
|
|
200
|
+
borderRadius: 0,
|
|
201
|
+
width: 30,
|
|
202
|
+
height: responsiveVal(60, 85),
|
|
203
|
+
boxShadow: 'none',
|
|
204
|
+
border: `1px solid ${theme.palette.divider}`,
|
|
205
|
+
'&:focus': {
|
|
206
|
+
boxShadow: 'none',
|
|
207
|
+
},
|
|
208
|
+
borderTopRightRadius: 4,
|
|
209
|
+
borderBottomRightRadius: 4,
|
|
210
|
+
})}
|
|
201
211
|
>
|
|
202
|
-
<
|
|
212
|
+
<SvgIcon src={iconChevronRight} size='small' />
|
|
203
213
|
</ScrollerButton>
|
|
204
|
-
</
|
|
214
|
+
</Box>
|
|
205
215
|
</ScrollerProvider>
|
|
206
216
|
</FormRow>
|
|
207
217
|
</Form>
|
package/hooks/useCartLock.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useApolloClient } from '@
|
|
1
|
+
import { useApolloClient } from '@graphcommerce/graphql'
|
|
2
2
|
import { useCartQuery, useCurrentCartId } from '@graphcommerce/magento-cart'
|
|
3
3
|
import { useCallback } from 'react'
|
|
4
4
|
import { UseCartLockDocument } from './UseCartLock.gql'
|
package/package.json
CHANGED
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@graphcommerce/magento-cart-payment-method",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"engines": {
|
|
6
6
|
"node": "14.x"
|
|
7
7
|
},
|
|
8
8
|
"prettier": "@graphcommerce/prettier-config-pwa",
|
|
9
|
-
"browserslist": [
|
|
10
|
-
"extends @graphcommerce/browserslist-config-pwa"
|
|
11
|
-
],
|
|
12
9
|
"eslintConfig": {
|
|
13
10
|
"extends": "@graphcommerce/eslint-config-pwa",
|
|
14
11
|
"parserOptions": {
|
|
@@ -16,30 +13,25 @@
|
|
|
16
13
|
}
|
|
17
14
|
},
|
|
18
15
|
"devDependencies": {
|
|
19
|
-
"@graphcommerce/
|
|
20
|
-
"@graphcommerce/
|
|
21
|
-
"@graphcommerce/
|
|
22
|
-
"@
|
|
23
|
-
"@playwright/test": "^1.17.1"
|
|
16
|
+
"@graphcommerce/eslint-config-pwa": "^4.0.0",
|
|
17
|
+
"@graphcommerce/prettier-config-pwa": "^4.0.0",
|
|
18
|
+
"@graphcommerce/typescript-config-pwa": "^4.0.0",
|
|
19
|
+
"@playwright/test": "^1.18.1"
|
|
24
20
|
},
|
|
25
21
|
"dependencies": {
|
|
26
|
-
"@
|
|
27
|
-
"@graphcommerce/
|
|
28
|
-
"@graphcommerce/
|
|
29
|
-
"@graphcommerce/
|
|
30
|
-
"@graphcommerce/magento-
|
|
31
|
-
"@graphcommerce/
|
|
32
|
-
"@graphcommerce/
|
|
33
|
-
"@
|
|
34
|
-
"@
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"clsx": "^1.1.1",
|
|
38
|
-
"framer-motion": "^5.5.5",
|
|
39
|
-
"next": "^12.0.7",
|
|
22
|
+
"@graphcommerce/framer-scroller": "^2.0.0",
|
|
23
|
+
"@graphcommerce/graphql": "^3.0.0",
|
|
24
|
+
"@graphcommerce/image": "^3.0.0",
|
|
25
|
+
"@graphcommerce/magento-cart": "^4.0.0",
|
|
26
|
+
"@graphcommerce/magento-store": "^4.0.0",
|
|
27
|
+
"@graphcommerce/next-ui": "^4.0.0",
|
|
28
|
+
"@graphcommerce/react-hook-form": "^3.0.0",
|
|
29
|
+
"@lingui/macro": "^3.13.2",
|
|
30
|
+
"@mui/material": "^5.4.1",
|
|
31
|
+
"framer-motion": "^6.2.4",
|
|
32
|
+
"next": "^12.0.10",
|
|
40
33
|
"react": "^17.0.1",
|
|
41
34
|
"react-dom": "^17.0.1",
|
|
42
|
-
"type-fest": "^2.
|
|
43
|
-
}
|
|
44
|
-
"gitHead": "4f7fd2440fa20b9ad619b1172bc12deaaf8b2456"
|
|
35
|
+
"type-fest": "^2.11.2"
|
|
36
|
+
}
|
|
45
37
|
}
|