@graphcommerce/magento-review 2.111.43 → 3.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +151 -99
  2. package/components/AccountReviews/index.tsx +17 -26
  3. package/components/CreateProductReviewForm/index.tsx +65 -52
  4. package/components/CustomerReview/index.tsx +76 -67
  5. package/components/ProductReviewChip/index.tsx +3 -14
  6. package/components/ProductReviewSummary/index.tsx +60 -48
  7. package/components/ProductReviews/index.tsx +171 -106
  8. package/package.json +21 -25
package/CHANGELOG.md CHANGED
@@ -1,173 +1,225 @@
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
+ - @graphcommerce/magento-customer@4.1.1
31
+ - @graphcommerce/next-ui@4.1.1
32
+ - @graphcommerce/react-hook-form@3.0.2
33
+ - @graphcommerce/graphql@3.0.2
34
+ - @graphcommerce/image@3.0.2
35
+ - @graphcommerce/magento-product@4.0.2
36
+ - @graphcommerce/magento-store@4.0.2
37
+
38
+ ## 3.0.1
39
+
40
+ ### Patch Changes
41
+
42
+ - [`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)
43
+ Thanks [@paales](https://github.com/paales)! - Added homepage and repository package.json files,
44
+ so that the packages link to back to the website and repository
45
+ - Updated dependencies
46
+ [[`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)]:
47
+ - @graphcommerce/graphql@3.0.1
48
+ - @graphcommerce/image@3.0.1
49
+ - @graphcommerce/magento-customer@4.0.1
50
+ - @graphcommerce/magento-product@4.0.1
51
+ - @graphcommerce/magento-store@4.0.1
52
+ - @graphcommerce/next-ui@4.0.1
53
+ - @graphcommerce/react-hook-form@3.0.1
54
+
55
+ ## 3.0.0
56
+
57
+ ### Major Changes
58
+
59
+ - [#1258](https://github.com/ho-nl/m2-pwa/pull/1258)
60
+ [`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)
61
+ Thanks [@paales](https://github.com/paales)! - Upgraded to Material UI 5
62
+
63
+ ### Patch Changes
64
+
65
+ - Updated dependencies
66
+ [[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)]:
67
+ - @graphcommerce/graphql@3.0.0
68
+ - @graphcommerce/image@3.0.0
69
+ - @graphcommerce/magento-customer@4.0.0
70
+ - @graphcommerce/magento-product@4.0.0
71
+ - @graphcommerce/magento-store@4.0.0
72
+ - @graphcommerce/next-ui@4.0.0
73
+ - @graphcommerce/react-hook-form@3.0.0
5
74
 
6
- # [2.111.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.110.2...@graphcommerce/magento-review@2.111.0) (2021-12-01)
75
+ All notable changes to this project will be documented in this file. See
76
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
7
77
 
78
+ # [2.111.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.110.2...@graphcommerce/magento-review@2.111.0) (2021-12-01)
8
79
 
9
80
  ### Features
10
81
 
11
- * borderRadius based on theme.shape.borderRadius ([7c34937](https://github.com/ho-nl/m2-pwa/commit/7c349376cd41a131c628324c299106fdb7e60484))
12
-
13
-
14
-
15
-
82
+ - borderRadius based on theme.shape.borderRadius
83
+ ([7c34937](https://github.com/ho-nl/m2-pwa/commit/7c349376cd41a131c628324c299106fdb7e60484))
16
84
 
17
85
  # [2.110.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.109.1...@graphcommerce/magento-review@2.110.0) (2021-11-22)
18
86
 
19
-
20
87
  ### Bug Fixes
21
88
 
22
- * allow styling from parent ([ed1b4dc](https://github.com/ho-nl/m2-pwa/commit/ed1b4dc446fa19244cc73f87063256809b914d15))
23
- * cleanup ([7937ac5](https://github.com/ho-nl/m2-pwa/commit/7937ac5c6163a4ffe10d8a8d61847fcc86e82a9d))
24
- * make stylable ([54aea4c](https://github.com/ho-nl/m2-pwa/commit/54aea4c177c708de07df9ef9c590da6bff43aea8))
25
- * remove styles ([fabde1f](https://github.com/ho-nl/m2-pwa/commit/fabde1f1dba9f75dea60bb2c7c69d4793c6197cd))
26
- * rename summary chip fragment ([bb23dfc](https://github.com/ho-nl/m2-pwa/commit/bb23dfc8bb82e99832196b4080d2c4c9f269cc5d))
27
- * revert to SvgImageSimple ([b247c6b](https://github.com/ho-nl/m2-pwa/commit/b247c6b96979bc313e597a8ffe1275b73f38bd6a))
28
- * review form size large ([9f45336](https://github.com/ho-nl/m2-pwa/commit/9f45336d310b120088fe6440dd95a51944ff77cb))
29
- * use fragment types ([0a06309](https://github.com/ho-nl/m2-pwa/commit/0a0630916e191c59eed402904b9ace6b87831bd8))
30
-
89
+ - allow styling from parent
90
+ ([ed1b4dc](https://github.com/ho-nl/m2-pwa/commit/ed1b4dc446fa19244cc73f87063256809b914d15))
91
+ - cleanup
92
+ ([7937ac5](https://github.com/ho-nl/m2-pwa/commit/7937ac5c6163a4ffe10d8a8d61847fcc86e82a9d))
93
+ - make stylable
94
+ ([54aea4c](https://github.com/ho-nl/m2-pwa/commit/54aea4c177c708de07df9ef9c590da6bff43aea8))
95
+ - remove styles
96
+ ([fabde1f](https://github.com/ho-nl/m2-pwa/commit/fabde1f1dba9f75dea60bb2c7c69d4793c6197cd))
97
+ - rename summary chip fragment
98
+ ([bb23dfc](https://github.com/ho-nl/m2-pwa/commit/bb23dfc8bb82e99832196b4080d2c4c9f269cc5d))
99
+ - revert to SvgImageSimple
100
+ ([b247c6b](https://github.com/ho-nl/m2-pwa/commit/b247c6b96979bc313e597a8ffe1275b73f38bd6a))
101
+ - review form size large
102
+ ([9f45336](https://github.com/ho-nl/m2-pwa/commit/9f45336d310b120088fe6440dd95a51944ff77cb))
103
+ - use fragment types
104
+ ([0a06309](https://github.com/ho-nl/m2-pwa/commit/0a0630916e191c59eed402904b9ace6b87831bd8))
31
105
 
32
106
  ### Features
33
107
 
34
- * add ReviewSummary component ([b823669](https://github.com/ho-nl/m2-pwa/commit/b823669d32e92238d05cac181c3453a13da49601))
35
- * use Rating component ([ec54f45](https://github.com/ho-nl/m2-pwa/commit/ec54f4522adb2d330bbdecc2ce032f86f13fb7a6))
36
-
37
-
38
-
39
-
108
+ - add ReviewSummary component
109
+ ([b823669](https://github.com/ho-nl/m2-pwa/commit/b823669d32e92238d05cac181c3453a13da49601))
110
+ - use Rating component
111
+ ([ec54f45](https://github.com/ho-nl/m2-pwa/commit/ec54f4522adb2d330bbdecc2ce032f86f13fb7a6))
40
112
 
41
113
  # [2.109.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.108.6...@graphcommerce/magento-review@2.109.0) (2021-11-12)
42
114
 
43
-
44
115
  ### Bug Fixes
45
116
 
46
- * even more translations ([1a1f988](https://github.com/ho-nl/m2-pwa/commit/1a1f98837c704b978f6b42b619d9c52f540b2d48))
47
-
117
+ - even more translations
118
+ ([1a1f988](https://github.com/ho-nl/m2-pwa/commit/1a1f98837c704b978f6b42b619d9c52f540b2d48))
48
119
 
49
120
  ### Features
50
121
 
51
- * added tons of translations ([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
52
-
53
-
54
-
55
-
122
+ - added tons of translations
123
+ ([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
56
124
 
57
125
  # [2.108.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.107.21...@graphcommerce/magento-review@2.108.0) (2021-11-09)
58
126
 
59
-
60
127
  ### Features
61
128
 
62
- * added translations to all pages ([8cf4ecd](https://github.com/ho-nl/m2-pwa/commit/8cf4ecd5db5edfec04ab205aa49f5de433d26579))
63
-
64
-
65
-
66
-
129
+ - added translations to all pages
130
+ ([8cf4ecd](https://github.com/ho-nl/m2-pwa/commit/8cf4ecd5db5edfec04ab205aa49f5de433d26579))
67
131
 
68
132
  ## [2.107.13](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.107.12...@graphcommerce/magento-review@2.107.13) (2021-11-03)
69
133
 
70
-
71
134
  ### Bug Fixes
72
135
 
73
- * various accessibility improvements ([47481a9](https://github.com/ho-nl/m2-pwa/commit/47481a9a882ba87968de6dd797557b0b275d75fb))
74
-
75
-
76
-
77
-
136
+ - various accessibility improvements
137
+ ([47481a9](https://github.com/ho-nl/m2-pwa/commit/47481a9a882ba87968de6dd797557b0b275d75fb))
78
138
 
79
139
  ## [2.107.6](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.107.5...@graphcommerce/magento-review@2.107.6) (2021-11-02)
80
140
 
81
-
82
141
  ### Bug Fixes
83
142
 
84
- * remove text='bold', make contained button text stronger by default ([cd277c9](https://github.com/ho-nl/m2-pwa/commit/cd277c9f434a4a765eac372467e5a05c822d5512))
85
- * remove unused imports ([b832188](https://github.com/ho-nl/m2-pwa/commit/b8321887f10a4a026adc5ca39166eeef90e60669))
86
- * ReviewChip should only differ from default MuiChip in product grid ([c22a029](https://github.com/ho-nl/m2-pwa/commit/c22a0291afbbc03099fd0487421ff9fd31caf226))
87
-
88
-
89
-
90
-
143
+ - remove text='bold', make contained button text stronger by default
144
+ ([cd277c9](https://github.com/ho-nl/m2-pwa/commit/cd277c9f434a4a765eac372467e5a05c822d5512))
145
+ - remove unused imports
146
+ ([b832188](https://github.com/ho-nl/m2-pwa/commit/b8321887f10a4a026adc5ca39166eeef90e60669))
147
+ - ReviewChip should only differ from default MuiChip in product grid
148
+ ([c22a029](https://github.com/ho-nl/m2-pwa/commit/c22a0291afbbc03099fd0487421ff9fd31caf226))
91
149
 
92
150
  ## [2.107.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.107.0...@graphcommerce/magento-review@2.107.1) (2021-10-28)
93
151
 
94
-
95
152
  ### Bug Fixes
96
153
 
97
- * External SVG's can't have alt tags ([1b1414a](https://github.com/ho-nl/m2-pwa/commit/1b1414a782d55d3acf7b0e6bcaa50f2ad5f18f39))
98
-
99
-
100
-
101
-
154
+ - External SVG's can't have alt tags
155
+ ([1b1414a](https://github.com/ho-nl/m2-pwa/commit/1b1414a782d55d3acf7b0e6bcaa50f2ad5f18f39))
102
156
 
103
157
  # [2.107.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.106.2...@graphcommerce/magento-review@2.107.0) (2021-10-28)
104
158
 
105
-
106
159
  ### Bug Fixes
107
160
 
108
- * keep original review chip ([3f2f834](https://github.com/ho-nl/m2-pwa/commit/3f2f834478b7b8252f6164442815e5c081de6411))
109
- * keep original review chip for now ([9664cd9](https://github.com/ho-nl/m2-pwa/commit/9664cd90801c6776e1c694eec8f393118810a792))
110
- * review button size ([9074102](https://github.com/ho-nl/m2-pwa/commit/9074102c1866b14d0e7f1f0f3dfabe6e6c0b324d))
111
- * size of default ReviewChip ([e1d4969](https://github.com/ho-nl/m2-pwa/commit/e1d49699776b15fa056677f042f6c9939b6acada))
112
-
161
+ - keep original review chip
162
+ ([3f2f834](https://github.com/ho-nl/m2-pwa/commit/3f2f834478b7b8252f6164442815e5c081de6411))
163
+ - keep original review chip for now
164
+ ([9664cd9](https://github.com/ho-nl/m2-pwa/commit/9664cd90801c6776e1c694eec8f393118810a792))
165
+ - review button size
166
+ ([9074102](https://github.com/ho-nl/m2-pwa/commit/9074102c1866b14d0e7f1f0f3dfabe6e6c0b324d))
167
+ - size of default ReviewChip
168
+ ([e1d4969](https://github.com/ho-nl/m2-pwa/commit/e1d49699776b15fa056677f042f6c9939b6acada))
113
169
 
114
170
  ### Features
115
171
 
116
- * cleanup grid, add visual star chip ([0571569](https://github.com/ho-nl/m2-pwa/commit/057156937f603bc399f5f8f8ac2837ff5cfaef28))
117
- * dynamic icons, update SvgImage uses to SvgImageSimple ([3d3cc0e](https://github.com/ho-nl/m2-pwa/commit/3d3cc0e0336fcde1cce6ba19705f82c1edf9bfc6))
118
- * enable use of both small and medium chips in design ([4536f96](https://github.com/ho-nl/m2-pwa/commit/4536f96b031734a71faf7c10f94aa5d5da90b9a8))
119
-
120
-
121
-
122
-
172
+ - cleanup grid, add visual star chip
173
+ ([0571569](https://github.com/ho-nl/m2-pwa/commit/057156937f603bc399f5f8f8ac2837ff5cfaef28))
174
+ - dynamic icons, update SvgImage uses to SvgImageSimple
175
+ ([3d3cc0e](https://github.com/ho-nl/m2-pwa/commit/3d3cc0e0336fcde1cce6ba19705f82c1edf9bfc6))
176
+ - enable use of both small and medium chips in design
177
+ ([4536f96](https://github.com/ho-nl/m2-pwa/commit/4536f96b031734a71faf7c10f94aa5d5da90b9a8))
123
178
 
124
179
  # [2.106.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.105.37...@graphcommerce/magento-review@2.106.0) (2021-10-27)
125
180
 
126
-
127
181
  ### Features
128
182
 
129
- * **nextjs:** upgraded to nextjs 12 ([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
130
-
131
-
132
-
133
-
183
+ - **nextjs:** upgraded to nextjs 12
184
+ ([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
134
185
 
135
186
  ## [2.105.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.105.0...@graphcommerce/magento-review@2.105.1) (2021-09-27)
136
187
 
137
188
  **Note:** Version bump only for package @graphcommerce/magento-review
138
189
 
139
-
140
-
141
-
142
-
143
190
  # 2.105.0 (2021-09-27)
144
191
 
145
-
146
192
  ### Bug Fixes
147
193
 
148
- * customer-order folder structure ([b7fabd1](https://github.com/ho-nl/m2-pwa/commit/b7fabd12014b2925d0b89c21f58e9974ce1c8b40))
149
- * introduced SvgImageSimple and solve issue with review chips ([931d7fd](https://github.com/ho-nl/m2-pwa/commit/931d7fdcf0faa9d2264899b72e564138215b6bd8))
150
- * make separate queries folder, create injectable for account and inject reviews ([5d82a5d](https://github.com/ho-nl/m2-pwa/commit/5d82a5d9162f687c2678cce215b77eedbaf1669e))
151
- * remove coupon form style was too large ([30df274](https://github.com/ho-nl/m2-pwa/commit/30df274ecdffdcebd76710a5304d6fa248e81211))
152
- * **review:** make sure chip is rendered correctly ([387df34](https://github.com/ho-nl/m2-pwa/commit/387df3456973290f9ce98d47823a7c71a6d95850))
153
- * SvgSimpleImage sizing didn't use rem ([1ba07a5](https://github.com/ho-nl/m2-pwa/commit/1ba07a5694bd60ad3cee2e8102814643d2a7c79d))
154
-
194
+ - customer-order folder structure
195
+ ([b7fabd1](https://github.com/ho-nl/m2-pwa/commit/b7fabd12014b2925d0b89c21f58e9974ce1c8b40))
196
+ - introduced SvgImageSimple and solve issue with review chips
197
+ ([931d7fd](https://github.com/ho-nl/m2-pwa/commit/931d7fdcf0faa9d2264899b72e564138215b6bd8))
198
+ - make separate queries folder, create injectable for account and inject reviews
199
+ ([5d82a5d](https://github.com/ho-nl/m2-pwa/commit/5d82a5d9162f687c2678cce215b77eedbaf1669e))
200
+ - remove coupon form style was too large
201
+ ([30df274](https://github.com/ho-nl/m2-pwa/commit/30df274ecdffdcebd76710a5304d6fa248e81211))
202
+ - **review:** make sure chip is rendered correctly
203
+ ([387df34](https://github.com/ho-nl/m2-pwa/commit/387df3456973290f9ce98d47823a7c71a6d95850))
204
+ - SvgSimpleImage sizing didn't use rem
205
+ ([1ba07a5](https://github.com/ho-nl/m2-pwa/commit/1ba07a5694bd60ad3cee2e8102814643d2a7c79d))
155
206
 
156
207
  ### Features
157
208
 
158
- * **playwright:** added new playwright package to enable browser testing ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
159
- * 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))
160
- * **theme:** restructured fonts and applied to home and category page ([6adf5f1](https://github.com/ho-nl/m2-pwa/commit/6adf5f11321bdfbf499125f1161c5abf5a1bfe4a))
161
- * upgraded to nextjs 11 ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
162
-
209
+ - **playwright:** added new playwright package to enable browser testing
210
+ ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
211
+ - renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of
212
+ [@reachdigital](https://github.com/reachdigital)
213
+ ([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
214
+ - **theme:** restructured fonts and applied to home and category page
215
+ ([6adf5f1](https://github.com/ho-nl/m2-pwa/commit/6adf5f11321bdfbf499125f1161c5abf5a1bfe4a))
216
+ - upgraded to nextjs 11
217
+ ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
163
218
 
164
219
  ### Reverts
165
220
 
166
- * Revert "chore: upgrade @apollo/client" ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
167
-
168
-
169
-
170
-
221
+ - Revert "chore: upgrade @apollo/client"
222
+ ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
171
223
 
172
224
  # Change Log
173
225
 
package/components/AccountReviews/index.tsx CHANGED
@@ -1,48 +1,30 @@
1
- import { SectionContainer } from '@graphcommerce/next-ui'
2
- import { makeStyles, Theme } from '@material-ui/core'
3
- import { Skeleton } from '@material-ui/lab'
4
- import React from 'react'
1
+ import { SectionContainer, extendableComponent } from '@graphcommerce/next-ui'
2
+ import { Box, Skeleton } from '@mui/material'
5
3
  import CustomerReview from '../CustomerReview'
6
4
  import { AccountReviewsFragment } from './AccountReviews.gql'
7
5
 
8
6
  type AccountReviewsProps = AccountReviewsFragment & { loading: boolean }
9
7
 
10
- const useStyles = makeStyles(
11
- (theme: Theme) => ({
12
- reviewsContainer: {
13
- marginBottom: theme.spacings.md,
14
- },
15
- olderReviewsContainer: {
16
- [theme.breakpoints.up('md')]: {
17
- marginTop: theme.spacings.lg,
18
- marginBottom: theme.spacings.lg,
19
- },
20
- marginTop: theme.spacings.md,
21
- marginBottom: theme.spacings.md,
22
- },
23
- }),
24
- { name: 'AccountReviews' },
25
- )
8
+ const { classes } = extendableComponent('AccountReviews', ['root', 'older'] as const)
26
9
 
27
10
  export default function AccountReviews(props: AccountReviewsProps) {
28
11
  const { items, loading } = props
29
- const classes = useStyles()
30
12
  const showLatestReviews = 2
31
13
  const latestReviews = items?.slice(0, Math.min(items?.length, showLatestReviews))
32
14
  const olderReviews = items?.slice(Math.min(items?.length, showLatestReviews), items?.length)
33
15
 
34
16
  if (loading) {
35
17
  return (
36
- <div className={classes.reviewsContainer}>
18
+ <Box className={classes.root} sx={(theme) => ({ marginBottom: theme.spacings.md })}>
37
19
  <SectionContainer labelLeft='Latest'>
38
20
  <Skeleton height={196} />
39
21
  <Skeleton height={196} />
40
22
  </SectionContainer>
41
- </div>
23
+ </Box>
42
24
  )
43
25
  }
44
26
  return (
45
- <div className={classes.reviewsContainer}>
27
+ <Box className={classes.root} sx={(theme) => ({ marginBottom: theme.spacings.md })}>
46
28
  <SectionContainer labelLeft='Latest'>
47
29
  {latestReviews?.map(
48
30
  (review) => review && <CustomerReview key={review.created_at} {...review} />,
@@ -52,13 +34,22 @@ export default function AccountReviews(props: AccountReviewsProps) {
52
34
  {items && items.length >= showLatestReviews + 1 && (
53
35
  <SectionContainer
54
36
  labelLeft='Older'
55
- classes={{ sectionContainer: classes.olderReviewsContainer }}
37
+ sx={(theme) => ({
38
+ '&.SectionHeader': {
39
+ [theme.breakpoints.up('md')]: {
40
+ marginTop: theme.spacings.lg,
41
+ marginBottom: theme.spacings.lg,
42
+ },
43
+ marginTop: theme.spacings.md,
44
+ marginBottom: theme.spacings.md,
45
+ },
46
+ })}
56
47
  >
57
48
  {olderReviews?.map(
58
49
  (review) => review && <CustomerReview key={review.created_at} {...review} />,
59
50
  )}
60
51
  </SectionContainer>
61
52
  )}
62
- </div>
53
+ </Box>
63
54
  )
64
55
  }
package/components/CreateProductReviewForm/index.tsx CHANGED
@@ -1,66 +1,42 @@
1
- import { useQuery } from '@apollo/client'
1
+ import { useQuery } from '@graphcommerce/graphql'
2
2
  import { ProductReviewRatingInput } from '@graphcommerce/graphql'
3
3
  import { ApolloCustomerErrorAlert } from '@graphcommerce/magento-customer'
4
4
  import {
5
- Button,
6
5
  Form,
7
- UseStyles,
8
6
  responsiveVal,
9
7
  FormActions,
10
8
  FormRow,
11
9
  StarRatingField,
10
+ extendableComponent,
12
11
  } from '@graphcommerce/next-ui'
13
12
  import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
14
13
  import { Trans } from '@lingui/macro'
15
- import { Box, makeStyles, TextField, Theme, Typography } from '@material-ui/core'
16
- import { Alert } from '@material-ui/lab'
14
+ import { Box, TextField, Typography, Alert, Button, SxProps, Theme } from '@mui/material'
17
15
  import { useRouter } from 'next/router'
18
- import React, { useEffect, useState } from 'react'
16
+ import { useEffect, useState } from 'react'
19
17
  import { CreateProductReviewDocument } from './CreateProductReview.gql'
20
18
  import { ProductReviewRatingsMetadataDocument } from './ProductReviewRatingsMetadata.gql'
21
19
 
22
- const useStyles = makeStyles(
23
- (theme: Theme) => ({
24
- ratingContainer: {
25
- marginBottom: theme.spacings.xxs,
26
- },
27
- rating: {
28
- paddingBottom: 'unset',
29
- gridTemplateColumns: `minmax(${responsiveVal(60, 80)}, 0.1fr) max-content`,
30
- alignItems: 'center',
31
- },
32
- ratingLabel: {
33
- fontWeight: 'normal',
34
- justifySelf: 'left',
35
- },
36
- submitButton: {
37
- width: responsiveVal(200, 250),
38
- height: responsiveVal(40, 50),
39
- },
40
- cancelButton: {
41
- display: 'block',
42
- maxWidth: 'max-content',
43
- margin: '0 auto',
44
- },
45
- formActions: {
46
- gridAutoFlow: 'row',
47
- gap: 8,
48
- marginTop: theme.spacings.xxs,
49
- },
50
- }),
51
- {
52
- name: 'CreateProductReviewForm',
53
- },
54
- )
55
-
56
20
  type CreateProductReviewFormProps = {
57
21
  sku: string
58
22
  nickname?: string
59
- } & UseStyles<typeof useStyles>
23
+ sx?: SxProps<Theme>
24
+ }
25
+
26
+ const name = 'CreateProductReviewForm' as const
27
+ const parts = [
28
+ 'root',
29
+ 'ratingContainer',
30
+ 'rating',
31
+ 'ratingLabel',
32
+ 'submitButton',
33
+ 'cancelButton',
34
+ 'formActions',
35
+ ] as const
36
+ const { classes } = extendableComponent(name, parts)
60
37
 
61
38
  export default function CreateProductReviewForm(props: CreateProductReviewFormProps) {
62
- const { sku, nickname } = props
63
- const classes = useStyles(props)
39
+ const { sku, nickname, sx = [] } = props
64
40
  const router = useRouter()
65
41
  const [ratings, setRatings] = useState<ProductReviewRatingInput[]>([])
66
42
 
@@ -112,7 +88,7 @@ export default function CreateProductReviewForm(props: CreateProductReviewFormPr
112
88
  }
113
89
 
114
90
  return (
115
- <Form onSubmit={submitHandler} noValidate>
91
+ <Form onSubmit={submitHandler} noValidate className={classes.root}>
116
92
  <FormRow>
117
93
  <TextField
118
94
  variant='outlined'
@@ -129,10 +105,31 @@ export default function CreateProductReviewForm(props: CreateProductReviewFormPr
129
105
  />
130
106
  </FormRow>
131
107
 
132
- <div className={classes.ratingContainer}>
108
+ <Box
109
+ className={classes.ratingContainer}
110
+ sx={(theme) => ({
111
+ marginBottom: theme.spacings.xxs,
112
+ })}
113
+ >
133
114
  {data?.productReviewRatingsMetadata?.items?.map((prrvm) => (
134
- <FormRow key={prrvm?.id} className={classes.rating}>
135
- <Typography variant='h5' component='span' className={classes.ratingLabel}>
115
+ <FormRow
116
+ key={prrvm?.id}
117
+ className={classes.rating}
118
+ sx={{
119
+ paddingBottom: 'unset',
120
+ gridTemplateColumns: `minmax(${responsiveVal(60, 80)}, 0.1fr) max-content`,
121
+ alignItems: 'center',
122
+ }}
123
+ >
124
+ <Typography
125
+ variant='h5'
126
+ component='span'
127
+ className={classes.ratingLabel}
128
+ sx={{
129
+ fontWeight: 'normal',
130
+ justifySelf: 'left',
131
+ }}
132
+ >
136
133
  {prrvm?.name}
137
134
  </Typography>
138
135
  {prrvm && (
@@ -168,7 +165,7 @@ export default function CreateProductReviewForm(props: CreateProductReviewFormPr
168
165
  )}
169
166
  </FormRow>
170
167
  ))}
171
- </div>
168
+ </Box>
172
169
 
173
170
  <FormRow>
174
171
  <TextField
@@ -195,27 +192,43 @@ export default function CreateProductReviewForm(props: CreateProductReviewFormPr
195
192
  disabled={formState.isSubmitting}
196
193
  multiline
197
194
  rows={8}
198
- rowsMax={8}
195
+ maxRows={8}
199
196
  />
200
197
  </FormRow>
201
198
 
202
- <FormActions className={classes.formActions}>
199
+ <FormActions
200
+ className={classes.formActions}
201
+ sx={(theme) => ({
202
+ gridAutoFlow: 'row',
203
+ gap: 8,
204
+ marginTop: theme.spacings.xxs,
205
+ })}
206
+ >
203
207
  <Button
204
208
  variant='pill'
205
209
  color='primary'
206
210
  type='submit'
207
211
  size='medium'
208
212
  className={classes.submitButton}
213
+ sx={{
214
+ width: responsiveVal(200, 250),
215
+ height: responsiveVal(40, 50),
216
+ }}
209
217
  >
210
- Submit review
218
+ <Trans>Submit review</Trans>
211
219
  </Button>
212
220
  <Button
213
221
  variant='text'
214
222
  color='primary'
215
223
  onClick={() => router.back()}
216
224
  className={classes.cancelButton}
225
+ sx={{
226
+ display: 'block',
227
+ maxWidth: 'max-content',
228
+ margin: '0 auto',
229
+ }}
217
230
  >
218
- Cancel
231
+ <Trans>Cancel</Trans>
219
232
  </Button>
220
233
  </FormActions>
221
234
 
package/components/CustomerReview/index.tsx CHANGED
@@ -1,64 +1,26 @@
1
- import { useQuery } from '@apollo/client'
1
+ import { useQuery } from '@graphcommerce/graphql'
2
2
  import { Image } from '@graphcommerce/image'
3
3
  import { StoreConfigDocument } from '@graphcommerce/magento-store'
4
- import { responsiveVal } from '@graphcommerce/next-ui'
5
- import { makeStyles, Theme } from '@material-ui/core'
4
+ import { responsiveVal, extendableComponent } from '@graphcommerce/next-ui'
5
+ import { Box, SxProps, Theme } from '@mui/material'
6
+ import { useMemo } from 'react'
6
7
  import { CustomerReviewFragment } from './CustomerReview.gql'
7
8
  import filledStar from './review_star_filled.svg'
8
9
  import outlinedStar from './review_star_outlined.svg'
9
10
 
10
- type CustomerReviewProps = CustomerReviewFragment
11
+ type CustomerReviewProps = CustomerReviewFragment & { sx?: SxProps<Theme> }
11
12
 
12
- const useStyles = makeStyles(
13
- (theme: Theme) => ({
14
- container: {
15
- padding: `${theme.spacings.md} 0 ${theme.spacings.md} 0`,
16
- display: 'grid',
17
- gridTemplateAreas: `
18
- 'image stars'
19
- 'image title'
20
- 'image text'
21
- 'image date'`,
22
- gridTemplateColumns: `${responsiveVal(96, 196)} 1fr`,
23
- gridColumnGap: theme.spacings.md,
24
- gridRowGap: theme.spacings.sm,
25
- alignItems: 'start',
26
- ...theme.typography.body1,
27
- borderBottom: `1px solid ${theme.palette.divider}`,
28
- [theme.breakpoints.up('sm')]: {
29
- gridRowGap: theme.spacings.xxs,
30
- },
31
- },
32
- image: {
33
- gridArea: 'image',
34
- '& img': {
35
- width: '100%',
36
- height: 'auto',
37
- },
38
- },
39
- stars: {
40
- gridArea: 'stars',
41
- margin: '-6px 0 -6px -6px',
42
- },
43
- title: {
44
- gridArea: 'title',
45
- fontWeight: theme.typography.fontWeightBold,
46
- },
47
- text: {
48
- gridArea: 'text',
49
- },
50
- date: {
51
- gridArea: 'date',
52
- fontStyle: 'italic',
53
- color: theme.palette.text.disabled,
54
- },
55
- }),
56
- { name: 'CustomerReview' },
57
- )
13
+ const { classes } = extendableComponent('ScrollerDots', [
14
+ 'container',
15
+ 'image',
16
+ 'stars',
17
+ 'title',
18
+ 'text',
19
+ 'date',
20
+ ] as const)
58
21
 
59
22
  export default function CustomerReview(props: CustomerReviewProps) {
60
- const { product, text, average_rating, created_at } = props
61
- const classes = useStyles()
23
+ const { product, text, average_rating, created_at, sx = [] } = props
62
24
 
63
25
  const maxAverageRating = 100
64
26
  const totalStars = 5
@@ -68,15 +30,46 @@ export default function CustomerReview(props: CustomerReviewProps) {
68
30
  const { data: config } = useQuery(StoreConfigDocument)
69
31
  const locale = config?.storeConfig?.locale?.replace('_', '-')
70
32
 
71
- const dateFormatter = new Intl.DateTimeFormat(locale, {
72
- year: 'numeric',
73
- month: 'long',
74
- day: 'numeric',
75
- })
33
+ const dateFormatter = useMemo(
34
+ () => new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long', day: 'numeric' }),
35
+ [locale],
36
+ )
76
37
 
77
38
  return (
78
- <div className={classes.container}>
79
- <div className={classes.image}>
39
+ <Box
40
+ className={classes.container}
41
+ sx={[
42
+ (theme) => ({
43
+ padding: `${theme.spacings.md} 0 ${theme.spacings.md} 0`,
44
+ display: 'grid',
45
+ gridTemplateAreas: `
46
+ "image stars"
47
+ "image title"
48
+ "image text"
49
+ "image date"`,
50
+ gridTemplateColumns: `${responsiveVal(96, 196)} 1fr`,
51
+ gridColumnGap: theme.spacings.md,
52
+ gridRowGap: theme.spacings.sm,
53
+ alignItems: 'start',
54
+ typography: 'body1',
55
+ borderBottom: `1px solid ${theme.palette.divider}`,
56
+ [theme.breakpoints.up('sm')]: {
57
+ gridRowGap: theme.spacings.xxs,
58
+ },
59
+ }),
60
+ ...(Array.isArray(sx) ? sx : [sx]),
61
+ ]}
62
+ >
63
+ <Box
64
+ className={classes.image}
65
+ sx={{
66
+ gridArea: 'image',
67
+ '& img': {
68
+ width: '100%',
69
+ height: 'auto',
70
+ },
71
+ }}
72
+ >
80
73
  {product && product.thumbnail && (
81
74
  <Image
82
75
  src={product.thumbnail?.url ?? ''}
@@ -85,16 +78,32 @@ export default function CustomerReview(props: CustomerReviewProps) {
85
78
  alt={product.thumbnail?.label ?? ''}
86
79
  />
87
80
  )}
88
- </div>
89
- <div className={classes.stars}>
90
- {[...new Array(totalStars)].map((value, index) => (
81
+ </Box>
82
+ <Box className={classes.stars} sx={{ gridArea: 'stars', margin: '-6px 0 -6px -6px' }}>
83
+ {[...new Array(totalStars)].map((_, index) => (
91
84
  // eslint-disable-next-line react/no-array-index-key
92
85
  <Image key={index} src={index < totalFilledStars ? filledStar : outlinedStar} />
93
86
  ))}
94
- </div>
95
- <div className={classes.title}>{product?.name}</div>
96
- <div className={classes.text}>{text}</div>
97
- <div className={classes.date}>{dateFormatter.format(new Date(created_at ?? ''))}</div>
98
- </div>
87
+ </Box>
88
+ <Box
89
+ className={classes.title}
90
+ sx={(theme) => ({ gridArea: 'title', fontWeight: theme.typography.fontWeightBold })}
91
+ >
92
+ {product?.name}
93
+ </Box>
94
+ <Box className={classes.text} sx={{ gridArea: 'text' }}>
95
+ {text}
96
+ </Box>
97
+ <Box
98
+ className={classes.date}
99
+ sx={(theme) => ({
100
+ gridArea: 'date',
101
+ fontStyle: 'italic',
102
+ color: theme.palette.text.disabled,
103
+ })}
104
+ >
105
+ {dateFormatter.format(new Date(created_at ?? ''))}
106
+ </Box>
107
+ </Box>
99
108
  )
100
109
  }
package/components/ProductReviewChip/index.tsx CHANGED
@@ -1,5 +1,5 @@
1
- import { SvgImageSimple, iconStar } from '@graphcommerce/next-ui'
2
- import { Chip, ChipProps, makeStyles } from '@material-ui/core'
1
+ import { SvgIcon, iconStar } from '@graphcommerce/next-ui'
2
+ import { Chip, ChipProps } from '@mui/material'
3
3
  import React from 'react'
4
4
 
5
5
  export type ProductReviewChipProps = {
@@ -8,19 +8,8 @@ export type ProductReviewChipProps = {
8
8
  max?: number
9
9
  } & ChipProps
10
10
 
11
- const useStyles = makeStyles(
12
- {
13
- iconStar: {
14
- stroke: '#FFDA1C',
15
- fill: '#FFDA1C',
16
- },
17
- },
18
- { name: 'ProductListReviews' },
19
- )
20
-
21
11
  export default function ProductReviewChip(props: ProductReviewChipProps) {
22
12
  const { rating, reviewSectionId = '', max = 5, ...chipProps } = props
23
- const classes = useStyles()
24
13
 
25
14
  if (!rating) return null
26
15
 
@@ -43,7 +32,7 @@ export default function ProductReviewChip(props: ProductReviewChipProps) {
43
32
  variant='outlined'
44
33
  clickable={!!reviewSectionId}
45
34
  onClick={handleClick}
46
- icon={<SvgImageSimple src={iconStar} size='small' className={classes.iconStar} />}
35
+ icon={<SvgIcon src={iconStar} size='small' sx={{ stroke: '#FFDA1C', fill: '#FFDA1C' }} />}
47
36
  color='default'
48
37
  size='small'
49
38
  label={`${normalizedRating}/5`}
package/components/ProductReviewSummary/index.tsx CHANGED
@@ -1,63 +1,75 @@
1
- import { SvgImageSimple, iconStar, UseStyles } from '@graphcommerce/next-ui'
2
- import { makeStyles, Theme } from '@material-ui/core'
3
- import React from 'react'
1
+ import { SvgIcon, iconStar, extendableComponent } from '@graphcommerce/next-ui'
2
+ import { Box, SxProps, Theme } from '@mui/material'
4
3
  import { ProductReviewSummaryFragment } from './ProductReviewSummary.gql'
5
4
 
6
- export type ProductReviewSummaryProps = ProductReviewSummaryFragment & UseStyles<typeof useStyles>
5
+ export type ProductReviewSummaryProps = ProductReviewSummaryFragment & { sx?: SxProps<Theme> }
7
6
 
8
- const useStyles = makeStyles(
9
- (theme: Theme) => ({
10
- root: {
11
- width: 'max-content',
12
- position: 'relative',
13
- '& > div': {
14
- lineHeight: 0,
15
- },
16
- },
17
- rating: {
18
- position: 'absolute',
19
- top: 0,
20
- overflow: 'hidden',
21
- '& > div': {
22
- whiteSpace: 'nowrap',
23
- },
24
- },
25
- iconStar: {
26
- stroke: 'none',
27
- fill: '#FFDA1C',
28
- },
29
- iconStarDisabled: {
30
- stroke: 'none',
31
- fill: theme.palette.grey[300],
32
- },
33
- }),
34
- { name: 'ProductListReviewSummary' },
35
- )
7
+ const name = 'ProductReviewSummary' as const
8
+ const parts = ['root', 'rating', 'iconStar', 'iconStarDisabled'] as const
9
+ const { classes } = extendableComponent(name, parts)
36
10
 
37
11
  export default function ProductReviewSummary(props: ProductReviewSummaryProps) {
38
- const { rating_summary } = props
39
- const classes = useStyles(props)
12
+ const { rating_summary, sx = [] } = props
40
13
 
41
14
  if (!rating_summary) return null
42
15
 
16
+ const disabledStar = (
17
+ <SvgIcon
18
+ src={iconStar}
19
+ size='xs'
20
+ className={classes.iconStarDisabled}
21
+ sx={(theme) => ({ stroke: 'none', fill: theme.palette.grey[300] })}
22
+ />
23
+ )
24
+
25
+ const star = (
26
+ <SvgIcon
27
+ src={iconStar}
28
+ size='xs'
29
+ className={classes.iconStar}
30
+ sx={{ stroke: 'none', fill: '#FFDA1C' }}
31
+ />
32
+ )
33
+
43
34
  return (
44
- <div className={classes.root}>
35
+ <Box
36
+ className={classes.root}
37
+ sx={[
38
+ {
39
+ width: 'max-content',
40
+ position: 'relative',
41
+ '& > div': {
42
+ lineHeight: 0,
43
+ },
44
+ },
45
+ ...(Array.isArray(sx) ? sx : [sx]),
46
+ ]}
47
+ >
45
48
  <div>
46
- <SvgImageSimple src={iconStar} size='xs' className={classes.iconStarDisabled} />
47
- <SvgImageSimple src={iconStar} size='xs' className={classes.iconStarDisabled} />
48
- <SvgImageSimple src={iconStar} size='xs' className={classes.iconStarDisabled} />
49
- <SvgImageSimple src={iconStar} size='xs' className={classes.iconStarDisabled} />
50
- <SvgImageSimple src={iconStar} size='xs' className={classes.iconStarDisabled} />
49
+ {disabledStar}
50
+ {disabledStar}
51
+ {disabledStar}
52
+ {disabledStar}
53
+ {disabledStar}
51
54
  </div>
52
- <div className={classes.rating} style={{ width: `${rating_summary}%` }}>
55
+ <Box
56
+ className={classes.rating}
57
+ style={{ width: `${rating_summary}%` }}
58
+ sx={{
59
+ position: 'absolute',
60
+ top: 0,
61
+ overflow: 'hidden',
62
+ '& > div': { whiteSpace: 'nowrap' },
63
+ }}
64
+ >
53
65
  <div>
54
- <SvgImageSimple src={iconStar} size='xs' className={classes.iconStar} />
55
- <SvgImageSimple src={iconStar} size='xs' className={classes.iconStar} />
56
- <SvgImageSimple src={iconStar} size='xs' className={classes.iconStar} />
57
- <SvgImageSimple src={iconStar} size='xs' className={classes.iconStar} />
58
- <SvgImageSimple src={iconStar} size='xs' className={classes.iconStar} />
66
+ {star}
67
+ {star}
68
+ {star}
69
+ {star}
70
+ {star}
59
71
  </div>
60
- </div>
61
- </div>
72
+ </Box>
73
+ </Box>
62
74
  )
63
75
  }
package/components/ProductReviews/index.tsx CHANGED
@@ -1,92 +1,39 @@
1
- import { useQuery } from '@apollo/client'
2
- import { Button, Pagination, responsiveVal, StarRatingField } from '@graphcommerce/next-ui'
3
- import { makeStyles, Theme, Typography } from '@material-ui/core'
1
+ import { useQuery } from '@graphcommerce/graphql'
2
+ import {
3
+ Pagination,
4
+ responsiveVal,
5
+ StarRatingField,
6
+ extendableComponent,
7
+ } from '@graphcommerce/next-ui'
8
+ import { Trans } from '@lingui/macro'
9
+ import { Typography, Button, Box, SxProps, Theme } from '@mui/material'
4
10
  import Link from 'next/link'
5
11
  import React, { useState } from 'react'
6
12
  import ProductReviewChip from '../ProductReviewChip'
7
13
  import { ProductReviewsFragment } from './ProductReviews.gql'
8
14
  import { ProductReviewsPageDocument } from './ProductReviewsPage.gql'
9
15
 
10
- const useStyles = makeStyles(
11
- (theme: Theme) => ({
12
- review: {
13
- display: 'grid',
14
- gap: theme.spacings.sm,
15
- borderBottom: `1px solid ${theme.palette.divider}`,
16
- padding: `${theme.spacings.md} 0`,
17
- ...theme.typography.body1,
18
- },
19
- title: {
20
- display: 'grid',
21
- gridAutoFlow: 'column',
22
- justifyContent: 'start',
23
- gap: theme.spacings.xs,
24
- alignItems: 'center',
25
- },
26
- meta: {
27
- color: theme.palette.text.disabled,
28
- display: 'grid',
29
- gridAutoFlow: 'column',
30
- justifyContent: 'space-between',
31
- },
32
- nickname: {
33
- ...theme.typography.body2,
34
- },
35
- date: {
36
- ...theme.typography.body2,
37
- },
38
- reviewsBottomContainer: {
39
- display: 'flex',
40
- alignItems: 'center',
41
- justifyContent: 'space-between',
42
- marginTop: theme.spacings.sm,
43
- },
44
- paginationRoot: {
45
- margin: `0 -16px 0`,
46
- },
47
- paginationButton: {
48
- padding: 0,
49
- minWidth: 'unset',
50
- borderRadius: '100%',
51
- '& > .MuiButton-label': {
52
- padding: 0,
53
- },
54
- },
55
- ratingRow: {
56
- display: 'flex',
57
- flexWrap: 'wrap',
58
- gap: theme.spacings.sm,
59
- color: theme.palette.text.disabled,
60
- ...theme.typography.body2,
61
- },
62
- rating: {
63
- display: 'grid',
64
- gridAutoFlow: 'column',
65
- gridTemplateColumns: '0.4fr 0.6fr',
66
- justifyContent: 'space-between',
67
- marginRight: theme.spacings.xxs,
68
- rowGap: responsiveVal(8, 16),
69
- gap: 8,
70
- alignItems: 'center',
71
- },
72
- writeReviewButton: {
73
- [theme.breakpoints.down('xs')]: {
74
- padding: '8px 16px 8px',
75
- whiteSpace: 'nowrap',
76
- },
77
- },
78
- container: {
79
- marginTop: `calc(${theme.spacings.xxs} * -1)`,
80
- },
81
- }),
82
- { name: 'ProductReviews' },
83
- )
16
+ export type ProductReviewsProps = ProductReviewsFragment & { sx?: SxProps<Theme> }
84
17
 
85
- export type ProductReviewsProps = ProductReviewsFragment
18
+ const name = 'ProductReviews' as const
19
+ const parts = [
20
+ 'review',
21
+ 'title',
22
+ 'meta',
23
+ 'nickname',
24
+ 'date',
25
+ 'reviewsBottomContainer',
26
+ 'paginationRoot',
27
+ 'paginationButton',
28
+ 'ratingRow',
29
+ 'rating',
30
+ 'writeReviewButton',
31
+ 'container',
32
+ ] as const
33
+ const { classes } = extendableComponent(name, parts)
86
34
 
87
35
  export default function ProductReviews(props: ProductReviewsProps) {
88
- const { reviews, url_key, sku } = props
89
- const classes = useStyles()
36
+ const { reviews, url_key, sku, sx = [] } = props
90
37
  const config = 'en_US'
91
38
  const locale = config.replace('_', '-')
92
39
 
@@ -118,10 +65,28 @@ export default function ProductReviews(props: ProductReviewsProps) {
118
65
  }
119
66
 
120
67
  const actions = (
121
- <div className={classes.reviewsBottomContainer}>
68
+ <Box
69
+ className={classes.reviewsBottomContainer}
70
+ sx={(theme) => ({
71
+ display: 'flex',
72
+ alignItems: 'center',
73
+ justifyContent: 'space-between',
74
+ marginTop: theme.spacings.sm,
75
+ })}
76
+ >
122
77
  <Link href={`/account/reviews/add?sku=${sku}`} passHref>
123
- <Button variant='pill' color='primary' size='medium' className={classes.writeReviewButton}>
124
- Write a review
78
+ <Button
79
+ variant='pill'
80
+ color='primary'
81
+ size='medium'
82
+ className={classes.writeReviewButton}
83
+ sx={(theme) => ({
84
+ [theme.breakpoints.down('sm')]: {
85
+ whiteSpace: 'nowrap',
86
+ },
87
+ })}
88
+ >
89
+ <Trans>Write a review</Trans>
125
90
  </Button>
126
91
  </Link>
127
92
 
@@ -130,67 +95,167 @@ export default function ProductReviews(props: ProductReviewsProps) {
130
95
  count={total_pages ?? 1}
131
96
  page={current_page ?? 1}
132
97
  classes={{ root: classes.paginationRoot }}
98
+ sx={{
99
+ margin: `0 -16px 0`,
100
+ }}
133
101
  renderLink={(p: number, icon: React.ReactNode) => (
134
- <Button onClick={() => setPage(p)} className={classes.paginationButton}>
102
+ <Button
103
+ onClick={() => setPage(p)}
104
+ className={classes.paginationButton}
105
+ sx={{
106
+ padding: 0,
107
+ minWidth: 'unset',
108
+ borderRadius: '100%',
109
+ '& > .MuiButton-label': {
110
+ padding: 0,
111
+ },
112
+ }}
113
+ >
135
114
  {icon}
136
115
  </Button>
137
116
  )}
138
117
  />
139
118
  )}
140
- </div>
119
+ </Box>
141
120
  )
142
121
 
143
122
  if (reviews?.items.length === 0) {
144
123
  return (
145
- <div className={classes.container}>
146
- <div className={classes.review}>
147
- <div className={classes.title}>
124
+ <Box
125
+ className={classes.container}
126
+ sx={[
127
+ (theme) => ({ marginTop: `calc(${theme.spacings.xxs} * -1)` }),
128
+ ...(Array.isArray(sx) ? sx : [sx]),
129
+ ]}
130
+ >
131
+ <Box
132
+ className={classes.review}
133
+ sx={(theme) => ({
134
+ display: 'grid',
135
+ gap: theme.spacings.sm,
136
+ borderBottom: `1px solid ${theme.palette.divider}`,
137
+ padding: `${theme.spacings.md} 0`,
138
+ typography: 'body1',
139
+ })}
140
+ >
141
+ <Box
142
+ className={classes.title}
143
+ sx={(theme) => ({
144
+ display: 'grid',
145
+ gridAutoFlow: 'column',
146
+ justifyContent: 'start',
147
+ gap: theme.spacings.xs,
148
+ alignItems: 'center',
149
+ })}
150
+ >
148
151
  <Typography variant='subtitle1'>Be the first to write a review!</Typography>
149
- </div>
150
- </div>
152
+ </Box>
153
+ </Box>
151
154
  {actions}
152
- </div>
155
+ </Box>
153
156
  )
154
157
  }
155
158
 
156
159
  return (
157
- <div className={classes.container}>
160
+ <Box
161
+ className={classes.container}
162
+ sx={[
163
+ (theme) => ({ marginTop: `calc(${theme.spacings.xxs} * -1)` }),
164
+ ...(Array.isArray(sx) ? sx : [sx]),
165
+ ]}
166
+ >
158
167
  {!loading &&
159
168
  myReviews.items.map((review) => (
160
- <div key={review?.summary} className={classes.review}>
161
- <div className={classes.title}>
169
+ <Box
170
+ key={review?.summary}
171
+ className={classes.review}
172
+ sx={(theme) => ({
173
+ display: 'grid',
174
+ gap: theme.spacings.sm,
175
+ borderBottom: `1px solid ${theme.palette.divider}`,
176
+ padding: `${theme.spacings.md} 0`,
177
+ typography: 'body1',
178
+ })}
179
+ >
180
+ <Box
181
+ className={classes.title}
182
+ sx={(theme) => ({
183
+ display: 'grid',
184
+ gridAutoFlow: 'column',
185
+ justifyContent: 'start',
186
+ gap: theme.spacings.xs,
187
+ alignItems: 'center',
188
+ })}
189
+ >
162
190
  <ProductReviewChip rating={review?.average_rating} size='small' />
163
191
  <Typography component='h3' variant='h5'>
164
192
  {review?.summary}
165
193
  </Typography>
166
- </div>
194
+ </Box>
167
195
  <Typography variant='body1'>{review?.text}</Typography>
168
196
 
169
197
  {(review?.ratings_breakdown ?? 0) > 1 && (
170
- <div className={classes.ratingRow}>
198
+ <Box
199
+ className={classes.ratingRow}
200
+ sx={(theme) => ({
201
+ display: 'flex',
202
+ flexWrap: 'wrap',
203
+ gap: theme.spacings.sm,
204
+ color: theme.palette.text.disabled,
205
+ typography: 'body2',
206
+ })}
207
+ >
171
208
  {review?.ratings_breakdown.map((ratingBreakdown) => (
172
- <div key={`rating-${ratingBreakdown?.value}`} className={classes.rating}>
209
+ <Box
210
+ key={`rating-${ratingBreakdown?.value}`}
211
+ className={classes.rating}
212
+ sx={(theme) => ({
213
+ display: 'grid',
214
+ gridAutoFlow: 'column',
215
+ gridTemplateColumns: '0.4fr 0.6fr',
216
+ justifyContent: 'space-between',
217
+ marginRight: theme.spacings.xxs,
218
+ rowGap: responsiveVal(8, 16),
219
+ gap: 8,
220
+ alignItems: 'center',
221
+ })}
222
+ >
173
223
  <span>{ratingBreakdown?.name}</span>
174
224
  <StarRatingField
175
225
  readOnly
176
226
  size='small'
177
227
  defaultValue={Number(ratingBreakdown?.value ?? 0)}
178
228
  />
179
- </div>
229
+ </Box>
180
230
  ))}
181
- </div>
231
+ </Box>
182
232
  )}
183
233
 
184
- <div className={classes.meta}>
185
- <div className={classes.nickname}>Written by {review?.nickname}</div>
186
- <time className={classes.date} dateTime={review?.created_at}>
234
+ <Box
235
+ className={classes.meta}
236
+ sx={(theme) => ({
237
+ color: theme.palette.text.disabled,
238
+ display: 'grid',
239
+ gridAutoFlow: 'column',
240
+ justifyContent: 'space-between',
241
+ })}
242
+ >
243
+ <Box className={classes.nickname} sx={{ typography: 'body2' }}>
244
+ Written by {review?.nickname}
245
+ </Box>
246
+ <Box
247
+ component='time'
248
+ className={classes.date}
249
+ dateTime={review?.created_at}
250
+ sx={{ typography: 'body2' }}
251
+ >
187
252
  {review?.created_at &&
188
253
  formatter.format(new Date(review?.created_at.replace(/-/g, '/')))}
189
- </time>
190
- </div>
191
- </div>
254
+ </Box>
255
+ </Box>
256
+ </Box>
192
257
  ))}
193
258
  {actions}
194
- </div>
259
+ </Box>
195
260
  )
196
261
  }
package/package.json CHANGED
@@ -1,11 +1,10 @@
1
1
  {
2
2
  "name": "@graphcommerce/magento-review",
3
- "version": "2.111.43",
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,29 +12,26 @@
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-customer": "^3.6.44",
27
- "@graphcommerce/magento-product": "^3.8.13",
28
- "@graphcommerce/magento-store": "^3.4.12",
29
- "@graphcommerce/next-ui": "^3.25.3",
30
- "@graphcommerce/react-hook-form": "^2.104.7",
31
- "@lingui/macro": "^3.13.0",
32
- "@material-ui/core": "^4.12.3",
33
- "@material-ui/lab": "^4.0.0-alpha.60",
34
- "clsx": "^1.1.1",
35
- "next": "^12.0.7",
36
- "react": "^17.0.2",
37
- "react-dom": "^17.0.2",
21
+ "@graphcommerce/graphql": "^3.0.2",
22
+ "@graphcommerce/image": "^3.0.2",
23
+ "@graphcommerce/magento-customer": "^4.1.1",
24
+ "@graphcommerce/magento-product": "^4.0.2",
25
+ "@graphcommerce/magento-store": "^4.0.2",
26
+ "@graphcommerce/next-ui": "^4.1.1",
27
+ "@graphcommerce/react-hook-form": "^3.0.2",
38
28
  "schema-dts": "^1.0.0"
39
29
  },
40
- "gitHead": "41e42c8cd6f565ab0cbba81a1954a0041dc46768"
30
+ "peerDependencies": {
31
+ "@lingui/macro": "^3.13.2",
32
+ "@mui/material": "^5.4.1",
33
+ "next": "^12.0.10",
34
+ "react": "^17.0.2",
35
+ "react-dom": "^17.0.2"
36
+ }
41
37
  }