@graphcommerce/magento-cart-items 2.110.48 → 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.
- package/CHANGELOG.md +147 -104
- package/CartItem/CartItem.tsx +163 -141
- package/CartItem/CartItemOptionDropdown.tsx +44 -38
- package/DeliveryLabel/DeliveryLabel.tsx +34 -33
- package/RemoveItemFromCart/RemoveItemFromCartFab.tsx +8 -7
- package/package.json +22 -26
package/CHANGELOG.md
CHANGED
|
@@ -1,185 +1,228 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
## 3.0.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1276](https://github.com/ho-nl/m2-pwa/pull/1276)
|
|
8
|
+
[`ce09388e0`](https://github.com/ho-nl/m2-pwa/commit/ce09388e0d7ef33aee660612340f6fbae15ceec2)
|
|
9
|
+
Thanks [@paales](https://github.com/paales)! - We've moved lots of internal packages from
|
|
10
|
+
`dependencies` to `peerDependencies`. The result of this is that there will be significantly less
|
|
11
|
+
duplicate packages in the node_modules folders.
|
|
12
|
+
|
|
13
|
+
* [#1276](https://github.com/ho-nl/m2-pwa/pull/1276)
|
|
14
|
+
[`52a45bba4`](https://github.com/ho-nl/m2-pwa/commit/52a45bba4dc6dd6df3c81f5023df7d23ed8a534d)
|
|
15
|
+
Thanks [@paales](https://github.com/paales)! - Upgraded to
|
|
16
|
+
[NextJS 12.1](https://nextjs.org/blog/next-12-1)! This is just for compatibility, but we'll be
|
|
17
|
+
implementing
|
|
18
|
+
[On-demand Incremental Static Regeneration](https://nextjs.org/blog/next-12-1#on-demand-incremental-static-regeneration-beta)
|
|
19
|
+
soon.
|
|
20
|
+
|
|
21
|
+
This will greatly reduce the requirement to rebuid stuff and we'll add a management UI on the
|
|
22
|
+
frontend to be able to revalidate pages manually.
|
|
23
|
+
|
|
24
|
+
* Updated dependencies
|
|
25
|
+
[[`381e4c86a`](https://github.com/ho-nl/m2-pwa/commit/381e4c86a8321ce96e1fa5c7d3c0a0c0ff3e02c7),
|
|
26
|
+
[`ce09388e0`](https://github.com/ho-nl/m2-pwa/commit/ce09388e0d7ef33aee660612340f6fbae15ceec2),
|
|
27
|
+
[`e7c8e2756`](https://github.com/ho-nl/m2-pwa/commit/e7c8e2756d637cbcd2e793d62ef5721d35d9fa7b),
|
|
28
|
+
[`b08a8eb1d`](https://github.com/ho-nl/m2-pwa/commit/b08a8eb1d024b9d3e7712ef034029151670db275),
|
|
29
|
+
[`52a45bba4`](https://github.com/ho-nl/m2-pwa/commit/52a45bba4dc6dd6df3c81f5023df7d23ed8a534d),
|
|
30
|
+
[`5a4809b1a`](https://github.com/ho-nl/m2-pwa/commit/5a4809b1a705aa32f620f520085df48ee25f9949)]:
|
|
31
|
+
- @graphcommerce/magento-cart@4.1.1
|
|
32
|
+
- @graphcommerce/magento-customer@4.1.1
|
|
33
|
+
- @graphcommerce/next-ui@4.1.1
|
|
34
|
+
- @graphcommerce/react-hook-form@3.0.2
|
|
35
|
+
- @graphcommerce/graphql@3.0.2
|
|
36
|
+
- @graphcommerce/image@3.0.2
|
|
37
|
+
- @graphcommerce/magento-product@4.0.2
|
|
38
|
+
- @graphcommerce/magento-store@4.0.2
|
|
39
|
+
|
|
40
|
+
## 3.0.1
|
|
41
|
+
|
|
42
|
+
### Patch Changes
|
|
43
|
+
|
|
44
|
+
- [`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)
|
|
45
|
+
Thanks [@paales](https://github.com/paales)! - Added homepage and repository package.json files,
|
|
46
|
+
so that the packages link to back to the website and repository
|
|
47
|
+
- Updated dependencies
|
|
48
|
+
[[`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)]:
|
|
49
|
+
- @graphcommerce/graphql@3.0.1
|
|
50
|
+
- @graphcommerce/image@3.0.1
|
|
51
|
+
- @graphcommerce/magento-cart@4.0.1
|
|
52
|
+
- @graphcommerce/magento-customer@4.0.1
|
|
53
|
+
- @graphcommerce/magento-product@4.0.1
|
|
54
|
+
- @graphcommerce/magento-store@4.0.1
|
|
55
|
+
- @graphcommerce/next-ui@4.0.1
|
|
56
|
+
- @graphcommerce/react-hook-form@3.0.1
|
|
57
|
+
|
|
58
|
+
## 3.0.0
|
|
59
|
+
|
|
60
|
+
### Major Changes
|
|
61
|
+
|
|
62
|
+
- [#1258](https://github.com/ho-nl/m2-pwa/pull/1258)
|
|
63
|
+
[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)
|
|
64
|
+
Thanks [@paales](https://github.com/paales)! - Upgraded to Material UI 5
|
|
65
|
+
|
|
66
|
+
### Patch Changes
|
|
67
|
+
|
|
68
|
+
- Updated dependencies
|
|
69
|
+
[[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)]:
|
|
70
|
+
- @graphcommerce/graphql@3.0.0
|
|
71
|
+
- @graphcommerce/image@3.0.0
|
|
72
|
+
- @graphcommerce/magento-cart@4.0.0
|
|
73
|
+
- @graphcommerce/magento-customer@4.0.0
|
|
74
|
+
- @graphcommerce/magento-product@4.0.0
|
|
75
|
+
- @graphcommerce/magento-store@4.0.0
|
|
76
|
+
- @graphcommerce/next-ui@4.0.0
|
|
77
|
+
- @graphcommerce/react-hook-form@3.0.0
|
|
5
78
|
|
|
6
|
-
|
|
79
|
+
All notable changes to this project will be documented in this file. See
|
|
80
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
7
81
|
|
|
82
|
+
## [2.110.18](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-items@2.110.17...@graphcommerce/magento-cart-items@2.110.18) (2021-12-17)
|
|
8
83
|
|
|
9
84
|
### Bug Fixes
|
|
10
85
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
86
|
+
- remove prop required in cart
|
|
87
|
+
([f22ba07](https://github.com/ho-nl/m2-pwa/commit/f22ba07960afa44422df1df3b80da687bbc8c5e8))
|
|
16
88
|
|
|
17
89
|
# [2.110.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-items@2.109.1...@graphcommerce/magento-cart-items@2.110.0) (2021-11-12)
|
|
18
90
|
|
|
19
|
-
|
|
20
91
|
### Bug Fixes
|
|
21
92
|
|
|
22
|
-
|
|
23
|
-
|
|
93
|
+
- even more translations
|
|
94
|
+
([1a1f988](https://github.com/ho-nl/m2-pwa/commit/1a1f98837c704b978f6b42b619d9c52f540b2d48))
|
|
24
95
|
|
|
25
96
|
### Features
|
|
26
97
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
98
|
+
- added tons of translations
|
|
99
|
+
([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
|
|
32
100
|
|
|
33
101
|
# [2.109.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-items@2.108.20...@graphcommerce/magento-cart-items@2.109.0) (2021-11-12)
|
|
34
102
|
|
|
35
|
-
|
|
36
103
|
### Features
|
|
37
104
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
105
|
+
- remove svg stroke definitions, set all to currentColor
|
|
106
|
+
([189814f](https://github.com/ho-nl/m2-pwa/commit/189814f822d111c8adc6be1fff65c9a4a4c50c65))
|
|
43
107
|
|
|
44
108
|
## [2.108.20](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-items@2.108.19...@graphcommerce/magento-cart-items@2.108.20) (2021-11-12)
|
|
45
109
|
|
|
46
|
-
|
|
47
110
|
### Bug Fixes
|
|
48
111
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
112
|
+
- remove delivery label
|
|
113
|
+
([c799405](https://github.com/ho-nl/m2-pwa/commit/c799405e18f7fc2654df67b0c401dfcdef41fd6c))
|
|
54
114
|
|
|
55
115
|
## [2.108.15](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-items@2.108.14...@graphcommerce/magento-cart-items@2.108.15) (2021-11-09)
|
|
56
116
|
|
|
57
|
-
|
|
58
117
|
### Bug Fixes
|
|
59
118
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
119
|
+
- font sizes
|
|
120
|
+
([1cf7d45](https://github.com/ho-nl/m2-pwa/commit/1cf7d451c3f8bdd064fdf351dffafced97387aff))
|
|
65
121
|
|
|
66
122
|
## [2.108.9](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-items@2.108.8...@graphcommerce/magento-cart-items@2.108.9) (2021-11-04)
|
|
67
123
|
|
|
68
|
-
|
|
69
124
|
### Bug Fixes
|
|
70
125
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
126
|
+
- mobile cart
|
|
127
|
+
([fcafe5d](https://github.com/ho-nl/m2-pwa/commit/fcafe5d446f14fca6579d9005dd57389040c4cd3))
|
|
128
|
+
- remove hardcoded fontSize
|
|
129
|
+
([e4e09e1](https://github.com/ho-nl/m2-pwa/commit/e4e09e11baeb8edeff634550b8cdb88571d96911))
|
|
77
130
|
|
|
78
131
|
# [2.108.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-items@2.107.5...@graphcommerce/magento-cart-items@2.108.0) (2021-11-02)
|
|
79
132
|
|
|
80
|
-
|
|
81
133
|
### Bug Fixes
|
|
82
134
|
|
|
83
|
-
|
|
84
|
-
|
|
135
|
+
- darkTheme
|
|
136
|
+
([d0517af](https://github.com/ho-nl/m2-pwa/commit/d0517af5a788532c48f567ee3e840986efa26a67))
|
|
85
137
|
|
|
86
138
|
### Features
|
|
87
139
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
140
|
+
- darkTheme
|
|
141
|
+
([968f4f1](https://github.com/ho-nl/m2-pwa/commit/968f4f1360417bf7daa36454c19e6bc5cf53ae90))
|
|
142
|
+
- darkTheme
|
|
143
|
+
([3ed6647](https://github.com/ho-nl/m2-pwa/commit/3ed664714670315bc9f20542549724f66cb5052d))
|
|
94
144
|
|
|
95
145
|
## [2.107.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-items@2.107.0...@graphcommerce/magento-cart-items@2.107.1) (2021-10-28)
|
|
96
146
|
|
|
97
|
-
|
|
98
147
|
### Bug Fixes
|
|
99
148
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
149
|
+
- External SVG's can't have alt tags
|
|
150
|
+
([1b1414a](https://github.com/ho-nl/m2-pwa/commit/1b1414a782d55d3acf7b0e6bcaa50f2ad5f18f39))
|
|
105
151
|
|
|
106
152
|
# [2.107.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-items@2.106.2...@graphcommerce/magento-cart-items@2.107.0) (2021-10-28)
|
|
107
153
|
|
|
108
|
-
|
|
109
154
|
### Features
|
|
110
155
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
156
|
+
- dynamic icons, update SvgImage uses to SvgImageSimple
|
|
157
|
+
([3d3cc0e](https://github.com/ho-nl/m2-pwa/commit/3d3cc0e0336fcde1cce6ba19705f82c1edf9bfc6))
|
|
116
158
|
|
|
117
159
|
# [2.106.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-items@2.105.7...@graphcommerce/magento-cart-items@2.106.0) (2021-10-27)
|
|
118
160
|
|
|
119
|
-
|
|
120
161
|
### Features
|
|
121
162
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
163
|
+
- **nextjs:** upgraded to nextjs 12
|
|
164
|
+
([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
|
|
127
165
|
|
|
128
166
|
# [2.105.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-items@2.104.29...@graphcommerce/magento-cart-items@2.105.0) (2021-10-18)
|
|
129
167
|
|
|
130
|
-
|
|
131
168
|
### Features
|
|
132
169
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
170
|
+
- **message-snackbar:** severity props
|
|
171
|
+
([c7be8a5](https://github.com/ho-nl/m2-pwa/commit/c7be8a51faf7a5937b7fab5bb352df2089ae4eea))
|
|
138
172
|
|
|
139
173
|
## [2.104.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-items@2.104.0...@graphcommerce/magento-cart-items@2.104.1) (2021-09-27)
|
|
140
174
|
|
|
141
175
|
**Note:** Version bump only for package @graphcommerce/magento-cart-items
|
|
142
176
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
177
|
# 2.104.0 (2021-09-27)
|
|
148
178
|
|
|
149
|
-
|
|
150
179
|
### Bug Fixes
|
|
151
180
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
181
|
+
- app shell consistency wip
|
|
182
|
+
([be995ca](https://github.com/ho-nl/m2-pwa/commit/be995ca5c3e383b89fea3759186d53af4790e99b))
|
|
183
|
+
- cart item image sizes
|
|
184
|
+
([e7c860c](https://github.com/ho-nl/m2-pwa/commit/e7c860c785e172b9275e1a00c8b51509d6b297a8))
|
|
185
|
+
- **cart:** be able to remove items from cart
|
|
186
|
+
([9c7f939](https://github.com/ho-nl/m2-pwa/commit/9c7f9397e9904e08014e7509d3ca63df8c062032))
|
|
187
|
+
- **cart:** display prices with taxes for specific store views
|
|
188
|
+
([fd25541](https://github.com/ho-nl/m2-pwa/commit/fd25541646c41111f5ea53822d244591cb08b199))
|
|
189
|
+
- **cart:** mobile styles
|
|
190
|
+
([aa601af](https://github.com/ho-nl/m2-pwa/commit/aa601af28ca7190ad90c33cc180fe63a28682519))
|
|
191
|
+
- display prices excl and incl tax
|
|
192
|
+
([0d41135](https://github.com/ho-nl/m2-pwa/commit/0d411350e4621928411c2800be6ea02c6125049a))
|
|
193
|
+
- ignore md files from triggering version updates
|
|
194
|
+
([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
|
|
195
|
+
- **image:** fix build
|
|
196
|
+
([b730cb6](https://github.com/ho-nl/m2-pwa/commit/b730cb6ae4e50dcf2f60e2046d6acf3047caacb3))
|
|
197
|
+
- implement next-ui barrel imports
|
|
198
|
+
([75bea70](https://github.com/ho-nl/m2-pwa/commit/75bea703dba898f18a2a1dfa3243ebd0a4e6f0e1))
|
|
162
199
|
|
|
163
200
|
### Features
|
|
164
201
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
202
|
+
- **cart:** when a cart is not active anymore show a clear cart button
|
|
203
|
+
([5d04a14](https://github.com/ho-nl/m2-pwa/commit/5d04a14726c040b20b34c0b88f923aee1dff22e5))
|
|
204
|
+
- **graphql:** introduced new graphql package that holds all generated files
|
|
205
|
+
([a3e7aa0](https://github.com/ho-nl/m2-pwa/commit/a3e7aa05540540533b5ced9a95f1f802ecbe499f))
|
|
206
|
+
- **image:** introduced completely rewritten Image component
|
|
207
|
+
([e3413b3](https://github.com/ho-nl/m2-pwa/commit/e3413b3a57392d6571ea64cb8d9c8dca05ea31df))
|
|
208
|
+
- next.js 11
|
|
209
|
+
([7d61407](https://github.com/ho-nl/m2-pwa/commit/7d614075a778f488045034f74be4f75b93f63c43))
|
|
210
|
+
- **playwright:** added new playwright package to enable browser testing
|
|
211
|
+
([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
|
|
212
|
+
- renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of
|
|
213
|
+
[@reachdigital](https://github.com/reachdigital)
|
|
214
|
+
([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
|
|
215
|
+
- **theme:** restructured fonts and applied to home and category page
|
|
216
|
+
([6adf5f1](https://github.com/ho-nl/m2-pwa/commit/6adf5f11321bdfbf499125f1161c5abf5a1bfe4a))
|
|
217
|
+
- upgraded to nextjs 11
|
|
218
|
+
([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
|
|
219
|
+
- useFormMutationCart and simpler imports
|
|
220
|
+
([012f090](https://github.com/ho-nl/m2-pwa/commit/012f090e8f54d09f35d393c61ad1e2319f5a90ff))
|
|
175
221
|
|
|
176
222
|
### Reverts
|
|
177
223
|
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
224
|
+
- Revert "chore: upgrade @apollo/client"
|
|
225
|
+
([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
|
|
183
226
|
|
|
184
227
|
# Change Log
|
|
185
228
|
|
package/CartItem/CartItem.tsx
CHANGED
|
@@ -2,154 +2,109 @@ import { Image } from '@graphcommerce/image'
|
|
|
2
2
|
import { useDisplayInclTax } from '@graphcommerce/magento-cart'
|
|
3
3
|
import { useProductLink } from '@graphcommerce/magento-product'
|
|
4
4
|
import { Money } from '@graphcommerce/magento-store'
|
|
5
|
-
import {
|
|
6
|
-
import { Badge,
|
|
7
|
-
import clsx from 'clsx'
|
|
5
|
+
import { responsiveVal, extendableComponent } from '@graphcommerce/next-ui'
|
|
6
|
+
import { Badge, Box, Link, SxProps, Theme } from '@mui/material'
|
|
8
7
|
import PageLink from 'next/link'
|
|
9
|
-
import
|
|
8
|
+
import { PropsWithChildren } from 'react'
|
|
10
9
|
import { CartItemFragment } from '../Api/CartItem.gql'
|
|
11
10
|
import RemoveItemFromCartFab from '../RemoveItemFromCart/RemoveItemFromCartFab'
|
|
12
11
|
import UpdateItemQuantity from '../UpdateItemQuantity/UpdateItemQuantity'
|
|
13
12
|
|
|
14
13
|
const rowImageSize = responsiveVal(70, 125)
|
|
15
14
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
display: 'grid',
|
|
20
|
-
gridTemplate: `
|
|
21
|
-
"picture itemName itemName itemName"
|
|
22
|
-
"picture itemOptions itemOptions itemOptions"
|
|
23
|
-
"picture itemPrice quantity rowPrice"
|
|
24
|
-
`,
|
|
25
|
-
gridTemplateColumns: `${rowImageSize} 1fr minmax(120px, 1fr) 1fr`,
|
|
26
|
-
columnGap: theme.spacings.sm,
|
|
27
|
-
alignItems: 'baseline',
|
|
28
|
-
...theme.typography.body1,
|
|
29
|
-
marginBottom: theme.spacings.lg,
|
|
30
|
-
marginTop: theme.spacings.md,
|
|
31
|
-
[theme.breakpoints.up('sm')]: {
|
|
32
|
-
gridTemplate: `
|
|
33
|
-
"picture itemName itemName itemName itemName"
|
|
34
|
-
"picture itemOptions itemPrice quantity rowPrice"
|
|
35
|
-
`,
|
|
36
|
-
gridTemplateColumns: `${rowImageSize} 4fr 1fr minmax(120px, 1fr) minmax(75px, 1fr)`,
|
|
37
|
-
marginBottom: theme.spacings.md,
|
|
38
|
-
},
|
|
39
|
-
},
|
|
40
|
-
itemWithoutOptions: {
|
|
41
|
-
display: 'grid',
|
|
42
|
-
gridTemplate: `
|
|
43
|
-
"picture itemName itemName itemName"
|
|
44
|
-
"picture itemPrice quantity rowPrice"`,
|
|
45
|
-
alignItems: 'center',
|
|
46
|
-
gridTemplateColumns: `${rowImageSize} 1fr minmax(120px, 1fr) 1fr`,
|
|
47
|
-
[theme.breakpoints.up('sm')]: {
|
|
48
|
-
gridTemplate: `
|
|
49
|
-
"picture itemName itemPrice quantity rowPrice"
|
|
50
|
-
`,
|
|
51
|
-
gridTemplateColumns: `${rowImageSize} 4fr 1fr minmax(120px, 1fr) minmax(75px, 1fr)`,
|
|
52
|
-
},
|
|
53
|
-
},
|
|
54
|
-
picture: {
|
|
55
|
-
gridArea: 'picture',
|
|
56
|
-
width: rowImageSize,
|
|
57
|
-
height: rowImageSize,
|
|
58
|
-
padding: responsiveVal(5, 10),
|
|
59
|
-
border: `1px solid ${theme.palette.divider}`,
|
|
60
|
-
borderRadius: '50%',
|
|
61
|
-
alignSelf: 'center',
|
|
62
|
-
},
|
|
63
|
-
badge: {
|
|
64
|
-
'& > button': {
|
|
65
|
-
background: theme.palette.background.paper,
|
|
66
|
-
'&:hover, &:active, &:visited': {
|
|
67
|
-
background: theme.palette.background.paper,
|
|
68
|
-
},
|
|
69
|
-
[theme.breakpoints.down('sm')]: {
|
|
70
|
-
width: 30,
|
|
71
|
-
height: 30,
|
|
72
|
-
minHeight: 'unset',
|
|
73
|
-
},
|
|
74
|
-
},
|
|
75
|
-
},
|
|
76
|
-
productLink: {
|
|
77
|
-
display: 'block',
|
|
78
|
-
width: '100%',
|
|
79
|
-
borderRadius: '50%',
|
|
80
|
-
overflow: 'hidden',
|
|
81
|
-
},
|
|
82
|
-
image: {
|
|
83
|
-
gridColumn: 1,
|
|
84
|
-
backgroundColor: theme.palette.background.image,
|
|
85
|
-
objectFit: 'cover',
|
|
86
|
-
display: 'block',
|
|
87
|
-
width: '110% !important',
|
|
88
|
-
height: '110% !important',
|
|
89
|
-
marginLeft: '-5%',
|
|
90
|
-
marginTop: '-5%',
|
|
91
|
-
},
|
|
92
|
-
itemName: {
|
|
93
|
-
...theme.typography.subtitle1,
|
|
94
|
-
fontWeight: theme.typography.fontWeightBold,
|
|
95
|
-
gridArea: 'itemName',
|
|
96
|
-
color: theme.palette.text.primary,
|
|
97
|
-
textDecoration: 'none',
|
|
98
|
-
flexWrap: 'nowrap',
|
|
99
|
-
maxWidth: 'max-content',
|
|
100
|
-
},
|
|
101
|
-
itemNameWithOptions: {
|
|
102
|
-
...theme.typography.subtitle1,
|
|
103
|
-
fontWeight: theme.typography.fontWeightBold,
|
|
104
|
-
alignSelf: 'flex-end',
|
|
105
|
-
},
|
|
106
|
-
itemPrice: {
|
|
107
|
-
gridArea: 'itemPrice',
|
|
108
|
-
textAlign: 'left',
|
|
109
|
-
color: theme.palette.text.secondary,
|
|
110
|
-
alignSelf: 'center',
|
|
111
|
-
[theme.breakpoints.up('sm')]: {
|
|
112
|
-
alignSelf: 'flex-start',
|
|
113
|
-
},
|
|
114
|
-
},
|
|
115
|
-
quantity: {
|
|
116
|
-
gridArea: 'quantity',
|
|
117
|
-
justifySelf: 'right',
|
|
118
|
-
transform: 'translateY(0)',
|
|
119
|
-
[theme.breakpoints.up('sm')]: {
|
|
120
|
-
transform: 'translateY(-6px)',
|
|
121
|
-
},
|
|
122
|
-
},
|
|
123
|
-
rowPrice: {
|
|
124
|
-
gridArea: 'rowPrice',
|
|
125
|
-
textAlign: 'right',
|
|
126
|
-
alignSelf: 'center',
|
|
127
|
-
[theme.breakpoints.up('sm')]: {
|
|
128
|
-
alignSelf: 'flex-start',
|
|
129
|
-
},
|
|
130
|
-
},
|
|
131
|
-
cellNoOptions: {
|
|
132
|
-
textAlign: 'left',
|
|
133
|
-
},
|
|
134
|
-
}),
|
|
135
|
-
{ name: 'CartItem' },
|
|
136
|
-
)
|
|
15
|
+
export type CartItemProps = PropsWithChildren<CartItemFragment> & {
|
|
16
|
+
sx?: SxProps<Theme>
|
|
17
|
+
} & OwnerState
|
|
137
18
|
|
|
138
|
-
|
|
139
|
-
|
|
19
|
+
type OwnerState = { withOptions?: boolean }
|
|
20
|
+
const compName = 'CartItem' as const
|
|
21
|
+
const parts = [
|
|
22
|
+
'item',
|
|
23
|
+
'picture',
|
|
24
|
+
'badge',
|
|
25
|
+
'productLink',
|
|
26
|
+
'image',
|
|
27
|
+
'itemName',
|
|
28
|
+
'itemPrice',
|
|
29
|
+
'quantity',
|
|
30
|
+
'rowPrice',
|
|
31
|
+
] as const
|
|
32
|
+
const { withState } = extendableComponent<OwnerState, typeof compName, typeof parts>(
|
|
33
|
+
compName,
|
|
34
|
+
parts,
|
|
35
|
+
)
|
|
140
36
|
|
|
141
37
|
export default function CartItem(props: CartItemProps) {
|
|
142
|
-
const { product, uid, prices, quantity, children, withOptions } = props
|
|
38
|
+
const { product, uid, prices, quantity, children, withOptions = true, sx = [] } = props
|
|
143
39
|
const { name } = product
|
|
144
|
-
const classes = useStyles()
|
|
145
40
|
const productLink = useProductLink(product)
|
|
146
41
|
const inclTaxes = useDisplayInclTax()
|
|
147
42
|
|
|
43
|
+
const classes = withState({ withOptions })
|
|
44
|
+
|
|
148
45
|
return (
|
|
149
|
-
<
|
|
46
|
+
<Box
|
|
47
|
+
className={classes.item}
|
|
48
|
+
sx={[
|
|
49
|
+
(theme) => ({
|
|
50
|
+
display: 'grid',
|
|
51
|
+
gridTemplate: `
|
|
52
|
+
"picture itemName itemName itemName"
|
|
53
|
+
"picture itemOptions itemOptions itemOptions"
|
|
54
|
+
"picture itemPrice quantity rowPrice"`,
|
|
55
|
+
gridTemplateColumns: `${rowImageSize} 1fr minmax(120px, 1fr) 1fr`,
|
|
56
|
+
columnGap: theme.spacings.sm,
|
|
57
|
+
alignItems: 'baseline',
|
|
58
|
+
typography: 'body1',
|
|
59
|
+
marginBottom: theme.spacings.lg,
|
|
60
|
+
marginTop: theme.spacings.md,
|
|
61
|
+
[theme.breakpoints.up('sm')]: {
|
|
62
|
+
gridTemplate: `
|
|
63
|
+
"picture itemName itemName itemName itemName"
|
|
64
|
+
"picture itemOptions itemPrice quantity rowPrice"`,
|
|
65
|
+
gridTemplateColumns: `${rowImageSize} 4fr 1fr minmax(120px, 1fr) minmax(75px, 1fr)`,
|
|
66
|
+
marginBottom: theme.spacings.md,
|
|
67
|
+
},
|
|
68
|
+
|
|
69
|
+
'&:not(.withOptions)': {
|
|
70
|
+
display: 'grid',
|
|
71
|
+
gridTemplate: `
|
|
72
|
+
"picture itemName itemName itemName"
|
|
73
|
+
"picture itemPrice quantity rowPrice"`,
|
|
74
|
+
alignItems: 'center',
|
|
75
|
+
gridTemplateColumns: `${rowImageSize} 1fr minmax(120px, 1fr) 1fr`,
|
|
76
|
+
[theme.breakpoints.up('sm')]: {
|
|
77
|
+
gridTemplate: `
|
|
78
|
+
"picture itemName itemPrice quantity rowPrice"
|
|
79
|
+
`,
|
|
80
|
+
gridTemplateColumns: `${rowImageSize} 4fr 1fr minmax(120px, 1fr) minmax(75px, 1fr)`,
|
|
81
|
+
},
|
|
82
|
+
},
|
|
83
|
+
}),
|
|
84
|
+
...(Array.isArray(sx) ? sx : [sx]),
|
|
85
|
+
]}
|
|
86
|
+
>
|
|
150
87
|
<Badge
|
|
151
88
|
color='default'
|
|
152
|
-
badgeContent={
|
|
89
|
+
badgeContent={
|
|
90
|
+
<RemoveItemFromCartFab
|
|
91
|
+
uid={uid}
|
|
92
|
+
className={classes.badge}
|
|
93
|
+
sx={(theme) => ({
|
|
94
|
+
'& > button': {
|
|
95
|
+
background: theme.palette.background.paper,
|
|
96
|
+
'&:hover, &:active, &:visited': {
|
|
97
|
+
background: theme.palette.background.paper,
|
|
98
|
+
},
|
|
99
|
+
[theme.breakpoints.down('md')]: {
|
|
100
|
+
width: 30,
|
|
101
|
+
height: 30,
|
|
102
|
+
minHeight: 'unset',
|
|
103
|
+
},
|
|
104
|
+
},
|
|
105
|
+
})}
|
|
106
|
+
/>
|
|
107
|
+
}
|
|
153
108
|
component='div'
|
|
154
109
|
className={classes.picture}
|
|
155
110
|
overlap='circular'
|
|
@@ -157,9 +112,22 @@ export default function CartItem(props: CartItemProps) {
|
|
|
157
112
|
vertical: 'top',
|
|
158
113
|
horizontal: 'left',
|
|
159
114
|
}}
|
|
115
|
+
sx={(theme) => ({
|
|
116
|
+
gridArea: 'picture',
|
|
117
|
+
width: rowImageSize,
|
|
118
|
+
height: rowImageSize,
|
|
119
|
+
padding: responsiveVal(5, 10),
|
|
120
|
+
border: `1px solid ${theme.palette.divider}`,
|
|
121
|
+
borderRadius: '50%',
|
|
122
|
+
alignSelf: 'center',
|
|
123
|
+
})}
|
|
160
124
|
>
|
|
161
125
|
<PageLink href={productLink}>
|
|
162
|
-
<
|
|
126
|
+
<Box
|
|
127
|
+
component='a'
|
|
128
|
+
className={classes.productLink}
|
|
129
|
+
sx={{ display: 'block', width: '100%', borderRadius: '50%', overflow: 'hidden' }}
|
|
130
|
+
>
|
|
163
131
|
{product?.thumbnail?.url && (
|
|
164
132
|
<Image
|
|
165
133
|
src={product.thumbnail.url ?? ''}
|
|
@@ -167,22 +135,56 @@ export default function CartItem(props: CartItemProps) {
|
|
|
167
135
|
alt={product.thumbnail.label ?? product.name ?? ''}
|
|
168
136
|
sizes={responsiveVal(70, 125)}
|
|
169
137
|
className={classes.image}
|
|
138
|
+
sx={(theme) => ({
|
|
139
|
+
gridColumn: 1,
|
|
140
|
+
backgroundColor: theme.palette.background.image,
|
|
141
|
+
objectFit: 'cover',
|
|
142
|
+
display: 'block',
|
|
143
|
+
width: '110% !important',
|
|
144
|
+
height: '110% !important',
|
|
145
|
+
marginLeft: '-5%',
|
|
146
|
+
marginTop: '-5%',
|
|
147
|
+
})}
|
|
170
148
|
/>
|
|
171
149
|
)}
|
|
172
|
-
</
|
|
150
|
+
</Box>
|
|
173
151
|
</PageLink>
|
|
174
152
|
</Badge>
|
|
175
153
|
|
|
176
154
|
<PageLink href={productLink}>
|
|
177
155
|
<Link
|
|
178
156
|
variant='body1'
|
|
179
|
-
className={
|
|
157
|
+
className={classes.itemName}
|
|
158
|
+
underline='hover'
|
|
159
|
+
sx={(theme) => ({
|
|
160
|
+
typgrapht: 'subtitle1',
|
|
161
|
+
fontWeight: theme.typography.fontWeightBold,
|
|
162
|
+
gridArea: 'itemName',
|
|
163
|
+
color: theme.palette.text.primary,
|
|
164
|
+
textDecoration: 'none',
|
|
165
|
+
flexWrap: 'nowrap',
|
|
166
|
+
maxWidth: 'max-content',
|
|
167
|
+
'&:not(.withOptions)': {
|
|
168
|
+
alignSelf: 'flex-end',
|
|
169
|
+
},
|
|
170
|
+
})}
|
|
180
171
|
>
|
|
181
172
|
{name}
|
|
182
173
|
</Link>
|
|
183
174
|
</PageLink>
|
|
184
175
|
|
|
185
|
-
<
|
|
176
|
+
<Box
|
|
177
|
+
className={classes.itemPrice}
|
|
178
|
+
sx={(theme) => ({
|
|
179
|
+
gridArea: 'itemPrice',
|
|
180
|
+
textAlign: 'left',
|
|
181
|
+
color: theme.palette.text.secondary,
|
|
182
|
+
alignSelf: 'center',
|
|
183
|
+
[theme.breakpoints.up('sm')]: {
|
|
184
|
+
alignSelf: 'flex-start',
|
|
185
|
+
},
|
|
186
|
+
})}
|
|
187
|
+
>
|
|
186
188
|
{inclTaxes ? (
|
|
187
189
|
<Money
|
|
188
190
|
value={(prices?.row_total_including_tax?.value ?? 0) / quantity}
|
|
@@ -191,17 +193,37 @@ export default function CartItem(props: CartItemProps) {
|
|
|
191
193
|
) : (
|
|
192
194
|
<Money {...prices?.price} />
|
|
193
195
|
)}
|
|
194
|
-
</
|
|
196
|
+
</Box>
|
|
195
197
|
|
|
196
|
-
<
|
|
198
|
+
<Box
|
|
199
|
+
className={classes.quantity}
|
|
200
|
+
sx={(theme) => ({
|
|
201
|
+
gridArea: 'quantity',
|
|
202
|
+
justifySelf: 'right',
|
|
203
|
+
transform: 'translateY(0)',
|
|
204
|
+
[theme.breakpoints.up('sm')]: {
|
|
205
|
+
transform: 'translateY(-6px)',
|
|
206
|
+
},
|
|
207
|
+
})}
|
|
208
|
+
>
|
|
197
209
|
<UpdateItemQuantity uid={uid} quantity={quantity} />
|
|
198
|
-
</
|
|
210
|
+
</Box>
|
|
199
211
|
|
|
200
|
-
<
|
|
212
|
+
<Box
|
|
213
|
+
className={classes.rowPrice}
|
|
214
|
+
sx={(theme) => ({
|
|
215
|
+
gridArea: 'rowPrice',
|
|
216
|
+
textAlign: 'right',
|
|
217
|
+
alignSelf: 'center',
|
|
218
|
+
[theme.breakpoints.up('sm')]: {
|
|
219
|
+
alignSelf: 'flex-start',
|
|
220
|
+
},
|
|
221
|
+
})}
|
|
222
|
+
>
|
|
201
223
|
<Money {...(inclTaxes ? prices?.row_total_including_tax : prices?.row_total)} /> <br />
|
|
202
|
-
</
|
|
224
|
+
</Box>
|
|
203
225
|
|
|
204
226
|
{children}
|
|
205
|
-
</
|
|
227
|
+
</Box>
|
|
206
228
|
)
|
|
207
229
|
}
|
|
@@ -1,52 +1,58 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
const useStyles = makeStyles(
|
|
5
|
-
(theme: Theme) => ({
|
|
6
|
-
root: {
|
|
7
|
-
marginRight: theme.spacings.xs,
|
|
8
|
-
},
|
|
9
|
-
label: {
|
|
10
|
-
letterSpacing: 1,
|
|
11
|
-
textTransform: 'uppercase',
|
|
12
|
-
fontWeight: 500,
|
|
13
|
-
color: theme.palette.text.disabled,
|
|
14
|
-
},
|
|
15
|
-
select: {
|
|
16
|
-
padding: `${theme.spacings.xxs} ${theme.spacings.xxs}`,
|
|
17
|
-
border: `1px solid ${theme.palette.divider}`,
|
|
18
|
-
borderRadius: 8,
|
|
19
|
-
minWidth: 120,
|
|
20
|
-
'&:before': {
|
|
21
|
-
borderBottom: 'none',
|
|
22
|
-
},
|
|
23
|
-
'&:hover, &:active, &:focus': {
|
|
24
|
-
'&:before': {
|
|
25
|
-
borderBottom: 'none',
|
|
26
|
-
},
|
|
27
|
-
background: theme.palette.grey['100'],
|
|
28
|
-
},
|
|
29
|
-
},
|
|
30
|
-
}),
|
|
31
|
-
{ name: 'CartItemOptionDropdown' },
|
|
32
|
-
)
|
|
1
|
+
import { extendableComponent } from '@graphcommerce/next-ui'
|
|
2
|
+
import { Box, MenuItem, Select, SelectProps, SxProps, Theme } from '@mui/material'
|
|
33
3
|
|
|
34
4
|
export type CartItemOptionDropdownProps = {
|
|
35
5
|
label: string
|
|
6
|
+
sx?: SxProps<Theme>
|
|
36
7
|
} & Pick<SelectProps, 'onChange'>
|
|
37
8
|
|
|
9
|
+
const compName = 'CartItem' as const
|
|
10
|
+
const parts = ['root', 'label', 'select'] as const
|
|
11
|
+
const { classes } = extendableComponent(compName, parts)
|
|
12
|
+
|
|
38
13
|
export default function CartItemOptionDropdown(props: CartItemOptionDropdownProps) {
|
|
39
|
-
const { onChange, label } = props
|
|
40
|
-
const classes = useStyles()
|
|
14
|
+
const { onChange, label, sx = [] } = props
|
|
41
15
|
|
|
42
16
|
return (
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
|
|
17
|
+
<Box
|
|
18
|
+
className={classes.root}
|
|
19
|
+
sx={[(theme) => ({ marginRight: theme.spacings.xs }), ...(Array.isArray(sx) ? sx : [sx])]}
|
|
20
|
+
>
|
|
21
|
+
<Box
|
|
22
|
+
className={classes.label}
|
|
23
|
+
sx={(theme) => ({
|
|
24
|
+
letterSpacing: 1,
|
|
25
|
+
textTransform: 'uppercase',
|
|
26
|
+
fontWeight: 500,
|
|
27
|
+
color: theme.palette.text.disabled,
|
|
28
|
+
})}
|
|
29
|
+
>
|
|
30
|
+
{label}
|
|
31
|
+
</Box>
|
|
32
|
+
<Select
|
|
33
|
+
value={1}
|
|
34
|
+
onChange={onChange}
|
|
35
|
+
className={classes.select}
|
|
36
|
+
sx={(theme) => ({
|
|
37
|
+
padding: `${theme.spacings.xxs} ${theme.spacings.xxs}`,
|
|
38
|
+
border: `1px solid ${theme.palette.divider}`,
|
|
39
|
+
borderRadius: '8px',
|
|
40
|
+
minWidth: 120,
|
|
41
|
+
'&:before': {
|
|
42
|
+
borderBottom: 'none',
|
|
43
|
+
},
|
|
44
|
+
'&:hover, &:active, &:focus': {
|
|
45
|
+
'&:before': {
|
|
46
|
+
borderBottom: 'none',
|
|
47
|
+
},
|
|
48
|
+
background: theme.palette.grey['100'],
|
|
49
|
+
},
|
|
50
|
+
})}
|
|
51
|
+
>
|
|
46
52
|
<MenuItem value={1}>One</MenuItem>
|
|
47
53
|
<MenuItem value={2}>Two</MenuItem>
|
|
48
54
|
<MenuItem value={3}>Three</MenuItem>
|
|
49
55
|
</Select>
|
|
50
|
-
</
|
|
56
|
+
</Box>
|
|
51
57
|
)
|
|
52
58
|
}
|
|
@@ -1,49 +1,45 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { extendableComponent } from '@graphcommerce/next-ui'
|
|
2
|
+
import { Box, IconButton, Popover, SxProps, Theme } from '@mui/material'
|
|
2
3
|
import React from 'react'
|
|
3
4
|
|
|
4
|
-
|
|
5
|
-
{
|
|
6
|
-
root: {
|
|
7
|
-
display: 'inline-block',
|
|
8
|
-
},
|
|
9
|
-
labelContainer: {
|
|
10
|
-
padding: 5,
|
|
11
|
-
},
|
|
12
|
-
label: {
|
|
13
|
-
borderRadius: '100%',
|
|
14
|
-
width: 10,
|
|
15
|
-
height: 10,
|
|
16
|
-
background: '#01D26A', // TODO (yvo): order statuses. green, yellow, red
|
|
17
|
-
},
|
|
18
|
-
popover: {
|
|
19
|
-
'& > .MuiPaper-root': {
|
|
20
|
-
padding: 6,
|
|
21
|
-
},
|
|
22
|
-
},
|
|
23
|
-
},
|
|
24
|
-
{ name: 'DeliveryLabel' },
|
|
25
|
-
)
|
|
5
|
+
export type DeliveryLabelProps = { sx?: SxProps<Theme> }
|
|
26
6
|
|
|
27
|
-
|
|
7
|
+
const name = 'DeliveryLabel' as const
|
|
8
|
+
const parts = ['root', 'labelContainer', 'label', 'popover'] as const
|
|
9
|
+
const { classes } = extendableComponent(name, parts)
|
|
28
10
|
|
|
29
11
|
export default function DeliveryLabel(props: DeliveryLabelProps) {
|
|
30
|
-
const
|
|
12
|
+
const { sx = [] } = props
|
|
31
13
|
const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null)
|
|
32
14
|
|
|
33
15
|
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
|
34
16
|
setAnchorEl(event.currentTarget)
|
|
35
17
|
}
|
|
36
|
-
|
|
37
|
-
const handleClose = () => {
|
|
38
|
-
setAnchorEl(null)
|
|
39
|
-
}
|
|
18
|
+
const handleClose = () => setAnchorEl(null)
|
|
40
19
|
|
|
41
20
|
const open = Boolean(anchorEl)
|
|
42
21
|
|
|
43
22
|
return (
|
|
44
|
-
<
|
|
45
|
-
|
|
46
|
-
|
|
23
|
+
<Box
|
|
24
|
+
className={classes.root}
|
|
25
|
+
sx={[{ display: 'inline-block' }, ...(Array.isArray(sx) ? sx : [sx])]}
|
|
26
|
+
>
|
|
27
|
+
<IconButton
|
|
28
|
+
component='button'
|
|
29
|
+
className={classes.labelContainer}
|
|
30
|
+
sx={{ padding: '5px' }}
|
|
31
|
+
onClick={handleClick}
|
|
32
|
+
size='large'
|
|
33
|
+
>
|
|
34
|
+
<Box
|
|
35
|
+
className={classes.label}
|
|
36
|
+
sx={{
|
|
37
|
+
borderRadius: '100%',
|
|
38
|
+
width: 10,
|
|
39
|
+
height: 10,
|
|
40
|
+
background: '#01D26A', // TODO: order statuses. green, yellow, red
|
|
41
|
+
}}
|
|
42
|
+
/>
|
|
47
43
|
</IconButton>
|
|
48
44
|
<Popover
|
|
49
45
|
id={open ? 'simple-popover' : undefined}
|
|
@@ -59,9 +55,14 @@ export default function DeliveryLabel(props: DeliveryLabelProps) {
|
|
|
59
55
|
horizontal: 'center',
|
|
60
56
|
}}
|
|
61
57
|
className={classes.popover}
|
|
58
|
+
sx={{
|
|
59
|
+
'& > .MuiPaper-root': {
|
|
60
|
+
padding: '6px',
|
|
61
|
+
},
|
|
62
|
+
}}
|
|
62
63
|
>
|
|
63
64
|
Ordered before <b>23:00</b>, delivery <b>tomorrow</b>
|
|
64
65
|
</Popover>
|
|
65
|
-
</
|
|
66
|
+
</Box>
|
|
66
67
|
)
|
|
67
68
|
}
|
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import { ApolloCartErrorSnackbar, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
|
|
2
|
-
import { iconClose,
|
|
2
|
+
import { iconClose, SvgIcon } from '@graphcommerce/next-ui'
|
|
3
3
|
import { t } from '@lingui/macro'
|
|
4
|
-
import { Fab } from '@material
|
|
5
|
-
import React from 'react'
|
|
4
|
+
import { Fab, SxProps, Theme, styled } from '@mui/material'
|
|
6
5
|
import {
|
|
7
6
|
RemoveItemFromCartDocument,
|
|
8
7
|
RemoveItemFromCartMutationVariables,
|
|
9
8
|
} from './RemoveItemFromCart.gql'
|
|
10
9
|
|
|
11
10
|
export type RemoveItemFromCartProps = Omit<RemoveItemFromCartMutationVariables, 'cartId'> &
|
|
12
|
-
Omit<JSX.IntrinsicElements['form'], 'onSubmit' | 'noValidate'>
|
|
11
|
+
Omit<JSX.IntrinsicElements['form'], 'onSubmit' | 'noValidate'> & { sx?: SxProps<Theme> }
|
|
12
|
+
|
|
13
|
+
const Form = styled('form')({})
|
|
13
14
|
|
|
14
15
|
export default function RemoveItemFromCartFab(props: RemoveItemFromCartProps) {
|
|
15
16
|
const { uid, ...formProps } = props
|
|
@@ -18,16 +19,16 @@ export default function RemoveItemFromCartFab(props: RemoveItemFromCartProps) {
|
|
|
18
19
|
const submitHandler = handleSubmit(() => {})
|
|
19
20
|
|
|
20
21
|
return (
|
|
21
|
-
<
|
|
22
|
+
<Form noValidate onSubmit={submitHandler} {...formProps}>
|
|
22
23
|
<Fab
|
|
23
24
|
aria-label={t`Remove Product`}
|
|
24
25
|
size='small'
|
|
25
26
|
type='submit'
|
|
26
27
|
disabled={formState.isSubmitting}
|
|
27
28
|
>
|
|
28
|
-
<
|
|
29
|
+
<SvgIcon src={iconClose} />
|
|
29
30
|
</Fab>
|
|
30
31
|
<ApolloCartErrorSnackbar error={error} />
|
|
31
|
-
</
|
|
32
|
+
</Form>
|
|
32
33
|
)
|
|
33
34
|
}
|
package/package.json
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@graphcommerce/magento-cart-items",
|
|
3
|
-
"
|
|
3
|
+
"homepage": "https://www.graphcommerce.org/",
|
|
4
|
+
"repository": "github:graphcommerce-org/graphcommerce",
|
|
5
|
+
"version": "3.0.2",
|
|
4
6
|
"sideEffects": false,
|
|
5
7
|
"prettier": "@graphcommerce/prettier-config-pwa",
|
|
6
|
-
"browserslist": [
|
|
7
|
-
"extends @graphcommerce/browserslist-config-pwa"
|
|
8
|
-
],
|
|
9
8
|
"eslintConfig": {
|
|
10
9
|
"extends": "@graphcommerce/eslint-config-pwa",
|
|
11
10
|
"parserOptions": {
|
|
@@ -13,30 +12,27 @@
|
|
|
13
12
|
}
|
|
14
13
|
},
|
|
15
14
|
"devDependencies": {
|
|
16
|
-
"@graphcommerce/
|
|
17
|
-
"@graphcommerce/
|
|
18
|
-
"@graphcommerce/
|
|
19
|
-
"@
|
|
20
|
-
"@playwright/test": "^1.17.1"
|
|
15
|
+
"@graphcommerce/eslint-config-pwa": "^4.0.2",
|
|
16
|
+
"@graphcommerce/prettier-config-pwa": "^4.0.1",
|
|
17
|
+
"@graphcommerce/typescript-config-pwa": "^4.0.1",
|
|
18
|
+
"@playwright/test": "^1.19.1"
|
|
21
19
|
},
|
|
22
20
|
"dependencies": {
|
|
23
|
-
"@
|
|
24
|
-
"@graphcommerce/
|
|
25
|
-
"@graphcommerce/
|
|
26
|
-
"@graphcommerce/magento-
|
|
27
|
-
"@graphcommerce/magento-
|
|
28
|
-
"@graphcommerce/magento-
|
|
29
|
-
"@graphcommerce/
|
|
30
|
-
"@graphcommerce/
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
"@
|
|
34
|
-
"@material
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"next": "^12.0.7",
|
|
21
|
+
"@graphcommerce/graphql": "^3.0.2",
|
|
22
|
+
"@graphcommerce/image": "^3.0.2",
|
|
23
|
+
"@graphcommerce/magento-cart": "^4.1.1",
|
|
24
|
+
"@graphcommerce/magento-customer": "^4.1.1",
|
|
25
|
+
"@graphcommerce/magento-product": "^4.0.2",
|
|
26
|
+
"@graphcommerce/magento-store": "^4.0.2",
|
|
27
|
+
"@graphcommerce/next-ui": "^4.1.1",
|
|
28
|
+
"@graphcommerce/react-hook-form": "^3.0.2"
|
|
29
|
+
},
|
|
30
|
+
"peerDependencies": {
|
|
31
|
+
"@lingui/macro": "^3.13.2",
|
|
32
|
+
"@mui/material": "^5.4.1",
|
|
33
|
+
"framer-motion": "^6.2.4",
|
|
34
|
+
"next": "^12.0.10",
|
|
38
35
|
"react": "^17.0.2",
|
|
39
36
|
"react-dom": "^17.0.2"
|
|
40
|
-
}
|
|
41
|
-
"gitHead": "41e42c8cd6f565ab0cbba81a1954a0041dc46768"
|
|
37
|
+
}
|
|
42
38
|
}
|