@nok-integration/storefront-react 0.19.31 → 0.19.32

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 (4) hide show
  1. package/dist/index.d.ts +54 -0
  2. package/dist/index.mjs +9 -3
  3. package/dist/standalone/storefront.mjs +9 -3
  4. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -444,6 +444,7 @@ declare const CategoryPage: z.ZodObject<{
444
444
  currency: string;
445
445
  }>>;
446
446
  media: z.ZodArray<z.ZodString, "many">;
447
+ media_by_colour: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodString, "many">>>;
447
448
  variants: z.ZodArray<z.ZodObject<{
448
449
  sku: z.ZodString;
449
450
  attributes: z.ZodRecord<z.ZodString, z.ZodString>;
@@ -542,6 +543,7 @@ declare const CategoryPage: z.ZodObject<{
542
543
  amount: number;
543
544
  currency: string;
544
545
  } | undefined;
546
+ media_by_colour?: Record<string, string[]> | undefined;
545
547
  badges?: string[] | undefined;
546
548
  promo?: {
547
549
  message: string;
@@ -582,6 +584,7 @@ declare const CategoryPage: z.ZodObject<{
582
584
  amount: number;
583
585
  currency: string;
584
586
  } | undefined;
587
+ media_by_colour?: Record<string, string[]> | undefined;
585
588
  badges?: string[] | undefined;
586
589
  promo?: {
587
590
  message: string;
@@ -626,6 +629,7 @@ declare const CategoryPage: z.ZodObject<{
626
629
  amount: number;
627
630
  currency: string;
628
631
  } | undefined;
632
+ media_by_colour?: Record<string, string[]> | undefined;
629
633
  badges?: string[] | undefined;
630
634
  promo?: {
631
635
  message: string;
@@ -670,6 +674,7 @@ declare const CategoryPage: z.ZodObject<{
670
674
  amount: number;
671
675
  currency: string;
672
676
  } | undefined;
677
+ media_by_colour?: Record<string, string[]> | undefined;
673
678
  badges?: string[] | undefined;
674
679
  promo?: {
675
680
  message: string;
@@ -730,6 +735,7 @@ declare const CategoryPage: z.ZodObject<{
730
735
  currency: string;
731
736
  }>>;
732
737
  media: z.ZodArray<z.ZodString, "many">;
738
+ media_by_colour: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodString, "many">>>;
733
739
  variants: z.ZodArray<z.ZodObject<{
734
740
  sku: z.ZodString;
735
741
  attributes: z.ZodRecord<z.ZodString, z.ZodString>;
@@ -828,6 +834,7 @@ declare const CategoryPage: z.ZodObject<{
828
834
  amount: number;
829
835
  currency: string;
830
836
  } | undefined;
837
+ media_by_colour?: Record<string, string[]> | undefined;
831
838
  badges?: string[] | undefined;
832
839
  promo?: {
833
840
  message: string;
@@ -868,6 +875,7 @@ declare const CategoryPage: z.ZodObject<{
868
875
  amount: number;
869
876
  currency: string;
870
877
  } | undefined;
878
+ media_by_colour?: Record<string, string[]> | undefined;
871
879
  badges?: string[] | undefined;
872
880
  promo?: {
873
881
  message: string;
@@ -911,6 +919,7 @@ declare const CategoryPage: z.ZodObject<{
911
919
  amount: number;
912
920
  currency: string;
913
921
  } | undefined;
922
+ media_by_colour?: Record<string, string[]> | undefined;
914
923
  badges?: string[] | undefined;
915
924
  promo?: {
916
925
  message: string;
@@ -955,6 +964,7 @@ declare const CategoryPage: z.ZodObject<{
955
964
  amount: number;
956
965
  currency: string;
957
966
  } | undefined;
967
+ media_by_colour?: Record<string, string[]> | undefined;
958
968
  badges?: string[] | undefined;
959
969
  promo?: {
960
970
  message: string;
@@ -1004,6 +1014,7 @@ declare const CategoryPage: z.ZodObject<{
1004
1014
  currency: string;
1005
1015
  }>>;
1006
1016
  media: z.ZodArray<z.ZodString, "many">;
1017
+ media_by_colour: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodString, "many">>>;
1007
1018
  variants: z.ZodArray<z.ZodObject<{
1008
1019
  sku: z.ZodString;
1009
1020
  attributes: z.ZodRecord<z.ZodString, z.ZodString>;
@@ -1102,6 +1113,7 @@ declare const CategoryPage: z.ZodObject<{
1102
1113
  amount: number;
1103
1114
  currency: string;
1104
1115
  } | undefined;
1116
+ media_by_colour?: Record<string, string[]> | undefined;
1105
1117
  badges?: string[] | undefined;
1106
1118
  promo?: {
1107
1119
  message: string;
@@ -1142,6 +1154,7 @@ declare const CategoryPage: z.ZodObject<{
1142
1154
  amount: number;
1143
1155
  currency: string;
1144
1156
  } | undefined;
1157
+ media_by_colour?: Record<string, string[]> | undefined;
1145
1158
  badges?: string[] | undefined;
1146
1159
  promo?: {
1147
1160
  message: string;
@@ -1186,6 +1199,7 @@ declare const CategoryPage: z.ZodObject<{
1186
1199
  amount: number;
1187
1200
  currency: string;
1188
1201
  } | undefined;
1202
+ media_by_colour?: Record<string, string[]> | undefined;
1189
1203
  badges?: string[] | undefined;
1190
1204
  promo?: {
1191
1205
  message: string;
@@ -1230,6 +1244,7 @@ declare const CategoryPage: z.ZodObject<{
1230
1244
  amount: number;
1231
1245
  currency: string;
1232
1246
  } | undefined;
1247
+ media_by_colour?: Record<string, string[]> | undefined;
1233
1248
  badges?: string[] | undefined;
1234
1249
  promo?: {
1235
1250
  message: string;
@@ -1290,6 +1305,7 @@ declare const CategoryPage: z.ZodObject<{
1290
1305
  currency: string;
1291
1306
  }>>;
1292
1307
  media: z.ZodArray<z.ZodString, "many">;
1308
+ media_by_colour: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodString, "many">>>;
1293
1309
  variants: z.ZodArray<z.ZodObject<{
1294
1310
  sku: z.ZodString;
1295
1311
  attributes: z.ZodRecord<z.ZodString, z.ZodString>;
@@ -1388,6 +1404,7 @@ declare const CategoryPage: z.ZodObject<{
1388
1404
  amount: number;
1389
1405
  currency: string;
1390
1406
  } | undefined;
1407
+ media_by_colour?: Record<string, string[]> | undefined;
1391
1408
  badges?: string[] | undefined;
1392
1409
  promo?: {
1393
1410
  message: string;
@@ -1428,6 +1445,7 @@ declare const CategoryPage: z.ZodObject<{
1428
1445
  amount: number;
1429
1446
  currency: string;
1430
1447
  } | undefined;
1448
+ media_by_colour?: Record<string, string[]> | undefined;
1431
1449
  badges?: string[] | undefined;
1432
1450
  promo?: {
1433
1451
  message: string;
@@ -1471,6 +1489,7 @@ declare const CategoryPage: z.ZodObject<{
1471
1489
  amount: number;
1472
1490
  currency: string;
1473
1491
  } | undefined;
1492
+ media_by_colour?: Record<string, string[]> | undefined;
1474
1493
  badges?: string[] | undefined;
1475
1494
  promo?: {
1476
1495
  message: string;
@@ -1515,6 +1534,7 @@ declare const CategoryPage: z.ZodObject<{
1515
1534
  amount: number;
1516
1535
  currency: string;
1517
1536
  } | undefined;
1537
+ media_by_colour?: Record<string, string[]> | undefined;
1518
1538
  badges?: string[] | undefined;
1519
1539
  promo?: {
1520
1540
  message: string;
@@ -1651,6 +1671,7 @@ declare const CategoryPage: z.ZodObject<{
1651
1671
  amount: number;
1652
1672
  currency: string;
1653
1673
  } | undefined;
1674
+ media_by_colour?: Record<string, string[]> | undefined;
1654
1675
  badges?: string[] | undefined;
1655
1676
  promo?: {
1656
1677
  message: string;
@@ -1698,6 +1719,7 @@ declare const CategoryPage: z.ZodObject<{
1698
1719
  amount: number;
1699
1720
  currency: string;
1700
1721
  } | undefined;
1722
+ media_by_colour?: Record<string, string[]> | undefined;
1701
1723
  badges?: string[] | undefined;
1702
1724
  promo?: {
1703
1725
  message: string;
@@ -1746,6 +1768,7 @@ declare const CategoryPage: z.ZodObject<{
1746
1768
  amount: number;
1747
1769
  currency: string;
1748
1770
  } | undefined;
1771
+ media_by_colour?: Record<string, string[]> | undefined;
1749
1772
  badges?: string[] | undefined;
1750
1773
  promo?: {
1751
1774
  message: string;
@@ -1812,6 +1835,7 @@ declare const CategoryPage: z.ZodObject<{
1812
1835
  amount: number;
1813
1836
  currency: string;
1814
1837
  } | undefined;
1838
+ media_by_colour?: Record<string, string[]> | undefined;
1815
1839
  badges?: string[] | undefined;
1816
1840
  promo?: {
1817
1841
  message: string;
@@ -1864,6 +1888,7 @@ declare const CategoryPage: z.ZodObject<{
1864
1888
  amount: number;
1865
1889
  currency: string;
1866
1890
  } | undefined;
1891
+ media_by_colour?: Record<string, string[]> | undefined;
1867
1892
  badges?: string[] | undefined;
1868
1893
  promo?: {
1869
1894
  message: string;
@@ -1911,6 +1936,7 @@ declare const CategoryPage: z.ZodObject<{
1911
1936
  amount: number;
1912
1937
  currency: string;
1913
1938
  } | undefined;
1939
+ media_by_colour?: Record<string, string[]> | undefined;
1914
1940
  badges?: string[] | undefined;
1915
1941
  promo?: {
1916
1942
  message: string;
@@ -1959,6 +1985,7 @@ declare const CategoryPage: z.ZodObject<{
1959
1985
  amount: number;
1960
1986
  currency: string;
1961
1987
  } | undefined;
1988
+ media_by_colour?: Record<string, string[]> | undefined;
1962
1989
  badges?: string[] | undefined;
1963
1990
  promo?: {
1964
1991
  message: string;
@@ -2025,6 +2052,7 @@ declare const CategoryPage: z.ZodObject<{
2025
2052
  amount: number;
2026
2053
  currency: string;
2027
2054
  } | undefined;
2055
+ media_by_colour?: Record<string, string[]> | undefined;
2028
2056
  badges?: string[] | undefined;
2029
2057
  promo?: {
2030
2058
  message: string;
@@ -2163,6 +2191,7 @@ declare function createClient(options: ClientOptions): {
2163
2191
  amount: number;
2164
2192
  currency: string;
2165
2193
  } | undefined;
2194
+ media_by_colour?: Record<string, string[]> | undefined;
2166
2195
  badges?: string[] | undefined;
2167
2196
  promo?: {
2168
2197
  message: string;
@@ -2209,6 +2238,7 @@ declare function createClient(options: ClientOptions): {
2209
2238
  amount: number;
2210
2239
  currency: string;
2211
2240
  } | undefined;
2241
+ media_by_colour?: Record<string, string[]> | undefined;
2212
2242
  badges?: string[] | undefined;
2213
2243
  promo?: {
2214
2244
  message: string;
@@ -2251,6 +2281,7 @@ declare function createClient(options: ClientOptions): {
2251
2281
  amount: number;
2252
2282
  currency: string;
2253
2283
  } | undefined;
2284
+ media_by_colour?: Record<string, string[]> | undefined;
2254
2285
  badges?: string[] | undefined;
2255
2286
  promo?: {
2256
2287
  message: string;
@@ -2315,6 +2346,7 @@ declare function createClient(options: ClientOptions): {
2315
2346
  amount: number;
2316
2347
  currency: string;
2317
2348
  } | undefined;
2349
+ media_by_colour?: Record<string, string[]> | undefined;
2318
2350
  badges?: string[] | undefined;
2319
2351
  promo?: {
2320
2352
  message: string;
@@ -2362,6 +2394,7 @@ declare function createClient(options: ClientOptions): {
2362
2394
  amount: number;
2363
2395
  currency: string;
2364
2396
  } | undefined;
2397
+ media_by_colour?: Record<string, string[]> | undefined;
2365
2398
  badges?: string[] | undefined;
2366
2399
  promo?: {
2367
2400
  message: string;
@@ -2410,6 +2443,7 @@ declare function createClient(options: ClientOptions): {
2410
2443
  amount: number;
2411
2444
  currency: string;
2412
2445
  } | undefined;
2446
+ media_by_colour?: Record<string, string[]> | undefined;
2413
2447
  badges?: string[] | undefined;
2414
2448
  promo?: {
2415
2449
  message: string;
@@ -2476,6 +2510,7 @@ declare function createClient(options: ClientOptions): {
2476
2510
  amount: number;
2477
2511
  currency: string;
2478
2512
  } | undefined;
2513
+ media_by_colour?: Record<string, string[]> | undefined;
2479
2514
  badges?: string[] | undefined;
2480
2515
  promo?: {
2481
2516
  message: string;
@@ -4540,6 +4575,23 @@ declare const Product: z.ZodObject<{
4540
4575
  currency: string;
4541
4576
  }>>;
4542
4577
  media: z.ZodArray<z.ZodString, "many">;
4578
+ /**
4579
+ * Which of `media` belongs to which colourway, keyed on the colour's attribute value.
4580
+ *
4581
+ * **`media` stays the whole ordered list and is unchanged**, so a consumer that ignores
4582
+ * this shows exactly what it showed before. This says only which shots are *about* a
4583
+ * colour; a URL in no bucket is colour-neutral — a flat-lay, a fabric detail, a size
4584
+ * chart — and belongs to every colourway.
4585
+ *
4586
+ * It exists because a colour selector cannot filter a gallery without it. `media` is a
4587
+ * flat list with no attribution, and it is not colour-neutral in practice: a merged
4588
+ * product inherits the photography of whichever colourway it was merged from, so the
4589
+ * black shots were being shown under White. Filtering on a guess about which colour an
4590
+ * unattributed shot depicts is the thing this replaces.
4591
+ *
4592
+ * Absent entirely for a product with no colourways, which is most of them.
4593
+ */
4594
+ media_by_colour: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodString, "many">>>;
4543
4595
  variants: z.ZodArray<z.ZodObject<{
4544
4596
  sku: z.ZodString;
4545
4597
  attributes: z.ZodRecord<z.ZodString, z.ZodString>;
@@ -4678,6 +4730,7 @@ declare const Product: z.ZodObject<{
4678
4730
  amount: number;
4679
4731
  currency: string;
4680
4732
  } | undefined;
4733
+ media_by_colour?: Record<string, string[]> | undefined;
4681
4734
  badges?: string[] | undefined;
4682
4735
  promo?: {
4683
4736
  message: string;
@@ -4718,6 +4771,7 @@ declare const Product: z.ZodObject<{
4718
4771
  amount: number;
4719
4772
  currency: string;
4720
4773
  } | undefined;
4774
+ media_by_colour?: Record<string, string[]> | undefined;
4721
4775
  badges?: string[] | undefined;
4722
4776
  promo?: {
4723
4777
  message: string;
package/dist/index.mjs CHANGED
@@ -4286,6 +4286,7 @@ function requireCatalog() {
4286
4286
  price: money_1.Money,
4287
4287
  compare_at: money_1.Money.optional(),
4288
4288
  media: zod_1.z.array(common_1.Url),
4289
+ media_by_colour: zod_1.z.record(zod_1.z.string(), zod_1.z.array(common_1.Url)).optional(),
4289
4290
  variants: zod_1.z.array(exports.ProductVariant),
4290
4291
  description: zod_1.z.string().optional(),
4291
4292
  badges: zod_1.z.array(zod_1.z.string()).optional(),
@@ -10071,9 +10072,14 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
10071
10072
  const purchasable = anyInStock && !colourSoldOut;
10072
10073
  const colourImage = useMemo(() => selectedColour ? baseColours.find((c) => c.value === selectedColour)?.image : void 0, [baseColours, selectedColour]);
10073
10074
  const media2 = useMemo(() => {
10074
- const swatches2 = baseColours.map((c) => c.image).filter((src) => typeof src === "string" && src.length > 0);
10075
- return [...swatches2, ...product.media.filter((m) => !swatches2.includes(m))];
10076
- }, [baseColours, product.media]);
10075
+ const byColour = product.media_by_colour ?? {};
10076
+ const attributed = new Set(Object.values(byColour).flat());
10077
+ const mine = selectedColour ? new Set(byColour[selectedColour] ?? []) : null;
10078
+ const swatch2 = selectedColour ? baseColours.find((c) => c.value === selectedColour)?.image : void 0;
10079
+ const lead = typeof swatch2 === "string" && swatch2.length > 0 ? [swatch2] : [];
10080
+ const rest = product.media.filter((m) => mine ? mine.has(m) || !attributed.has(m) : true);
10081
+ return [...lead, ...rest.filter((m) => !lead.includes(m))];
10082
+ }, [baseColours, product.media, product.media_by_colour, selectedColour]);
10077
10083
  const focus = useMemo(() => {
10078
10084
  if (!colourImage) return void 0;
10079
10085
  const at = media2.indexOf(colourImage);
package/dist/standalone/storefront.mjs CHANGED
@@ -4286,6 +4286,7 @@ function requireCatalog() {
4286
4286
  price: money_1.Money,
4287
4287
  compare_at: money_1.Money.optional(),
4288
4288
  media: zod_1.z.array(common_1.Url),
4289
+ media_by_colour: zod_1.z.record(zod_1.z.string(), zod_1.z.array(common_1.Url)).optional(),
4289
4290
  variants: zod_1.z.array(exports.ProductVariant),
4290
4291
  description: zod_1.z.string().optional(),
4291
4292
  badges: zod_1.z.array(zod_1.z.string()).optional(),
@@ -10071,9 +10072,14 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
10071
10072
  const purchasable = anyInStock && !colourSoldOut;
10072
10073
  const colourImage = useMemo(() => selectedColour ? baseColours.find((c) => c.value === selectedColour)?.image : void 0, [baseColours, selectedColour]);
10073
10074
  const media2 = useMemo(() => {
10074
- const swatches2 = baseColours.map((c) => c.image).filter((src) => typeof src === "string" && src.length > 0);
10075
- return [...swatches2, ...product.media.filter((m) => !swatches2.includes(m))];
10076
- }, [baseColours, product.media]);
10075
+ const byColour = product.media_by_colour ?? {};
10076
+ const attributed = new Set(Object.values(byColour).flat());
10077
+ const mine = selectedColour ? new Set(byColour[selectedColour] ?? []) : null;
10078
+ const swatch2 = selectedColour ? baseColours.find((c) => c.value === selectedColour)?.image : void 0;
10079
+ const lead = typeof swatch2 === "string" && swatch2.length > 0 ? [swatch2] : [];
10080
+ const rest = product.media.filter((m) => mine ? mine.has(m) || !attributed.has(m) : true);
10081
+ return [...lead, ...rest.filter((m) => !lead.includes(m))];
10082
+ }, [baseColours, product.media, product.media_by_colour, selectedColour]);
10077
10083
  const focus = useMemo(() => {
10078
10084
  if (!colourImage) return void 0;
10079
10085
  const at = media2.indexOf(colourImage);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nok-integration/storefront-react",
3
- "version": "0.19.31",
3
+ "version": "0.19.32",
4
4
  "description": "Mountable React storefront components: catalogue, product detail and cart, mounted directly into a host DOM tree. No iframe.",
5
5
  "license": "UNLICENSED",
6
6
  "publishConfig": {