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

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 +225 -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,210 @@
1
1
  # Change Log
2
2
 
3
+ ## 9.0.0-canary.100
4
+
5
+ ## 9.0.0-canary.99
6
+
7
+ ## 9.0.0-canary.98
8
+
9
+ ## 9.0.0-canary.97
10
+
11
+ ## 9.0.0-canary.96
12
+
13
+ ## 9.0.0-canary.95
14
+
15
+ ## 9.0.0-canary.94
16
+
17
+ ## 9.0.0-canary.93
18
+
19
+ ## 9.0.0-canary.92
20
+
21
+ ## 9.0.0-canary.91
22
+
23
+ ## 9.0.0-canary.90
24
+
25
+ ### Patch Changes
26
+
27
+ - [#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))
28
+
29
+ ## 9.0.0-canary.89
30
+
31
+ ## 9.0.0-canary.88
32
+
33
+ ## 9.0.0-canary.87
34
+
35
+ ## 9.0.0-canary.86
36
+
37
+ ## 9.0.0-canary.85
38
+
39
+ ## 9.0.0-canary.84
40
+
41
+ ## 9.0.0-canary.83
42
+
43
+ ## 9.0.0-canary.82
44
+
45
+ ## 9.0.0-canary.81
46
+
47
+ ## 9.0.0-canary.80
48
+
49
+ ## 9.0.0-canary.79
50
+
51
+ ## 9.0.0-canary.78
52
+
53
+ ## 9.0.0-canary.77
54
+
55
+ ## 9.0.0-canary.76
56
+
57
+ ## 9.0.0-canary.75
58
+
59
+ ## 9.0.0-canary.74
60
+
61
+ ## 9.0.0-canary.73
62
+
63
+ ## 9.0.0-canary.72
64
+
65
+ ## 9.0.0-canary.71
66
+
67
+ ## 9.0.0-canary.70
68
+
69
+ ## 9.0.0-canary.69
70
+
71
+ ## 9.0.0-canary.68
72
+
73
+ ## 9.0.0-canary.67
74
+
75
+ ## 9.0.0-canary.66
76
+
77
+ ## 9.0.0-canary.65
78
+
79
+ ## 9.0.0-canary.64
80
+
81
+ ## 9.0.0-canary.63
82
+
83
+ ## 9.0.0-canary.62
84
+
85
+ ## 9.0.0-canary.61
86
+
87
+ ## 9.0.0-canary.60
88
+
89
+ ## 9.0.0-canary.59
90
+
91
+ ## 9.0.0-canary.58
92
+
93
+ ## 9.0.0-canary.57
94
+
95
+ ## 9.0.0-canary.56
96
+
97
+ ## 9.0.0-canary.55
98
+
99
+ ## 9.0.0-canary.54
100
+
101
+ ## 8.1.0-canary.53
102
+
103
+ ## 8.1.0-canary.52
104
+
105
+ ## 8.1.0-canary.51
106
+
107
+ ### Minor Changes
108
+
109
+ - [#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))
110
+
111
+ ## 8.1.0-canary.50
112
+
113
+ ## 8.1.0-canary.49
114
+
115
+ ## 8.1.0-canary.48
116
+
117
+ ## 8.1.0-canary.47
118
+
119
+ ## 8.1.0-canary.46
120
+
121
+ ## 8.1.0-canary.45
122
+
123
+ ## 8.1.0-canary.44
124
+
125
+ ## 8.1.0-canary.43
126
+
127
+ ## 8.1.0-canary.42
128
+
129
+ ## 8.1.0-canary.41
130
+
131
+ ## 8.1.0-canary.40
132
+
133
+ ## 8.1.0-canary.39
134
+
135
+ ## 8.1.0-canary.38
136
+
137
+ ## 8.1.0-canary.37
138
+
139
+ ## 8.1.0-canary.36
140
+
141
+ ## 8.1.0-canary.35
142
+
143
+ ## 8.1.0-canary.34
144
+
145
+ ## 8.1.0-canary.33
146
+
147
+ ### Patch Changes
148
+
149
+ - [#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))
150
+
151
+ ## 8.1.0-canary.32
152
+
153
+ ## 8.1.0-canary.31
154
+
155
+ ## 8.1.0-canary.30
156
+
157
+ ## 8.1.0-canary.29
158
+
159
+ ## 8.1.0-canary.28
160
+
161
+ ## 8.1.0-canary.27
162
+
163
+ ## 8.1.0-canary.26
164
+
165
+ ## 8.1.0-canary.25
166
+
167
+ ## 8.1.0-canary.24
168
+
169
+ ## 8.1.0-canary.23
170
+
171
+ ### Patch Changes
172
+
173
+ - [#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))
174
+
175
+ ## 8.1.0-canary.22
176
+
177
+ ## 8.1.0-canary.21
178
+
179
+ ## 8.1.0-canary.20
180
+
181
+ ## 8.1.0-canary.19
182
+
183
+ ## 8.1.0-canary.18
184
+
185
+ ## 8.1.0-canary.17
186
+
187
+ ## 8.1.0-canary.16
188
+
189
+ ## 8.1.0-canary.15
190
+
191
+ ## 8.1.0-canary.14
192
+
193
+ ## 8.1.0-canary.13
194
+
195
+ ## 8.1.0-canary.12
196
+
197
+ ## 8.1.0-canary.11
198
+
199
+ ## 8.1.0-canary.10
200
+
3
201
  ## 8.1.0-canary.9
4
202
 
5
203
  ## 8.1.0-canary.8
6
204
 
7
205
  ### Patch Changes
8
206
 
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))
207
+ - [#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
208
 
12
209
  ## 8.1.0-canary.7
13
210
 
@@ -23,29 +220,25 @@
23
220
 
24
221
  ### Patch Changes
25
222
 
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))
223
+ - [#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
224
 
29
225
  ## 8.0.6-canary.1
30
226
 
31
227
  ### Patch Changes
32
228
 
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))
229
+ - [#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
230
 
36
231
  ## 8.0.6-canary.0
37
232
 
38
233
  ### Patch Changes
39
234
 
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))
235
+ - [#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
236
 
43
237
  ## 8.0.5
44
238
 
45
239
  ### Patch Changes
46
240
 
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))
241
+ - [#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
242
 
50
243
  ## 8.0.5-canary.10
51
244
 
@@ -55,8 +248,7 @@
55
248
 
56
249
  ### Patch Changes
57
250
 
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))
251
+ - [#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
252
 
61
253
  ## 8.0.5-canary.7
62
254
 
@@ -110,8 +302,7 @@
110
302
 
111
303
  ### Patch Changes
112
304
 
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))
305
+ - [#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
306
 
116
307
  ## 8.0.1-canary.4
117
308
 
@@ -119,8 +310,7 @@
119
310
 
120
311
  ### Patch Changes
121
312
 
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))
313
+ - [#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
314
 
125
315
  ## 8.0.1-canary.2
126
316
 
@@ -132,28 +322,21 @@
132
322
 
133
323
  ### Minor Changes
134
324
 
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))
325
+ - [#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
326
 
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))
327
+ - [#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
328
 
141
329
  ### Patch Changes
142
330
 
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))
331
+ - [#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
332
 
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))
333
+ - [#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
334
 
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))
335
+ - [#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
336
 
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))
337
+ - [#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
338
 
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))
339
+ - [#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
340
 
158
341
  ## 8.0.0-canary.100
159
342
 
@@ -169,8 +352,7 @@
169
352
 
170
353
  ### Patch Changes
171
354
 
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))
355
+ - [#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
356
 
175
357
  ## 8.0.0-canary.94
176
358
 
@@ -206,8 +388,7 @@
206
388
 
207
389
  ### Patch Changes
208
390
 
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))
391
+ - [#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
392
 
212
393
  ## 8.0.0-canary.78
213
394
 
@@ -225,15 +406,13 @@
225
406
 
226
407
  ### Patch Changes
227
408
 
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))
409
+ - [#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
410
 
231
411
  ## 8.0.0-canary.71
232
412
 
233
413
  ### Minor Changes
234
414
 
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))
415
+ - [#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
416
 
238
417
  ## 8.0.0-canary.70
239
418
 
@@ -1778,31 +1957,31 @@
1778
1957
  All occurences of `<Trans>` and `t` need to be replaced:
1779
1958
 
1780
1959
  ```tsx
1781
- import { Trans, t } from "@lingui/macro";
1960
+ import { Trans, t } from '@lingui/macro'
1782
1961
 
1783
1962
  function MyComponent() {
1784
- const foo = "bar";
1963
+ const foo = 'bar'
1785
1964
  return (
1786
1965
  <div aria-label={t`Account ${foo}`}>
1787
1966
  <Trans>My Translation {foo}</Trans>
1788
1967
  </div>
1789
- );
1968
+ )
1790
1969
  }
1791
1970
  ```
1792
1971
 
1793
1972
  Needs to be replaced with:
1794
1973
 
1795
1974
  ```tsx
1796
- import { Trans } from "@lingui/react";
1797
- import { i18n } from "@lingui/core";
1975
+ import { Trans } from '@lingui/react'
1976
+ import { i18n } from '@lingui/core'
1798
1977
 
1799
1978
  function MyComponent() {
1800
- const foo = "bar";
1979
+ const foo = 'bar'
1801
1980
  return (
1802
1981
  <div aria-label={i18n._(/* i18n */ `Account {foo}`, { foo })}>
1803
- <Trans key="My Translation {foo}" values={{ foo }}></Trans>
1982
+ <Trans key='My Translation {foo}' values={{ foo }}></Trans>
1804
1983
  </div>
1805
- );
1984
+ )
1806
1985
  }
1807
1986
  ```
1808
1987
 
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.100",
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.100",
16
+ "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.100",
17
+ "@graphcommerce/graphql": "^9.0.0-canary.100",
18
+ "@graphcommerce/graphql-mesh": "^9.0.0-canary.100",
19
+ "@graphcommerce/image": "^9.0.0-canary.100",
20
+ "@graphcommerce/lingui-next": "9.0.0-canary.100",
21
+ "@graphcommerce/magento-cart": "^9.0.0-canary.100",
22
+ "@graphcommerce/magento-cart-items": "^9.0.0-canary.100",
23
+ "@graphcommerce/magento-category": "^9.0.0-canary.100",
24
+ "@graphcommerce/magento-customer": "^9.0.0-canary.100",
25
+ "@graphcommerce/magento-product": "^9.0.0-canary.100",
26
+ "@graphcommerce/magento-product-simple": "^9.0.0-canary.100",
27
+ "@graphcommerce/magento-store": "^9.0.0-canary.100",
28
+ "@graphcommerce/next-ui": "^9.0.0-canary.100",
29
+ "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.100",
30
+ "@graphcommerce/react-hook-form": "^9.0.0-canary.100",
31
+ "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.100",
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
  ],