@graphcommerce/magento-product-configurable 8.1.0-canary.8 → 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 +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,11 +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
+
201
+ ## 8.1.0-canary.9
202
+
3
203
  ## 8.1.0-canary.8
4
204
 
5
205
  ### Patch Changes
6
206
 
7
- - [#2247](https://github.com/graphcommerce-org/graphcommerce/pull/2247) [`444e446`](https://github.com/graphcommerce-org/graphcommerce/commit/444e446a218cc9da3defb940a6d5cce0229ff845) - Added clear upgrade instructions for linguiLocale
8
- ([@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))
9
208
 
10
209
  ## 8.1.0-canary.7
11
210
 
@@ -21,29 +220,25 @@
21
220
 
22
221
  ### Patch Changes
23
222
 
24
- - [#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
25
- ([@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))
26
224
 
27
225
  ## 8.0.6-canary.1
28
226
 
29
227
  ### Patch Changes
30
228
 
31
- - [#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
32
- ([@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))
33
230
 
34
231
  ## 8.0.6-canary.0
35
232
 
36
233
  ### Patch Changes
37
234
 
38
- - [#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.
39
- ([@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))
40
236
 
41
237
  ## 8.0.5
42
238
 
43
239
  ### Patch Changes
44
240
 
45
- - [#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
46
- ([@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))
47
242
 
48
243
  ## 8.0.5-canary.10
49
244
 
@@ -53,8 +248,7 @@
53
248
 
54
249
  ### Patch Changes
55
250
 
56
- - [#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
57
- ([@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))
58
252
 
59
253
  ## 8.0.5-canary.7
60
254
 
@@ -108,8 +302,7 @@
108
302
 
109
303
  ### Patch Changes
110
304
 
111
- - [#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.
112
- ([@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))
113
306
 
114
307
  ## 8.0.1-canary.4
115
308
 
@@ -117,8 +310,7 @@
117
310
 
118
311
  ### Patch Changes
119
312
 
120
- - [#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.
121
- ([@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))
122
314
 
123
315
  ## 8.0.1-canary.2
124
316
 
@@ -130,28 +322,21 @@
130
322
 
131
323
  ### Minor Changes
132
324
 
133
- - [#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.
134
- ([@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))
135
326
 
136
- - [#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/>`
137
- ([@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))
138
328
 
139
329
  ### Patch Changes
140
330
 
141
- - [#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.
142
- ([@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))
143
332
 
144
- - [#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
145
- ([@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))
146
334
 
147
- - [#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.
148
- ([@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))
149
336
 
150
- - [#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
151
- ([@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))
152
338
 
153
- - [#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`
154
- ([@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))
155
340
 
156
341
  ## 8.0.0-canary.100
157
342
 
@@ -167,8 +352,7 @@
167
352
 
168
353
  ### Patch Changes
169
354
 
170
- - [#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.
171
- ([@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))
172
356
 
173
357
  ## 8.0.0-canary.94
174
358
 
@@ -204,8 +388,7 @@
204
388
 
205
389
  ### Patch Changes
206
390
 
207
- - [#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
208
- ([@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))
209
392
 
210
393
  ## 8.0.0-canary.78
211
394
 
@@ -223,15 +406,13 @@
223
406
 
224
407
  ### Patch Changes
225
408
 
226
- - [#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
227
- ([@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))
228
410
 
229
411
  ## 8.0.0-canary.71
230
412
 
231
413
  ### Minor Changes
232
414
 
233
- - [#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
234
- ([@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))
235
416
 
236
417
  ## 8.0.0-canary.70
237
418
 
@@ -1776,31 +1957,31 @@
1776
1957
  All occurences of `<Trans>` and `t` need to be replaced:
1777
1958
 
1778
1959
  ```tsx
1779
- import { Trans, t } from "@lingui/macro";
1960
+ import { Trans, t } from '@lingui/macro'
1780
1961
 
1781
1962
  function MyComponent() {
1782
- const foo = "bar";
1963
+ const foo = 'bar'
1783
1964
  return (
1784
1965
  <div aria-label={t`Account ${foo}`}>
1785
1966
  <Trans>My Translation {foo}</Trans>
1786
1967
  </div>
1787
- );
1968
+ )
1788
1969
  }
1789
1970
  ```
1790
1971
 
1791
1972
  Needs to be replaced with:
1792
1973
 
1793
1974
  ```tsx
1794
- import { Trans } from "@lingui/react";
1795
- import { i18n } from "@lingui/core";
1975
+ import { Trans } from '@lingui/react'
1976
+ import { i18n } from '@lingui/core'
1796
1977
 
1797
1978
  function MyComponent() {
1798
- const foo = "bar";
1979
+ const foo = 'bar'
1799
1980
  return (
1800
1981
  <div aria-label={i18n._(/* i18n */ `Account {foo}`, { foo })}>
1801
- <Trans key="My Translation {foo}" values={{ foo }}></Trans>
1982
+ <Trans key='My Translation {foo}' values={{ foo }}></Trans>
1802
1983
  </div>
1803
- );
1984
+ )
1804
1985
  }
1805
1986
  ```
1806
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.8",
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.8",
16
- "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.8",
17
- "@graphcommerce/graphql": "^8.1.0-canary.8",
18
- "@graphcommerce/graphql-mesh": "^8.1.0-canary.8",
19
- "@graphcommerce/image": "^8.1.0-canary.8",
20
- "@graphcommerce/lingui-next": "8.1.0-canary.8",
21
- "@graphcommerce/magento-cart": "^8.1.0-canary.8",
22
- "@graphcommerce/magento-cart-items": "^8.1.0-canary.8",
23
- "@graphcommerce/magento-category": "^8.1.0-canary.8",
24
- "@graphcommerce/magento-customer": "^8.1.0-canary.8",
25
- "@graphcommerce/magento-product": "^8.1.0-canary.8",
26
- "@graphcommerce/magento-product-simple": "^8.1.0-canary.8",
27
- "@graphcommerce/magento-store": "^8.1.0-canary.8",
28
- "@graphcommerce/next-ui": "^8.1.0-canary.8",
29
- "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.8",
30
- "@graphcommerce/react-hook-form": "^8.1.0-canary.8",
31
- "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.8",
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
  ],