@graphcommerce/magento-cart-payment-method 2.111.46 → 3.0.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.
- package/CHANGELOG.md +120 -109
- 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 +20 -26
package/CHANGELOG.md
CHANGED
|
@@ -1,187 +1,198 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
## 3.0.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)
|
|
8
|
+
Thanks [@paales](https://github.com/paales)! - Added homepage and repository package.json files,
|
|
9
|
+
so that the packages link to back to the website and repository
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
[[`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)]:
|
|
12
|
+
- @graphcommerce/framer-scroller@2.0.1
|
|
13
|
+
- @graphcommerce/graphql@3.0.1
|
|
14
|
+
- @graphcommerce/image@3.0.1
|
|
15
|
+
- @graphcommerce/magento-cart@4.0.1
|
|
16
|
+
- @graphcommerce/magento-store@4.0.1
|
|
17
|
+
- @graphcommerce/next-ui@4.0.1
|
|
18
|
+
- @graphcommerce/react-hook-form@3.0.1
|
|
19
|
+
|
|
20
|
+
## 3.0.0
|
|
21
|
+
|
|
22
|
+
### Major Changes
|
|
23
|
+
|
|
24
|
+
- [#1258](https://github.com/ho-nl/m2-pwa/pull/1258)
|
|
25
|
+
[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)
|
|
26
|
+
Thanks [@paales](https://github.com/paales)! - Upgraded to Material UI 5
|
|
27
|
+
|
|
28
|
+
### Patch Changes
|
|
29
|
+
|
|
30
|
+
- Updated dependencies
|
|
31
|
+
[[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)]:
|
|
32
|
+
- @graphcommerce/framer-scroller@2.0.0
|
|
33
|
+
- @graphcommerce/graphql@3.0.0
|
|
34
|
+
- @graphcommerce/image@3.0.0
|
|
35
|
+
- @graphcommerce/magento-cart@4.0.0
|
|
36
|
+
- @graphcommerce/magento-store@4.0.0
|
|
37
|
+
- @graphcommerce/next-ui@4.0.0
|
|
38
|
+
- @graphcommerce/react-hook-form@3.0.0
|
|
5
39
|
|
|
6
|
-
|
|
40
|
+
All notable changes to this project will be documented in this file. See
|
|
41
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
7
42
|
|
|
43
|
+
# [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)
|
|
8
44
|
|
|
9
45
|
### Bug Fixes
|
|
10
46
|
|
|
11
|
-
|
|
12
|
-
|
|
47
|
+
- even more translations
|
|
48
|
+
([1a1f988](https://github.com/ho-nl/m2-pwa/commit/1a1f98837c704b978f6b42b619d9c52f540b2d48))
|
|
13
49
|
|
|
14
50
|
### Features
|
|
15
51
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
52
|
+
- added tons of translations
|
|
53
|
+
([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
|
|
21
54
|
|
|
22
55
|
## [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
56
|
|
|
24
|
-
|
|
25
57
|
### Bug Fixes
|
|
26
58
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
59
|
+
- remove hardcoded fontSize
|
|
60
|
+
([e4e09e1](https://github.com/ho-nl/m2-pwa/commit/e4e09e11baeb8edeff634550b8cdb88571d96911))
|
|
32
61
|
|
|
33
62
|
# [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
63
|
|
|
35
|
-
|
|
36
64
|
### Features
|
|
37
65
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
66
|
+
- shipping methods scroller
|
|
67
|
+
([3cc4413](https://github.com/ho-nl/m2-pwa/commit/3cc441320d2a3dd003c499be358a118a17e528c3))
|
|
43
68
|
|
|
44
69
|
# [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
70
|
|
|
46
|
-
|
|
47
71
|
### Features
|
|
48
72
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
73
|
+
- darkTheme
|
|
74
|
+
([968f4f1](https://github.com/ho-nl/m2-pwa/commit/968f4f1360417bf7daa36454c19e6bc5cf53ae90))
|
|
54
75
|
|
|
55
76
|
## [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
77
|
|
|
57
|
-
|
|
58
78
|
### Bug Fixes
|
|
59
79
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
80
|
+
- External SVG's can't have alt tags
|
|
81
|
+
([1b1414a](https://github.com/ho-nl/m2-pwa/commit/1b1414a782d55d3acf7b0e6bcaa50f2ad5f18f39))
|
|
65
82
|
|
|
66
83
|
## [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
84
|
|
|
68
|
-
|
|
69
85
|
### Bug Fixes
|
|
70
86
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
87
|
+
- update SvgImage to SvgImageSimple
|
|
88
|
+
([f116543](https://github.com/ho-nl/m2-pwa/commit/f116543730853fa9782abff0ccacee7032e85789))
|
|
76
89
|
|
|
77
90
|
# [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
91
|
|
|
79
|
-
|
|
80
92
|
### Features
|
|
81
93
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
94
|
+
- **nextjs:** upgraded to nextjs 12
|
|
95
|
+
([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
|
|
87
96
|
|
|
88
97
|
# [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
98
|
|
|
90
|
-
|
|
91
99
|
### Features
|
|
92
100
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
101
|
+
- **framer-scroller:** better defaults so the Scroller doesn't look broken when providing no props
|
|
102
|
+
([b177ce9](https://github.com/ho-nl/m2-pwa/commit/b177ce9570abb9ccfd4eb5cc34e43d157bb4e81a))
|
|
98
103
|
|
|
99
104
|
## [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
105
|
|
|
101
|
-
|
|
102
106
|
### Bug Fixes
|
|
103
107
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
108
|
+
- make sure we can useCartLock on the success page
|
|
109
|
+
([139349a](https://github.com/ho-nl/m2-pwa/commit/139349a73836c0c58c5d8000a801c912dbe23b3b))
|
|
109
110
|
|
|
110
111
|
## [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
112
|
|
|
112
|
-
|
|
113
113
|
### Bug Fixes
|
|
114
114
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
115
|
+
- make sure if no payment method is filled in we get an error shown
|
|
116
|
+
([a203e57](https://github.com/ho-nl/m2-pwa/commit/a203e570caad0732427a178e8e8b10b4a15d676b))
|
|
120
117
|
|
|
121
118
|
# [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
119
|
|
|
123
|
-
|
|
124
120
|
### Features
|
|
125
121
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
122
|
+
- sort payment methods by availability
|
|
123
|
+
([52f5d45](https://github.com/ho-nl/m2-pwa/commit/52f5d450a7a2fdec0c7eea9cd5d48336cb304138))
|
|
131
124
|
|
|
132
125
|
## [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
126
|
|
|
134
127
|
**Note:** Version bump only for package @graphcommerce/magento-cart-payment-method
|
|
135
128
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
129
|
# 2.105.0 (2021-09-27)
|
|
141
130
|
|
|
142
|
-
|
|
143
131
|
### Bug Fixes
|
|
144
132
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
133
|
+
- **checkout:** purchaseorder and other build in methods wouldnt properly submit
|
|
134
|
+
([331cb8e](https://github.com/ho-nl/m2-pwa/commit/331cb8e2bed58c14cd41fceeab03e2cdfbe7e6a9))
|
|
135
|
+
- do not use ToggleButtonGroup, only use the ToggleButton
|
|
136
|
+
([5172f70](https://github.com/ho-nl/m2-pwa/commit/5172f709ee26122b0a8700afb4325f23cb9ba9b9))
|
|
137
|
+
- ignore md files from triggering version updates
|
|
138
|
+
([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
|
|
139
|
+
- implement next-ui barrel imports
|
|
140
|
+
([75bea70](https://github.com/ho-nl/m2-pwa/commit/75bea703dba898f18a2a1dfa3243ebd0a4e6f0e1))
|
|
141
|
+
- paymentDone removed in favor of a more simple clearCart method
|
|
142
|
+
([5314f77](https://github.com/ho-nl/m2-pwa/commit/5314f7752c2f75a55dcd926bfc26607124561e5d))
|
|
143
|
+
- playwright can't find the place order button
|
|
144
|
+
([b1fda5b](https://github.com/ho-nl/m2-pwa/commit/b1fda5b3e403dad621aba8ed895427f2166bc985))
|
|
145
|
+
- **playwright:** checkout button was renamed
|
|
146
|
+
([09e5b79](https://github.com/ho-nl/m2-pwa/commit/09e5b79333708cfac04232d8071d1dad72968297))
|
|
147
|
+
- rename NextButton to Button, change imports
|
|
148
|
+
([976adb0](https://github.com/ho-nl/m2-pwa/commit/976adb0bf906310d1efce888dcc9be1e28ce0f1b))
|
|
154
149
|
|
|
155
150
|
### Features
|
|
156
151
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
152
|
+
- **cart:** when a cart is not active anymore show a clear cart button
|
|
153
|
+
([5d04a14](https://github.com/ho-nl/m2-pwa/commit/5d04a14726c040b20b34c0b88f923aee1dff22e5))
|
|
154
|
+
- coupon form on payment page
|
|
155
|
+
([a163961](https://github.com/ho-nl/m2-pwa/commit/a1639617be756b357177fcce255cf662c5314499))
|
|
156
|
+
- **graphql:** introduced new graphql package that holds all generated files
|
|
157
|
+
([a3e7aa0](https://github.com/ho-nl/m2-pwa/commit/a3e7aa05540540533b5ced9a95f1f802ecbe499f))
|
|
158
|
+
- **image:** introduced completely rewritten Image component
|
|
159
|
+
([e3413b3](https://github.com/ho-nl/m2-pwa/commit/e3413b3a57392d6571ea64cb8d9c8dca05ea31df))
|
|
160
|
+
- implemented checkmo payment method
|
|
161
|
+
([18525b2](https://github.com/ho-nl/m2-pwa/commit/18525b2f4efe9bd0eea12a7a992d284f341e0c68))
|
|
162
|
+
- implemented purchase order
|
|
163
|
+
([3a40033](https://github.com/ho-nl/m2-pwa/commit/3a40033cd4d6712a17bb9c41a8841ebf7aa2f025))
|
|
164
|
+
- implemented the new mollie payment api
|
|
165
|
+
([a8b38a9](https://github.com/ho-nl/m2-pwa/commit/a8b38a9a45207e180f795e81bf5ac759f01a583d))
|
|
166
|
+
- **mollie:** first version of mollie payment methods
|
|
167
|
+
([e2f7d78](https://github.com/ho-nl/m2-pwa/commit/e2f7d78e50a9afe928f1d8c478f946e03c63b0f2))
|
|
168
|
+
- **mollie:** pay with credit card made working
|
|
169
|
+
([5cda84e](https://github.com/ho-nl/m2-pwa/commit/5cda84e0b9c54238ae6adaa34f9e2ad77a708508))
|
|
170
|
+
- next.js 11
|
|
171
|
+
([7d61407](https://github.com/ho-nl/m2-pwa/commit/7d614075a778f488045034f74be4f75b93f63c43))
|
|
172
|
+
- only show free payment method when zero subtotal quote
|
|
173
|
+
([fd3ba86](https://github.com/ho-nl/m2-pwa/commit/fd3ba86d3060ebe7dc72ce27fca21464b46b4392))
|
|
174
|
+
- **payment-agreements-form:** checkout agreements checkboxes
|
|
175
|
+
([13c8164](https://github.com/ho-nl/m2-pwa/commit/13c816499d220a2ce940672a95beca508b78ddc9))
|
|
176
|
+
- **payments:** make PaymentMethodContext injectable
|
|
177
|
+
([68c664a](https://github.com/ho-nl/m2-pwa/commit/68c664adb7eb6eb86d7a819213deb87152392347))
|
|
178
|
+
- **playwright:** added new playwright package to enable browser testing
|
|
179
|
+
([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
|
|
180
|
+
- **react-hook-form:** added buttonState to ComposedSubmit
|
|
181
|
+
([57e77c2](https://github.com/ho-nl/m2-pwa/commit/57e77c29f17720f7f3ee3b63be82779c0e5d8714))
|
|
182
|
+
- renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of
|
|
183
|
+
[@reachdigital](https://github.com/reachdigital)
|
|
184
|
+
([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
|
|
185
|
+
- solve issue where the order couldn’t be submitted
|
|
186
|
+
([ec0d357](https://github.com/ho-nl/m2-pwa/commit/ec0d3579a1277976e2dc515f420996cf716f83a6))
|
|
187
|
+
- upgraded to nextjs 11
|
|
188
|
+
([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
|
|
189
|
+
- useFormMutationCart and simpler imports
|
|
190
|
+
([012f090](https://github.com/ho-nl/m2-pwa/commit/012f090e8f54d09f35d393c61ad1e2319f5a90ff))
|
|
177
191
|
|
|
178
192
|
### Reverts
|
|
179
193
|
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
194
|
+
- Revert "chore: upgrade @apollo/client"
|
|
195
|
+
([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
|
|
185
196
|
|
|
186
197
|
# Change Log
|
|
187
198
|
|
|
@@ -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,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@graphcommerce/magento-cart-payment-method",
|
|
3
|
-
"
|
|
3
|
+
"homepage": "https://www.graphcommerce.org/",
|
|
4
|
+
"repository": "github:graphcommerce-org/graphcommerce",
|
|
5
|
+
"version": "3.0.1",
|
|
4
6
|
"sideEffects": false,
|
|
5
7
|
"engines": {
|
|
6
8
|
"node": "14.x"
|
|
7
9
|
},
|
|
8
10
|
"prettier": "@graphcommerce/prettier-config-pwa",
|
|
9
|
-
"browserslist": [
|
|
10
|
-
"extends @graphcommerce/browserslist-config-pwa"
|
|
11
|
-
],
|
|
12
11
|
"eslintConfig": {
|
|
13
12
|
"extends": "@graphcommerce/eslint-config-pwa",
|
|
14
13
|
"parserOptions": {
|
|
@@ -16,30 +15,25 @@
|
|
|
16
15
|
}
|
|
17
16
|
},
|
|
18
17
|
"devDependencies": {
|
|
19
|
-
"@graphcommerce/
|
|
20
|
-
"@graphcommerce/
|
|
21
|
-
"@graphcommerce/
|
|
22
|
-
"@
|
|
23
|
-
"@playwright/test": "^1.17.1"
|
|
18
|
+
"@graphcommerce/eslint-config-pwa": "^4.0.1",
|
|
19
|
+
"@graphcommerce/prettier-config-pwa": "^4.0.1",
|
|
20
|
+
"@graphcommerce/typescript-config-pwa": "^4.0.1",
|
|
21
|
+
"@playwright/test": "^1.18.1"
|
|
24
22
|
},
|
|
25
23
|
"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",
|
|
24
|
+
"@graphcommerce/framer-scroller": "^2.0.1",
|
|
25
|
+
"@graphcommerce/graphql": "^3.0.1",
|
|
26
|
+
"@graphcommerce/image": "^3.0.1",
|
|
27
|
+
"@graphcommerce/magento-cart": "^4.0.1",
|
|
28
|
+
"@graphcommerce/magento-store": "^4.0.1",
|
|
29
|
+
"@graphcommerce/next-ui": "^4.0.1",
|
|
30
|
+
"@graphcommerce/react-hook-form": "^3.0.1",
|
|
31
|
+
"@lingui/macro": "^3.13.2",
|
|
32
|
+
"@mui/material": "^5.4.1",
|
|
33
|
+
"framer-motion": "^6.2.4",
|
|
34
|
+
"next": "^12.0.10",
|
|
40
35
|
"react": "^17.0.1",
|
|
41
36
|
"react-dom": "^17.0.1",
|
|
42
|
-
"type-fest": "^2.
|
|
43
|
-
}
|
|
44
|
-
"gitHead": "110ddb032ee3ce6e363b9f5f7d21af71fb51b527"
|
|
37
|
+
"type-fest": "^2.11.2"
|
|
38
|
+
}
|
|
45
39
|
}
|