@graphcommerce/magento-cart-payment-method 2.111.47 β†’ 3.0.2

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 +2 -2
  2. package/CHANGELOG.md +173 -109
  3. package/PaymentMethodButton/PaymentMethodButton.tsx +5 -6
  4. package/PaymentMethodOptions/PaymentMethodOptions.tsx +15 -15
  5. package/PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop.tsx +3 -3
  6. package/PaymentMethodToggles/PaymentMethodToggles.tsx +102 -92
  7. package/hooks/useCartLock.ts +1 -1
  8. package/package.json +23 -27
package/Api/PaymentMethod.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ButtonProps } from '@graphcommerce/next-ui/Button'
1
+ import { LinkOrButtonProps } from '@graphcommerce/next-ui'
2
2
  import { UseFormComposeOptions } from '@graphcommerce/react-hook-form'
3
3
  import React from 'react'
4
4
  import { AvailablePaymentMethodFragment } from './AvailablePaymentMethod/AvailablePaymentMethod.gql'
@@ -15,7 +15,7 @@ export type PaymentMethod = Partial<AvailablePaymentMethodFragment> &
15
15
  export type PaymentMethodOptionsProps = Pick<UseFormComposeOptions, 'step'> & {
16
16
  Container: React.FC
17
17
  }
18
- export type PaymentButtonProps = PaymentMethod & { buttonProps: ButtonProps }
18
+ export type PaymentButtonProps = PaymentMethod & { buttonProps: LinkOrButtonProps }
19
19
  export type PaymentOptionsProps = PaymentMethod & PaymentMethodOptionsProps
20
20
 
21
21
  export type PaymentToggleProps = PaymentMethod
package/CHANGELOG.md CHANGED
@@ -1,187 +1,251 @@
1
1
  # Change Log
2
2
 
