@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 CHANGED
@@ -1,185 +1,228 @@
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
+ - [#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
- ## [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)
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
- * remove prop required in cart ([f22ba07](https://github.com/ho-nl/m2-pwa/commit/f22ba07960afa44422df1df3b80da687bbc8c5e8))
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
- * even more translations ([1a1f988](https://github.com/ho-nl/m2-pwa/commit/1a1f98837c704b978f6b42b619d9c52f540b2d48))
23
-
93
+ - even more translations
94
+ ([1a1f988](https://github.com/ho-nl/m2-pwa/commit/1a1f98837c704b978f6b42b619d9c52f540b2d48))
24
95
 
25
96
  ### Features
26
97
 
27
- * added tons of translations ([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
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
- * remove svg stroke definitions, set all to currentColor ([189814f](https://github.com/ho-nl/m2-pwa/commit/189814f822d111c8adc6be1fff65c9a4a4c50c65))
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
- * remove delivery label ([c799405](https://github.com/ho-nl/m2-pwa/commit/c799405e18f7fc2654df67b0c401dfcdef41fd6c))
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
- * font sizes ([1cf7d45](https://github.com/ho-nl/m2-pwa/commit/1cf7d451c3f8bdd064fdf351dffafced97387aff))
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
- * mobile cart ([fcafe5d](https://github.com/ho-nl/m2-pwa/commit/fcafe5d446f14fca6579d9005dd57389040c4cd3))
72
- * remove hardcoded fontSize ([e4e09e1](https://github.com/ho-nl/m2-pwa/commit/e4e09e11baeb8edeff634550b8cdb88571d96911))
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
- * darkTheme ([d0517af](https://github.com/ho-nl/m2-pwa/commit/d0517af5a788532c48f567ee3e840986efa26a67))
84
-
135
+ - darkTheme
136
+ ([d0517af](https://github.com/ho-nl/m2-pwa/commit/d0517af5a788532c48f567ee3e840986efa26a67))
85
137
 
86
138
  ### Features
87
139
 
88
- * darkTheme ([968f4f1](https://github.com/ho-nl/m2-pwa/commit/968f4f1360417bf7daa36454c19e6bc5cf53ae90))
89
- * darkTheme ([3ed6647](https://github.com/ho-nl/m2-pwa/commit/3ed664714670315bc9f20542549724f66cb5052d))
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
- * External SVG's can't have alt tags ([1b1414a](https://github.com/ho-nl/m2-pwa/commit/1b1414a782d55d3acf7b0e6bcaa50f2ad5f18f39))
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
- * dynamic icons, update SvgImage uses to SvgImageSimple ([3d3cc0e](https://github.com/ho-nl/m2-pwa/commit/3d3cc0e0336fcde1cce6ba19705f82c1edf9bfc6))
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
- * **nextjs:** upgraded to nextjs 12 ([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
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
- * **message-snackbar:** severity props ([c7be8a5](https://github.com/ho-nl/m2-pwa/commit/c7be8a51faf7a5937b7fab5bb352df2089ae4eea))
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
- * app shell consistency wip ([be995ca](https://github.com/ho-nl/m2-pwa/commit/be995ca5c3e383b89fea3759186d53af4790e99b))
153
- * cart item image sizes ([e7c860c](https://github.com/ho-nl/m2-pwa/commit/e7c860c785e172b9275e1a00c8b51509d6b297a8))
154
- * **cart:** be able to remove items from cart ([9c7f939](https://github.com/ho-nl/m2-pwa/commit/9c7f9397e9904e08014e7509d3ca63df8c062032))
155
- * **cart:** display prices with taxes for specific store views ([fd25541](https://github.com/ho-nl/m2-pwa/commit/fd25541646c41111f5ea53822d244591cb08b199))
156
- * **cart:** mobile styles ([aa601af](https://github.com/ho-nl/m2-pwa/commit/aa601af28ca7190ad90c33cc180fe63a28682519))
157
- * display prices excl and incl tax ([0d41135](https://github.com/ho-nl/m2-pwa/commit/0d411350e4621928411c2800be6ea02c6125049a))
158
- * ignore md files from triggering version updates ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
159
- * **image:** fix build ([b730cb6](https://github.com/ho-nl/m2-pwa/commit/b730cb6ae4e50dcf2f60e2046d6acf3047caacb3))
160
- * implement next-ui barrel imports ([75bea70](https://github.com/ho-nl/m2-pwa/commit/75bea703dba898f18a2a1dfa3243ebd0a4e6f0e1))
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
- * **cart:** when a cart is not active anymore show a clear cart button ([5d04a14](https://github.com/ho-nl/m2-pwa/commit/5d04a14726c040b20b34c0b88f923aee1dff22e5))
166
- * **graphql:** introduced new graphql package that holds all generated files ([a3e7aa0](https://github.com/ho-nl/m2-pwa/commit/a3e7aa05540540533b5ced9a95f1f802ecbe499f))
167
- * **image:** introduced completely rewritten Image component ([e3413b3](https://github.com/ho-nl/m2-pwa/commit/e3413b3a57392d6571ea64cb8d9c8dca05ea31df))
168
- * next.js 11 ([7d61407](https://github.com/ho-nl/m2-pwa/commit/7d614075a778f488045034f74be4f75b93f63c43))
169
- * **playwright:** added new playwright package to enable browser testing ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
170
- * 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))
171
- * **theme:** restructured fonts and applied to home and category page ([6adf5f1](https://github.com/ho-nl/m2-pwa/commit/6adf5f11321bdfbf499125f1161c5abf5a1bfe4a))
172
- * upgraded to nextjs 11 ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
173
- * useFormMutationCart and simpler imports ([012f090](https://github.com/ho-nl/m2-pwa/commit/012f090e8f54d09f35d393c61ad1e2319f5a90ff))
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
- * Revert "chore: upgrade @apollo/client" ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
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
 
@@ -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 { UseStyles, responsiveVal } from '@graphcommerce/next-ui'
6
- import { Badge, makeStyles, Theme, Link } from '@material-ui/core'
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 React, { PropsWithChildren } from 'react'
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
- const useStyles = makeStyles(
17
- (theme: Theme) => ({
18
- root: {
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
- export type CartItemProps = PropsWithChildren<CartItemFragment> &
139
- UseStyles<typeof useStyles> & { withOptions?: boolean }
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
- <div className={clsx(classes.root, !withOptions && classes.itemWithoutOptions)}>
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={<RemoveItemFromCartFab uid={uid} className={classes.badge} />}
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
- <a className={classes.productLink}>
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
- </a>
150
+ </Box>
173
151
  </PageLink>
174
152
  </Badge>
175
153
 
176
154
  <PageLink href={productLink}>
177
155
  <Link
178
156
  variant='body1'
179
- className={clsx(classes.itemName, withOptions && classes.itemNameWithOptions)}
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
- <div className={classes.itemPrice}>
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
- </div>
196
+ </Box>
195
197
 
196
- <div className={classes.quantity}>
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
- </div>
210
+ </Box>
199
211
 
200
- <div className={classes.rowPrice}>
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
- </div>
224
+ </Box>
203
225
 
204
226
  {children}
205
- </div>
227
+ </Box>
206
228
  )
207
229
  }
@@ -1,52 +1,58 @@
1
- import { makeStyles, MenuItem, Select, SelectProps, Theme } from '@material-ui/core'
2
- import React from 'react'
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
- <div className={classes.root}>
44
- <div className={classes.label}>{label}</div>
45
- <Select value={1} onChange={onChange} className={classes.select}>
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
- </div>
56
+ </Box>
51
57
  )
52
58
  }
@@ -1,49 +1,45 @@
1
- import { IconButton, makeStyles, Popover } from '@material-ui/core'
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
- const useStyles = makeStyles(
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
- export type DeliveryLabelProps = Record<string, unknown>
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 classes = useStyles()
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
- <div className={classes.root}>
45
- <IconButton component='button' className={classes.labelContainer} onClick={handleClick}>
46
- <div className={classes.label} />
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
- </div>
66
+ </Box>
66
67
  )
67
68
  }
@@ -1,15 +1,16 @@
1
1
  import { ApolloCartErrorSnackbar, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
2
- import { iconClose, SvgImageSimple } from '@graphcommerce/next-ui'
2
+ import { iconClose, SvgIcon } from '@graphcommerce/next-ui'
3
3
  import { t } from '@lingui/macro'
4
- import { Fab } from '@material-ui/core'
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
- <form noValidate onSubmit={submitHandler} {...formProps}>
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
- <SvgImageSimple src={iconClose} inverted />
29
+ <SvgIcon src={iconClose} />
29
30
  </Fab>
30
31
  <ApolloCartErrorSnackbar error={error} />
31
- </form>
32
+ </Form>
32
33
  )
33
34
  }
package/package.json CHANGED
@@ -1,11 +1,10 @@
1
1
  {
2
2
  "name": "@graphcommerce/magento-cart-items",
3
- "version": "2.110.48",
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/browserslist-config-pwa": "^3.0.3",
17
- "@graphcommerce/eslint-config-pwa": "^3.1.10",
18
- "@graphcommerce/prettier-config-pwa": "^3.0.5",
19
- "@graphcommerce/typescript-config-pwa": "^3.1.2",
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
- "@apollo/client": "^3.5.6",
24
- "@graphcommerce/graphql": "^2.105.13",
25
- "@graphcommerce/image": "^2.105.13",
26
- "@graphcommerce/magento-cart": "^3.10.3",
27
- "@graphcommerce/magento-customer": "^3.6.44",
28
- "@graphcommerce/magento-product": "^3.8.13",
29
- "@graphcommerce/magento-store": "^3.4.12",
30
- "@graphcommerce/next-ui": "^3.25.3",
31
- "@graphcommerce/react-hook-form": "^2.104.7",
32
- "@lingui/macro": "^3.13.0",
33
- "@material-ui/core": "^4.12.3",
34
- "@material-ui/lab": "^4.0.0-alpha.60",
35
- "clsx": "^1.1.1",
36
- "framer-motion": "^5.5.5",
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
  }