@rebuy/rebuy-hydrogen 3.0.0-beta.1 → 3.0.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (109) hide show
  1. package/README.md +0 -2
  2. package/dist/components/AddToCartBtn/AddToCartBtn.d.ts +3 -0
  3. package/dist/components/AddToCartBtn/AddToCartBtn.d.ts.map +1 -0
  4. package/dist/components/AddToCartBtn/HydrogenAddToCartBtn.d.ts +3 -0
  5. package/dist/components/AddToCartBtn/HydrogenAddToCartBtn.d.ts.map +1 -0
  6. package/dist/components/AddToCartBtn/HydrogenReactAddToCartBtn.d.ts +3 -0
  7. package/dist/components/AddToCartBtn/HydrogenReactAddToCartBtn.d.ts.map +1 -0
  8. package/dist/components/AddToCartBtn/index.d.ts +2 -0
  9. package/dist/components/AddToCartBtn/index.d.ts.map +1 -0
  10. package/dist/components/AddToCartBtn/types.d.ts +26 -0
  11. package/dist/components/AddToCartBtn/types.d.ts.map +1 -0
  12. package/dist/components/ProductCard/ProductCard.d.ts +3 -0
  13. package/dist/components/ProductCard/ProductCard.d.ts.map +1 -0
  14. package/dist/components/ProductCard/index.d.ts +2 -0
  15. package/dist/components/ProductCard/index.d.ts.map +1 -0
  16. package/dist/components/ProductCard/types.d.ts +10 -0
  17. package/dist/components/ProductCard/types.d.ts.map +1 -0
  18. package/dist/components/ProductPrice/ProductPrice.d.ts +5 -0
  19. package/dist/components/ProductPrice/ProductPrice.d.ts.map +1 -0
  20. package/dist/components/ProductPrice/index.d.ts +2 -0
  21. package/dist/components/ProductPrice/index.d.ts.map +1 -0
  22. package/dist/components/Title/Title.d.ts +3 -0
  23. package/dist/components/Title/Title.d.ts.map +1 -0
  24. package/dist/components/Title/index.d.ts +2 -0
  25. package/dist/components/Title/index.d.ts.map +1 -0
  26. package/dist/components/Title/types.d.ts +7 -0
  27. package/dist/components/Title/types.d.ts.map +1 -0
  28. package/dist/components/VariantSelect/VariantSelect.d.ts +3 -0
  29. package/dist/components/VariantSelect/VariantSelect.d.ts.map +1 -0
  30. package/dist/components/VariantSelect/index.d.ts +2 -0
  31. package/dist/components/VariantSelect/index.d.ts.map +1 -0
  32. package/dist/components/VariantSelect/types.d.ts +6 -0
  33. package/dist/components/VariantSelect/types.d.ts.map +1 -0
  34. package/dist/context/RebuyContext.d.ts +6 -0
  35. package/dist/context/RebuyContext.d.ts.map +1 -0
  36. package/dist/hooks/titleLevel.d.ts +3 -0
  37. package/dist/hooks/titleLevel.d.ts.map +1 -0
  38. package/dist/index.css +296 -0
  39. package/dist/index.css.map +7 -0
  40. package/dist/index.d.ts +8 -0
  41. package/dist/index.d.ts.map +1 -0
  42. package/dist/index.js +2193 -0
  43. package/dist/index.js.map +7 -0
  44. package/dist/index.mjs +2169 -0
  45. package/dist/index.mjs.map +7 -0
  46. package/dist/providers/RebuyHydrogenContextProvider.d.ts +3 -0
  47. package/dist/providers/RebuyHydrogenContextProvider.d.ts.map +1 -0
  48. package/dist/providers/RebuyHydrogenReactContextProvider.d.ts +3 -0
  49. package/dist/providers/RebuyHydrogenReactContextProvider.d.ts.map +1 -0
  50. package/dist/providers/types.d.ts +48 -0
  51. package/dist/providers/types.d.ts.map +1 -0
  52. package/dist/queries/cart.queries.d.ts +5 -0
  53. package/dist/queries/cart.queries.d.ts.map +1 -0
  54. package/dist/types/common.d.ts +9 -0
  55. package/dist/types/common.d.ts.map +1 -0
  56. package/dist/types/rebuyCustom.d.ts +239 -0
  57. package/dist/types/rebuyCustom.d.ts.map +1 -0
  58. package/dist/types/rebuySmartCart.d.ts +184 -0
  59. package/dist/types/rebuySmartCart.d.ts.map +1 -0
  60. package/dist/types/shopify.d.ts +85 -0
  61. package/dist/types/shopify.d.ts.map +1 -0
  62. package/dist/types/widgets.d.ts +22 -0
  63. package/dist/types/widgets.d.ts.map +1 -0
  64. package/dist/utils/convertToRebuyProduct.d.ts +156 -0
  65. package/dist/utils/convertToRebuyProduct.d.ts.map +1 -0
  66. package/dist/utils/createContextParameters.d.ts +3 -0
  67. package/dist/utils/createContextParameters.d.ts.map +1 -0
  68. package/dist/utils/getEncodedAttributes.d.ts +3 -0
  69. package/dist/utils/getEncodedAttributes.d.ts.map +1 -0
  70. package/dist/utils/getRebuyConfig.d.ts +3 -0
  71. package/dist/utils/getRebuyConfig.d.ts.map +1 -0
  72. package/dist/widgetContainer/RebuyWidgetContainer.d.ts +8 -0
  73. package/dist/widgetContainer/RebuyWidgetContainer.d.ts.map +1 -0
  74. package/dist/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.d.ts +3 -0
  75. package/dist/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.d.ts.map +1 -0
  76. package/dist/widgets/RebuyCompleteTheLook/index.d.ts +2 -0
  77. package/dist/widgets/RebuyCompleteTheLook/index.d.ts.map +1 -0
  78. package/dist/widgets/RebuyCompleteTheLook/types.d.ts +5 -0
  79. package/dist/widgets/RebuyCompleteTheLook/types.d.ts.map +1 -0
  80. package/dist/widgets/RebuyDynamicBundleProducts/BundleImages.d.ts +5 -0
  81. package/dist/widgets/RebuyDynamicBundleProducts/BundleImages.d.ts.map +1 -0
  82. package/dist/widgets/RebuyDynamicBundleProducts/BundlePrice.d.ts +5 -0
  83. package/dist/widgets/RebuyDynamicBundleProducts/BundlePrice.d.ts.map +1 -0
  84. package/dist/widgets/RebuyDynamicBundleProducts/BundleSelection.d.ts +3 -0
  85. package/dist/widgets/RebuyDynamicBundleProducts/BundleSelection.d.ts.map +1 -0
  86. package/dist/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.d.ts +3 -0
  87. package/dist/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.d.ts.map +1 -0
  88. package/dist/widgets/RebuyDynamicBundleProducts/Select.d.ts +3 -0
  89. package/dist/widgets/RebuyDynamicBundleProducts/Select.d.ts.map +1 -0
  90. package/dist/widgets/RebuyDynamicBundleProducts/index.d.ts +2 -0
  91. package/dist/widgets/RebuyDynamicBundleProducts/index.d.ts.map +1 -0
  92. package/dist/widgets/RebuyDynamicBundleProducts/types.d.ts +19 -0
  93. package/dist/widgets/RebuyDynamicBundleProducts/types.d.ts.map +1 -0
  94. package/dist/widgets/RebuyProductAddOns/RebuyProductAddOnCard.d.ts +3 -0
  95. package/dist/widgets/RebuyProductAddOns/RebuyProductAddOnCard.d.ts.map +1 -0
  96. package/dist/widgets/RebuyProductAddOns/RebuyProductAddOns.d.ts +3 -0
  97. package/dist/widgets/RebuyProductAddOns/RebuyProductAddOns.d.ts.map +1 -0
  98. package/dist/widgets/RebuyProductAddOns/index.d.ts +2 -0
  99. package/dist/widgets/RebuyProductAddOns/index.d.ts.map +1 -0
  100. package/dist/widgets/RebuyProductAddOns/types.d.ts +19 -0
  101. package/dist/widgets/RebuyProductAddOns/types.d.ts.map +1 -0
  102. package/dist/widgets/RebuyProductRecommendations/RebuyProductRecommendations.d.ts +3 -0
  103. package/dist/widgets/RebuyProductRecommendations/RebuyProductRecommendations.d.ts.map +1 -0
  104. package/dist/widgets/RebuyProductRecommendations/index.d.ts +2 -0
  105. package/dist/widgets/RebuyProductRecommendations/index.d.ts.map +1 -0
  106. package/dist/widgets/RebuyProductRecommendations/types.d.ts +5 -0
  107. package/dist/widgets/RebuyProductRecommendations/types.d.ts.map +1 -0
  108. package/package.json +1 -1
  109. package/src/components/Title/Title.tsx +1 -2