3
- All notable changes to this project will be documented in this file.
4
- See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
3
+ ## 3.0.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#1274](https://github.com/ho-nl/m2-pwa/pull/1274)
8
+ [`381e4c86a`](https://github.com/ho-nl/m2-pwa/commit/381e4c86a8321ce96e1fa5c7d3c0a0c0ff3e02c7)
9
+ Thanks [@paales](https://github.com/paales)! - Moved `ApolloErrorAlert`, `ApolloErrorFullPage` and
10
+ `ApolloErrorSnackbar` to the ecommerce-ui package.
11
+
12
+ Created `ComposedSubmitButton` and `ComposedSubmitLinkOrButton` to reduce complexity from
13
+ `magento-graphcms` example.
14
+
15
+ Removed dependency an `@graphcommerce/react-hook-form` from `magento-graphcms` example.
16
+
17
+ Added dependency `@graphcommerce/ecommerce-ui` from `magento-graphcms` example.
18
+
19
+ * [#1276](https://github.com/ho-nl/m2-pwa/pull/1276)
20
+ [`ce09388e0`](https://github.com/ho-nl/m2-pwa/commit/ce09388e0d7ef33aee660612340f6fbae15ceec2)
21
+ Thanks [@paales](https://github.com/paales)! - We've moved lots of internal packages from
22
+ `dependencies` to `peerDependencies`. The result of this is that there will be significantly less
23
+ duplicate packages in the node_modules folders.
24
+
25
+ - [#1274](https://github.com/ho-nl/m2-pwa/pull/1274)
26
+ [`b08a8eb1d`](https://github.com/ho-nl/m2-pwa/commit/b08a8eb1d024b9d3e7712ef034029151670db275)
27
+ Thanks [@paales](https://github.com/paales)! - Fixed extraction of translations and updated
28
+ various translations for english πŸ‡ΊπŸ‡ΈπŸ‡¬πŸ‡§ and dutch πŸ‡³πŸ‡±
29
+
30
+ * [#1276](https://github.com/ho-nl/m2-pwa/pull/1276)
31
+ [`52a45bba4`](https://github.com/ho-nl/m2-pwa/commit/52a45bba4dc6dd6df3c81f5023df7d23ed8a534d)
32
+ Thanks [@paales](https://github.com/paales)! - Upgraded to
33
+ [NextJS 12.1](https://nextjs.org/blog/next-12-1)! This is just for compatibility, but we'll be
34
+ implementing
35
+ [On-demand Incremental Static Regeneration](https://nextjs.org/blog/next-12-1#on-demand-incremental-static-regeneration-beta)
36
+ soon.
37
+
38
+ This will greatly reduce the requirement to rebuid stuff and we'll add a management UI on the
39
+ frontend to be able to revalidate pages manually.
40
+
41
+ * Updated dependencies
42
+ [[`381e4c86a`](https://github.com/ho-nl/m2-pwa/commit/381e4c86a8321ce96e1fa5c7d3c0a0c0ff3e02c7),
43
+ [`ce09388e0`](https://github.com/ho-nl/m2-pwa/commit/ce09388e0d7ef33aee660612340f6fbae15ceec2),
44
+ [`e7c8e2756`](https://github.com/ho-nl/m2-pwa/commit/e7c8e2756d637cbcd2e793d62ef5721d35d9fa7b),
45
+ [`b08a8eb1d`](https://github.com/ho-nl/m2-pwa/commit/b08a8eb1d024b9d3e7712ef034029151670db275),
46
+ [`52a45bba4`](https://github.com/ho-nl/m2-pwa/commit/52a45bba4dc6dd6df3c81f5023df7d23ed8a534d),
47
+ [`5a4809b1a`](https://github.com/ho-nl/m2-pwa/commit/5a4809b1a705aa32f620f520085df48ee25f9949)]:
48
+ - @graphcommerce/magento-cart@4.1.1
49
+ - @graphcommerce/next-ui@4.1.1
50
+ - @graphcommerce/react-hook-form@3.0.2
51
+ - @graphcommerce/framer-scroller@2.0.2
52
+ - @graphcommerce/graphql@3.0.2
53
+ - @graphcommerce/image@3.0.2
54
+ - @graphcommerce/magento-store@4.0.2
55
+
56
+ ## 3.0.1
57
+
58
+ ### Patch Changes
59
+
60
+ - [`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)
61
+ Thanks [@paales](https://github.com/paales)! - Added homepage and repository package.json files,
62
+ so that the packages link to back to the website and repository
63
+ - Updated dependencies
64
+ [[`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)]:
65
+ - @graphcommerce/framer-scroller@2.0.1
66
+ - @graphcommerce/graphql@3.0.1
67
+ - @graphcommerce/image@3.0.1
68
+ - @graphcommerce/magento-cart@4.0.1
69
+ - @graphcommerce/magento-store@4.0.1
70
+ - @graphcommerce/next-ui@4.0.1
71
+ - @graphcommerce/react-hook-form@3.0.1
72
+
73
+ ## 3.0.0
74
+
75
+ ### Major Changes
76
+
77
+ - [#1258](https://github.com/ho-nl/m2-pwa/pull/1258)
78
+ [`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)
79
+ Thanks [@paales](https://github.com/paales)! - Upgraded to Material UI 5
80
+
81
+ ### Patch Changes
82
+
83
+ - Updated dependencies
84
+ [[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)]:
85
+ - @graphcommerce/framer-scroller@2.0.0
86
+ - @graphcommerce/graphql@3.0.0
87
+ - @graphcommerce/image@3.0.0
88
+ - @graphcommerce/magento-cart@4.0.0
89
+ - @graphcommerce/magento-store@4.0.0
90
+ - @graphcommerce/next-ui@4.0.0
91
+ - @graphcommerce/react-hook-form@3.0.0
5
92
 
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)
93
+ All notable changes to this project will be documented in this file. See
94
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
7
95
 
96
+ # [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
97
 
9
98
  ### Bug Fixes
10
99
 
11
- * even more translations ([1a1f988](https://github.com/ho-nl/m2-pwa/commit/1a1f98837c704b978f6b42b619d9c52f540b2d48))
12
-
100
+ - even more translations
101
+ ([1a1f988](https://github.com/ho-nl/m2-pwa/commit/1a1f98837c704b978f6b42b619d9c52f540b2d48))
13
102
 
14
103
  ### Features
15
104
 
16
- * added tons of translations ([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
17
-
18
-
19
-
20
-
105
+ - added tons of translations
106
+ ([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
21
107
 
22
108
  ## [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
109
 
24
-
25
110
  ### Bug Fixes
26
111
 
27
- * remove hardcoded fontSize ([e4e09e1](https://github.com/ho-nl/m2-pwa/commit/e4e09e11baeb8edeff634550b8cdb88571d96911))
28
-
29
-
30
-
31
-
112
+ - remove hardcoded fontSize
113
+ ([e4e09e1](https://github.com/ho-nl/m2-pwa/commit/e4e09e11baeb8edeff634550b8cdb88571d96911))
32
114
 
33
115
  # [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
116
 
35
-
36
117
  ### Features
37
118
 
38
- * shipping methods scroller ([3cc4413](https://github.com/ho-nl/m2-pwa/commit/3cc441320d2a3dd003c499be358a118a17e528c3))
39
-
40
-
41
-
42
-
119
+ - shipping methods scroller
120
+ ([3cc4413](https://github.com/ho-nl/m2-pwa/commit/3cc441320d2a3dd003c499be358a118a17e528c3))
43
121
 
44
122
  # [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
123
 
46
-
47
124
  ### Features
48
125
 
49
- * darkTheme ([968f4f1](https://github.com/ho-nl/m2-pwa/commit/968f4f1360417bf7daa36454c19e6bc5cf53ae90))
50
-
51
-
52
-
53
-
126
+ - darkTheme
127
+ ([968f4f1](https://github.com/ho-nl/m2-pwa/commit/968f4f1360417bf7daa36454c19e6bc5cf53ae90))
54
128
 
55
129
  ## [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
130
 
57
-
58
131
  ### Bug Fixes
59
132
 
60
- * External SVG's can't have alt tags ([1b1414a](https://github.com/ho-nl/m2-pwa/commit/1b1414a782d55d3acf7b0e6bcaa50f2ad5f18f39))
61
-
62
-
63
-
64
-
133
+ - External SVG's can't have alt tags
134
+ ([1b1414a](https://github.com/ho-nl/m2-pwa/commit/1b1414a782d55d3acf7b0e6bcaa50f2ad5f18f39))
65
135
 
66
136
  ## [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
137
 
68
-
69
138
  ### Bug Fixes
70
139
 
71
- * update SvgImage to SvgImageSimple ([f116543](https://github.com/ho-nl/m2-pwa/commit/f116543730853fa9782abff0ccacee7032e85789))
72
-
73
-
74
-
75
-
140
+ - update SvgImage to SvgImageSimple
141
+ ([f116543](https://github.com/ho-nl/m2-pwa/commit/f116543730853fa9782abff0ccacee7032e85789))
76
142
 
77
143
  # [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
144
 
79
-
80
145
  ### Features
81
146
 
82
- * **nextjs:** upgraded to nextjs 12 ([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
83
-
84
-
85
-
86
-
147
+ - **nextjs:** upgraded to nextjs 12
148
+ ([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
87
149
 
88
150
  # [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
151
 
90
-
91
152
  ### Features
92
153
 
93
- * **framer-scroller:** better defaults so the Scroller doesn't look broken when providing no props ([b177ce9](https://github.com/ho-nl/m2-pwa/commit/b177ce9570abb9ccfd4eb5cc34e43d157bb4e81a))
94
-
95
-
96
-
97
-
154
+ - **framer-scroller:** better defaults so the Scroller doesn't look broken when providing no props
155
+ ([b177ce9](https://github.com/ho-nl/m2-pwa/commit/b177ce9570abb9ccfd4eb5cc34e43d157bb4e81a))
98
156
 
99
157
  ## [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
158
 
101
-
102
159
  ### Bug Fixes
103
160
 
104
- * make sure we can useCartLock on the success page ([139349a](https://github.com/ho-nl/m2-pwa/commit/139349a73836c0c58c5d8000a801c912dbe23b3b))
105
-
106
-
107
-
108
-
161
+ - make sure we can useCartLock on the success page
162
+ ([139349a](https://github.com/ho-nl/m2-pwa/commit/139349a73836c0c58c5d8000a801c912dbe23b3b))
109
163
 
110
164
  ## [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
165
 
112
-
113
166
  ### Bug Fixes
114
167
 
115
- * make sure if no payment method is filled in we get an error shown ([a203e57](https://github.com/ho-nl/m2-pwa/commit/a203e570caad0732427a178e8e8b10b4a15d676b))
116
-
117
-
118
-
119
-
168
+ - make sure if no payment method is filled in we get an error shown
169
+ ([a203e57](https://github.com/ho-nl/m2-pwa/commit/a203e570caad0732427a178e8e8b10b4a15d676b))
120
170
 
121
171
  # [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
172
 
123
-
124
173
  ### Features
125
174
 
126
- * sort payment methods by availability ([52f5d45](https://github.com/ho-nl/m2-pwa/commit/52f5d450a7a2fdec0c7eea9cd5d48336cb304138))
127
-
128
-
129
-
130
-
175
+ - sort payment methods by availability
176
+ ([52f5d45](https://github.com/ho-nl/m2-pwa/commit/52f5d450a7a2fdec0c7eea9cd5d48336cb304138))
131
177
 
132
178
  ## [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
179
 
134
180
  **Note:** Version bump only for package @graphcommerce/magento-cart-payment-method
135
181
 
136
-
137
-
138
-
139
-
140
182
  # 2.105.0 (2021-09-27)
141
183
 
142
-
143
184
  ### Bug Fixes
144
185
 
145
- * **checkout:** purchaseorder and other build in methods wouldnt properly submit ([331cb8e](https://github.com/ho-nl/m2-pwa/commit/331cb8e2bed58c14cd41fceeab03e2cdfbe7e6a9))
146
- * do not use ToggleButtonGroup, only use the ToggleButton ([5172f70](https://github.com/ho-nl/m2-pwa/commit/5172f709ee26122b0a8700afb4325f23cb9ba9b9))
147
- * ignore md files from triggering version updates ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
148
- * implement next-ui barrel imports ([75bea70](https://github.com/ho-nl/m2-pwa/commit/75bea703dba898f18a2a1dfa3243ebd0a4e6f0e1))
149
- * paymentDone removed in favor of a more simple clearCart method ([5314f77](https://github.com/ho-nl/m2-pwa/commit/5314f7752c2f75a55dcd926bfc26607124561e5d))
150
- * playwright can't find the place order button ([b1fda5b](https://github.com/ho-nl/m2-pwa/commit/b1fda5b3e403dad621aba8ed895427f2166bc985))
151
- * **playwright:** checkout button was renamed ([09e5b79](https://github.com/ho-nl/m2-pwa/commit/09e5b79333708cfac04232d8071d1dad72968297))
152
- * rename NextButton to Button, change imports ([976adb0](https://github.com/ho-nl/m2-pwa/commit/976adb0bf906310d1efce888dcc9be1e28ce0f1b))
153
-
186
+ - **checkout:** purchaseorder and other build in methods wouldnt properly submit
187
+ ([331cb8e](https://github.com/ho-nl/m2-pwa/commit/331cb8e2bed58c14cd41fceeab03e2cdfbe7e6a9))
188
+ - do not use ToggleButtonGroup, only use the ToggleButton
189
+ ([5172f70](https://github.com/ho-nl/m2-pwa/commit/5172f709ee26122b0a8700afb4325f23cb9ba9b9))
190
+ - ignore md files from triggering version updates
191
+ ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
192
+ - implement next-ui barrel imports
193
+ ([75bea70](https://github.com/ho-nl/m2-pwa/commit/75bea703dba898f18a2a1dfa3243ebd0a4e6f0e1))
194
+ - paymentDone removed in favor of a more simple clearCart method
195
+ ([5314f77](https://github.com/ho-nl/m2-pwa/commit/5314f7752c2f75a55dcd926bfc26607124561e5d))
196
+ - playwright can't find the place order button
197
+ ([b1fda5b](https://github.com/ho-nl/m2-pwa/commit/b1fda5b3e403dad621aba8ed895427f2166bc985))
198
+ - **playwright:** checkout button was renamed
199
+ ([09e5b79](https://github.com/ho-nl/m2-pwa/commit/09e5b79333708cfac04232d8071d1dad72968297))
200
+ - rename NextButton to Button, change imports
201
+ ([976adb0](https://github.com/ho-nl/m2-pwa/commit/976adb0bf906310d1efce888dcc9be1e28ce0f1b))
154
202
 
155
203
  ### Features
156
204
 
157
- * **cart:** when a cart is not active anymore show a clear cart button ([5d04a14](https://github.com/ho-nl/m2-pwa/commit/5d04a14726c040b20b34c0b88f923aee1dff22e5))
158
- * coupon form on payment page ([a163961](https://github.com/ho-nl/m2-pwa/commit/a1639617be756b357177fcce255cf662c5314499))
159
- * **graphql:** introduced new graphql package that holds all generated files ([a3e7aa0](https://github.com/ho-nl/m2-pwa/commit/a3e7aa05540540533b5ced9a95f1f802ecbe499f))
160
- * **image:** introduced completely rewritten Image component ([e3413b3](https://github.com/ho-nl/m2-pwa/commit/e3413b3a57392d6571ea64cb8d9c8dca05ea31df))
161
- * implemented checkmo payment method ([18525b2](https://github.com/ho-nl/m2-pwa/commit/18525b2f4efe9bd0eea12a7a992d284f341e0c68))
162
- * implemented purchase order ([3a40033](https://github.com/ho-nl/m2-pwa/commit/3a40033cd4d6712a17bb9c41a8841ebf7aa2f025))
163
- * implemented the new mollie payment api ([a8b38a9](https://github.com/ho-nl/m2-pwa/commit/a8b38a9a45207e180f795e81bf5ac759f01a583d))
164
- * **mollie:** first version of mollie payment methods ([e2f7d78](https://github.com/ho-nl/m2-pwa/commit/e2f7d78e50a9afe928f1d8c478f946e03c63b0f2))
165
- * **mollie:** pay with credit card made working ([5cda84e](https://github.com/ho-nl/m2-pwa/commit/5cda84e0b9c54238ae6adaa34f9e2ad77a708508))
166
- * next.js 11 ([7d61407](https://github.com/ho-nl/m2-pwa/commit/7d614075a778f488045034f74be4f75b93f63c43))
167
- * only show free payment method when zero subtotal quote ([fd3ba86](https://github.com/ho-nl/m2-pwa/commit/fd3ba86d3060ebe7dc72ce27fca21464b46b4392))
168
- * **payment-agreements-form:** checkout agreements checkboxes ([13c8164](https://github.com/ho-nl/m2-pwa/commit/13c816499d220a2ce940672a95beca508b78ddc9))
169
- * **payments:** make PaymentMethodContext injectable ([68c664a](https://github.com/ho-nl/m2-pwa/commit/68c664adb7eb6eb86d7a819213deb87152392347))
170
- * **playwright:** added new playwright package to enable browser testing ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
171
- * **react-hook-form:** added buttonState to ComposedSubmit ([57e77c2](https://github.com/ho-nl/m2-pwa/commit/57e77c29f17720f7f3ee3b63be82779c0e5d8714))
172
- * renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of [@reachdigital](https://github.com/reachdigital) ([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
173
- * solve issue where the order couldn’t be submitted ([ec0d357](https://github.com/ho-nl/m2-pwa/commit/ec0d3579a1277976e2dc515f420996cf716f83a6))
174
- * upgraded to nextjs 11 ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
175
- * useFormMutationCart and simpler imports ([012f090](https://github.com/ho-nl/m2-pwa/commit/012f090e8f54d09f35d393c61ad1e2319f5a90ff))
176
-
205
+ - **cart:** when a cart is not active anymore show a clear cart button
206
+ ([5d04a14](https://github.com/ho-nl/m2-pwa/commit/5d04a14726c040b20b34c0b88f923aee1dff22e5))
207
+ - coupon form on payment page
208
+ ([a163961](https://github.com/ho-nl/m2-pwa/commit/a1639617be756b357177fcce255cf662c5314499))
209
+ - **graphql:** introduced new graphql package that holds all generated files
210
+ ([a3e7aa0](https://github.com/ho-nl/m2-pwa/commit/a3e7aa05540540533b5ced9a95f1f802ecbe499f))
211
+ - **image:** introduced completely rewritten Image component
212
+ ([e3413b3](https://github.com/ho-nl/m2-pwa/commit/e3413b3a57392d6571ea64cb8d9c8dca05ea31df))
213
+ - implemented checkmo payment method
214
+ ([18525b2](https://github.com/ho-nl/m2-pwa/commit/18525b2f4efe9bd0eea12a7a992d284f341e0c68))
215
+ - implemented purchase order
216
+ ([3a40033](https://github.com/ho-nl/m2-pwa/commit/3a40033cd4d6712a17bb9c41a8841ebf7aa2f025))
217
+ - implemented the new mollie payment api
218
+ ([a8b38a9](https://github.com/ho-nl/m2-pwa/commit/a8b38a9a45207e180f795e81bf5ac759f01a583d))
219
+ - **mollie:** first version of mollie payment methods
220
+ ([e2f7d78](https://github.com/ho-nl/m2-pwa/commit/e2f7d78e50a9afe928f1d8c478f946e03c63b0f2))
221
+ - **mollie:** pay with credit card made working
222
+ ([5cda84e](https://github.com/ho-nl/m2-pwa/commit/5cda84e0b9c54238ae6adaa34f9e2ad77a708508))
223
+ - next.js 11
224
+ ([7d61407](https://github.com/ho-nl/m2-pwa/commit/7d614075a778f488045034f74be4f75b93f63c43))
225
+ - only show free payment method when zero subtotal quote
226
+ ([fd3ba86](https://github.com/ho-nl/m2-pwa/commit/fd3ba86d3060ebe7dc72ce27fca21464b46b4392))
227
+ - **payment-agreements-form:** checkout agreements checkboxes
228
+ ([13c8164](https://github.com/ho-nl/m2-pwa/commit/13c816499d220a2ce940672a95beca508b78ddc9))
229
+ - **payments:** make PaymentMethodContext injectable
230
+ ([68c664a](https://github.com/ho-nl/m2-pwa/commit/68c664adb7eb6eb86d7a819213deb87152392347))
231
+ - **playwright:** added new playwright package to enable browser testing
232
+ ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
233
+ - **react-hook-form:** added buttonState to ComposedSubmit
234
+ ([57e77c2](https://github.com/ho-nl/m2-pwa/commit/57e77c29f17720f7f3ee3b63be82779c0e5d8714))
235
+ - renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of
236
+ [@reachdigital](https://github.com/reachdigital)
237
+ ([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
238
+ - solve issue where the order couldn’t be submitted
239
+ ([ec0d357](https://github.com/ho-nl/m2-pwa/commit/ec0d3579a1277976e2dc515f420996cf716f83a6))
240
+ - upgraded to nextjs 11
241
+ ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
242
+ - useFormMutationCart and simpler imports
243
+ ([012f090](https://github.com/ho-nl/m2-pwa/commit/012f090e8f54d09f35d393c61ad1e2319f5a90ff))
177
244
 
178
245
  ### Reverts
179
246
 
180
- * Revert "chore: upgrade @apollo/client" ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
181
-
182
-
183
-
184
-
247
+ - Revert "chore: upgrade @apollo/client"
248
+ ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
185
249
 
186
250
  # Change Log
187
251
 
package/PaymentMethodButton/PaymentMethodButton.tsx CHANGED
@@ -1,13 +1,12 @@
1
1
  import { ApolloCartErrorAlert } from '@graphcommerce/magento-cart'
2
- import { Button, ButtonProps } from '@graphcommerce/next-ui'
2
+ import { Button, ButtonProps, LinkOrButton, LinkOrButtonProps } 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
- export type PaymentMethodButtonProps = ButtonProps & { display?: 'inline' | 'block' }
6
+ export type PaymentMethodButtonProps = LinkOrButtonProps & { display?: 'inline' | 'block' }
8
7
 
9
8
  export function PaymentMethodButtonRenderer(
10
- props: { buttonProps: ButtonProps } & ComposedSubmitRenderComponentProps,
9
+ props: { buttonProps: LinkOrButtonProps } & ComposedSubmitRenderComponentProps,
11
10
  ) {
12
11
  const { buttonProps, error, buttonState, submit } = props
13
12
  const { selectedMethod, selectedModule } = usePaymentMethodContext()
@@ -19,7 +18,7 @@ export function PaymentMethodButtonRenderer(
19
18
  return (
20
19
  <>
21
20
  {!PaymentButton || !selectedMethod?.code ? (
22
- <Button
21
+ <LinkOrButton
23
22
  {...btnProps}
24
23
  onClick={submit}
25
24
  loading={buttonState.isSubmitting || (buttonState.isSubmitSuccessful && !error)}
@@ -31,7 +30,7 @@ export function PaymentMethodButtonRenderer(
31
30
  (<em>{selectedMethod?.title}</em>)
32
31
  </>
33
32
  )}
34
- </Button>
33
+ </LinkOrButton>
35
34
  ) : (
36
35
  <PaymentButton
37
36
  {...selectedMethod}
package/PaymentMethodOptions/PaymentMethodOptions.tsx CHANGED
@@ -1,31 +1,31 @@
1
- import { AnimatedRow } from '@graphcommerce/next-ui'
2
- import { makeStyles, Theme } from '@material-ui/core'
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 useStyles = makeStyles(
8
- (theme: Theme) => ({
9
- root: {
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(props: PaymentMethodOptionsProps) {
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
- <div className={classes.root}>
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} {...props} />
25
+ <selectedModule.PaymentOptions {...selectedMethod} {...optionsProps} />
26
26
  </AnimatedRow>
27
27
  )}
28
28
  </AnimatePresence>
29
- </div>
29
+ </Box>
30
30
  )
31
31
  }
package/PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop.tsx CHANGED
@@ -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 router = useRouter()
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
- router.push({ pathname: '/checkout/success', query: { cartId } })
27
- }, [cartId, clearCurrentCartId, data?.placeOrder?.order, error, router])
26
+ push({ pathname: '/checkout/success', query: { cartId } })
27
+ }, [cartId, clearCurrentCartId, data?.placeOrder?.order, error, push])
28
28
 
29
29
  const submit = handleSubmit(() => {})
30
30
 
package/PaymentMethodToggles/PaymentMethodToggles.tsx CHANGED
@@ -5,8 +5,9 @@ import {
5
5
  iconChevronLeft,
6
6
  iconChevronRight,
7
7
  responsiveVal,
8
- SvgImageSimple,
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, makeStyles, Theme } from '@material-ui/core'
20
- import clsx from 'clsx'
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 useStyles = makeStyles(
35
- (theme: Theme) => ({
36
- formRoot: {
37
- padding: '5px 0',
38
- },
39
- root: {
40
- position: 'relative',
41
- padding: 0,
42
- },
43
- buttonRoot: {
44
- background: theme.palette.background.paper,
45
- borderRadius: 0,
46
- width: 30,
47
- height: responsiveVal(60, 85),
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 onSubmit={submitHandler} noValidate classes={{ root: classes.formRoot }}>
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
- <m.div className={classes.buttonContainer}>
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
- classes={{
144
- root: clsx(classes.buttonRoot, classes.leftButtonRoot),
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
- <SvgImageSimple src={iconChevronLeft} size='small' />
120
+ <SvgIcon src={iconChevronLeft} size='small' />
148
121
  </ScrollerButton>
149
- </m.div>
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 className={classes.scrollerRoot} hideScrollbar tabIndex={0}>
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
- classes={{
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
- <m.div className={clsx(classes.buttonContainer, classes.buttonContainerRight)}>
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
- classes={{
199
- root: clsx(classes.buttonRoot, classes.rightButtonRoot),
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
- <SvgImageSimple src={iconChevronRight} size='small' />
212
+ <SvgIcon src={iconChevronRight} size='small' />
203
213
  </ScrollerButton>
204
- </m.div>
214
+ </Box>
205
215
  </ScrollerProvider>
206
216
  </FormRow>
207
217
  </Form>
package/hooks/useCartLock.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { useApolloClient } from '@apollo/client'
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
- "version": "2.111.47",
3
+ "homepage": "https://www.graphcommerce.org/",
4
+ "repository": "github:graphcommerce-org/graphcommerce",
5
+ "version": "3.0.2",
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,27 @@
16
15
  }
17
16
  },
18
17
  "devDependencies": {
19
- "@graphcommerce/browserslist-config-pwa": "^3.0.3",
20
- "@graphcommerce/eslint-config-pwa": "^3.1.10",
21
- "@graphcommerce/prettier-config-pwa": "^3.0.5",
22
- "@graphcommerce/typescript-config-pwa": "^3.1.2",
23
- "@playwright/test": "^1.17.1"
18
+ "@graphcommerce/eslint-config-pwa": "^4.0.2",
19
+ "@graphcommerce/prettier-config-pwa": "^4.0.1",
20
+ "@graphcommerce/typescript-config-pwa": "^4.0.1",
21
+ "@playwright/test": "^1.19.1"
24
22
  },
25
23
  "dependencies": {
26
- "@apollo/client": "^3.5.6",
27
- "@graphcommerce/framer-scroller": "^1.2.12",
28
- "@graphcommerce/graphql": "^2.105.13",
29
- "@graphcommerce/image": "^2.105.13",
30
- "@graphcommerce/magento-cart": "^3.10.3",
31
- "@graphcommerce/magento-store": "^3.4.12",
32
- "@graphcommerce/next-ui": "^3.25.3",
33
- "@graphcommerce/react-hook-form": "^2.104.7",
34
- "@lingui/macro": "^3.13.0",
35
- "@material-ui/core": "^4.12.3",
36
- "@material-ui/lab": "^4.0.0-alpha.60",
37
- "clsx": "^1.1.1",
38
- "framer-motion": "^5.5.5",
39
- "next": "^12.0.7",
40
- "react": "^17.0.1",
41
- "react-dom": "^17.0.1",
42
- "type-fest": "^2.8.0"
24
+ "@graphcommerce/framer-scroller": "^2.0.2",
25
+ "@graphcommerce/graphql": "^3.0.2",
26
+ "@graphcommerce/image": "^3.0.2",
27
+ "@graphcommerce/magento-cart": "^4.1.1",
28
+ "@graphcommerce/magento-store": "^4.0.2",
29
+ "@graphcommerce/next-ui": "^4.1.1",
30
+ "@graphcommerce/react-hook-form": "^3.0.2",
31
+ "type-fest": "^2.11.2"
43
32
  },
44
- "gitHead": "41e42c8cd6f565ab0cbba81a1954a0041dc46768"
33
+ "peerDependencies": {
34
+ "@lingui/macro": "^3.13.2",
35
+ "@mui/material": "^5.4.1",
36
+ "framer-motion": "^6.2.4",
37
+ "next": "^12.0.10",
38
+ "react": "^17.0.1",
39
+ "react-dom": "^17.0.1"
40
+ }
45
41
  }