@graphcommerce/magento-cart-items 2.110.47 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +110 -104
  2. package/CartItem/CartItem.tsx +163 -141
  3. package/CartItem/CartItemOptionDropdown.tsx +44 -38
  4. package/DeliveryLabel/DeliveryLabel.tsx +34 -33
  5. package/RemoveItemFromCart/RemoveItemFromCartFab.tsx +8 -7
  6. package/package.json +20 -26
package/CHANGELOG.md CHANGED
@@ -1,185 +1,191 @@
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.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)
8
+ Thanks [@paales](https://github.com/paales)! - Added homepage and repository package.json files,
9
+ so that the packages link to back to the website and repository
10
+ - Updated dependencies
11
+ [[`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)]:
12
+ - @graphcommerce/graphql@3.0.1
13
+ - @graphcommerce/image@3.0.1
14
+ - @graphcommerce/magento-cart@4.0.1
15
+ - @graphcommerce/magento-customer@4.0.1
16
+ - @graphcommerce/magento-product@4.0.1
17
+ - @graphcommerce/magento-store@4.0.1
18
+ - @graphcommerce/next-ui@4.0.1
19
+ - @graphcommerce/react-hook-form@3.0.1
20
+
21
+ ## 3.0.0
22
+
23
+ ### Major Changes
24
+
25
+ - [#1258](https://github.com/ho-nl/m2-pwa/pull/1258)
26
+ [`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)
27
+ Thanks [@paales](https://github.com/paales)! - Upgraded to Material UI 5
28
+
29
+ ### Patch Changes
30
+
31
+ - Updated dependencies
32
+ [[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)]:
33
+ - @graphcommerce/graphql@3.0.0
34
+ - @graphcommerce/image@3.0.0
35
+ - @graphcommerce/magento-cart@4.0.0
36
+ - @graphcommerce/magento-customer@4.0.0
37
+ - @graphcommerce/magento-product@4.0.0
38
+ - @graphcommerce/magento-store@4.0.0
39
+ - @graphcommerce/next-ui@4.0.0
40
+ - @graphcommerce/react-hook-form@3.0.0
5
41
 
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)
42
+ All notable changes to this project will be documented in this file. See
43
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
7
44
 
45
+ ## [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
46
 
9
47
  ### Bug Fixes
10
48
 
11
- * remove prop required in cart ([f22ba07](https://github.com/ho-nl/m2-pwa/commit/f22ba07960afa44422df1df3b80da687bbc8c5e8))
12
-
13
-
14
-
15
-
49
+ - remove prop required in cart
50
+ ([f22ba07](https://github.com/ho-nl/m2-pwa/commit/f22ba07960afa44422df1df3b80da687bbc8c5e8))
16
51
 
17
52
  # [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
53
 
19
-
20
54
  ### Bug Fixes
21
55
 
22
- * even more translations ([1a1f988](https://github.com/ho-nl/m2-pwa/commit/1a1f98837c704b978f6b42b619d9c52f540b2d48))
23
-
56
+ - even more translations
57
+ ([1a1f988](https://github.com/ho-nl/m2-pwa/commit/1a1f98837c704b978f6b42b619d9c52f540b2d48))
24
58
 
25
59
  ### Features
26
60
 
27
- * added tons of translations ([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
28
-
29
-
30
-
31
-
61
+ - added tons of translations
62
+ ([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
32
63
 
33
64
  # [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
65
 
35
-
36
66
  ### Features
37
67
 
38
- * remove svg stroke definitions, set all to currentColor ([189814f](https://github.com/ho-nl/m2-pwa/commit/189814f822d111c8adc6be1fff65c9a4a4c50c65))
39
-
40
-
41
-
42
-
68
+ - remove svg stroke definitions, set all to currentColor
69
+ ([189814f](https://github.com/ho-nl/m2-pwa/commit/189814f822d111c8adc6be1fff65c9a4a4c50c65))
43
70
 
44
71
  ## [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
72
 
46
-
47
73
  ### Bug Fixes
48
74
 
49
- * remove delivery label ([c799405](https://github.com/ho-nl/m2-pwa/commit/c799405e18f7fc2654df67b0c401dfcdef41fd6c))
50
-
51
-
52
-
53
-
75
+ - remove delivery label
76
+ ([c799405](https://github.com/ho-nl/m2-pwa/commit/c799405e18f7fc2654df67b0c401dfcdef41fd6c))
54
77
 
55
78
  ## [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
79
 
57
-
58
80
  ### Bug Fixes
59
81
 
60
- * font sizes ([1cf7d45](https://github.com/ho-nl/m2-pwa/commit/1cf7d451c3f8bdd064fdf351dffafced97387aff))
61
-
62
-
63
-
64
-
82
+ - font sizes
83
+ ([1cf7d45](https://github.com/ho-nl/m2-pwa/commit/1cf7d451c3f8bdd064fdf351dffafced97387aff))
65
84
 
66
85
  ## [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
86
 
68
-
69
87
  ### Bug Fixes
70
88
 
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
-
89
+ - mobile cart
90
+ ([fcafe5d](https://github.com/ho-nl/m2-pwa/commit/fcafe5d446f14fca6579d9005dd57389040c4cd3))
91
+ - remove hardcoded fontSize
92
+ ([e4e09e1](https://github.com/ho-nl/m2-pwa/commit/e4e09e11baeb8edeff634550b8cdb88571d96911))
77
93
 
78
94
  # [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
95
 
80
-
81
96
  ### Bug Fixes
82
97
 
83
- * darkTheme ([d0517af](https://github.com/ho-nl/m2-pwa/commit/d0517af5a788532c48f567ee3e840986efa26a67))
84
-
98
+ - darkTheme
99
+ ([d0517af](https://github.com/ho-nl/m2-pwa/commit/d0517af5a788532c48f567ee3e840986efa26a67))
85
100
 
86
101
  ### Features
87
102
 
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
-
103
+ - darkTheme
104
+ ([968f4f1](https://github.com/ho-nl/m2-pwa/commit/968f4f1360417bf7daa36454c19e6bc5cf53ae90))
105
+ - darkTheme
106
+ ([3ed6647](https://github.com/ho-nl/m2-pwa/commit/3ed664714670315bc9f20542549724f66cb5052d))
94
107
 
95
108
  ## [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
109
 
97
-
98
110
  ### Bug Fixes
99
111
 
100
- * External SVG's can't have alt tags ([1b1414a](https://github.com/ho-nl/m2-pwa/commit/1b1414a782d55d3acf7b0e6bcaa50f2ad5f18f39))
101
-
102
-
103
-
104
-
112
+ - External SVG's can't have alt tags
113
+ ([1b1414a](https://github.com/ho-nl/m2-pwa/commit/1b1414a782d55d3acf7b0e6bcaa50f2ad5f18f39))
105
114
 
106
115
  # [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
116
 
108
-
109
117
  ### Features
110
118
 
111
- * dynamic icons, update SvgImage uses to SvgImageSimple ([3d3cc0e](https://github.com/ho-nl/m2-pwa/commit/3d3cc0e0336fcde1cce6ba19705f82c1edf9bfc6))
112
-
113
-
114
-
115
-
119
+ - dynamic icons, update SvgImage uses to SvgImageSimple
120
+ ([3d3cc0e](https://github.com/ho-nl/m2-pwa/commit/3d3cc0e0336fcde1cce6ba19705f82c1edf9bfc6))
116
121
 
117
122
  # [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
123
 
119
-
120
124
  ### Features
121
125
 
122
- * **nextjs:** upgraded to nextjs 12 ([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
123
-
124
-
125
-
126
-
126
+ - **nextjs:** upgraded to nextjs 12
127
+ ([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
127
128
 
128
129
  # [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
130
 
130
-
131
131
  ### Features
132
132
 
133
- * **message-snackbar:** severity props ([c7be8a5](https://github.com/ho-nl/m2-pwa/commit/c7be8a51faf7a5937b7fab5bb352df2089ae4eea))
134
-
135
-
136
-
137
-
133
+ - **message-snackbar:** severity props
134
+ ([c7be8a5](https://github.com/ho-nl/m2-pwa/commit/c7be8a51faf7a5937b7fab5bb352df2089ae4eea))
138
135
 
139
136
  ## [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
137
 
141
138
  **Note:** Version bump only for package @graphcommerce/magento-cart-items
142
139
 
143
-
144
-
145
-
146
-
147
140
  # 2.104.0 (2021-09-27)
148
141
 
149
-
150
142
  ### Bug Fixes
151
143
 
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
-
144
+ - app shell consistency wip
145
+ ([be995ca](https://github.com/ho-nl/m2-pwa/commit/be995ca5c3e383b89fea3759186d53af4790e99b))
146
+ - cart item image sizes
147
+ ([e7c860c](https://github.com/ho-nl/m2-pwa/commit/e7c860c785e172b9275e1a00c8b51509d6b297a8))
148
+ - **cart:** be able to remove items from cart
149
+ ([9c7f939](https://github.com/ho-nl/m2-pwa/commit/9c7f9397e9904e08014e7509d3ca63df8c062032))
150
+ - **cart:** display prices with taxes for specific store views
151
+ ([fd25541](https://github.com/ho-nl/m2-pwa/commit/fd25541646c41111f5ea53822d244591cb08b199))
152
+ - **cart:** mobile styles
153
+ ([aa601af](https://github.com/ho-nl/m2-pwa/commit/aa601af28ca7190ad90c33cc180fe63a28682519))
154
+ - display prices excl and incl tax
155
+ ([0d41135](https://github.com/ho-nl/m2-pwa/commit/0d411350e4621928411c2800be6ea02c6125049a))
156
+ - ignore md files from triggering version updates
157
+ ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
158
+ - **image:** fix build
159
+ ([b730cb6](https://github.com/ho-nl/m2-pwa/commit/b730cb6ae4e50dcf2f60e2046d6acf3047caacb3))
160
+ - implement next-ui barrel imports
161
+ ([75bea70](https://github.com/ho-nl/m2-pwa/commit/75bea703dba898f18a2a1dfa3243ebd0a4e6f0e1))
162
162
 
163
163
  ### Features
164
164
 
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
-
165
+ - **cart:** when a cart is not active anymore show a clear cart button
166
+ ([5d04a14](https://github.com/ho-nl/m2-pwa/commit/5d04a14726c040b20b34c0b88f923aee1dff22e5))
167
+ - **graphql:** introduced new graphql package that holds all generated files
168
+ ([a3e7aa0](https://github.com/ho-nl/m2-pwa/commit/a3e7aa05540540533b5ced9a95f1f802ecbe499f))
169
+ - **image:** introduced completely rewritten Image component
170
+ ([e3413b3](https://github.com/ho-nl/m2-pwa/commit/e3413b3a57392d6571ea64cb8d9c8dca05ea31df))
171
+ - next.js 11
172
+ ([7d61407](https://github.com/ho-nl/m2-pwa/commit/7d614075a778f488045034f74be4f75b93f63c43))
173
+ - **playwright:** added new playwright package to enable browser testing
174
+ ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
175
+ - renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of
176
+ [@reachdigital](https://github.com/reachdigital)
177
+ ([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
178
+ - **theme:** restructured fonts and applied to home and category page
179
+ ([6adf5f1](https://github.com/ho-nl/m2-pwa/commit/6adf5f11321bdfbf499125f1161c5abf5a1bfe4a))
180
+ - upgraded to nextjs 11
181
+ ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
182
+ - useFormMutationCart and simpler imports
183
+ ([012f090](https://github.com/ho-nl/m2-pwa/commit/012f090e8f54d09f35d393c61ad1e2319f5a90ff))
175
184
 
176
185
  ### Reverts
177
186
 
178
- * Revert "chore: upgrade @apollo/client" ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
179
-
180
-
181
-
182
-
187
+ - Revert "chore: upgrade @apollo/client"
188
+ ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
183
189
 
184
190
  # Change Log
185
191
 
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 { 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
  }
package/CartItem/CartItemOptionDropdown.tsx CHANGED
@@ -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
  }
package/DeliveryLabel/DeliveryLabel.tsx CHANGED
@@ -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
  }
package/RemoveItemFromCart/RemoveItemFromCartFab.tsx CHANGED
@@ -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.47",
3
+ "homepage": "https://www.graphcommerce.org/",
4
+ "repository": "github:graphcommerce-org/graphcommerce",
5
+ "version": "3.0.1",
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,25 @@
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.1",
16
+ "@graphcommerce/prettier-config-pwa": "^4.0.1",
17
+ "@graphcommerce/typescript-config-pwa": "^4.0.1",
18
+ "@playwright/test": "^1.18.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.2",
27
- "@graphcommerce/magento-customer": "^3.6.43",
28
- "@graphcommerce/magento-product": "^3.8.12",
29
- "@graphcommerce/magento-store": "^3.4.11",
30
- "@graphcommerce/next-ui": "^3.25.2",
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.1",
22
+ "@graphcommerce/image": "^3.0.1",
23
+ "@graphcommerce/magento-cart": "^4.0.1",
24
+ "@graphcommerce/magento-customer": "^4.0.1",
25
+ "@graphcommerce/magento-product": "^4.0.1",
26
+ "@graphcommerce/magento-store": "^4.0.1",
27
+ "@graphcommerce/next-ui": "^4.0.1",
28
+ "@graphcommerce/react-hook-form": "^3.0.1",
29
+ "@lingui/macro": "^3.13.2",
30
+ "@mui/material": "^5.4.1",
31
+ "framer-motion": "^6.2.4",
32
+ "next": "^12.0.10",
38
33
  "react": "^17.0.2",
39
34
  "react-dom": "^17.0.2"
40
- },
41
- "gitHead": "110ddb032ee3ce6e363b9f5f7d21af71fb51b527"
35
+ }
42
36
  }