@graphcommerce/magento-product-configurable 8.1.0-canary.9 → 9.0.0-canary.101

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 (27) hide show
  1. package/CHANGELOG.md +227 -46
  2. package/ConfigurableCartItem/ConfigurableCartItem.graphql +1 -1
  3. package/ConfigurableContext/ConfigurableProductForm.graphql +0 -1
  4. package/ConfigurableProductAddToCart/ConfigurableProductAddToCart.tsx +6 -8
  5. package/ConfigurableProductPage.graphql +1 -1
  6. package/components/ConfigurableOptionValue/ConfigurableOptionValue.tsx +2 -1
  7. package/components/ConfigurableOptionValueColor/ConfigurableOptionValueColor.tsx +2 -1
  8. package/components/ConfigurableOptionValueImage/ConfigurableOptionValueImage.tsx +4 -3
  9. package/components/ConfigurableOptionValueText/ConfigurableOptionValueText.tsx +2 -1
  10. package/components/ConfigurableProductOptions/ConfigurableProductOption.tsx +4 -9
  11. package/components/ConfigurableProductOptions/ConfigurableProductOptions.tsx +3 -1
  12. package/components/ProductListItemConfigurable/ProductListItemConfigurable.graphql +0 -15
  13. package/components/ProductListItemConfigurable/ProductListItemConfigurable.tsx +0 -37
  14. package/graphql/ConfigurableOptions.graphql +1 -1
  15. package/graphql/ConfigurableOptionsSelection.graphql +1 -1
  16. package/hooks/useConfigurableOptionsSelection.ts +1 -1
  17. package/package.json +18 -18
  18. package/plugins/ConfigurableCartItemActionCard.tsx +6 -6
  19. package/plugins/ConfigurableProductPage/ConfigurableProductPageDescription.tsx +7 -7
  20. package/plugins/ConfigurableProductPage/ConfigurableProductPageGallery.tsx +7 -7
  21. package/plugins/ConfigurableProductPage/ConfigurableProductPageJsonLd.tsx +8 -11
  22. package/plugins/ConfigurableProductPage/ConfigurableProductPageMeta.tsx +7 -9
  23. package/plugins/ConfigurableProductPage/ConfigurableProductPageName.tsx +7 -9
  24. package/plugins/ConfigurableProductPage/ConfigurableProductPagePrice.tsx +7 -7
  25. package/plugins/ConfigurableProductPage/ConfigurableProductPagePriceTiers.tsx +10 -9
  26. package/plugins/ConfigurableProductPage/ConfigurableProductShortDescription.tsx +8 -8
  27. package/utils/defaultConfigurableOptionsSelection.ts +10 -11
package/CHANGELOG.md CHANGED
@@ -1,13 +1,212 @@
1
1
  # Change Log
2
2
 
