@graphcommerce/magento-cart-items 2.110.46 → 3.0.0

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