package/dist/index.mjs ADDED
@@ -0,0 +1,2169 @@
1
+ // src/providers/RebuyHydrogenContextProvider.tsx
2
+ import * as Utilities2 from "@rebuy/rebuy/utilities";
3
+ import { Await, useLocation } from "@remix-run/react";
4
+ import { useEffect, useMemo, useState } from "react";
5
+
6
+ // src/context/RebuyContext.tsx
7
+ import { createContext } from "react";
8
+ var RebuyContext = createContext(null);
9
+
10
+ // src/utils/createContextParameters.ts
11
+ import * as Utilities from "@rebuy/rebuy/utilities";
12
+
13
+ // src/utils/getEncodedAttributes.ts
14
+ var getEncodedAttributes = (attributes) => encodeURIComponent(
15
+ JSON.stringify(
16
+ attributes.reduce(
17
+ (merged, { key, value }) => ({ ...merged, [key]: value }),
18
+ {}
19
+ )
20
+ )
21
+ );
22
+
23
+ // src/utils/createContextParameters.ts
24
+ var createContextParameters = ({
25
+ cacheKey,
26
+ cartAttributes,
27
+ cartId,
28
+ cartLines,
29
+ cartLinesLength,
30
+ cartNote,
31
+ cartSubtotal,
32
+ cartTotalQuantity,
33
+ isHydrogenReact,
34
+ queryObject,
35
+ windowUrl
36
+ }) => {
37
+ const contextParameters = {
38
+ cache_key: cacheKey,
39
+ cart_count: 0,
40
+ cart_item_count: 0,
41
+ cart_line_count: 0,
42
+ cart_subtotal: 0,
43
+ isHydrogenReact,
44
+ time: "",
45
+ url: windowUrl
46
+ };
47
+ const cartContext = {
48
+ attributes: "",
49
+ item_count: 0,
50
+ items: [],
51
+ line_count: 0,
52
+ note: "",
53
+ subtotal: 0,
54
+ token: ""
55
+ };
56
+ if (Object.prototype.hasOwnProperty.call(queryObject, "time")) {
57
+ contextParameters.time = queryObject.time;
58
+ }
59
+ if (cartId) {
60
+ cartContext.token = Utilities.getIdFromGraphUrl(cartId, "Cart");
61
+ contextParameters.cart_token = Utilities.getIdFromGraphUrl(
62
+ cartId,
63
+ "Cart"
64
+ );
65
+ }
66
+ if (cartSubtotal) {
67
+ cartContext.subtotal = Utilities.amountToCents(
68
+ parseFloat(cartSubtotal)
69
+ );
70
+ contextParameters.cart_subtotal = Utilities.amountToCents(
71
+ parseFloat(cartSubtotal)
72
+ );
73
+ }
74
+ if (cartLinesLength) {
75
+ const totalLines = cartLinesLength;
76
+ cartContext.line_count = totalLines;
77
+ contextParameters.cart_count = totalLines;
78
+ contextParameters.cart_line_count = totalLines;
79
+ }
80
+ if (cartTotalQuantity) {
81
+ cartContext.item_count = cartTotalQuantity;
82
+ contextParameters.cart_item_count = cartTotalQuantity;
83
+ }
84
+ if (cartLines) {
85
+ cartContext.items = [];
86
+ for (const cartItem of cartLines) {
87
+ const item = {
88
+ attributes: [],
89
+ product_id: "",
90
+ properties: "",
91
+ quantity: cartItem?.quantity,
92
+ variant_id: ""
93
+ };
94
+ if (cartItem?.merchandise?.product?.id) {
95
+ item.product_id = Utilities.getIdFromGraphUrl(
96
+ cartItem.merchandise.product.id,
97
+ "Product"
98
+ );
99
+ }
100
+ if (cartItem?.merchandise?.id) {
101
+ item.variant_id = Utilities.getIdFromGraphUrl(
102
+ cartItem.merchandise.id,
103
+ "ProductVariant"
104
+ );
105
+ }
106
+ if (cartItem?.attributes?.length) {
107
+ const validAttributes = cartItem.attributes.filter(
108
+ (attr) => attr !== void 0 && typeof attr.key === "string" && typeof attr.value === "string"
109
+ );
110
+ item.properties = getEncodedAttributes(validAttributes);
111
+ }
112
+ cartContext.items.push(item);
113
+ }
114
+ }
115
+ if (cartAttributes) {
116
+ const validAttributes = cartAttributes.filter(
117
+ (attr) => attr !== void 0 && typeof attr.key === "string" && typeof attr.value === "string"
118
+ );
119
+ cartContext.attributes = getEncodedAttributes(validAttributes);
120
+ }
121
+ if (cartNote) {
122
+ cartContext.note = cartNote;
123
+ }
124
+ contextParameters.cart = cartContext;
125
+ return contextParameters;
126
+ };
127
+
128
+ // src/utils/getRebuyConfig.ts
129
+ import { RebuyClient } from "@rebuy/rebuy";
130
+ var getRebuyConfig = async (rebuyKey, storeDomain) => {
131
+ try {
132
+ const request = {
133
+ parameters: { shop: storeDomain },
134
+ url: `/api/v1/user/config`
135
+ };
136
+ const { data: rebuy, ...response } = await new RebuyClient(
137
+ rebuyKey
138
+ ).getShieldedAsset(request.url, request.parameters);
139
+ if (!rebuy?.shop) {
140
+ throw new Error(
141
+ "Rebuy configuration is not properly set up - missing shop",
142
+ { cause: response }
143
+ );
144
+ }
145
+ return rebuy;
146
+ } catch (error) {
147
+ const err = error;
148
+ console.warn("Error fetching Rebuy shop config");
149
+ console.error(err, err.cause);
150
+ throw err;
151
+ }
152
+ };
153
+
154
+ // src/providers/RebuyHydrogenContextProvider.tsx
155
+ import { jsx } from "react/jsx-runtime";
156
+ var RebuyHydrogenContext = ({
157
+ cartAttributes,
158
+ cartCost,
159
+ cartId,
160
+ cartLines,
161
+ cartNote,
162
+ cartQuantity,
163
+ children
164
+ }) => {
165
+ const primaryDomain = import.meta.env.PRIMARY_DOMAIN;
166
+ const rebuyKey = import.meta.env.PUBLIC_REBUY_API_KEY;
167
+ const storeDomain = import.meta.env.PUBLIC_STORE_DOMAIN;
168
+ const [rebuyConfig, setRebuyConfig] = useState(null);
169
+ const location = useLocation();
170
+ const queryObject = Utilities2.queryStringToObject(location.search);
171
+ const windowUrl = `${primaryDomain}${location.pathname}${location.search}`;
172
+ useEffect(() => {
173
+ const initConfig = async () => {
174
+ const config = await getRebuyConfig(rebuyKey, storeDomain);
175
+ setRebuyConfig(config);
176
+ };
177
+ if (!rebuyConfig?.shop) {
178
+ initConfig();
179
+ }
180
+ }, [rebuyConfig, rebuyKey, storeDomain]);
181
+ const contextParameters = useMemo(
182
+ () => createContextParameters({
183
+ cacheKey: rebuyConfig?.shop?.cache_key,
184
+ cartAttributes,
185
+ cartId,
186
+ cartLines,
187
+ cartLinesLength: cartLines?.length,
188
+ cartNote,
189
+ cartSubtotal: cartCost,
190
+ cartTotalQuantity: cartQuantity,
191
+ isHydrogenReact: false,
192
+ queryObject,
193
+ windowUrl
194
+ }),
195
+ [
196
+ rebuyConfig,
197
+ windowUrl,
198
+ queryObject,
199
+ cartAttributes,
200
+ cartCost,
201
+ cartId,
202
+ cartLines,
203
+ cartQuantity,
204
+ cartNote
205
+ ]
206
+ );
207
+ const contextParametersJSON = JSON.stringify(contextParameters);
208
+ const contextValue = useMemo(
209
+ () => ({ contextParameters: JSON.parse(contextParametersJSON) }),
210
+ [contextParametersJSON]
211
+ );
212
+ return /* @__PURE__ */ jsx(RebuyContext.Provider, { value: contextValue, children });
213
+ };
214
+ var RebuyHydrogenContextProvider = ({
215
+ cart,
216
+ children
217
+ }) => {
218
+ return /* @__PURE__ */ jsx(Await, { resolve: cart, children: (resolvedCart) => {
219
+ const cart2 = resolvedCart;
220
+ return /* @__PURE__ */ jsx(
221
+ RebuyHydrogenContext,
222
+ {
223
+ cartAttributes: cart2?.attributes,
224
+ cartCost: cart2?.cost?.subtotalAmount?.amount,
225
+ cartId: cart2?.id,
226
+ cartLines: cart2?.lines?.nodes,
227
+ cartNote: cart2?.note,
228
+ cartQuantity: cart2?.totalQuantity,
229
+ children
230
+ }
231
+ );
232
+ } });
233
+ };
234
+
235
+ // src/providers/RebuyHydrogenReactContextProvider.tsx
236
+ import * as Utilities3 from "@rebuy/rebuy/utilities";
237
+ import { useLocation as useLocation2 } from "@remix-run/react";
238
+ import {
239
+ CartProvider,
240
+ ShopifyProvider,
241
+ useCart
242
+ } from "@shopify/hydrogen-react";
243
+ import { useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
244
+
245
+ // src/queries/cart.queries.ts
246
+ var OPTION_FRAGMENT = `#graphql
247
+ fragment OptionFragment on ProductOption {
248
+ id
249
+ name
250
+ optionValues {
251
+ id
252
+ name
253
+ swatch {
254
+ color
255
+ image {
256
+ mediaContentType
257
+ previewImage {
258
+ height
259
+ id
260
+ url
261
+ width
262
+ altText
263
+ }
264
+ id
265
+ alt
266
+ }
267
+ }
268
+ }
269
+ }
270
+ `;
271
+ var CART_LINE_FRAGMENT = `#graphql
272
+ fragment CartLineFragment on CartLine {
273
+ id
274
+ quantity
275
+ cost {
276
+ amountPerQuantity {
277
+ amount
278
+ currencyCode
279
+ }
280
+ compareAtAmountPerQuantity {
281
+ amount
282
+ currencyCode
283
+ }
284
+ totalAmount {
285
+ amount
286
+ currencyCode
287
+ }
288
+ subtotalAmount {
289
+ amount
290
+ currencyCode
291
+ }
292
+ }
293
+ attributes {
294
+ key
295
+ value
296
+ }
297
+ discountAllocations {
298
+ discountedAmount {
299
+ amount
300
+ currencyCode
301
+ }
302
+ ... on CartAutomaticDiscountAllocation {
303
+ __typename
304
+ discountedAmount {
305
+ amount
306
+ currencyCode
307
+ }
308
+ title
309
+ }
310
+ ... on CartCodeDiscountAllocation {
311
+ __typename
312
+ code
313
+ discountedAmount {
314
+ amount
315
+ currencyCode
316
+ }
317
+ }
318
+ ... on CartCustomDiscountAllocation {
319
+ __typename
320
+ discountedAmount {
321
+ amount
322
+ currencyCode
323
+ }
324
+ title
325
+ }
326
+ }
327
+ merchandise {
328
+ ... on ProductVariant {
329
+ availableForSale
330
+ id
331
+ sku
332
+ title
333
+ compareAtPrice {
334
+ amount
335
+ currencyCode
336
+ }
337
+ image {
338
+ altText
339
+ height
340
+ id
341
+ url
342
+ width
343
+ }
344
+ price {
345
+ amount
346
+ currencyCode
347
+ }
348
+ product {
349
+ handle
350
+ id
351
+ productType
352
+ tags
353
+ title
354
+ vendor
355
+ collections(first: 10) {
356
+ nodes {
357
+ handle
358
+ }
359
+ }
360
+ options {
361
+ ...OptionFragment
362
+ }
363
+ images(first: 20) {
364
+ nodes {
365
+ altText
366
+ height
367
+ id
368
+ url
369
+ width
370
+ }
371
+ }
372
+ }
373
+ selectedOptions {
374
+ name
375
+ value
376
+ }
377
+ }
378
+ }
379
+ }
380
+ `;
381
+ var CART_LINE_COMPONENT_FRAGMENT = `#graphql
382
+ fragment CartLineComponentFragment on ComponentizableCartLine {
383
+ id
384
+ quantity
385
+ cost {
386
+ amountPerQuantity {
387
+ amount
388
+ currencyCode
389
+ }
390
+ compareAtAmountPerQuantity {
391
+ amount
392
+ currencyCode
393
+ }
394
+ totalAmount {
395
+ amount
396
+ currencyCode
397
+ }
398
+ subtotalAmount {
399
+ amount
400
+ currencyCode
401
+ }
402
+ }
403
+ attributes {
404
+ key
405
+ value
406
+ }
407
+ discountAllocations {
408
+ discountedAmount {
409
+ amount
410
+ currencyCode
411
+ }
412
+ ... on CartAutomaticDiscountAllocation {
413
+ __typename
414
+ discountedAmount {
415
+ amount
416
+ currencyCode
417
+ }
418
+ title
419
+ }
420
+ ... on CartCodeDiscountAllocation {
421
+ __typename
422
+ code
423
+ discountedAmount {
424
+ amount
425
+ currencyCode
426
+ }
427
+ }
428
+ ... on CartCustomDiscountAllocation {
429
+ __typename
430
+ discountedAmount {
431
+ amount
432
+ currencyCode
433
+ }
434
+ title
435
+ }
436
+ }
437
+ merchandise {
438
+ ... on ProductVariant {
439
+ availableForSale
440
+ id
441
+ sku
442
+ title
443
+ compareAtPrice {
444
+ amount
445
+ currencyCode
446
+ }
447
+ image {
448
+ altText
449
+ height
450
+ id
451
+ url
452
+ width
453
+ }
454
+ price {
455
+ amount
456
+ currencyCode
457
+ }
458
+ product {
459
+ handle
460
+ id
461
+ productType
462
+ tags
463
+ title
464
+ vendor
465
+ collections(first: 10) {
466
+ nodes {
467
+ handle
468
+ }
469
+ }
470
+ options {
471
+ id
472
+ name
473
+ optionValues {
474
+ id
475
+ name
476
+ swatch {
477
+ color
478
+ image {
479
+ mediaContentType
480
+ previewImage {
481
+ height
482
+ id
483
+ url
484
+ width
485
+ altText
486
+ }
487
+ id
488
+ alt
489
+ }
490
+ }
491
+ }
492
+ }
493
+ images(first: 20) {
494
+ nodes {
495
+ altText
496
+ height
497
+ id
498
+ url
499
+ width
500
+ }
501
+ }
502
+ }
503
+ selectedOptions {
504
+ name
505
+ value
506
+ }
507
+ }
508
+ }
509
+ lineComponents {
510
+ id
511
+ quantity
512
+ cost {
513
+ amountPerQuantity {
514
+ amount
515
+ currencyCode
516
+ }
517
+ compareAtAmountPerQuantity {
518
+ amount
519
+ currencyCode
520
+ }
521
+ totalAmount {
522
+ amount
523
+ currencyCode
524
+ }
525
+ subtotalAmount {
526
+ amount
527
+ currencyCode
528
+ }
529
+ }
530
+ attributes {
531
+ key
532
+ value
533
+ }
534
+ discountAllocations {
535
+ discountedAmount {
536
+ amount
537
+ currencyCode
538
+ }
539
+ ... on CartAutomaticDiscountAllocation {
540
+ __typename
541
+ discountedAmount {
542
+ amount
543
+ currencyCode
544
+ }
545
+ title
546
+ }
547
+ ... on CartCodeDiscountAllocation {
548
+ __typename
549
+ code
550
+ discountedAmount {
551
+ amount
552
+ currencyCode
553
+ }
554
+ }
555
+ ... on CartCustomDiscountAllocation {
556
+ __typename
557
+ discountedAmount {
558
+ amount
559
+ currencyCode
560
+ }
561
+ title
562
+ }
563
+ }
564
+ merchandise {
565
+ ... on ProductVariant {
566
+ availableForSale
567
+ id
568
+ sku
569
+ title
570
+ compareAtPrice {
571
+ amount
572
+ currencyCode
573
+ }
574
+ image {
575
+ altText
576
+ height
577
+ id
578
+ url
579
+ width
580
+ }
581
+ price {
582
+ amount
583
+ currencyCode
584
+ }
585
+ product {
586
+ handle
587
+ id
588
+ productType
589
+ tags
590
+ title
591
+ vendor
592
+ collections(first: 10) {
593
+ nodes {
594
+ handle
595
+ }
596
+ }
597
+ options {
598
+ ...OptionFragment
599
+ }
600
+ images(first: 20) {
601
+ nodes {
602
+ altText
603
+ height
604
+ id
605
+ url
606
+ width
607
+ }
608
+ }
609
+ }
610
+ selectedOptions {
611
+ name
612
+ value
613
+ }
614
+ }
615
+ }
616
+ }
617
+ }
618
+ `;
619
+ var CART_FRAGMENT = `#graphql
620
+ fragment CartFragment on Cart {
621
+ id
622
+ checkoutUrl
623
+ createdAt
624
+ totalQuantity
625
+ note
626
+ updatedAt
627
+ __typename
628
+ buyerIdentity {
629
+ countryCode
630
+ customer {
631
+ id
632
+ email
633
+ firstName
634
+ lastName
635
+ displayName
636
+ }
637
+ email
638
+ phone
639
+ }
640
+ attributes {
641
+ key
642
+ value
643
+ }
644
+ cost {
645
+ subtotalAmount {
646
+ amount
647
+ currencyCode
648
+ }
649
+ totalAmount {
650
+ amount
651
+ currencyCode
652
+ }
653
+ }
654
+ discountAllocations {
655
+ discountedAmount {
656
+ amount
657
+ currencyCode
658
+ }
659
+ ... on CartAutomaticDiscountAllocation {
660
+ __typename
661
+ discountedAmount {
662
+ amount
663
+ currencyCode
664
+ }
665
+ title
666
+ }
667
+ ... on CartCodeDiscountAllocation {
668
+ __typename
669
+ code
670
+ discountedAmount {
671
+ amount
672
+ currencyCode
673
+ }
674
+ }
675
+ ... on CartCustomDiscountAllocation {
676
+ __typename
677
+ discountedAmount {
678
+ amount
679
+ currencyCode
680
+ }
681
+ title
682
+ }
683
+ }
684
+ discountCodes {
685
+ applicable
686
+ code
687
+ }
688
+ lines(first: $numCartLines) {
689
+ edges {
690
+ node {
691
+ ...CartLineComponentFragment
692
+ }
693
+ }
694
+ edges {
695
+ node {
696
+ ...CartLineFragment
697
+ }
698
+ }
699
+ }
700
+ }
701
+ ${CART_LINE_FRAGMENT}
702
+ ${CART_LINE_COMPONENT_FRAGMENT}
703
+ ${OPTION_FRAGMENT}
704
+ `;
705
+
706
+ // src/providers/RebuyHydrogenReactContextProvider.tsx
707
+ import { jsx as jsx2 } from "react/jsx-runtime";
708
+ var RebuyHydrogenReactContext = ({ children }) => {
709
+ const primaryDomain = import.meta.env.PRIMARY_DOMAIN;
710
+ const rebuyKey = import.meta.env.PUBLIC_REBUY_API_KEY;
711
+ const storeDomain = import.meta.env.PUBLIC_STORE_DOMAIN;
712
+ const [rebuyConfig, setRebuyConfig] = useState2(null);
713
+ const location = useLocation2();
714
+ const queryObject = Utilities3.queryStringToObject(location.search);
715
+ const windowUrl = `${primaryDomain}${location.pathname}${location.search}`;
716
+ const cart = useCart();
717
+ useEffect2(() => {
718
+ const initConfig = async () => {
719
+ const config = await getRebuyConfig(rebuyKey, storeDomain);
720
+ setRebuyConfig(config);
721
+ };
722
+ if (!rebuyConfig?.shop) {
723
+ initConfig();
724
+ }
725
+ }, [rebuyConfig, rebuyKey, storeDomain]);
726
+ const contextParameters = useMemo2(
727
+ () => createContextParameters({
728
+ cacheKey: rebuyConfig?.shop?.cache_key,
729
+ cartAttributes: cart?.attributes,
730
+ cartId: cart?.id,
731
+ cartLines: cart?.lines,
732
+ cartLinesLength: cart?.lines?.length,
733
+ cartSubtotal: cart?.cost?.subtotalAmount?.amount,
734
+ cartTotalQuantity: cart?.totalQuantity,
735
+ isHydrogenReact: true,
736
+ queryObject,
737
+ windowUrl
738
+ }),
739
+ [rebuyConfig, windowUrl, queryObject, cart]
740
+ );
741
+ const contextParametersJSON = JSON.stringify(contextParameters);
742
+ const contextValue = useMemo2(
743
+ () => ({ contextParameters: JSON.parse(contextParametersJSON) }),
744
+ [contextParametersJSON]
745
+ );
746
+ return /* @__PURE__ */ jsx2(RebuyContext.Provider, { value: contextValue, children });
747
+ };
748
+ var RebuyHydrogenReactContextProvider = ({
749
+ cartFragment = CART_FRAGMENT,
750
+ children,
751
+ countryIsoCode = "US",
752
+ customerAccessToken = "",
753
+ data,
754
+ languageIsoCode = "EN",
755
+ numCartLines,
756
+ onAttributesUpdate,
757
+ onAttributesUpdateComplete,
758
+ onBuyerIdentityUpdate,
759
+ onBuyerIdentityUpdateComplete,
760
+ onCreate,
761
+ onCreateComplete,
762
+ onDiscountCodesUpdate,
763
+ onDiscountCodesUpdateComplete,
764
+ onLineAdd,
765
+ onLineAddComplete,
766
+ onLineRemove,
767
+ onLineRemoveComplete,
768
+ onLineUpdate,
769
+ onLineUpdateComplete,
770
+ onNoteUpdate,
771
+ onNoteUpdateComplete,
772
+ storefrontApiVersion = "2025-01"
773
+ }) => {
774
+ const publicStoreDomain = import.meta.env.PUBLIC_STORE_DOMAIN;
775
+ const storefrontId = import.meta.env.PUBLIC_STOREFRONT_ID;
776
+ const storefrontToken = import.meta.env.PUBLIC_STOREFRONT_API_TOKEN || "";
777
+ const adapted = {
778
+ onAttributesUpdate: onAttributesUpdate ? () => onAttributesUpdate() : void 0,
779
+ onAttributesUpdateComplete: onAttributesUpdateComplete ? () => onAttributesUpdateComplete() : void 0,
780
+ onBuyerIdentityUpdate: onBuyerIdentityUpdate ? () => onBuyerIdentityUpdate() : void 0,
781
+ onBuyerIdentityUpdateComplete: onBuyerIdentityUpdateComplete ? () => onBuyerIdentityUpdateComplete() : void 0,
782
+ onCreate: onCreate ? () => onCreate() : void 0,
783
+ onCreateComplete: onCreateComplete ? () => onCreateComplete() : void 0,
784
+ onDiscountCodesUpdate: onDiscountCodesUpdate ? () => onDiscountCodesUpdate() : void 0,
785
+ onDiscountCodesUpdateComplete: onDiscountCodesUpdateComplete ? () => onDiscountCodesUpdateComplete() : void 0,
786
+ onLineAdd: onLineAdd ? () => onLineAdd() : void 0,
787
+ onLineAddComplete: onLineAddComplete ? () => onLineAddComplete() : void 0,
788
+ onLineRemove: onLineRemove ? () => onLineRemove() : void 0,
789
+ onLineRemoveComplete: onLineRemoveComplete ? () => onLineRemoveComplete() : void 0,
790
+ onLineUpdate: onLineUpdate ? () => onLineUpdate() : void 0,
791
+ onLineUpdateComplete: onLineUpdateComplete ? () => onLineUpdateComplete() : void 0,
792
+ onNoteUpdate: onNoteUpdate ? () => onNoteUpdate() : void 0,
793
+ onNoteUpdateComplete: onNoteUpdateComplete ? () => onNoteUpdateComplete() : void 0
794
+ };
795
+ return /* @__PURE__ */ jsx2(
796
+ ShopifyProvider,
797
+ {
798
+ countryIsoCode,
799
+ languageIsoCode,
800
+ storeDomain: publicStoreDomain,
801
+ storefrontApiVersion,
802
+ storefrontId,
803
+ storefrontToken,
804
+ children: /* @__PURE__ */ jsx2(
805
+ CartProvider,
806
+ {
807
+ cartFragment,
808
+ countryCode: countryIsoCode,
809
+ customerAccessToken,
810
+ data,
811
+ languageCode: languageIsoCode,
812
+ numCartLines,
813
+ onAttributesUpdate: adapted.onAttributesUpdate,
814
+ onAttributesUpdateComplete: adapted.onAttributesUpdateComplete,
815
+ onBuyerIdentityUpdate: adapted.onBuyerIdentityUpdate,
816
+ onBuyerIdentityUpdateComplete: adapted.onBuyerIdentityUpdateComplete,
817
+ onCreate: adapted.onCreate,
818
+ onCreateComplete: adapted.onCreateComplete,
819
+ onDiscountCodesUpdate: adapted.onDiscountCodesUpdate,
820
+ onDiscountCodesUpdateComplete: adapted.onDiscountCodesUpdateComplete,
821
+ onLineAdd: adapted.onLineAdd,
822
+ onLineAddComplete: adapted.onLineAddComplete,
823
+ onLineRemove: adapted.onLineRemove,
824
+ onLineRemoveComplete: adapted.onLineRemoveComplete,
825
+ onLineUpdate: adapted.onLineUpdate,
826
+ onLineUpdateComplete: adapted.onLineUpdateComplete,
827
+ onNoteUpdate: adapted.onNoteUpdate,
828
+ onNoteUpdateComplete: adapted.onNoteUpdateComplete,
829
+ children: /* @__PURE__ */ jsx2(RebuyHydrogenReactContext, { children })
830
+ }
831
+ )
832
+ }
833
+ );
834
+ };
835
+
836
+ // src/widgetContainer/RebuyWidgetContainer.tsx
837
+ import { RebuyClient as RebuyClient2 } from "@rebuy/rebuy";
838
+ import * as Utilities4 from "@rebuy/rebuy/utilities";
839
+ import { flattenConnection } from "@shopify/hydrogen";
840
+ import React, {
841
+ useContext,
842
+ useEffect as useEffect3,
843
+ useMemo as useMemo3,
844
+ useState as useState3
845
+ } from "react";
846
+ var RebuyWidgetContainerBase = ({
847
+ children,
848
+ ...props
849
+ }) => {
850
+ const {
851
+ collection,
852
+ collectionId,
853
+ dataSource,
854
+ limit,
855
+ options,
856
+ product,
857
+ productId,
858
+ variant,
859
+ variantId
860
+ } = props;
861
+ const contextParameters = useContext(RebuyContext);
862
+ const [Rebuy, setRebuy] = useState3(null);
863
+ const [initialized, setInitialized] = useState3(false);
864
+ const shopifyProductId = product?.id ?? productId ?? null;
865
+ const shopifyVariantId = variant?.id ?? variantId ?? null;
866
+ const shopifyCollectionId = collection?.id ?? collectionId ?? null;
867
+ const [products, setProducts] = useState3([]);
868
+ const [metadata, setMetadata] = useState3();
869
+ const REBUY_API_KEY = import.meta.env.PUBLIC_REBUY_API_KEY;
870
+ useEffect3(() => {
871
+ if (!Rebuy) {
872
+ const client = new RebuyClient2(REBUY_API_KEY);
873
+ client.setContextParameters(
874
+ contextParameters
875
+ // TODO: fix this type when @rebuy/rebuy is moved to typescript
876
+ );
877
+ if (options) {
878
+ client.setDefaultParameters(options);
879
+ }
880
+ setRebuy(client);
881
+ setInitialized(true);
882
+ }
883
+ }, [REBUY_API_KEY, Rebuy, contextParameters, options]);
884
+ useEffect3(() => {
885
+ if (!Rebuy) return;
886
+ Rebuy.setContextParameters(
887
+ contextParameters
888
+ // TODO: fix this type when @rebuy/rebuy is moved to typescript
889
+ );
890
+ }, [Rebuy, contextParameters]);
891
+ const request = useMemo3(() => {
892
+ const request2 = {
893
+ endpoint: dataSource || "/api/v1/products/recommended",
894
+ params: {}
895
+ // Keeping this object generic to allow for custom endpoints
896
+ };
897
+ if (shopifyProductId) {
898
+ request2.params.shopify_product_ids = Utilities4.getIdFromGraphUrl(
899
+ shopifyProductId,
900
+ "Product"
901
+ );
902
+ }
903
+ if (shopifyProductId) {
904
+ request2.params.shopify_product_ids = Utilities4.getIdFromGraphUrl(
905
+ shopifyProductId,
906
+ "Product"
907
+ );
908
+ }
909
+ if (shopifyVariantId) {
910
+ request2.params.shopify_variant_ids = Utilities4.getIdFromGraphUrl(
911
+ shopifyVariantId,
912
+ "ProductVariant"
913
+ );
914
+ }
915
+ if (shopifyCollectionId) {
916
+ request2.params.shopify_collection_ids = Utilities4.getIdFromGraphUrl(
917
+ shopifyCollectionId,
918
+ "Collection"
919
+ );
920
+ }
921
+ if (limit) {
922
+ request2.params.limit = limit;
923
+ }
924
+ return request2;
925
+ }, [
926
+ dataSource,
927
+ shopifyProductId,
928
+ shopifyVariantId,
929
+ shopifyCollectionId,
930
+ limit
931
+ ]);
932
+ useEffect3(() => {
933
+ let isMounted = true;
934
+ if (!Rebuy || !initialized) return;
935
+ const fetchData = async () => {
936
+ const { data, metadata: metadata2 } = await Rebuy.getStorefrontData(
937
+ request.endpoint,
938
+ request.params
939
+ );
940
+ if (isMounted) {
941
+ setProducts(
942
+ Array.isArray(data) ? data.map((product2) => ({
943
+ ...product2,
944
+ variants: {
945
+ nodes: product2.variants ? flattenConnection(product2.variants) : []
946
+ }
947
+ })) : []
948
+ );
949
+ setMetadata(metadata2);
950
+ }
951
+ };
952
+ fetchData();
953
+ return () => {
954
+ isMounted = false;
955
+ };
956
+ }, [Rebuy, initialized, request]);
957
+ const childrenWithProps = (props2) => React.Children.map(
958
+ children,
959
+ (child) => React.isValidElement(child) ? React.cloneElement(child, props2) : child
960
+ );
961
+ const childProps = {
962
+ ...props,
963
+ isHydrogenReact: contextParameters?.contextParameters?.isHydrogenReact,
964
+ key: product?.id,
965
+ metadata,
966
+ products
967
+ };
968
+ return childrenWithProps(childProps);
969
+ };
970
+ var RebuyWidgetContainer = RebuyWidgetContainerBase;
971
+
972
+ // src/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.module.css
973
+ var RebuyCompleteTheLook_default = {
974
+ container: "RebuyCompleteTheLook_container",
975
+ productGrid: "RebuyCompleteTheLook_productGrid",
976
+ productItem: "RebuyCompleteTheLook_productItem"
977
+ };
978
+
979
+ // src/components/ProductCard/ProductCard.tsx
980
+ import { Link } from "@remix-run/react";
981
+ import { Image } from "@shopify/hydrogen";
982
+ import { useState as useState4 } from "react";
983
+
984
+ // src/components/ProductCard/ProductCard.module.css
985
+ var ProductCard_default = {
986
+ container: "ProductCard_container",
987
+ productInfo: "ProductCard_productInfo"
988
+ };
989
+
990
+ // src/components/AddToCartBtn/HydrogenAddToCartBtn.tsx
991
+ import { CartForm, Money } from "@shopify/hydrogen";
992
+
993
+ // src/components/AddToCartBtn/AddToCartBtn.module.css
994
+ var AddToCartBtn_default = {
995
+ button: "AddToCartBtn_button"
996
+ };
997
+
998
+ // src/components/AddToCartBtn/HydrogenAddToCartBtn.tsx
999
+ import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
1000
+ var HydrogenAddToCartBtn = ({
1001
+ addToCartBtnText,
1002
+ addToCartCallback,
1003
+ disabled,
1004
+ linesToAdd,
1005
+ moneyData
1006
+ }) => {
1007
+ return /* @__PURE__ */ jsx3(
1008
+ CartForm,
1009
+ {
1010
+ action: CartForm.ACTIONS.LinesAdd,
1011
+ inputs: {
1012
+ lines: linesToAdd
1013
+ },
1014
+ route: "/cart",
1015
+ children: (fetcher) => /* @__PURE__ */ jsx3(Fragment, { children: /* @__PURE__ */ jsxs(
1016
+ "button",
1017
+ {
1018
+ className: AddToCartBtn_default.button,
1019
+ disabled: disabled || fetcher.state !== "idle",
1020
+ onClick: addToCartCallback,
1021
+ type: "submit",
1022
+ children: [
1023
+ addToCartBtnText,
1024
+ moneyData && /* @__PURE__ */ jsxs(Fragment, { children: [
1025
+ /* @__PURE__ */ jsx3("span", { children: " | " }),
1026
+ /* @__PURE__ */ jsx3(Money, { data: moneyData, withoutTrailingZeros: true })
1027
+ ] })
1028
+ ]
1029
+ }
1030
+ ) })
1031
+ }
1032
+ );
1033
+ };
1034
+
1035
+ // src/components/AddToCartBtn/HydrogenReactAddToCartBtn.tsx
1036
+ import { Money as Money2, useCart as useCart2 } from "@shopify/hydrogen-react";
1037
+ import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
1038
+ var HydrogenReactAddToCartBtn = ({
1039
+ addToCartBtnText,
1040
+ addToCartCallback,
1041
+ disabled,
1042
+ linesToAdd,
1043
+ moneyData
1044
+ }) => {
1045
+ const { linesAdd } = useCart2();
1046
+ const handleAddToCart = () => {
1047
+ linesAdd(linesToAdd);
1048
+ addToCartCallback?.();
1049
+ };
1050
+ return /* @__PURE__ */ jsxs2(
1051
+ "button",
1052
+ {
1053
+ className: AddToCartBtn_default.button,
1054
+ disabled,
1055
+ onClick: handleAddToCart,
1056
+ type: "button",
1057
+ children: [
1058
+ addToCartBtnText,
1059
+ moneyData && /* @__PURE__ */ jsxs2(Fragment2, { children: [
1060
+ /* @__PURE__ */ jsx4("span", { children: " | " }),
1061
+ /* @__PURE__ */ jsx4(Money2, { data: moneyData, withoutTrailingZeros: true })
1062
+ ] })
1063
+ ]
1064
+ }
1065
+ );
1066
+ };
1067
+
1068
+ // src/components/AddToCartBtn/AddToCartBtn.tsx
1069
+ import { jsx as jsx5 } from "react/jsx-runtime";
1070
+ var AddToCartBtn = ({
1071
+ addToCartBtnText,
1072
+ addToCartCallback,
1073
+ disabled,
1074
+ isHydrogenReact,
1075
+ moneyData,
1076
+ selectedVariants
1077
+ }) => {
1078
+ const linesToAdd = selectedVariants.map((variant) => ({
1079
+ attributes: [
1080
+ { key: "_source", value: "Rebuy" },
1081
+ { key: "_attribution", value: "Rebuy Product Recommendations" }
1082
+ ],
1083
+ merchandiseId: variant.id,
1084
+ quantity: 1,
1085
+ selectedVariant: variant
1086
+ }));
1087
+ if (isHydrogenReact) {
1088
+ return /* @__PURE__ */ jsx5(
1089
+ HydrogenReactAddToCartBtn,
1090
+ {
1091
+ addToCartBtnText,
1092
+ addToCartCallback,
1093
+ disabled,
1094
+ linesToAdd,
1095
+ moneyData
1096
+ }
1097
+ );
1098
+ }
1099
+ return /* @__PURE__ */ jsx5(
1100
+ HydrogenAddToCartBtn,
1101
+ {
1102
+ addToCartBtnText,
1103
+ addToCartCallback,
1104
+ disabled,
1105
+ linesToAdd,
1106
+ moneyData
1107
+ }
1108
+ );
1109
+ };
1110
+
1111
+ // src/components/ProductPrice/ProductPrice.tsx
1112
+ import { Money as Money3 } from "@shopify/hydrogen";
1113
+
1114
+ // src/components/ProductPrice/ProductPrice.module.css
1115
+ var ProductPrice_default = {
1116
+ priceContainer: "ProductPrice_priceContainer",
1117
+ compareAtPrice: "ProductPrice_compareAtPrice"
1118
+ };
1119
+
1120
+ // src/components/ProductPrice/ProductPrice.tsx
1121
+ import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
1122
+ var RebuyProductPrice = ({
1123
+ selectedVariant
1124
+ }) => {
1125
+ if (!selectedVariant) return null;
1126
+ const { compareAtPriceV2: compareAtPrice, priceV2: price } = selectedVariant;
1127
+ const isDiscounted = (price2, compareAtPrice2) => Number(compareAtPrice2?.amount) > Number(price2?.amount);
1128
+ const CompareAtPrice = ({
1129
+ data: compareAtPrice2
1130
+ }) => {
1131
+ return compareAtPrice2 && /* @__PURE__ */ jsx6(
1132
+ Money3,
1133
+ {
1134
+ as: "span",
1135
+ className: ProductPrice_default.compareAtPrice,
1136
+ data: compareAtPrice2,
1137
+ withoutTrailingZeros: true
1138
+ }
1139
+ );
1140
+ };
1141
+ return price && /* @__PURE__ */ jsxs3("div", { className: ProductPrice_default.priceContainer, children: [
1142
+ /* @__PURE__ */ jsx6(Money3, { data: price, withoutTrailingZeros: true }),
1143
+ compareAtPrice && isDiscounted(price, compareAtPrice) && /* @__PURE__ */ jsx6(CompareAtPrice, { data: compareAtPrice })
1144
+ ] });
1145
+ };
1146
+
1147
+ // src/components/Title/Title.tsx
1148
+ import { jsx as jsx7 } from "react/jsx-runtime";
1149
+ var Title = ({ level, style, text }) => {
1150
+ switch (level) {
1151
+ case "h1":
1152
+ return /* @__PURE__ */ jsx7("h1", { style, children: text });
1153
+ default:
1154
+ case "h2":
1155
+ return /* @__PURE__ */ jsx7("h2", { style, children: text });
1156
+ case "h3":
1157
+ return /* @__PURE__ */ jsx7("h3", { style, children: text });
1158
+ case "h4":
1159
+ return /* @__PURE__ */ jsx7("h4", { style, children: text });
1160
+ case "h5":
1161
+ return /* @__PURE__ */ jsx7("h5", { style, children: text });
1162
+ case "h6":
1163
+ return /* @__PURE__ */ jsx7("h6", { style, children: text });
1164
+ }
1165
+ };
1166
+
1167
+ // src/components/VariantSelect/VariantSelect.module.css
1168
+ var VariantSelect_default = {
1169
+ select: "VariantSelect_select"
1170
+ };
1171
+
1172
+ // src/components/VariantSelect/VariantSelect.tsx
1173
+ import { jsx as jsx8 } from "react/jsx-runtime";
1174
+ var VariantSelect = ({
1175
+ handleSelectedVariant,
1176
+ product
1177
+ }) => {
1178
+ const getOptionsLabel = (product2) => {
1179
+ const options = product2.variants.nodes[0].selectedOptions;
1180
+ const optionsFromKeys = options ? Object.keys(options[0]) : [];
1181
+ const optionsFromValues = options ? options.map((option) => option.name) : [];
1182
+ const useValues = optionsFromKeys.every(
1183
+ (key) => ["name", "value"].includes(key)
1184
+ );
1185
+ return (useValues ? optionsFromValues : optionsFromKeys).join(" / ");
1186
+ };
1187
+ return product?.variants.nodes.length > 1 && /* @__PURE__ */ jsx8("div", { children: /* @__PURE__ */ jsx8(
1188
+ "select",
1189
+ {
1190
+ "aria-label": "select variant",
1191
+ className: VariantSelect_default.select,
1192
+ onChange: (e) => handleSelectedVariant(product, e.target.value),
1193
+ children: /* @__PURE__ */ jsx8("optgroup", { label: getOptionsLabel(product), children: product.variants.nodes.map(({ id, title }) => /* @__PURE__ */ jsx8("option", { value: id, children: title }, id + "-variant")) })
1194
+ }
1195
+ ) });
1196
+ };
1197
+
1198
+ // src/components/ProductCard/ProductCard.tsx
1199
+ import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
1200
+ var ProductCard = ({
1201
+ addToCartBtnText,
1202
+ addToCartCallback,
1203
+ isHydrogenReact,
1204
+ product,
1205
+ productCardTitleLevel
1206
+ }) => {
1207
+ const [selectedVariant, setSelectedVariant] = useState4(
1208
+ product.variants.nodes[0]
1209
+ );
1210
+ const { image } = selectedVariant;
1211
+ const handleSelectedVariant = (product2, variant_id) => {
1212
+ const updatedVariant = product2.variants.nodes.find(
1213
+ (variant) => variant.id === variant_id
1214
+ );
1215
+ if (updatedVariant) {
1216
+ setSelectedVariant(updatedVariant);
1217
+ }
1218
+ };
1219
+ return /* @__PURE__ */ jsxs4("div", { className: ProductCard_default.container, children: [
1220
+ /* @__PURE__ */ jsxs4("div", { children: [
1221
+ /* @__PURE__ */ jsx9(Link, { to: `/products/${product.handle}`, children: /* @__PURE__ */ jsx9(
1222
+ Image,
1223
+ {
1224
+ alt: image?.altText ?? `Picture of ${product.title}`,
1225
+ data: image,
1226
+ sizes: "(max-width: 320px) 280px, (max-width: 768px) 720px, 1440px"
1227
+ }
1228
+ ) }),
1229
+ /* @__PURE__ */ jsxs4("div", { className: ProductCard_default.productInfo, children: [
1230
+ /* @__PURE__ */ jsx9(Link, { to: `/products/${product.handle}`, children: /* @__PURE__ */ jsx9(
1231
+ Title,
1232
+ {
1233
+ level: productCardTitleLevel,
1234
+ text: product.title
1235
+ }
1236
+ ) }),
1237
+ /* @__PURE__ */ jsx9(RebuyProductPrice, { selectedVariant }),
1238
+ /* @__PURE__ */ jsx9(
1239
+ VariantSelect,
1240
+ {
1241
+ handleSelectedVariant,
1242
+ product
1243
+ }
1244
+ )
1245
+ ] })
1246
+ ] }),
1247
+ /* @__PURE__ */ jsx9(
1248
+ AddToCartBtn,
1249
+ {
1250
+ addToCartBtnText,
1251
+ addToCartCallback,
1252
+ isHydrogenReact,
1253
+ selectedVariants: [selectedVariant]
1254
+ }
1255
+ )
1256
+ ] });
1257
+ };
1258
+
1259
+ // src/hooks/titleLevel.tsx
1260
+ var getTitleLevel = (level, decreaseLevel = false) => {
1261
+ switch (level) {
1262
+ case "h1":
1263
+ if (decreaseLevel) {
1264
+ return "h2" /* H2 */;
1265
+ }
1266
+ return "h1" /* H1 */;
1267
+ case "h2":
1268
+ if (decreaseLevel) {
1269
+ return "h3" /* H3 */;
1270
+ }
1271
+ return "h2" /* H2 */;
1272
+ case "h3":
1273
+ if (decreaseLevel) {
1274
+ return "h4" /* H4 */;
1275
+ }
1276
+ return "h3" /* H3 */;
1277
+ case "h4":
1278
+ if (decreaseLevel) {
1279
+ return "h5" /* H5 */;
1280
+ }
1281
+ return "h4" /* H4 */;
1282
+ case "h5":
1283
+ if (decreaseLevel) {
1284
+ return "h6" /* H6 */;
1285
+ }
1286
+ return "h5" /* H5 */;
1287
+ case "h6":
1288
+ if (decreaseLevel) {
1289
+ return "h6" /* H6 */;
1290
+ }
1291
+ return "h6" /* H6 */;
1292
+ default:
1293
+ return "h2" /* H2 */;
1294
+ }
1295
+ };
1296
+
1297
+ // src/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.tsx
1298
+ import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
1299
+ var RebuyCompleteTheLook = (props) => {
1300
+ const {
1301
+ addToCartBtnText = "Add to cart",
1302
+ addToCartCallback,
1303
+ customTitle = `These pair with ${props.product?.title}`,
1304
+ customTitleLevel = "h2",
1305
+ customTitleStyle,
1306
+ products = []
1307
+ } = props;
1308
+ if (products.length === 0) {
1309
+ console.log("RebuyCompleteTheLook: No products found");
1310
+ return null;
1311
+ }
1312
+ return /* @__PURE__ */ jsxs5("section", { className: RebuyCompleteTheLook_default.container, children: [
1313
+ /* @__PURE__ */ jsx10(
1314
+ Title,
1315
+ {
1316
+ level: getTitleLevel(customTitleLevel),
1317
+ style: customTitleStyle,
1318
+ text: customTitle
1319
+ }
1320
+ ),
1321
+ /* @__PURE__ */ jsx10("ul", { className: RebuyCompleteTheLook_default.productGrid, children: products.map((product) => /* @__PURE__ */ jsx10("li", { className: RebuyCompleteTheLook_default.productItem, children: /* @__PURE__ */ jsx10(
1322
+ ProductCard,
1323
+ {
1324
+ addToCartBtnText,
1325
+ addToCartCallback,
1326
+ isHydrogenReact: props.isHydrogenReact,
1327
+ product,
1328
+ productCardTitleLevel: getTitleLevel(
1329
+ customTitleLevel,
1330
+ true
1331
+ )
1332
+ }
1333
+ ) }, product.id)) })
1334
+ ] });
1335
+ };
1336
+
1337
+ // src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.tsx
1338
+ import { useCallback, useEffect as useEffect4, useState as useState5 } from "react";
1339
+
1340
+ // src/widgets/RebuyDynamicBundleProducts/BundlePrice.tsx
1341
+ import { Money as Money4 } from "@shopify/hydrogen";
1342
+
1343
+ // src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.module.css
1344
+ var RebuyDynamicBundleProducts_default = {
1345
+ container: "RebuyDynamicBundleProducts_container",
1346
+ addCartBtnContainer: "RebuyDynamicBundleProducts_addCartBtnContainer",
1347
+ bundleContainer: "RebuyDynamicBundleProducts_bundleContainer",
1348
+ select: "RebuyDynamicBundleProducts_select",
1349
+ bundleItemRowContainer: "RebuyDynamicBundleProducts_bundleItemRowContainer",
1350
+ unselected: "RebuyDynamicBundleProducts_unselected",
1351
+ bundleItemRow: "RebuyDynamicBundleProducts_bundleItemRow",
1352
+ bundleItemInput: "RebuyDynamicBundleProducts_bundleItemInput",
1353
+ bundleItemLabel: "RebuyDynamicBundleProducts_bundleItemLabel",
1354
+ bundleImages: "RebuyDynamicBundleProducts_bundleImages",
1355
+ bundleImage: "RebuyDynamicBundleProducts_bundleImage",
1356
+ fadeIn: "RebuyDynamicBundleProducts_fadeIn",
1357
+ bundleImageDelimiter: "RebuyDynamicBundleProducts_bundleImageDelimiter",
1358
+ compareAtPrice: "RebuyDynamicBundleProducts_compareAtPrice"
1359
+ };
1360
+
1361
+ // src/widgets/RebuyDynamicBundleProducts/BundlePrice.tsx
1362
+ import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
1363
+ var BundlePrice = ({ products }) => {
1364
+ const isDisabled = products.filter((product) => product.selected).length < 1;
1365
+ const totalBundlePrice = () => {
1366
+ let total = 0;
1367
+ let currencyCode = "USD";
1368
+ for (const product of products) {
1369
+ if (product.selected && product.selectedVariant) {
1370
+ const { priceV2: price2 } = product.selectedVariant;
1371
+ total += Number(price2?.amount);
1372
+ currencyCode = price2?.currencyCode || "USD";
1373
+ }
1374
+ }
1375
+ return {
1376
+ amount: String(total),
1377
+ currencyCode
1378
+ };
1379
+ };
1380
+ const totalBundleCompareAtPrice = () => {
1381
+ let compareAtTotal = 0;
1382
+ let currencyCode = "USD";
1383
+ for (const product of products) {
1384
+ if (product.selected && product.selectedVariant) {
1385
+ const { compareAtPriceV2: compareAtPrice2, priceV2: price2 } = product.selectedVariant;
1386
+ currencyCode = price2?.currencyCode || "USD";
1387
+ compareAtTotal += Number((compareAtPrice2 || price2)?.amount);
1388
+ }
1389
+ }
1390
+ return {
1391
+ amount: String(compareAtTotal),
1392
+ currencyCode
1393
+ };
1394
+ };
1395
+ const isDiscounted = (price2, compareAtPrice2) => Number(compareAtPrice2?.amount) > Number(price2?.amount);
1396
+ const price = totalBundlePrice();
1397
+ const compareAtPrice = totalBundleCompareAtPrice();
1398
+ const CompareAtPrice = ({
1399
+ data: compareAtPrice2
1400
+ }) => {
1401
+ return compareAtPrice2 && /* @__PURE__ */ jsx11(
1402
+ Money4,
1403
+ {
1404
+ as: "span",
1405
+ className: RebuyDynamicBundleProducts_default.compareAtPrice,
1406
+ data: compareAtPrice2,
1407
+ withoutTrailingZeros: true
1408
+ }
1409
+ );
1410
+ };
1411
+ return products.length > 0 && /* @__PURE__ */ jsx11("div", { className: "flex items-center flex-col", children: !isDisabled && /* @__PURE__ */ jsxs6("p", { className: "flex items-center gap-2 mb-2", children: [
1412
+ /* @__PURE__ */ jsx11("span", { children: "Total Price:" }),
1413
+ /* @__PURE__ */ jsx11(Money4, { as: "span", data: price, withoutTrailingZeros: true }),
1414
+ isDiscounted(price, compareAtPrice) && /* @__PURE__ */ jsx11(CompareAtPrice, { data: compareAtPrice })
1415
+ ] }) });
1416
+ };
1417
+
1418
+ // src/utils/convertToRebuyProduct.tsx
1419
+ var convertToRebuyProduct = (isHydrogenReact, product) => {
1420
+ const mainProductVariants = isHydrogenReact ? product?.variants?.nodes?.map((variant) => {
1421
+ return {
1422
+ ...variant
1423
+ };
1424
+ }) || [] : product?.adjacentVariants.map((variant) => {
1425
+ return {
1426
+ availableForSale: variant.availableForSale,
1427
+ compareAtPriceV2: {
1428
+ amount: variant.compareAtPrice?.amount || "",
1429
+ currencyCode: variant.compareAtPrice?.currencyCode || "USD"
1430
+ },
1431
+ id: variant.id,
1432
+ image: {
1433
+ altText: variant.image?.altText || "",
1434
+ height: variant.image?.height || 100,
1435
+ id: variant.image?.id || "",
1436
+ url: variant.image?.url || "",
1437
+ width: variant.image?.width || 100
1438
+ },
1439
+ priceV2: {
1440
+ amount: variant.price.amount || "",
1441
+ currencyCode: variant.price.currencyCode || "USD"
1442
+ },
1443
+ product: {
1444
+ handle: product.handle,
1445
+ id: product.id,
1446
+ title: product.title,
1447
+ vendor: product.vendor
1448
+ },
1449
+ selectedOptions: variant.selectedOptions,
1450
+ sku: variant.sku || "",
1451
+ title: variant.title || ""
1452
+ };
1453
+ }) || [];
1454
+ return isHydrogenReact ? {
1455
+ collections: {
1456
+ nodes: product?.collections.nodes.map((collection) => {
1457
+ return {
1458
+ handle: collection.handle
1459
+ };
1460
+ }) || []
1461
+ },
1462
+ compareAtPriceRange: {
1463
+ maxVariantCompareAtPrice: null,
1464
+ minVariantCompareAtPrice: null
1465
+ },
1466
+ description: product?.description || "",
1467
+ descriptionHtml: product?.descriptionHtml || "",
1468
+ featuredImage: {
1469
+ altText: product?.featuredImage?.altText || "",
1470
+ height: product?.featuredImage?.height || 100,
1471
+ id: product?.featuredImage?.id || "",
1472
+ url: product?.featuredImage?.url || "",
1473
+ width: product?.featuredImage?.width || 100
1474
+ },
1475
+ handle: product?.handle || "",
1476
+ id: product?.id || "",
1477
+ images: [
1478
+ { altText: "", height: 100, id: "", url: "", width: 100 }
1479
+ ],
1480
+ media: [],
1481
+ metafields: [],
1482
+ options: [],
1483
+ priceRange: product?.priceRange || {
1484
+ maxVariantPrice: { amount: "0", currencyCode: "USD" },
1485
+ minVariantPrice: { amount: "0", currencyCode: "USD" }
1486
+ },
1487
+ selected: true,
1488
+ selectedOptions: product?.selectedVariant?.selectedOptions?.reduce(
1489
+ (acc, option) => {
1490
+ return { ...acc, [option.name]: option.value };
1491
+ },
1492
+ {}
1493
+ ) || {},
1494
+ selectedSellingPlan: {},
1495
+ selectedSellingPlanAllocation: {},
1496
+ selectedVariant: {
1497
+ availableForSale: product?.selectedVariant?.availableForSale || false,
1498
+ compareAtPriceV2: {
1499
+ amount: product?.selectedVariant?.compareAtPrice?.amount || "",
1500
+ currencyCode: product?.selectedVariant?.compareAtPrice?.currencyCode || "USD"
1501
+ },
1502
+ id: product?.selectedVariant?.id || "",
1503
+ image: {
1504
+ altText: product?.selectedVariant?.image?.altText || "",
1505
+ height: product?.selectedVariant?.image?.height || 100,
1506
+ id: product?.selectedVariant?.image?.id || "",
1507
+ url: product?.selectedVariant?.image?.url || "",
1508
+ width: product?.selectedVariant?.image?.width || 100
1509
+ },
1510
+ priceV2: {
1511
+ amount: product?.selectedVariant?.price.amount || "",
1512
+ currencyCode: product?.selectedVariant?.price.currencyCode || "USD"
1513
+ },
1514
+ product: {
1515
+ handle: product?.handle || "",
1516
+ id: product?.id || "",
1517
+ title: product?.title || "",
1518
+ vendor: product?.vendor || ""
1519
+ },
1520
+ selectedOptions: product?.selectedVariant?.selectedOptions || [],
1521
+ sku: product?.selectedVariant?.sku || "",
1522
+ title: product?.selectedVariant?.title || ""
1523
+ },
1524
+ sellingPlanGroups: [],
1525
+ seo: {
1526
+ description: product?.seo?.description || "",
1527
+ title: product?.seo?.title || ""
1528
+ },
1529
+ title: product?.title || "",
1530
+ variants: {
1531
+ nodes: mainProductVariants
1532
+ },
1533
+ vendor: product?.vendor || ""
1534
+ } : {
1535
+ collections: {
1536
+ nodes: []
1537
+ },
1538
+ compareAtPriceRange: {
1539
+ maxVariantCompareAtPrice: null,
1540
+ minVariantCompareAtPrice: null
1541
+ },
1542
+ description: product?.description || "",
1543
+ descriptionHtml: product?.descriptionHtml || "",
1544
+ featuredImage: {
1545
+ altText: product?.selectedOrFirstAvailableVariant?.image?.altText || "",
1546
+ height: product?.selectedOrFirstAvailableVariant?.image?.height || 100,
1547
+ id: product?.selectedOrFirstAvailableVariant?.image?.id || "",
1548
+ url: product?.selectedOrFirstAvailableVariant?.image?.url || "",
1549
+ width: product?.selectedOrFirstAvailableVariant?.image?.width || 100
1550
+ },
1551
+ handle: product?.handle || "",
1552
+ id: product?.id || "",
1553
+ images: [
1554
+ {
1555
+ altText: product?.selectedOrFirstAvailableVariant?.image?.altText || "",
1556
+ height: product?.selectedOrFirstAvailableVariant?.image?.height || 100,
1557
+ id: product?.selectedOrFirstAvailableVariant?.image?.id || "",
1558
+ url: product?.selectedOrFirstAvailableVariant?.image?.url || "",
1559
+ width: product?.selectedOrFirstAvailableVariant?.image?.width || 100
1560
+ }
1561
+ ],
1562
+ media: [],
1563
+ metafields: [],
1564
+ options: [],
1565
+ priceRange: product?.priceRange || {
1566
+ maxVariantPrice: { amount: "0", currencyCode: "USD" },
1567
+ minVariantPrice: { amount: "0", currencyCode: "USD" }
1568
+ },
1569
+ selected: true,
1570
+ selectedOptions: product?.selectedOrFirstAvailableVariant?.selectedOptions?.reduce(
1571
+ (acc, option) => {
1572
+ return { ...acc, [option.name]: option.value };
1573
+ },
1574
+ {}
1575
+ ) || {},
1576
+ selectedSellingPlan: {},
1577
+ selectedSellingPlanAllocation: {},
1578
+ selectedVariant: {
1579
+ availableForSale: product?.selectedOrFirstAvailableVariant?.availableForSale || false,
1580
+ compareAtPriceV2: {
1581
+ amount: product?.selectedOrFirstAvailableVariant?.compareAtPrice?.amount || "",
1582
+ currencyCode: product?.selectedOrFirstAvailableVariant?.compareAtPrice?.currencyCode || "USD"
1583
+ },
1584
+ id: product?.selectedOrFirstAvailableVariant?.id || "",
1585
+ image: {
1586
+ altText: product?.selectedOrFirstAvailableVariant?.image?.altText || "",
1587
+ height: product?.selectedOrFirstAvailableVariant?.image?.height || 100,
1588
+ id: product?.selectedOrFirstAvailableVariant?.image?.id || "",
1589
+ url: product?.selectedOrFirstAvailableVariant?.image?.url || "",
1590
+ width: product?.selectedOrFirstAvailableVariant?.image?.width || 100
1591
+ },
1592
+ priceV2: {
1593
+ amount: product?.selectedOrFirstAvailableVariant?.price.amount || "",
1594
+ currencyCode: product?.selectedOrFirstAvailableVariant?.price.currencyCode || "USD"
1595
+ },
1596
+ product: {
1597
+ handle: product?.handle || "",
1598
+ id: product?.id || "",
1599
+ title: product?.title || "",
1600
+ vendor: product?.vendor || ""
1601
+ },
1602
+ selectedOptions: product?.selectedOrFirstAvailableVariant?.selectedOptions || [],
1603
+ sku: product?.selectedOrFirstAvailableVariant?.sku || "",
1604
+ title: product?.selectedOrFirstAvailableVariant?.title || ""
1605
+ },
1606
+ sellingPlanGroups: [],
1607
+ seo: {
1608
+ description: null,
1609
+ title: null
1610
+ },
1611
+ title: product?.title || "",
1612
+ variants: {
1613
+ nodes: [
1614
+ {
1615
+ availableForSale: product?.selectedOrFirstAvailableVariant?.availableForSale || false,
1616
+ compareAtPriceV2: {
1617
+ amount: product?.selectedOrFirstAvailableVariant?.compareAtPrice?.amount || "",
1618
+ currencyCode: product?.selectedOrFirstAvailableVariant?.compareAtPrice?.currencyCode || "USD"
1619
+ },
1620
+ id: product?.selectedOrFirstAvailableVariant?.id || "",
1621
+ image: {
1622
+ altText: product?.selectedOrFirstAvailableVariant?.image?.altText || "",
1623
+ height: product?.selectedOrFirstAvailableVariant?.image?.height || 100,
1624
+ id: product?.selectedOrFirstAvailableVariant?.image?.id || "",
1625
+ url: product?.selectedOrFirstAvailableVariant?.image?.url || "",
1626
+ width: product?.selectedOrFirstAvailableVariant?.image?.width || 100
1627
+ },
1628
+ priceV2: {
1629
+ amount: product?.selectedOrFirstAvailableVariant?.price.amount || "",
1630
+ currencyCode: product?.selectedOrFirstAvailableVariant?.price.currencyCode || "USD"
1631
+ },
1632
+ product: {
1633
+ handle: product?.handle || "",
1634
+ id: product?.id || "",
1635
+ title: product?.title || "",
1636
+ vendor: product?.vendor || ""
1637
+ },
1638
+ selectedOptions: product?.selectedOrFirstAvailableVariant?.selectedOptions || [],
1639
+ sku: product?.selectedOrFirstAvailableVariant?.sku || "",
1640
+ title: product?.selectedOrFirstAvailableVariant?.title || ""
1641
+ },
1642
+ ...mainProductVariants
1643
+ ]
1644
+ },
1645
+ vendor: product?.vendor || ""
1646
+ };
1647
+ };
1648
+
1649
+ // src/widgets/RebuyDynamicBundleProducts/BundleImages.tsx
1650
+ import { Link as Link2 } from "@remix-run/react";
1651
+ import { Image as Image2 } from "@shopify/hydrogen";
1652
+ import { Fragment as Fragment3 } from "react";
1653
+ import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
1654
+ var BundleImages = ({ products }) => {
1655
+ const selected = products.filter((product) => product.selected);
1656
+ return /* @__PURE__ */ jsx12("ul", { className: RebuyDynamicBundleProducts_default.bundleImages, children: products.map((product, index) => {
1657
+ const image = product.selectedVariant?.image;
1658
+ const productImage = image ? /* @__PURE__ */ jsx12(
1659
+ Image2,
1660
+ {
1661
+ alt: image.altText || `Picture of ${product.title}`,
1662
+ className: RebuyDynamicBundleProducts_default.bundleImage,
1663
+ data: image,
1664
+ height: 80,
1665
+ title: product.title,
1666
+ width: 80
1667
+ }
1668
+ ) : (
1669
+ // No image defined
1670
+ product.title
1671
+ );
1672
+ const showDelimiter = selected[0]?.id !== product.id;
1673
+ return /* @__PURE__ */ jsx12(Fragment3, { children: product.selected && /* @__PURE__ */ jsxs7(Fragment4, { children: [
1674
+ showDelimiter && /* @__PURE__ */ jsx12("li", { className: RebuyDynamicBundleProducts_default.bundleImageDelimiter, children: /* @__PURE__ */ jsx12("span", { children: "+" }) }),
1675
+ /* @__PURE__ */ jsx12("li", { className: "flex items-center", children: product.default ? (
1676
+ // Already on product page
1677
+ productImage
1678
+ ) : (
1679
+ // Link to product
1680
+ /* @__PURE__ */ jsx12(
1681
+ Link2,
1682
+ {
1683
+ title: product.title,
1684
+ to: `/products/${product.handle}`,
1685
+ children: productImage
1686
+ }
1687
+ )
1688
+ ) })
1689
+ ] }) }, product.id + "-BundleImages-" + index);
1690
+ }) });
1691
+ };
1692
+
1693
+ // src/widgets/RebuyDynamicBundleProducts/Select.tsx
1694
+ import { jsx as jsx13 } from "react/jsx-runtime";
1695
+ var Select = ({ onSelectVariant, product }) => {
1696
+ const getOptionsLabel = (product2) => {
1697
+ const options = product2.variants.nodes[0].selectedOptions;
1698
+ const optionsFromKeys = options ? Object.keys(options[0]) : [];
1699
+ const optionsFromValues = options ? options.map((option) => option.name) : [];
1700
+ const useValues = optionsFromKeys.every(
1701
+ (key) => ["name", "value"].includes(key)
1702
+ );
1703
+ return (useValues ? optionsFromValues : optionsFromKeys).join(" / ");
1704
+ };
1705
+ return product && /* @__PURE__ */ jsx13(
1706
+ "select",
1707
+ {
1708
+ "aria-label": "select variant",
1709
+ className: RebuyDynamicBundleProducts_default.select,
1710
+ onChange: (e) => onSelectVariant(product, e.target.value),
1711
+ value: product.selectedVariant.id,
1712
+ children: /* @__PURE__ */ jsx13("optgroup", { label: getOptionsLabel(product), children: product.variants.nodes.map(({ id, title }) => /* @__PURE__ */ jsx13("option", { value: id, children: title }, id + "-BundleVariant")) })
1713
+ }
1714
+ );
1715
+ };
1716
+
1717
+ // src/widgets/RebuyDynamicBundleProducts/BundleSelection.tsx
1718
+ import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
1719
+ var BundleSelection = ({
1720
+ onSelectVariant,
1721
+ onToggleBundleItem,
1722
+ products
1723
+ }) => {
1724
+ return /* @__PURE__ */ jsx14("ul", { children: products.map((product, index) => {
1725
+ const { availableForSale } = product.selectedVariant;
1726
+ const isOutOfStock = !availableForSale;
1727
+ return /* @__PURE__ */ jsx14(
1728
+ "li",
1729
+ {
1730
+ className: `${RebuyDynamicBundleProducts_default.bundleItemRowContainer} ${!product.selected && RebuyDynamicBundleProducts_default.unselected}`,
1731
+ children: /* @__PURE__ */ jsxs8("div", { className: RebuyDynamicBundleProducts_default.bundleItemRow, children: [
1732
+ /* @__PURE__ */ jsx14(
1733
+ "input",
1734
+ {
1735
+ checked: product.selected && availableForSale,
1736
+ className: "mt-1 rounded-sm accent-black cursor-pointer",
1737
+ disabled: isOutOfStock,
1738
+ id: `${product.id}-toggle`,
1739
+ onChange: () => onToggleBundleItem(product),
1740
+ type: "checkbox",
1741
+ value: product.id
1742
+ }
1743
+ ),
1744
+ /* @__PURE__ */ jsxs8("div", { className: RebuyDynamicBundleProducts_default.bundleItemInput, children: [
1745
+ /* @__PURE__ */ jsxs8(
1746
+ "label",
1747
+ {
1748
+ className: RebuyDynamicBundleProducts_default.bundleItemLabel,
1749
+ htmlFor: `${product.id}-toggle`,
1750
+ children: [
1751
+ isOutOfStock && /* @__PURE__ */ jsx14("b", { children: "SOLD OUT" }),
1752
+ product.default && /* @__PURE__ */ jsx14("b", { children: "This item:" }),
1753
+ product.title,
1754
+ /* @__PURE__ */ jsx14(
1755
+ RebuyProductPrice,
1756
+ {
1757
+ selectedVariant: product.selectedVariant
1758
+ }
1759
+ )
1760
+ ]
1761
+ }
1762
+ ),
1763
+ product.variants.nodes.length > 1 && /* @__PURE__ */ jsx14(
1764
+ Select,
1765
+ {
1766
+ onSelectVariant,
1767
+ product
1768
+ }
1769
+ )
1770
+ ] })
1771
+ ] })
1772
+ },
1773
+ product.id + "-BundleSelection" + index
1774
+ );
1775
+ }) });
1776
+ };
1777
+
1778
+ // src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.tsx
1779
+ import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
1780
+ var RebuyDynamicBundleProducts = (props) => {
1781
+ const {
1782
+ addToCartBtnText = "Add to cart",
1783
+ addToCartCallback,
1784
+ customTitle = `These pair with ${props.product?.title}`,
1785
+ customTitleLevel = "h2",
1786
+ customTitleStyle,
1787
+ isHydrogenReact,
1788
+ product,
1789
+ products = []
1790
+ } = props;
1791
+ const [bundleProducts, setBundleProducts] = useState5([]);
1792
+ useEffect4(() => {
1793
+ const mainProduct = convertToRebuyProduct(
1794
+ isHydrogenReact || false,
1795
+ product
1796
+ );
1797
+ const formattedProducts = products.map((product2) => {
1798
+ return {
1799
+ ...product2,
1800
+ selected: true,
1801
+ selectedVariant: product2.variants.nodes[0]
1802
+ };
1803
+ });
1804
+ setBundleProducts([mainProduct, ...formattedProducts]);
1805
+ }, [product, products, isHydrogenReact]);
1806
+ const onToggleBundleItem = useCallback(
1807
+ (product2) => {
1808
+ product2.selected = !product2.selected;
1809
+ setBundleProducts([...bundleProducts]);
1810
+ },
1811
+ [bundleProducts]
1812
+ );
1813
+ const onSelectVariant = useCallback(
1814
+ (product2, variant_id) => {
1815
+ const variant = product2.variants.nodes.find(
1816
+ ({ id }) => id === variant_id
1817
+ );
1818
+ if (variant) {
1819
+ product2.selectedVariant = variant;
1820
+ product2.selected = variant.availableForSale || false;
1821
+ setBundleProducts([...bundleProducts]);
1822
+ }
1823
+ },
1824
+ [bundleProducts]
1825
+ );
1826
+ if (products.length === 0) {
1827
+ console.log("RebuyDynamicBundleProducts: No products found");
1828
+ return null;
1829
+ }
1830
+ return /* @__PURE__ */ jsxs9("section", { className: RebuyDynamicBundleProducts_default.container, children: [
1831
+ /* @__PURE__ */ jsx15(
1832
+ Title,
1833
+ {
1834
+ level: getTitleLevel(customTitleLevel),
1835
+ style: customTitleStyle,
1836
+ text: customTitle
1837
+ }
1838
+ ),
1839
+ /* @__PURE__ */ jsxs9("div", { className: RebuyDynamicBundleProducts_default.bundleContainer, children: [
1840
+ /* @__PURE__ */ jsx15(BundleImages, { products: bundleProducts }),
1841
+ /* @__PURE__ */ jsx15(BundlePrice, { products: bundleProducts }),
1842
+ /* @__PURE__ */ jsx15("div", { className: RebuyDynamicBundleProducts_default.addCartBtnContainer, children: /* @__PURE__ */ jsx15(
1843
+ AddToCartBtn,
1844
+ {
1845
+ addToCartBtnText,
1846
+ addToCartCallback,
1847
+ disabled: bundleProducts.filter((product2) => product2.selected).length === 0,
1848
+ isHydrogenReact,
1849
+ selectedVariants: bundleProducts.filter((product2) => product2.selected).map((product2) => {
1850
+ return product2.selectedVariant;
1851
+ })
1852
+ }
1853
+ ) }),
1854
+ /* @__PURE__ */ jsx15(
1855
+ BundleSelection,
1856
+ {
1857
+ onSelectVariant,
1858
+ onToggleBundleItem,
1859
+ products: bundleProducts
1860
+ }
1861
+ )
1862
+ ] })
1863
+ ] });
1864
+ };
1865
+
1866
+ // src/widgets/RebuyProductAddOns/RebuyProductAddOns.tsx
1867
+ import { Money as Money5 } from "@shopify/hydrogen-react";
1868
+ import { useCallback as useCallback2, useEffect as useEffect5, useState as useState6 } from "react";
1869
+
1870
+ // src/widgets/RebuyProductAddOns/RebuyProductAddOnCard.tsx
1871
+ import { Link as Link3 } from "@remix-run/react";
1872
+ import { Image as Image3 } from "@shopify/hydrogen";
1873
+
1874
+ // src/widgets/RebuyProductAddOns/RebuyProductAddOns.module.css
1875
+ var RebuyProductAddOns_default = {
1876
+ container: "RebuyProductAddOns_container",
1877
+ productAddOnsList: "RebuyProductAddOns_productAddOnsList",
1878
+ addOnCard: "RebuyProductAddOns_addOnCard",
1879
+ addOnCardContent: "RebuyProductAddOns_addOnCardContent",
1880
+ addOnCardInput: "RebuyProductAddOns_addOnCardInput",
1881
+ addOnCardContentImage: "RebuyProductAddOns_addOnCardContentImage",
1882
+ addOnCardOutOfStock: "RebuyProductAddOns_addOnCardOutOfStock",
1883
+ addOnCardTextContent: "RebuyProductAddOns_addOnCardTextContent",
1884
+ addOnCardLearnMore: "RebuyProductAddOns_addOnCardLearnMore",
1885
+ addCartBtnContainer: "RebuyProductAddOns_addCartBtnContainer",
1886
+ moneyContainer: "RebuyProductAddOns_moneyContainer"
1887
+ };
1888
+
1889
+ // src/widgets/RebuyProductAddOns/RebuyProductAddOnCard.tsx
1890
+ import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
1891
+ var RebuyProductAddOnCard = ({
1892
+ handleChange,
1893
+ learnMoreText,
1894
+ outOfStockText,
1895
+ product,
1896
+ titleLevel
1897
+ }) => {
1898
+ const { availableForSale, image } = product.selectedVariant || {};
1899
+ return /* @__PURE__ */ jsx16("label", { className: RebuyProductAddOns_default.addOnCard, htmlFor: product.id, children: /* @__PURE__ */ jsxs10("div", { className: RebuyProductAddOns_default.addOnCardContent, children: [
1900
+ /* @__PURE__ */ jsx16(
1901
+ "input",
1902
+ {
1903
+ checked: Boolean(product.selected),
1904
+ className: RebuyProductAddOns_default.addOnCardInput,
1905
+ disabled: !product.variants.nodes[0].availableForSale,
1906
+ id: product.id,
1907
+ name: product.title,
1908
+ onChange: (event) => handleChange(event, product),
1909
+ type: "checkbox",
1910
+ value: ""
1911
+ }
1912
+ ),
1913
+ /* @__PURE__ */ jsx16("div", { className: RebuyProductAddOns_default.addOnCardContentImage, children: image && /* @__PURE__ */ jsx16(
1914
+ Image3,
1915
+ {
1916
+ alt: image.altText || `Picture of ${product.title}`,
1917
+ data: image,
1918
+ height: 150,
1919
+ width: 300
1920
+ }
1921
+ ) }),
1922
+ /* @__PURE__ */ jsxs10("div", { className: RebuyProductAddOns_default.addOnCardTextContent, children: [
1923
+ !availableForSale && /* @__PURE__ */ jsx16("p", { className: RebuyProductAddOns_default.addOnCardOutOfStock, children: outOfStockText }),
1924
+ /* @__PURE__ */ jsx16(Title, { level: titleLevel, text: product.title }),
1925
+ /* @__PURE__ */ jsx16(
1926
+ RebuyProductPrice,
1927
+ {
1928
+ selectedVariant: product.selectedVariant
1929
+ }
1930
+ ),
1931
+ /* @__PURE__ */ jsx16(
1932
+ Link3,
1933
+ {
1934
+ className: RebuyProductAddOns_default.addOnCardLearnMore,
1935
+ to: `/products/${product.handle}`,
1936
+ children: learnMoreText
1937
+ }
1938
+ )
1939
+ ] })
1940
+ ] }) });
1941
+ };
1942
+
1943
+ // src/widgets/RebuyProductAddOns/RebuyProductAddOns.tsx
1944
+ import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
1945
+ var RebuyProductAddOns = (props) => {
1946
+ const {
1947
+ addToCartCallback,
1948
+ customTitle = `These pair with ${props.product?.title}`,
1949
+ customTitleLevel = "h2",
1950
+ customTitleStyle,
1951
+ includeMainProduct = false,
1952
+ isHydrogenReact,
1953
+ learnMoreText = "Learn more",
1954
+ outOfStockText = "Out of stock",
1955
+ product,
1956
+ products = [],
1957
+ addToCartBtnText = "Add to cart",
1958
+ subtotalText = "Add-ons Subtotal: ",
1959
+ withProductText = `With ${product?.title}: `
1960
+ } = props;
1961
+ const [addedItems, setAddedItems] = useState6(products);
1962
+ const [subtotalWithProduct, setSubtotalWithProduct] = useState6();
1963
+ const [subtotalWithOutProduct, setSubtotalWithOutProduct] = useState6();
1964
+ useEffect5(() => {
1965
+ let initialTotal = 0;
1966
+ let currencyCode = "USD";
1967
+ products.map((product2) => {
1968
+ product2.selectedVariant = product2.variants.nodes[0];
1969
+ product2.selected = true;
1970
+ if (product2.selectedVariant?.priceV2) {
1971
+ initialTotal += Number(product2.selectedVariant.priceV2.amount);
1972
+ currencyCode = product2.selectedVariant.priceV2.currencyCode || "USD";
1973
+ }
1974
+ });
1975
+ setSubtotalWithProduct({
1976
+ amount: String(initialTotal),
1977
+ currencyCode
1978
+ });
1979
+ setSubtotalWithOutProduct({
1980
+ amount: String(
1981
+ initialTotal - Number(
1982
+ isHydrogenReact ? product?.selectedVariant?.price.amount : product?.selectedOrFirstAvailableVariant?.price.amount
1983
+ )
1984
+ ),
1985
+ currencyCode
1986
+ });
1987
+ setAddedItems(products);
1988
+ if (includeMainProduct) {
1989
+ setAddedItems([
1990
+ convertToRebuyProduct(isHydrogenReact || false, product),
1991
+ ...products
1992
+ ]);
1993
+ } else {
1994
+ setAddedItems(products);
1995
+ }
1996
+ }, [products, product, isHydrogenReact, includeMainProduct]);
1997
+ const handleChange = useCallback2(
1998
+ (event, product2) => {
1999
+ const newProducts = [...products];
2000
+ const productIndex = newProducts.findIndex(
2001
+ (p) => p.id === product2.id
2002
+ );
2003
+ if (productIndex !== -1) {
2004
+ newProducts[productIndex] = {
2005
+ ...newProducts[productIndex],
2006
+ selected: event.target.checked
2007
+ };
2008
+ product2.selected = event.target.checked;
2009
+ if (event.target.checked) {
2010
+ setAddedItems((prev) => [...prev, product2]);
2011
+ } else {
2012
+ setAddedItems(
2013
+ (prev) => prev.filter((item) => item.id !== product2.id)
2014
+ );
2015
+ }
2016
+ }
2017
+ },
2018
+ [products]
2019
+ );
2020
+ useEffect5(() => {
2021
+ let total = 0;
2022
+ let currencyCode = "USD";
2023
+ addedItems.forEach((item) => {
2024
+ if (item.selected && item.selectedVariant?.priceV2) {
2025
+ total += Number(item.selectedVariant.priceV2.amount);
2026
+ currencyCode = item.selectedVariant.priceV2.currencyCode || "USD";
2027
+ }
2028
+ });
2029
+ setSubtotalWithProduct({
2030
+ amount: String(total),
2031
+ currencyCode
2032
+ });
2033
+ setSubtotalWithOutProduct({
2034
+ amount: String(
2035
+ total - Number(
2036
+ isHydrogenReact ? product?.selectedVariant?.price.amount : product?.selectedOrFirstAvailableVariant?.price.amount
2037
+ )
2038
+ ),
2039
+ currencyCode
2040
+ });
2041
+ }, [addedItems, product, isHydrogenReact]);
2042
+ if (products.length === 0) {
2043
+ console.log("RebuyProductAddOns: No products found");
2044
+ return null;
2045
+ }
2046
+ return /* @__PURE__ */ jsxs11("div", { className: RebuyProductAddOns_default.container, children: [
2047
+ /* @__PURE__ */ jsx17(
2048
+ Title,
2049
+ {
2050
+ level: getTitleLevel(customTitleLevel),
2051
+ style: customTitleStyle,
2052
+ text: customTitle
2053
+ }
2054
+ ),
2055
+ /* @__PURE__ */ jsx17("ul", { className: RebuyProductAddOns_default.productAddOnsList, children: products.map((product2) => /* @__PURE__ */ jsx17("li", { children: /* @__PURE__ */ jsx17(
2056
+ RebuyProductAddOnCard,
2057
+ {
2058
+ handleChange,
2059
+ learnMoreText,
2060
+ outOfStockText,
2061
+ product: product2,
2062
+ titleLevel: getTitleLevel(customTitleLevel, true)
2063
+ }
2064
+ ) }, product2.id)) }),
2065
+ /* @__PURE__ */ jsxs11("div", { className: RebuyProductAddOns_default.productAddOnsFooter, children: [
2066
+ /* @__PURE__ */ jsxs11("div", { className: RebuyProductAddOns_default.moneyContainer, children: [
2067
+ subtotalText,
2068
+ subtotalWithOutProduct && /* @__PURE__ */ jsx17(
2069
+ Money5,
2070
+ {
2071
+ data: subtotalWithOutProduct,
2072
+ withoutTrailingZeros: true
2073
+ }
2074
+ )
2075
+ ] }),
2076
+ includeMainProduct && /* @__PURE__ */ jsxs11("div", { className: RebuyProductAddOns_default.moneyContainer, children: [
2077
+ withProductText,
2078
+ subtotalWithProduct && /* @__PURE__ */ jsx17(
2079
+ Money5,
2080
+ {
2081
+ data: subtotalWithProduct,
2082
+ withoutTrailingZeros: true
2083
+ }
2084
+ )
2085
+ ] }),
2086
+ /* @__PURE__ */ jsx17("div", { className: RebuyProductAddOns_default.addCartBtnContainer, children: includeMainProduct ? /* @__PURE__ */ jsx17(
2087
+ AddToCartBtn,
2088
+ {
2089
+ addToCartBtnText,
2090
+ addToCartCallback,
2091
+ disabled: addedItems.length === 0,
2092
+ isHydrogenReact,
2093
+ moneyData: subtotalWithProduct,
2094
+ selectedVariants: addedItems.map(
2095
+ (item) => item.selectedVariant
2096
+ )
2097
+ }
2098
+ ) : /* @__PURE__ */ jsx17(
2099
+ AddToCartBtn,
2100
+ {
2101
+ addToCartBtnText,
2102
+ addToCartCallback,
2103
+ disabled: addedItems.length === 0,
2104
+ isHydrogenReact,
2105
+ moneyData: subtotalWithOutProduct,
2106
+ selectedVariants: addedItems.map(
2107
+ (item) => item.selectedVariant
2108
+ )
2109
+ }
2110
+ ) })
2111
+ ] })
2112
+ ] });
2113
+ };
2114
+
2115
+ // src/widgets/RebuyProductRecommendations/RebuyProductRecommendations.module.css
2116
+ var RebuyProductRecommendations_default = {
2117
+ container: "RebuyProductRecommendations_container",
2118
+ productGrid: "RebuyProductRecommendations_productGrid"
2119
+ };
2120
+
2121
+ // src/widgets/RebuyProductRecommendations/RebuyProductRecommendations.tsx
2122
+ import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
2123
+ var RebuyProductRecommendations = (props) => {
2124
+ const {
2125
+ addToCartBtnText = "Add to cart",
2126
+ addToCartCallback,
2127
+ customTitle = `These pair with ${props.product?.title}`,
2128
+ customTitleLevel = "h2",
2129
+ customTitleStyle,
2130
+ products = []
2131
+ } = props;
2132
+ if (products.length === 0) {
2133
+ console.log("RebuyProductRecommendations: No products found");
2134
+ return null;
2135
+ }
2136
+ return /* @__PURE__ */ jsxs12("section", { className: RebuyProductRecommendations_default.container, children: [
2137
+ /* @__PURE__ */ jsx18(
2138
+ Title,
2139
+ {
2140
+ level: getTitleLevel(customTitleLevel),
2141
+ style: customTitleStyle,
2142
+ text: customTitle
2143
+ }
2144
+ ),
2145
+ /* @__PURE__ */ jsx18("ul", { className: RebuyProductRecommendations_default.productGrid, children: products.map((product) => /* @__PURE__ */ jsx18("li", { className: RebuyProductRecommendations_default.productItem, children: /* @__PURE__ */ jsx18(
2146
+ ProductCard,
2147
+ {
2148
+ addToCartBtnText,
2149
+ addToCartCallback,
2150
+ isHydrogenReact: props.isHydrogenReact,
2151
+ product,
2152
+ productCardTitleLevel: getTitleLevel(
2153
+ customTitleLevel,
2154
+ true
2155
+ )
2156
+ }
2157
+ ) }, product.id)) })
2158
+ ] });
2159
+ };
2160
+ export {
2161
+ RebuyCompleteTheLook,
2162
+ RebuyDynamicBundleProducts,
2163
+ RebuyHydrogenContextProvider,
2164
+ RebuyHydrogenReactContextProvider,
2165
+ RebuyProductAddOns,
2166
+ RebuyProductRecommendations,
2167
+ RebuyWidgetContainer
2168
+ };
2169
+ //# sourceMappingURL=index.mjs.map