3
+ ## 9.0.0-canary.101
4
+
5
+ ## 9.0.0-canary.100
6
+
7
+ ## 9.0.0-canary.99
8
+
9
+ ## 9.0.0-canary.98
10
+
11
+ ## 9.0.0-canary.97
12
+
13
+ ## 9.0.0-canary.96
14
+
15
+ ## 9.0.0-canary.95
16
+
17
+ ## 9.0.0-canary.94
18
+
19
+ ## 9.0.0-canary.93
20
+
21
+ ## 9.0.0-canary.92
22
+
23
+ ## 9.0.0-canary.91
24
+
25
+ ## 9.0.0-canary.90
26
+
27
+ ### Patch Changes
28
+
29
+ - [#2397](https://github.com/graphcommerce-org/graphcommerce/pull/2397) [`d4d5a98`](https://github.com/graphcommerce-org/graphcommerce/commit/d4d5a983dea6d034dcbdeed9cf30fb33133dde39) - Add requireOptionSelection boolean to prevent users from deselecting configurable options ([@carlocarels90](https://github.com/carlocarels90))
30
+
31
+ ## 9.0.0-canary.89
32
+
33
+ ## 9.0.0-canary.88
34
+
35
+ ## 9.0.0-canary.87
36
+
37
+ ## 9.0.0-canary.86
38
+
39
+ ## 9.0.0-canary.85
40
+
41
+ ## 9.0.0-canary.84
42
+
43
+ ## 9.0.0-canary.83
44
+
45
+ ## 9.0.0-canary.82
46
+
47
+ ## 9.0.0-canary.81
48
+
49
+ ## 9.0.0-canary.80
50
+
51
+ ## 9.0.0-canary.79
52
+
53
+ ## 9.0.0-canary.78
54
+
55
+ ## 9.0.0-canary.77
56
+
57
+ ## 9.0.0-canary.76
58
+
59
+ ## 9.0.0-canary.75
60
+
61
+ ## 9.0.0-canary.74
62
+
63
+ ## 9.0.0-canary.73
64
+
65
+ ## 9.0.0-canary.72
66
+
67
+ ## 9.0.0-canary.71
68
+
69
+ ## 9.0.0-canary.70
70
+
71
+ ## 9.0.0-canary.69
72
+
73
+ ## 9.0.0-canary.68
74
+
75
+ ## 9.0.0-canary.67
76
+
77
+ ## 9.0.0-canary.66
78
+
79
+ ## 9.0.0-canary.65
80
+
81
+ ## 9.0.0-canary.64
82
+
83
+ ## 9.0.0-canary.63
84
+
85
+ ## 9.0.0-canary.62
86
+
87
+ ## 9.0.0-canary.61
88
+
89
+ ## 9.0.0-canary.60
90
+
91
+ ## 9.0.0-canary.59
92
+
93
+ ## 9.0.0-canary.58
94
+
95
+ ## 9.0.0-canary.57
96
+
97
+ ## 9.0.0-canary.56
98
+
99
+ ## 9.0.0-canary.55
100
+
101
+ ## 9.0.0-canary.54
102
+
103
+ ## 8.1.0-canary.53
104
+
105
+ ## 8.1.0-canary.52
106
+
107
+ ## 8.1.0-canary.51
108
+
109
+ ### Minor Changes
110
+
111
+ - [#2322](https://github.com/graphcommerce-org/graphcommerce/pull/2322) [`4d08a2b`](https://github.com/graphcommerce-org/graphcommerce/commit/4d08a2bd8c1919bd85b18e8e856775d18fb67e00) - Rename configurable_customizable back to customizable_options ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
112
+
113
+ ## 8.1.0-canary.50
114
+
115
+ ## 8.1.0-canary.49
116
+
117
+ ## 8.1.0-canary.48
118
+
119
+ ## 8.1.0-canary.47
120
+
121
+ ## 8.1.0-canary.46
122
+
123
+ ## 8.1.0-canary.45
124
+
125
+ ## 8.1.0-canary.44
126
+
127
+ ## 8.1.0-canary.43
128
+
129
+ ## 8.1.0-canary.42
130
+
131
+ ## 8.1.0-canary.41
132
+
133
+ ## 8.1.0-canary.40
134
+
135
+ ## 8.1.0-canary.39
136
+
137
+ ## 8.1.0-canary.38
138
+
139
+ ## 8.1.0-canary.37
140
+
141
+ ## 8.1.0-canary.36
142
+
143
+ ## 8.1.0-canary.35
144
+
145
+ ## 8.1.0-canary.34
146
+
147
+ ## 8.1.0-canary.33
148
+
149
+ ### Patch Changes
150
+
151
+ - [#2302](https://github.com/graphcommerce-org/graphcommerce/pull/2302) [`6b7f908`](https://github.com/graphcommerce-org/graphcommerce/commit/6b7f908b7a2561e9d7f6ec3eaf2a6aca8d77b72f) - Fixed tier prices not working for non-configurable products ([@bramvanderholst](https://github.com/bramvanderholst))
152
+
153
+ ## 8.1.0-canary.32
154
+
155
+ ## 8.1.0-canary.31
156
+
157
+ ## 8.1.0-canary.30
158
+
159
+ ## 8.1.0-canary.29
160
+
161
+ ## 8.1.0-canary.28
162
+
163
+ ## 8.1.0-canary.27
164
+
165
+ ## 8.1.0-canary.26
166
+
167
+ ## 8.1.0-canary.25
168
+
169
+ ## 8.1.0-canary.24
170
+
171
+ ## 8.1.0-canary.23
172
+
173
+ ### Patch Changes
174
+
175
+ - [#2282](https://github.com/graphcommerce-org/graphcommerce/pull/2282) [`e048f61`](https://github.com/graphcommerce-org/graphcommerce/commit/e048f6165ae5a15be99fba0c3d3529c700477d3e) - Disable configurable product options that are unavailable for selection. ([@carlocarels90](https://github.com/carlocarels90))
176
+
177
+ ## 8.1.0-canary.22
178
+
179
+ ## 8.1.0-canary.21
180
+
181
+ ## 8.1.0-canary.20
182
+
183
+ ## 8.1.0-canary.19
184
+
185
+ ## 8.1.0-canary.18
186
+
187
+ ## 8.1.0-canary.17
188
+
189
+ ## 8.1.0-canary.16
190
+
191
+ ## 8.1.0-canary.15
192
+
193
+ ## 8.1.0-canary.14
194
+
195
+ ## 8.1.0-canary.13
196
+
197
+ ## 8.1.0-canary.12
198
+
199
+ ## 8.1.0-canary.11
200
+
201
+ ## 8.1.0-canary.10
202
+
3
203
  ## 8.1.0-canary.9
4
204
 
5
205
  ## 8.1.0-canary.8
6
206
 
7
207
  ### Patch Changes
8
208
 
9
- - [#2247](https://github.com/graphcommerce-org/graphcommerce/pull/2247) [`444e446`](https://github.com/graphcommerce-org/graphcommerce/commit/444e446a218cc9da3defb940a6d5cce0229ff845) - Added clear upgrade instructions for linguiLocale
10
- ([@paales](https://github.com/paales))
209
+ - [#2247](https://github.com/graphcommerce-org/graphcommerce/pull/2247) [`444e446`](https://github.com/graphcommerce-org/graphcommerce/commit/444e446a218cc9da3defb940a6d5cce0229ff845) - Added clear upgrade instructions for linguiLocale ([@paales](https://github.com/paales))
11
210
 
12
211
  ## 8.1.0-canary.7
13
212
 
@@ -23,29 +222,25 @@
23
222
 
24
223
  ### Patch Changes
25
224
 
26
- - [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`0767bc4`](https://github.com/graphcommerce-org/graphcommerce/commit/0767bc40f7b596209f24ca4e745ff0441f3275c9) - Upgrade input components to no longer use muiRegister, which improves INP scores
27
- ([@FrankHarland](https://github.com/FrankHarland))
225
+ - [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`0767bc4`](https://github.com/graphcommerce-org/graphcommerce/commit/0767bc40f7b596209f24ca4e745ff0441f3275c9) - Upgrade input components to no longer use muiRegister, which improves INP scores ([@FrankHarland](https://github.com/FrankHarland))
28
226
 
29
227
  ## 8.0.6-canary.1
30
228
 
31
229
  ### Patch Changes
32
230
 
33
- - [#2213](https://github.com/graphcommerce-org/graphcommerce/pull/2213) [`a0d952e`](https://github.com/graphcommerce-org/graphcommerce/commit/a0d952e6b8a71a7451bfdb2bdb5150fc218169e2) - Moved product reviews to the relatedUpsells query so we do not pass the queryComplexity limit
34
- ([@paales](https://github.com/paales))
231
+ - [#2213](https://github.com/graphcommerce-org/graphcommerce/pull/2213) [`a0d952e`](https://github.com/graphcommerce-org/graphcommerce/commit/a0d952e6b8a71a7451bfdb2bdb5150fc218169e2) - Moved product reviews to the relatedUpsells query so we do not pass the queryComplexity limit ([@paales](https://github.com/paales))
35
232
 
36
233
  ## 8.0.6-canary.0
37
234
 
38
235
  ### Patch Changes
39
236
 
40
- - [#2196](https://github.com/graphcommerce-org/graphcommerce/pull/2196) [`84c50e4`](https://github.com/graphcommerce-org/graphcommerce/commit/84c50e49a1a7f154d4a8f4045c37e773e20283ad) - Allow Lingui to use linguiLocale with country identifiers like `en-us`, it would always load `en` in this case. Introced a new `useLocale` hook to use the correct locale string to use in Intl methods.
41
- ([@paales](https://github.com/paales))
237
+ - [#2196](https://github.com/graphcommerce-org/graphcommerce/pull/2196) [`84c50e4`](https://github.com/graphcommerce-org/graphcommerce/commit/84c50e49a1a7f154d4a8f4045c37e773e20283ad) - Allow Lingui to use linguiLocale with country identifiers like `en-us`, it would always load `en` in this case. Introced a new `useLocale` hook to use the correct locale string to use in Intl methods. ([@paales](https://github.com/paales))
42
238
 
43
239
  ## 8.0.5
44
240
 
45
241
  ### Patch Changes
46
242
 
47
- - [#2239](https://github.com/graphcommerce-org/graphcommerce/pull/2239) [`a2a6e78`](https://github.com/graphcommerce-org/graphcommerce/commit/a2a6e78291ab978f4ef1236a4476b4d54555af7f) - Prices of products are now updated when customizable options are selected
48
- ([@Jessevdpoel](https://github.com/Jessevdpoel))
243
+ - [#2239](https://github.com/graphcommerce-org/graphcommerce/pull/2239) [`a2a6e78`](https://github.com/graphcommerce-org/graphcommerce/commit/a2a6e78291ab978f4ef1236a4476b4d54555af7f) - Prices of products are now updated when customizable options are selected ([@Jessevdpoel](https://github.com/Jessevdpoel))
49
244
 
50
245
  ## 8.0.5-canary.10
51
246
 
@@ -55,8 +250,7 @@
55
250
 
56
251
  ### Patch Changes
57
252
 
58
- - [#2239](https://github.com/graphcommerce-org/graphcommerce/pull/2239) [`a2a6e78`](https://github.com/graphcommerce-org/graphcommerce/commit/a2a6e78291ab978f4ef1236a4476b4d54555af7f) - Prices of products are now updated when customizable options are selected
59
- ([@Jessevdpoel](https://github.com/Jessevdpoel))
253
+ - [#2239](https://github.com/graphcommerce-org/graphcommerce/pull/2239) [`a2a6e78`](https://github.com/graphcommerce-org/graphcommerce/commit/a2a6e78291ab978f4ef1236a4476b4d54555af7f) - Prices of products are now updated when customizable options are selected ([@Jessevdpoel](https://github.com/Jessevdpoel))
60
254
 
61
255
  ## 8.0.5-canary.7
62
256
 
@@ -110,8 +304,7 @@
110
304
 
111
305
  ### Patch Changes
112
306
 
113
- - [#2190](https://github.com/graphcommerce-org/graphcommerce/pull/2190) [`770a309`](https://github.com/graphcommerce-org/graphcommerce/commit/770a309cdf0586aaaed5defd345e451dee8d89c8) - Fixed a bug concerning customizable options. Customizable options of configurable products are shown again in the cart.
114
- ([@Jessevdpoel](https://github.com/Jessevdpoel))
307
+ - [#2190](https://github.com/graphcommerce-org/graphcommerce/pull/2190) [`770a309`](https://github.com/graphcommerce-org/graphcommerce/commit/770a309cdf0586aaaed5defd345e451dee8d89c8) - Fixed a bug concerning customizable options. Customizable options of configurable products are shown again in the cart. ([@Jessevdpoel](https://github.com/Jessevdpoel))
115
308
 
116
309
  ## 8.0.1-canary.4
117
310
 
@@ -119,8 +312,7 @@
119
312
 
120
313
  ### Patch Changes
121
314
 
122
- - [#2190](https://github.com/graphcommerce-org/graphcommerce/pull/2190) [`770a309`](https://github.com/graphcommerce-org/graphcommerce/commit/770a309cdf0586aaaed5defd345e451dee8d89c8) - Fixed a bug concerning customizable options. Customizable options of configurable products are shown again in the cart.
123
- ([@Jessevdpoel](https://github.com/Jessevdpoel))
315
+ - [#2190](https://github.com/graphcommerce-org/graphcommerce/pull/2190) [`770a309`](https://github.com/graphcommerce-org/graphcommerce/commit/770a309cdf0586aaaed5defd345e451dee8d89c8) - Fixed a bug concerning customizable options. Customizable options of configurable products are shown again in the cart. ([@Jessevdpoel](https://github.com/Jessevdpoel))
124
316
 
125
317
  ## 8.0.1-canary.2
126
318
 
@@ -132,28 +324,21 @@
132
324
 
133
325
  ### Minor Changes
134
326
 
135
- - [#2099](https://github.com/graphcommerce-org/graphcommerce/pull/2099) [`ff796b8`](https://github.com/graphcommerce-org/graphcommerce/commit/ff796b838fae6cb5e35b101500133b0235a8677d) - Support for all customizable product options (except file upload) on the product pages and in the cart.
136
- ([@Jessevdpoel](https://github.com/Jessevdpoel))
327
+ - [#2099](https://github.com/graphcommerce-org/graphcommerce/pull/2099) [`ff796b8`](https://github.com/graphcommerce-org/graphcommerce/commit/ff796b838fae6cb5e35b101500133b0235a8677d) - Support for all customizable product options (except file upload) on the product pages and in the cart. ([@Jessevdpoel](https://github.com/Jessevdpoel))
137
328
 
138
- - [#2048](https://github.com/graphcommerce-org/graphcommerce/pull/2048) [`13e23e4`](https://github.com/graphcommerce-org/graphcommerce/commit/13e23e4265bac70fb4d0830e4661019e71ce299f) - Wishlist will now support configurable products and uses the `<ActionCardLayout/>`
139
- ([@Jessevdpoel](https://github.com/Jessevdpoel))
329
+ - [#2048](https://github.com/graphcommerce-org/graphcommerce/pull/2048) [`13e23e4`](https://github.com/graphcommerce-org/graphcommerce/commit/13e23e4265bac70fb4d0830e4661019e71ce299f) - Wishlist will now support configurable products and uses the `<ActionCardLayout/>` ([@Jessevdpoel](https://github.com/Jessevdpoel))
140
330
 
141
331
  ### Patch Changes
142
332
 
143
- - [#2048](https://github.com/graphcommerce-org/graphcommerce/pull/2048) [`bc90852`](https://github.com/graphcommerce-org/graphcommerce/commit/bc90852755479e48d25a370deccce0ca74e1e48f) - When selecting a non-existing option on a configurable product page, the price would be updated.
144
- ([@Jessevdpoel](https://github.com/Jessevdpoel))
333
+ - [#2048](https://github.com/graphcommerce-org/graphcommerce/pull/2048) [`bc90852`](https://github.com/graphcommerce-org/graphcommerce/commit/bc90852755479e48d25a370deccce0ca74e1e48f) - When selecting a non-existing option on a configurable product page, the price would be updated. ([@Jessevdpoel](https://github.com/Jessevdpoel))
145
334
 
146
- - [#2058](https://github.com/graphcommerce-org/graphcommerce/pull/2058) [`16dc488`](https://github.com/graphcommerce-org/graphcommerce/commit/16dc4889543106238b1a87694e75586e4c1a787c) - Provide instant feedback on availble attribute options when making a selection on a configurable product
147
- ([@FrankHarland](https://github.com/FrankHarland))
335
+ - [#2058](https://github.com/graphcommerce-org/graphcommerce/pull/2058) [`16dc488`](https://github.com/graphcommerce-org/graphcommerce/commit/16dc4889543106238b1a87694e75586e4c1a787c) - Provide instant feedback on availble attribute options when making a selection on a configurable product ([@FrankHarland](https://github.com/FrankHarland))
148
336
 
149
- - [#2146](https://github.com/graphcommerce-org/graphcommerce/pull/2146) [`3c19305`](https://github.com/graphcommerce-org/graphcommerce/commit/3c19305a7107d250bd898a9f4dfef38e362c2cbf) - Display the details of configurable products in the cart.
150
- ([@mikekeehnen](https://github.com/mikekeehnen))
337
+ - [#2146](https://github.com/graphcommerce-org/graphcommerce/pull/2146) [`3c19305`](https://github.com/graphcommerce-org/graphcommerce/commit/3c19305a7107d250bd898a9f4dfef38e362c2cbf) - Display the details of configurable products in the cart. ([@mikekeehnen](https://github.com/mikekeehnen))
151
338
 
152
- - [#2137](https://github.com/graphcommerce-org/graphcommerce/pull/2137) [`df507b1`](https://github.com/graphcommerce-org/graphcommerce/commit/df507b194c67eef7b02df858c07938bb308b5397) - Don't render pseudo-locale in HTML lang attribute
153
- ([@hnsr](https://github.com/hnsr))
339
+ - [#2137](https://github.com/graphcommerce-org/graphcommerce/pull/2137) [`df507b1`](https://github.com/graphcommerce-org/graphcommerce/commit/df507b194c67eef7b02df858c07938bb308b5397) - Don't render pseudo-locale in HTML lang attribute ([@hnsr](https://github.com/hnsr))
154
340
 
155
- - [#2159](https://github.com/graphcommerce-org/graphcommerce/pull/2159) [`17a5304`](https://github.com/graphcommerce-org/graphcommerce/commit/17a5304cbe297d29ddddce0d88f2c1bff220b59d) - Prevent aggregations from being excluded when executing the `defaultConfigurableOptionsSelection`
156
- ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
341
+ - [#2159](https://github.com/graphcommerce-org/graphcommerce/pull/2159) [`17a5304`](https://github.com/graphcommerce-org/graphcommerce/commit/17a5304cbe297d29ddddce0d88f2c1bff220b59d) - Prevent aggregations from being excluded when executing the `defaultConfigurableOptionsSelection` ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
157
342
 
158
343
  ## 8.0.0-canary.100
159
344
 
@@ -169,8 +354,7 @@
169
354
 
170
355
  ### Patch Changes
171
356
 
172
- - [#2146](https://github.com/graphcommerce-org/graphcommerce/pull/2146) [`3c19305`](https://github.com/graphcommerce-org/graphcommerce/commit/3c19305a7107d250bd898a9f4dfef38e362c2cbf) - Display the details of configurable products in the cart.
173
- ([@mikekeehnen](https://github.com/mikekeehnen))
357
+ - [#2146](https://github.com/graphcommerce-org/graphcommerce/pull/2146) [`3c19305`](https://github.com/graphcommerce-org/graphcommerce/commit/3c19305a7107d250bd898a9f4dfef38e362c2cbf) - Display the details of configurable products in the cart. ([@mikekeehnen](https://github.com/mikekeehnen))
174
358
 
175
359
  ## 8.0.0-canary.94
176
360
 
@@ -206,8 +390,7 @@
206
390
 
207
391
  ### Patch Changes
208
392
 
209
- - [#2137](https://github.com/graphcommerce-org/graphcommerce/pull/2137) [`df507b1`](https://github.com/graphcommerce-org/graphcommerce/commit/df507b194c67eef7b02df858c07938bb308b5397) - Don't render pseudo-locale in HTML lang attribute
210
- ([@hnsr](https://github.com/hnsr))
393
+ - [#2137](https://github.com/graphcommerce-org/graphcommerce/pull/2137) [`df507b1`](https://github.com/graphcommerce-org/graphcommerce/commit/df507b194c67eef7b02df858c07938bb308b5397) - Don't render pseudo-locale in HTML lang attribute ([@hnsr](https://github.com/hnsr))
211
394
 
212
395
  ## 8.0.0-canary.78
213
396
 
@@ -225,15 +408,13 @@
225
408
 
226
409
  ### Patch Changes
227
410
 
228
- - [#2159](https://github.com/graphcommerce-org/graphcommerce/pull/2159) [`17a5304`](https://github.com/graphcommerce-org/graphcommerce/commit/17a5304cbe297d29ddddce0d88f2c1bff220b59d) - Spread product back into products instead of only adding items
229
- ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
411
+ - [#2159](https://github.com/graphcommerce-org/graphcommerce/pull/2159) [`17a5304`](https://github.com/graphcommerce-org/graphcommerce/commit/17a5304cbe297d29ddddce0d88f2c1bff220b59d) - Spread product back into products instead of only adding items ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
230
412
 
231
413
  ## 8.0.0-canary.71
232
414
 
233
415
  ### Minor Changes
234
416
 
235
- - [#2099](https://github.com/graphcommerce-org/graphcommerce/pull/2099) [`ff796b8`](https://github.com/graphcommerce-org/graphcommerce/commit/ff796b838fae6cb5e35b101500133b0235a8677d) - Created UI for all customizable options except for the file upload customizable option
236
- ([@Jessevdpoel](https://github.com/Jessevdpoel))
417
+ - [#2099](https://github.com/graphcommerce-org/graphcommerce/pull/2099) [`ff796b8`](https://github.com/graphcommerce-org/graphcommerce/commit/ff796b838fae6cb5e35b101500133b0235a8677d) - Created UI for all customizable options except for the file upload customizable option ([@Jessevdpoel](https://github.com/Jessevdpoel))
237
418
 
238
419
  ## 8.0.0-canary.70
239
420
 
@@ -1778,31 +1959,31 @@
1778
1959
  All occurences of `<Trans>` and `t` need to be replaced:
1779
1960
 
1780
1961
  ```tsx
1781
- import { Trans, t } from "@lingui/macro";
1962
+ import { Trans, t } from '@lingui/macro'
1782
1963
 
1783
1964
  function MyComponent() {
1784
- const foo = "bar";
1965
+ const foo = 'bar'
1785
1966
  return (
1786
1967
  <div aria-label={t`Account ${foo}`}>
1787
1968
  <Trans>My Translation {foo}</Trans>
1788
1969
  </div>
1789
- );
1970
+ )
1790
1971
  }
1791
1972
  ```
1792
1973
 
1793
1974
  Needs to be replaced with:
1794
1975
 
1795
1976
  ```tsx
1796
- import { Trans } from "@lingui/react";
1797
- import { i18n } from "@lingui/core";
1977
+ import { Trans } from '@lingui/react'
1978
+ import { i18n } from '@lingui/core'
1798
1979
 
1799
1980
  function MyComponent() {
1800
- const foo = "bar";
1981
+ const foo = 'bar'
1801
1982
  return (
1802
1983
  <div aria-label={i18n._(/* i18n */ `Account {foo}`, { foo })}>
1803
- <Trans key="My Translation {foo}" values={{ foo }}></Trans>
1984
+ <Trans key='My Translation {foo}' values={{ foo }}></Trans>
1804
1985
  </div>
1805
- );
1986
+ )
1806
1987
  }
1807
1988
  ```
1808
1989
 
package/ConfigurableCartItem/ConfigurableCartItem.graphql CHANGED
@@ -5,7 +5,7 @@ fragment ConfigurableCartItem on ConfigurableCartItem @inject(into: ["CartItem"]
5
5
  option_label
6
6
  value_label
7
7
  }
8
- configurable_customizable: customizable_options {
8
+ customizable_options {
9
9
  ...SelectedCustomizableOption
10
10
  }
11
11
  configured_variant {
package/ConfigurableContext/ConfigurableProductForm.graphql CHANGED
@@ -27,7 +27,6 @@ fragment ConfigurableProductForm on ConfigurableProduct {
27
27
  }
28
28
  product {
29
29
  ...ProductListItem
30
- ...ProductListItemSimple
31
30
  }
32
31
  }
33
32
  }
package/ConfigurableProductAddToCart/ConfigurableProductAddToCart.tsx CHANGED
@@ -8,7 +8,7 @@ import {
8
8
  MessageSnackbar,
9
9
  IconSvg,
10
10
  } from '@graphcommerce/next-ui'
11
- import { Trans } from '@lingui/react'
11
+ import { Trans } from '@lingui/macro'
12
12
  import { Divider, Typography, Alert, Box, SxProps, Theme } from '@mui/material'
13
13
  import React from 'react'
14
14
  import { useConfigurableContext } from '../ConfigurableContext/ConfigurableContext'
@@ -140,7 +140,7 @@ export function ConfigurableProductAddToCart(props: ConfigurableProductAddToCart
140
140
  width: '100%',
141
141
  })}
142
142
  >
143
- <Trans id='Add to Cart' />
143
+ <Trans>Add to Cart</Trans>
144
144
  </Button>
145
145
  {additionalButtons}
146
146
  </Box>
@@ -172,15 +172,13 @@ export function ConfigurableProductAddToCart(props: ConfigurableProductAddToCart
172
172
  color='secondary'
173
173
  endIcon={<IconSvg src={iconChevronRight} />}
174
174
  >
175
- <Trans id='View shopping cart' />
175
+ <Trans>View shopping cart</Trans>
176
176
  </Button>
177
177
  }
178
178
  >
179
- <Trans
180
- id='<0>{name}</0> has been added to your shopping cart!'
181
- components={{ 0: <strong /> }}
182
- values={{ name }}
183
- />
179
+ <Trans>
180
+ <strong>{name}</strong> has been added to your shopping cart!
181
+ </Trans>
184
182
  </MessageSnackbar>
185
183
  </Box>
186
184
  )
package/ConfigurableProductPage.graphql CHANGED
@@ -1,3 +1,3 @@
1
- query ConfigurableProductPage($urlKey: String) {
1
+ query ConfigurableProductPage($urlKey: String, $useCustomAttributes: Boolean = false) {
2
2
  ...ProductPageConfigurableQueryFragment
3
3
  }
package/components/ConfigurableOptionValue/ConfigurableOptionValue.tsx CHANGED
@@ -1,4 +1,5 @@
1
- import { ActionCardItemRenderProps, RenderType } from '@graphcommerce/next-ui'
1
+ import { ActionCardItemRenderProps } from '@graphcommerce/ecommerce-ui'
2
+ import { RenderType } from '@graphcommerce/next-ui'
2
3
  import { ConfigurableOptionValueColor } from '../ConfigurableOptionValueColor'
3
4
  import { ConfigurableOptionValueImage } from '../ConfigurableOptionValueImage/ConfigurableOptionValueImage'
4
5
  import { ConfigurableOptionValueText } from '../ConfigurableOptionValueText/ConfigurableOptionValueText'
package/components/ConfigurableOptionValueColor/ConfigurableOptionValueColor.tsx CHANGED
@@ -1,4 +1,5 @@
1
- import { ActionCard, ActionCardItemRenderProps } from '@graphcommerce/next-ui'
1
+ import { ActionCardItemRenderProps } from '@graphcommerce/ecommerce-ui'
2
+ import { ActionCard } from '@graphcommerce/next-ui'
2
3
  import { Box } from '@mui/material'
3
4
  import { swatchSizes } from '../ConfigurableOptionValueImage'
4
5
  import { ConfigurableOptionValueColorFragment } from './ConfigurableOptionValueColor.gql'
package/components/ConfigurableOptionValueImage/ConfigurableOptionValueImage.tsx CHANGED
@@ -1,8 +1,9 @@
1
+ import { ActionCardItemRenderProps } from '@graphcommerce/ecommerce-ui'
1
2
  import { Image } from '@graphcommerce/image'
2
- import { ActionCardItemRenderProps, ActionCard, responsiveVal } from '@graphcommerce/next-ui'
3
- import { ConfigurableOptionValueImageFragment } from './ConfigurableOptionValueImage.gql'
4
- import { Box, Button } from '@mui/material'
3
+ import { ActionCard, responsiveVal } from '@graphcommerce/next-ui'
5
4
  import { Trans } from '@lingui/react'
5
+ import { Button } from '@mui/material'
6
+ import { ConfigurableOptionValueImageFragment } from './ConfigurableOptionValueImage.gql'
6
7
 
7
8
  export type ConfigurableOptionValueImageProps =
8
9
  ActionCardItemRenderProps<ConfigurableOptionValueImageFragment>
package/components/ConfigurableOptionValueText/ConfigurableOptionValueText.tsx CHANGED
@@ -1,4 +1,5 @@
1
- import { ActionCard, ActionCardItemRenderProps } from '@graphcommerce/next-ui'
1
+ import { ActionCardItemRenderProps } from '@graphcommerce/ecommerce-ui'
2
+ import { ActionCard } from '@graphcommerce/next-ui'
2
3
  import { ConfigurableOptionValueTextFragment } from './ConfigurableOptionValueText.gql'
3
4
 
4
5
  export type ConfigurableOptionValueTextProps =
package/components/ConfigurableProductOptions/ConfigurableProductOption.tsx CHANGED
@@ -1,19 +1,14 @@
1
+ import { ActionCardItemBase, ActionCardListForm } from '@graphcommerce/ecommerce-ui'
1
2
  import {
2
- useFormAddProductsToCart,
3
3
  AddProductsToCartFields,
4
+ useFormAddProductsToCart,
4
5
  } from '@graphcommerce/magento-product/components'
5
- import {
6
- nonNullable,
7
- filterNonNullableKeys,
8
- SectionHeader,
9
- ActionCardListForm,
10
- ActionCardItemBase,
11
- } from '@graphcommerce/next-ui'
6
+ import { filterNonNullableKeys, nonNullable, SectionHeader } from '@graphcommerce/next-ui'
12
7
  import { useWatch } from '@graphcommerce/react-hook-form'
13
8
  import { i18n } from '@lingui/core'
14
9
  import { Box, SxProps, Theme } from '@mui/material'
15
10
  import { ConfigurableOptionsFragment } from '../../graphql/ConfigurableOptions.gql'
16
- import { UseConfigurableOptionsSelection, useConfigurableOptionsForSelection } from '../../hooks'
11
+ import { useConfigurableOptionsForSelection, UseConfigurableOptionsSelection } from '../../hooks'
17
12
  import {
18
13
  ConfigurableOptionValue,
19
14
  ConfigurableOptionValueFragment,
package/components/ConfigurableProductOptions/ConfigurableProductOptions.tsx CHANGED
@@ -1,3 +1,4 @@
1
+ import { ActionCardRequireOptionSelection } from '@graphcommerce/ecommerce-ui'
1
2
  import { AddToCartItemSelector, useFormAddProductsToCart } from '@graphcommerce/magento-product'
2
3
  import { filterNonNullableKeys, ActionCardListProps, useLocale } from '@graphcommerce/next-ui'
3
4
  import { i18n } from '@lingui/core'
@@ -13,7 +14,8 @@ export type ConfigurableProductOptionsProps = AddToCartItemSelector & {
13
14
  sx?: SxProps<Theme>
14
15
  render?: typeof ConfigurableOptionValue
15
16
  product: ConfigurableOptionsFragment
16
- } & Pick<ActionCardListProps, 'color' | 'variant' | 'size' | 'layout' | 'collapse'>
17
+ } & Pick<ActionCardListProps, 'color' | 'variant' | 'size' | 'layout' | 'collapse'> &
18
+ ActionCardRequireOptionSelection
17
19
 
18
20
  export function ConfigurableProductOptions(props: ConfigurableProductOptionsProps) {
19
21
  const {
package/components/ProductListItemConfigurable/ProductListItemConfigurable.graphql CHANGED
@@ -13,19 +13,4 @@ fragment ProductListItemConfigurable on ConfigurableProduct @inject(into: ["Prod
13
13
  }
14
14
  }
15
15
  }
16
- variants {
17
- attributes {
18
- value_index
19
- uid
20
- code
21
- }
22
- product {
23
- uid
24
- sku
25
- name
26
- small_image {
27
- ...ProductImage
28
- }
29
- }
30
- }
31
16
  }
package/components/ProductListItemConfigurable/ProductListItemConfigurable.tsx CHANGED
@@ -2,16 +2,10 @@ import {
2
2
  ProductListItem,
3
3
  OverlayAreaKeys,
4
4
  ProductListItemProps,
5
- useProductListParamsContext,
6
- isFilterTypeEqual,
7
5
  } from '@graphcommerce/magento-product'
8
6
  import { SwatchList } from '../../SwatchList'
9
7
  import { ProductListItemConfigurableFragment } from './ProductListItemConfigurable.gql'
10
8
 
11
- export type ProductListItemConfigurableActionProps = ProductListItemConfigurableFragment & {
12
- variant?: NonNullable<ProductListItemConfigurableFragment['variants']>[0]
13
- }
14
-
15
9
  export type ProdustListItemConfigurableProps = ProductListItemConfigurableFragment &
16
10
  ProductListItemProps & {
17
11
  swatchLocations?: Partial<Record<OverlayAreaKeys, string[]>>
@@ -19,7 +13,6 @@ export type ProdustListItemConfigurableProps = ProductListItemConfigurableFragme
19
13
 
20
14
  export function ProductListItemConfigurable(props: ProdustListItemConfigurableProps) {
21
15
  const {
22
- variants,
23
16
  configurable_options,
24
17
  children,
25
18
  swatchLocations = { bottomLeft: [], bottomRight: [], topLeft: [], topRight: [] },
@@ -29,40 +22,10 @@ export function ProductListItemConfigurable(props: ProdustListItemConfigurablePr
29
22
  topRight,
30
23
  ...configurableProduct
31
24
  } = props
32
- const { params } = useProductListParamsContext()
33
-
34
- const options: [string, string[]][] =
35
- configurable_options
36
- ?.filter(
37
- (option) =>
38
- option?.attribute_code &&
39
- params.filters[option.attribute_code] &&
40
- isFilterTypeEqual(params.filters[option.attribute_code]),
41
- )
42
- .map((option) => {
43
- const filter = params.filters[option?.attribute_code ?? '']
44
- return [option?.attribute_code ?? '', (filter?.in as string[]) ?? []]
45
- }) ?? []
46
-
47
- const selected = {}
48
-
49
- options.forEach(([attr, values]) => {
50
- if (!selected[attr]) selected[attr] = values
51
- })
52
-
53
- const matchingVariants = variants?.filter(
54
- (variant) =>
55
- variant?.attributes?.filter(
56
- (attribute) =>
57
- selected[attribute?.code ?? ''] !== undefined &&
58
- selected[attribute?.code ?? ''].includes(String(attribute?.value_index)),
59
- ).length,
60
- )
61
25
 
62
26
  return (
63
27
  <ProductListItem
64
28
  {...configurableProduct}
65
- small_image={matchingVariants?.[0]?.product?.small_image ?? configurableProduct.small_image}
66
29
  topLeft={
67
30
  <>
68
31
  {topLeft}
package/graphql/ConfigurableOptions.graphql CHANGED
@@ -1,4 +1,4 @@
1
- fragment ConfigurableOptions on ConfigurableProduct @injectable {
1
+ fragment ConfigurableOptions on ConfigurableProduct {
2
2
  __typename
3
3
  uid
4
4
  sku
package/graphql/ConfigurableOptionsSelection.graphql CHANGED
@@ -1,4 +1,4 @@
1
- fragment ConfigurableOptionsSelection on ConfigurableProduct @injectable {
1
+ fragment ConfigurableOptionsSelection on ConfigurableProduct {
2
2
  configurable_product_options_selection(configurableOptionValueUids: $selectedOptions) {
3
3
  __typename
4
4
  configurable_options {
package/hooks/useConfigurableOptionsSelection.ts CHANGED
@@ -16,7 +16,7 @@ export function useConfigurableOptionsForSelection(variables: UseConfigurableOpt
16
16
 
17
17
  const selection = useQuery(GetConfigurableOptionsSelectionDocument, {
18
18
  variables: { urlKey: url_key ?? '', selectedOptions },
19
- skip: !url_key || !selectedOptions.length,
19
+ skip: !url_key,
20
20
  })
21
21
 
22
22
  const configured = selection.error
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@graphcommerce/magento-product-configurable",
3
3
  "homepage": "https://www.graphcommerce.org/",
4
4
  "repository": "github:graphcommerce-org/graphcommerce",
5
- "version": "8.1.0-canary.9",
5
+ "version": "9.0.0-canary.101",
6
6
  "sideEffects": false,
7
7
  "prettier": "@graphcommerce/prettier-config-pwa",
8
8
  "eslintConfig": {
@@ -12,23 +12,23 @@
12
12
  }
13
13
  },
14
14
  "peerDependencies": {
15
- "@graphcommerce/ecommerce-ui": "^8.1.0-canary.9",
16
- "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.9",
17
- "@graphcommerce/graphql": "^8.1.0-canary.9",
18
- "@graphcommerce/graphql-mesh": "^8.1.0-canary.9",
19
- "@graphcommerce/image": "^8.1.0-canary.9",
20
- "@graphcommerce/lingui-next": "8.1.0-canary.9",
21
- "@graphcommerce/magento-cart": "^8.1.0-canary.9",
22
- "@graphcommerce/magento-cart-items": "^8.1.0-canary.9",
23
- "@graphcommerce/magento-category": "^8.1.0-canary.9",
24
- "@graphcommerce/magento-customer": "^8.1.0-canary.9",
25
- "@graphcommerce/magento-product": "^8.1.0-canary.9",
26
- "@graphcommerce/magento-product-simple": "^8.1.0-canary.9",
27
- "@graphcommerce/magento-store": "^8.1.0-canary.9",
28
- "@graphcommerce/next-ui": "^8.1.0-canary.9",
29
- "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.9",
30
- "@graphcommerce/react-hook-form": "^8.1.0-canary.9",
31
- "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.9",
15
+ "@graphcommerce/ecommerce-ui": "^9.0.0-canary.101",
16
+ "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.101",
17
+ "@graphcommerce/graphql": "^9.0.0-canary.101",
18
+ "@graphcommerce/graphql-mesh": "^9.0.0-canary.101",
19
+ "@graphcommerce/image": "^9.0.0-canary.101",
20
+ "@graphcommerce/lingui-next": "9.0.0-canary.101",
21
+ "@graphcommerce/magento-cart": "^9.0.0-canary.101",
22
+ "@graphcommerce/magento-cart-items": "^9.0.0-canary.101",
23
+ "@graphcommerce/magento-category": "^9.0.0-canary.101",
24
+ "@graphcommerce/magento-customer": "^9.0.0-canary.101",
25
+ "@graphcommerce/magento-product": "^9.0.0-canary.101",
26
+ "@graphcommerce/magento-product-simple": "^9.0.0-canary.101",
27
+ "@graphcommerce/magento-store": "^9.0.0-canary.101",
28
+ "@graphcommerce/next-ui": "^9.0.0-canary.101",
29
+ "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.101",
30
+ "@graphcommerce/react-hook-form": "^9.0.0-canary.101",
31
+ "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.101",
32
32
  "@lingui/core": "^4.2.1",
33
33
  "@lingui/macro": "^4.2.1",
34
34
  "@lingui/react": "^4.2.1",
package/plugins/ConfigurableCartItemActionCard.tsx CHANGED
@@ -1,12 +1,14 @@
1
1
  import type { CartItemActionCardProps } from '@graphcommerce/magento-cart-items'
2
- import type { PluginProps } from '@graphcommerce/next-config'
2
+ import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
3
3
  import { isTypename } from '@graphcommerce/next-ui'
4
4
  import { ConfigurableCartItemOptions } from '../components'
5
5
 
6
- export const component = 'CartItemActionCard'
7
- export const exported = '@graphcommerce/magento-cart-items'
6
+ export const config: PluginConfig = {
7
+ type: 'component',
8
+ module: '@graphcommerce/magento-cart-items',
9
+ }
8
10
 
9
- export function ConfigurableCartItemActionCard(props: PluginProps<CartItemActionCardProps>) {
11
+ export function CartItemActionCard(props: PluginProps<CartItemActionCardProps>) {
10
12
  const { Prev, ...rest } = props
11
13
 
12
14
  if (!isTypename(rest.cartItem, ['ConfigurableCartItem'])) return <Prev {...rest} />
@@ -36,5 +38,3 @@ export function ConfigurableCartItemActionCard(props: PluginProps<CartItemAction
36
38
  />
37
39
  )
38
40
  }
39
-
40
- export const Plugin = ConfigurableCartItemActionCard
package/plugins/ConfigurableProductPage/ConfigurableProductPageDescription.tsx CHANGED
@@ -2,14 +2,16 @@ import type {
2
2
  AddToCartItemSelector,
3
3
  ProductPageDescriptionProps,
4
4
  } from '@graphcommerce/magento-product'
5
- import type { IfConfig, PluginProps } from '@graphcommerce/next-config'
5
+ import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
6
6
  import { useConfigurableSelectedVariant } from '../../hooks'
7
7
 
8
- export const component = 'ProductPageDescription'
9
- export const exported = '@graphcommerce/magento-product'
10
- export const ifConfig: IfConfig = 'configurableVariantValues.content'
8
+ export const config: PluginConfig = {
9
+ type: 'component',
10
+ module: '@graphcommerce/magento-product',
11
+ ifConfig: 'configurableVariantValues.content',
12
+ }
11
13
 
12
- export const ConfigurableProductPageDescription = (
14
+ export const ProductPageDescription = (
13
15
  props: PluginProps<ProductPageDescriptionProps & AddToCartItemSelector>,
14
16
  ) => {
15
17
  const { Prev, product, index, ...rest } = props
@@ -28,5 +30,3 @@ export const ConfigurableProductPageDescription = (
28
30
  />
29
31
  )
30
32
  }
31
-
32
- export const Plugin = ConfigurableProductPageDescription
package/plugins/ConfigurableProductPage/ConfigurableProductPageGallery.tsx CHANGED
@@ -1,13 +1,15 @@
1
1
  import type { AddToCartItemSelector, ProductPageGalleryProps } from '@graphcommerce/magento-product'
2
- import type { PluginProps } from '@graphcommerce/next-config'
2
+ import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
3
3
  import { useConfigurableOptionsSelection } from '../../hooks'
4
4
 
5
- export const component = 'ProductPageGallery'
6
- export const exported = '@graphcommerce/magento-product'
5
+ export const config: PluginConfig = {
6
+ type: 'component',
7
+ module: '@graphcommerce/magento-product',
8
+ }
7
9
 
8
- const ConfigurableProductPageGallery = (
10
+ export function ProductPageGallery(
9
11
  props: PluginProps<ProductPageGalleryProps> & AddToCartItemSelector,
10
- ) => {
12
+ ) {
11
13
  const { Prev, product, index, ...rest } = props
12
14
 
13
15
  const { configured } = useConfigurableOptionsSelection({ url_key: product.url_key, index })
@@ -19,5 +21,3 @@ const ConfigurableProductPageGallery = (
19
21
 
20
22
  return <Prev product={{ ...product, media_gallery }} {...rest} />
21
23
  }
22
-
23
- export const Plugin = ConfigurableProductPageGallery
package/plugins/ConfigurableProductPage/ConfigurableProductPageJsonLd.tsx CHANGED
@@ -3,22 +3,19 @@ import type {
3
3
  JsonLdProductFragment,
4
4
  ProductPageJsonLdProps,
5
5
  } from '@graphcommerce/magento-product'
6
- import type { IfConfig, PluginProps } from '@graphcommerce/next-config'
6
+ import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
7
7
  import { useConfigurableSelectedVariant } from '../../hooks'
8
8
 
9
- export const component = 'ProductPageJsonLd'
10
- export const exported = '@graphcommerce/magento-product'
11
- export const ifConfig: IfConfig = 'configurableVariantValues.content'
9
+ export const config: PluginConfig = {
10
+ type: 'component',
11
+ module: '@graphcommerce/magento-product',
12
+ ifConfig: 'configurableVariantValues.content',
13
+ }
12
14
 
13
- const ConfigurableProductPageJsonLd = <
14
- T extends { '@type': string },
15
- P extends JsonLdProductFragment,
16
- >(
15
+ export function ProductPageJsonLd<T extends { '@type': string }, P extends JsonLdProductFragment>(
17
16
  props: PluginProps<ProductPageJsonLdProps<T, P>> & AddToCartItemSelector,
18
- ) => {
17
+ ) {
19
18
  const { Prev, product, index, ...rest } = props
20
19
  const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index })
21
20
  return <Prev product={(variant ?? product) as P} {...rest} />
22
21
  }
23
-
24
- export const Plugin = ConfigurableProductPageJsonLd
package/plugins/ConfigurableProductPage/ConfigurableProductPageMeta.tsx CHANGED
@@ -4,18 +4,18 @@ import {
4
4
  type AddToCartItemSelector,
5
5
  ProductPageMetaProps,
6
6
  } from '@graphcommerce/magento-product'
7
- import type { IfConfig, PluginProps } from '@graphcommerce/next-config'
7
+ import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
8
8
  import { useRouter } from 'next/router'
9
9
  import { useEffect } from 'react'
10
10
  import { useConfigurableSelectedVariant } from '../../hooks'
11
11
 
12
- export const component = 'ProductPageMeta'
13
- export const exported = '@graphcommerce/magento-product'
14
- export const ifConfig: IfConfig = 'configurableVariantValues.url'
12
+ export const config: PluginConfig = {
13
+ type: 'component',
14
+ module: '@graphcommerce/magento-product',
15
+ ifConfig: 'configurableVariantValues.url',
16
+ }
15
17
 
16
- const ConfigurableProductPageMetaUrls = (
17
- props: PluginProps<ProductPageMetaProps> & AddToCartItemSelector,
18
- ) => {
18
+ export function ProductPageMeta(props: PluginProps<ProductPageMetaProps> & AddToCartItemSelector) {
19
19
  const { Prev, product, index, ...rest } = props
20
20
  const { replace, asPath } = useRouter()
21
21
 
@@ -37,5 +37,3 @@ const ConfigurableProductPageMetaUrls = (
37
37
 
38
38
  return <Prev product={variant ? mergeDeep(product, variant) : product} {...rest} />
39
39
  }
40
-
41
- export const Plugin = ConfigurableProductPageMetaUrls
package/plugins/ConfigurableProductPage/ConfigurableProductPageName.tsx CHANGED
@@ -1,17 +1,15 @@
1
1
  import type { AddToCartItemSelector, ProductPageNameProps } from '@graphcommerce/magento-product'
2
- import type { IfConfig, PluginProps } from '@graphcommerce/next-config'
2
+ import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
3
3
  import { useConfigurableSelectedVariant } from '../../hooks'
4
4
 
5
- export const component = 'ProductPageName'
6
- export const exported = '@graphcommerce/magento-product'
7
- export const ifConfig: IfConfig = 'configurableVariantValues.content'
5
+ export const config: PluginConfig = {
6
+ type: 'component',
7
+ module: '@graphcommerce/magento-product',
8
+ ifConfig: 'configurableVariantValues.content',
9
+ }
8
10
 
9
- const ConfigurableProductPageName = (
10
- props: PluginProps<ProductPageNameProps> & AddToCartItemSelector,
11
- ) => {
11
+ export function ProductPageName(props: PluginProps<ProductPageNameProps> & AddToCartItemSelector) {
12
12
  const { Prev, product, index, ...rest } = props
13
13
  const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index })
14
14
  return <Prev product={variant ?? product} {...rest} />
15
15
  }
16
-
17
- export const Plugin = ConfigurableProductPageName
package/plugins/ConfigurableProductPage/ConfigurableProductPagePrice.tsx CHANGED
@@ -1,13 +1,15 @@
1
1
  import { AddToCartItemSelector, ProductPagePriceProps } from '@graphcommerce/magento-product'
2
- import type { PluginProps } from '@graphcommerce/next-config'
2
+ import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
3
3
  import { useConfigurableSelectedVariant } from '../../hooks'
4
4
 
5
- export const component = 'ProductPagePrice'
6
- export const exported = '@graphcommerce/magento-product'
5
+ export const config: PluginConfig = {
6
+ type: 'component',
7
+ module: '@graphcommerce/magento-product',
8
+ }
7
9
 
8
- const ConfigurableProductPagePrice = (
10
+ export function ProductPagePrice(
9
11
  props: PluginProps<ProductPagePriceProps> & AddToCartItemSelector,
10
- ) => {
12
+ ) {
11
13
  const { Prev, product, index, ...rest } = props
12
14
  const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index })
13
15
 
@@ -21,5 +23,3 @@ const ConfigurableProductPagePrice = (
21
23
  />
22
24
  )
23
25
  }
24
-
25
- export const Plugin = ConfigurableProductPagePrice
package/plugins/ConfigurableProductPage/ConfigurableProductPagePriceTiers.tsx CHANGED
@@ -2,21 +2,22 @@ import type {
2
2
  AddToCartItemSelector,
3
3
  ProductPagePriceTiersProps,
4
4
  } from '@graphcommerce/magento-product'
5
- import type { PluginProps } from '@graphcommerce/next-config'
5
+ import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
6
6
  import { useConfigurableSelectedVariant } from '../../hooks'
7
7
 
8
- export const component = 'ProductPagePriceTiers'
9
- export const exported = '@graphcommerce/magento-product'
8
+ export const config: PluginConfig = {
9
+ type: 'component',
10
+ module: '@graphcommerce/magento-product',
11
+ }
10
12
 
11
- const ConfigurableProductPagePriceTiers = (
13
+ export function ProductPagePriceTiers(
12
14
  props: PluginProps<ProductPagePriceTiersProps> & AddToCartItemSelector,
13
- ) => {
15
+ ) {
14
16
  const { Prev, product, index, ...rest } = props
15
17
  const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index })
16
18
 
17
- if (!variant) return null
19
+ if (!variant || product.__typename !== 'ConfigurableProduct')
20
+ return <Prev product={product} {...rest} />
18
21
 
19
- return <Prev product={variant} {...rest} />
22
+ return <Prev product={{ ...variant, options: product.options }} {...rest} />
20
23
  }
21
-
22
- export const Plugin = ConfigurableProductPagePriceTiers
package/plugins/ConfigurableProductPage/ConfigurableProductShortDescription.tsx CHANGED
@@ -2,16 +2,18 @@ import type {
2
2
  AddToCartItemSelector,
3
3
  ProductShortDescriptionProps,
4
4
  } from '@graphcommerce/magento-product'
5
- import type { IfConfig, PluginProps } from '@graphcommerce/next-config'
5
+ import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
6
6
  import { useConfigurableSelectedVariant } from '../../hooks'
7
7
 
8
- export const component = 'ProductShortDescription'
9
- export const exported = '@graphcommerce/magento-product'
10
- export const ifConfig: IfConfig = 'configurableVariantValues.content'
8
+ export const config: PluginConfig = {
9
+ type: 'component',
10
+ module: '@graphcommerce/magento-product',
11
+ ifConfig: 'configurableVariantValues.content',
12
+ }
11
13
 
12
- const ConfigurableProductShortDescription = (
14
+ export function ProductShortDescription(
13
15
  props: PluginProps<ProductShortDescriptionProps> & AddToCartItemSelector,
14
- ) => {
16
+ ) {
15
17
  const { Prev, product, ...rest } = props
16
18
  const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index: 0 })
17
19
 
@@ -27,5 +29,3 @@ const ConfigurableProductShortDescription = (
27
29
  />
28
30
  )
29
31
  }
30
-
31
- export const Plugin = ConfigurableProductShortDescription
package/utils/defaultConfigurableOptionsSelection.ts CHANGED
@@ -27,17 +27,19 @@ export function defaultConfigurableOptionsSelection<Q extends BaseQuery = BaseQu
27
27
  client: ApolloClient<object>,
28
28
  query: Q,
29
29
  ): Q & Pick<AddProductsToCartFormProps, 'defaultValues'> {
30
- if (!import.meta.graphCommerce.configurableVariantForSimple) {
30
+ const simple = query?.products?.items?.find((p) => p?.url_key === urlKey)
31
+ const configurable = findByTypename(query?.products?.items, 'ConfigurableProduct')
32
+
33
+ if (
34
+ simple?.__typename === 'SimpleProduct' &&
35
+ !import.meta.graphCommerce.configurableVariantForSimple
36
+ ) {
31
37
  const product = query?.products?.items?.find((p) => p?.url_key === urlKey)
32
38
  return { ...query, products: { ...query?.products, items: [product] }, defaultValues: {} }
33
39
  }
34
40
 
35
- const simple = query?.products?.items?.find((p) => p?.url_key === urlKey)
36
- const configurable = findByTypename(query?.products?.items, 'ConfigurableProduct')
37
-
38
41
  // Check if the requested product actually is a simple product
39
- if (!simple || simple?.__typename !== 'SimpleProduct' || !configurable?.url_key)
40
- return { ...query, defaultValues: {} }
42
+ if (!configurable?.url_key) return { ...query, defaultValues: {} }
41
43
 
42
44
  // Find the requested simple product on the configurable variants and get the attributes.
43
45
  const attributes = configurable?.variants?.find(
@@ -45,8 +47,6 @@ export function defaultConfigurableOptionsSelection<Q extends BaseQuery = BaseQu
45
47
  )?.attributes
46
48
 
47
49
  const selectedOptions = (attributes ?? []).filter(nonNullable).map((a) => a.uid)
48
- if (!selectedOptions.length)
49
- return { ...query, products: { ...query?.products, items: [simple] }, defaultValues: {} }
50
50
 
51
51
  /**
52
52
  * We're using writeQuery to the Apollo Client cache, to to avoid a second request to the GraphQL
@@ -65,7 +65,6 @@ export function defaultConfigurableOptionsSelection<Q extends BaseQuery = BaseQu
65
65
  * })
66
66
  * ```
67
67
  */
68
-
69
68
  const optionsAvailableForSelection =
70
69
  configurable.configurable_product_options_selection?.options_available_for_selection?.filter(
71
70
  nonNullable,
@@ -104,8 +103,8 @@ export function defaultConfigurableOptionsSelection<Q extends BaseQuery = BaseQu
104
103
  option_value_uids,
105
104
  }),
106
105
  ),
107
- media_gallery: simple.media_gallery,
108
- variant: simple,
106
+ media_gallery: simple?.media_gallery ?? configurable.media_gallery,
107
+ variant: simple?.__typename === 'SimpleProduct' ? simple : null,
109
108
  },
110
109
  },
111
110
  ],