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

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 (95) hide show
  1. package/dist/components/AddToCartBtn/AddToCartBtn.d.ts.map +1 -1
  2. package/dist/components/AddToCartBtn/HydrogenAddToCartBtn.d.ts.map +1 -1
  3. package/dist/components/AddToCartBtn/HydrogenReactAddToCartBtn.d.ts.map +1 -1
  4. package/dist/components/ProductCard/ProductCard.d.ts.map +1 -1
  5. package/dist/components/ProductPrice/ProductPrice.d.ts +1 -1
  6. package/dist/components/ProductPrice/ProductPrice.d.ts.map +1 -1
  7. package/dist/components/VariantSelect/VariantSelect.d.ts +1 -1
  8. package/dist/components/VariantSelect/VariantSelect.d.ts.map +1 -1
  9. package/dist/hooks/titleLevel.d.ts.map +1 -1
  10. package/dist/index.css +88 -88
  11. package/dist/index.css.map +4 -4
  12. package/dist/index.js +187 -401
  13. package/dist/index.js.map +4 -4
  14. package/dist/index.mjs +187 -410
  15. package/dist/index.mjs.map +4 -4
  16. package/dist/providers/RebuyHydrogenContextProvider.d.ts +1 -1
  17. package/dist/providers/RebuyHydrogenContextProvider.d.ts.map +1 -1
  18. package/dist/providers/RebuyHydrogenReactContextProvider.d.ts.map +1 -1
  19. package/dist/providers/types.d.ts +1 -1
  20. package/dist/providers/types.d.ts.map +1 -1
  21. package/dist/types/rebuyCustom.d.ts.map +1 -1
  22. package/dist/types/shopify.d.ts.map +1 -1
  23. package/dist/types/widgets.d.ts +1 -1
  24. package/dist/types/widgets.d.ts.map +1 -1
  25. package/dist/utils/convertToRebuyProduct.d.ts.map +1 -1
  26. package/dist/utils/createContextParameters.d.ts.map +1 -1
  27. package/dist/utils/getEncodedAttributes.d.ts.map +1 -1
  28. package/dist/utils/getRebuyConfig.d.ts.map +1 -1
  29. package/dist/widgetContainer/RebuyWidgetContainer.d.ts +1 -1
  30. package/dist/widgetContainer/RebuyWidgetContainer.d.ts.map +1 -1
  31. package/dist/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.d.ts.map +1 -1
  32. package/dist/widgets/RebuyDynamicBundleProducts/BundleImages.d.ts.map +1 -1
  33. package/dist/widgets/RebuyDynamicBundleProducts/BundlePrice.d.ts.map +1 -1
  34. package/dist/widgets/RebuyDynamicBundleProducts/BundleSelection.d.ts +1 -1
  35. package/dist/widgets/RebuyDynamicBundleProducts/BundleSelection.d.ts.map +1 -1
  36. package/dist/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.d.ts.map +1 -1
  37. package/dist/widgets/RebuyDynamicBundleProducts/Select.d.ts.map +1 -1
  38. package/dist/widgets/RebuyProductAddOns/RebuyProductAddOnCard.d.ts.map +1 -1
  39. package/dist/widgets/RebuyProductAddOns/RebuyProductAddOns.d.ts.map +1 -1
  40. package/dist/widgets/RebuyProductAddOns/types.d.ts.map +1 -1
  41. package/dist/widgets/RebuyProductRecommendations/RebuyProductRecommendations.d.ts.map +1 -1
  42. package/package.json +66 -35
  43. package/src/components/AddToCartBtn/AddToCartBtn.tsx +0 -45
  44. package/src/components/AddToCartBtn/HydrogenAddToCartBtn.tsx +0 -43
  45. package/src/components/AddToCartBtn/HydrogenReactAddToCartBtn.tsx +0 -35
  46. package/src/components/AddToCartBtn/index.ts +0 -1
  47. package/src/components/AddToCartBtn/types.ts +0 -27
  48. package/src/components/ProductCard/ProductCard.tsx +0 -70
  49. package/src/components/ProductCard/index.ts +0 -1
  50. package/src/components/ProductCard/types.ts +0 -10
  51. package/src/components/ProductPrice/ProductPrice.tsx +0 -49
  52. package/src/components/ProductPrice/index.ts +0 -1
  53. package/src/components/Title/Title.tsx +0 -19
  54. package/src/components/Title/index.ts +0 -1
  55. package/src/components/Title/types.ts +0 -7
  56. package/src/components/VariantSelect/VariantSelect.tsx +0 -45
  57. package/src/components/VariantSelect/index.ts +0 -1
  58. package/src/components/VariantSelect/types.ts +0 -6
  59. package/src/context/RebuyContext.tsx +0 -9
  60. package/src/hooks/titleLevel.tsx +0 -42
  61. package/src/index.ts +0 -7
  62. package/src/providers/RebuyHydrogenContextProvider.tsx +0 -112
  63. package/src/providers/RebuyHydrogenReactContextProvider.tsx +0 -192
  64. package/src/providers/types.ts +0 -58
  65. package/src/queries/cart.queries.ts +0 -467
  66. package/src/types/common.ts +0 -8
  67. package/src/types/css.d.ts +0 -11
  68. package/src/types/env.d.ts +0 -12
  69. package/src/types/rebuy.d.ts +0 -31
  70. package/src/types/rebuyCustom.ts +0 -263
  71. package/src/types/rebuySmartCart.ts +0 -188
  72. package/src/types/shopify.ts +0 -142
  73. package/src/types/widgets.ts +0 -29
  74. package/src/utils/convertToRebuyProduct.tsx +0 -319
  75. package/src/utils/createContextParameters.ts +0 -142
  76. package/src/utils/getEncodedAttributes.ts +0 -11
  77. package/src/utils/getRebuyConfig.ts +0 -31
  78. package/src/widgetContainer/RebuyWidgetContainer.tsx +0 -183
  79. package/src/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.tsx +0 -50
  80. package/src/widgets/RebuyCompleteTheLook/index.ts +0 -1
  81. package/src/widgets/RebuyCompleteTheLook/types.ts +0 -5
  82. package/src/widgets/RebuyDynamicBundleProducts/BundleImages.tsx +0 -62
  83. package/src/widgets/RebuyDynamicBundleProducts/BundlePrice.tsx +0 -93
  84. package/src/widgets/RebuyDynamicBundleProducts/BundleSelection.tsx +0 -65
  85. package/src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.tsx +0 -118
  86. package/src/widgets/RebuyDynamicBundleProducts/Select.tsx +0 -41
  87. package/src/widgets/RebuyDynamicBundleProducts/index.ts +0 -1
  88. package/src/widgets/RebuyDynamicBundleProducts/types.ts +0 -23
  89. package/src/widgets/RebuyProductAddOns/RebuyProductAddOnCard.tsx +0 -66
  90. package/src/widgets/RebuyProductAddOns/RebuyProductAddOns.tsx +0 -218
  91. package/src/widgets/RebuyProductAddOns/index.ts +0 -1
  92. package/src/widgets/RebuyProductAddOns/types.ts +0 -24
  93. package/src/widgets/RebuyProductRecommendations/RebuyProductRecommendations.tsx +0 -50
  94. package/src/widgets/RebuyProductRecommendations/index.ts +0 -1
  95. package/src/widgets/RebuyProductRecommendations/types.ts +0 -5
@@ -1,319 +0,0 @@
1
- import type { RebuyProductVariant } from '~/types/rebuyCustom';
2
- import type { HydrogenProduct } from '~/types/shopify';
3
-
4
- export const convertToRebuyProduct = (
5
- isHydrogenReact: boolean,
6
- product?: HydrogenProduct
7
- ) => {
8
- const mainProductVariants: RebuyProductVariant[] = isHydrogenReact
9
- ? product?.variants?.nodes?.map((variant) => {
10
- return {
11
- ...variant,
12
- };
13
- }) || []
14
- : product?.adjacentVariants.map((variant) => {
15
- return {
16
- availableForSale: variant.availableForSale,
17
- compareAtPriceV2: {
18
- amount: variant.compareAtPrice?.amount || '',
19
- currencyCode:
20
- variant.compareAtPrice?.currencyCode || 'USD',
21
- },
22
- id: variant.id,
23
- image: {
24
- altText: variant.image?.altText || '',
25
- height: variant.image?.height || 100,
26
- id: variant.image?.id || '',
27
- url: variant.image?.url || '',
28
- width: variant.image?.width || 100,
29
- },
30
- priceV2: {
31
- amount: variant.price.amount || '',
32
- currencyCode: variant.price.currencyCode || 'USD',
33
- },
34
- product: {
35
- handle: product.handle,
36
- id: product.id,
37
- title: product.title,
38
- vendor: product.vendor,
39
- },
40
- selectedOptions: variant.selectedOptions,
41
- sku: variant.sku || '',
42
- title: variant.title || '',
43
- };
44
- }) || [];
45
-
46
- return isHydrogenReact
47
- ? {
48
- collections: {
49
- nodes:
50
- product?.collections.nodes.map((collection) => {
51
- return {
52
- handle: collection.handle,
53
- };
54
- }) || [],
55
- },
56
- compareAtPriceRange: {
57
- maxVariantCompareAtPrice: null,
58
- minVariantCompareAtPrice: null,
59
- },
60
- description: product?.description || '',
61
- descriptionHtml: product?.descriptionHtml || '',
62
- featuredImage: {
63
- altText: product?.featuredImage?.altText || '',
64
- height: product?.featuredImage?.height || 100,
65
- id: product?.featuredImage?.id || '',
66
- url: product?.featuredImage?.url || '',
67
- width: product?.featuredImage?.width || 100,
68
- },
69
- handle: product?.handle || '',
70
- id: product?.id || '',
71
- images: [
72
- { altText: '', height: 100, id: '', url: '', width: 100 },
73
- ],
74
- media: [],
75
- metafields: [],
76
- options: [],
77
- priceRange: product?.priceRange || {
78
- maxVariantPrice: { amount: '0', currencyCode: 'USD' },
79
- minVariantPrice: { amount: '0', currencyCode: 'USD' },
80
- },
81
- selected: true,
82
- selectedOptions:
83
- product?.selectedVariant?.selectedOptions?.reduce(
84
- (acc, option) => {
85
- return { ...acc, [option.name]: option.value };
86
- },
87
- {}
88
- ) || {},
89
- selectedSellingPlan: {},
90
- selectedSellingPlanAllocation: {},
91
- selectedVariant: {
92
- availableForSale:
93
- product?.selectedVariant?.availableForSale || false,
94
- compareAtPriceV2: {
95
- amount:
96
- product?.selectedVariant?.compareAtPrice?.amount ||
97
- '',
98
- currencyCode:
99
- product?.selectedVariant?.compareAtPrice
100
- ?.currencyCode || 'USD',
101
- },
102
- id: product?.selectedVariant?.id || '',
103
- image: {
104
- altText: product?.selectedVariant?.image?.altText || '',
105
- height: product?.selectedVariant?.image?.height || 100,
106
- id: product?.selectedVariant?.image?.id || '',
107
- url: product?.selectedVariant?.image?.url || '',
108
- width: product?.selectedVariant?.image?.width || 100,
109
- },
110
- priceV2: {
111
- amount: product?.selectedVariant?.price.amount || '',
112
- currencyCode:
113
- product?.selectedVariant?.price.currencyCode || 'USD',
114
- },
115
- product: {
116
- handle: product?.handle || '',
117
- id: product?.id || '',
118
- title: product?.title || '',
119
- vendor: product?.vendor || '',
120
- },
121
- selectedOptions:
122
- product?.selectedVariant?.selectedOptions || [],
123
- sku: product?.selectedVariant?.sku || '',
124
- title: product?.selectedVariant?.title || '',
125
- },
126
- sellingPlanGroups: [],
127
- seo: {
128
- description: product?.seo?.description || '',
129
- title: product?.seo?.title || '',
130
- },
131
- title: product?.title || '',
132
- variants: {
133
- nodes: mainProductVariants,
134
- },
135
- vendor: product?.vendor || '',
136
- }
137
- : {
138
- collections: {
139
- nodes: [],
140
- },
141
- compareAtPriceRange: {
142
- maxVariantCompareAtPrice: null,
143
- minVariantCompareAtPrice: null,
144
- },
145
- description: product?.description || '',
146
- descriptionHtml: product?.descriptionHtml || '',
147
- featuredImage: {
148
- altText:
149
- product?.selectedOrFirstAvailableVariant?.image
150
- ?.altText || '',
151
- height:
152
- product?.selectedOrFirstAvailableVariant?.image?.height ||
153
- 100,
154
- id: product?.selectedOrFirstAvailableVariant?.image?.id || '',
155
- url:
156
- product?.selectedOrFirstAvailableVariant?.image?.url ||
157
- '',
158
- width:
159
- product?.selectedOrFirstAvailableVariant?.image?.width ||
160
- 100,
161
- },
162
- handle: product?.handle || '',
163
- id: product?.id || '',
164
- images: [
165
- {
166
- altText:
167
- product?.selectedOrFirstAvailableVariant?.image
168
- ?.altText || '',
169
- height:
170
- product?.selectedOrFirstAvailableVariant?.image
171
- ?.height || 100,
172
- id:
173
- product?.selectedOrFirstAvailableVariant?.image?.id ||
174
- '',
175
- url:
176
- product?.selectedOrFirstAvailableVariant?.image
177
- ?.url || '',
178
- width:
179
- product?.selectedOrFirstAvailableVariant?.image
180
- ?.width || 100,
181
- },
182
- ],
183
- media: [],
184
- metafields: [],
185
- options: [],
186
- priceRange: product?.priceRange || {
187
- maxVariantPrice: { amount: '0', currencyCode: 'USD' },
188
- minVariantPrice: { amount: '0', currencyCode: 'USD' },
189
- },
190
- selected: true,
191
- selectedOptions:
192
- product?.selectedOrFirstAvailableVariant?.selectedOptions?.reduce(
193
- (acc, option) => {
194
- return { ...acc, [option.name]: option.value };
195
- },
196
- {}
197
- ) || {},
198
- selectedSellingPlan: {},
199
- selectedSellingPlanAllocation: {},
200
- selectedVariant: {
201
- availableForSale:
202
- product?.selectedOrFirstAvailableVariant
203
- ?.availableForSale || false,
204
- compareAtPriceV2: {
205
- amount:
206
- product?.selectedOrFirstAvailableVariant
207
- ?.compareAtPrice?.amount || '',
208
- currencyCode:
209
- product?.selectedOrFirstAvailableVariant
210
- ?.compareAtPrice?.currencyCode || 'USD',
211
- },
212
- id: product?.selectedOrFirstAvailableVariant?.id || '',
213
- image: {
214
- altText:
215
- product?.selectedOrFirstAvailableVariant?.image
216
- ?.altText || '',
217
- height:
218
- product?.selectedOrFirstAvailableVariant?.image
219
- ?.height || 100,
220
- id:
221
- product?.selectedOrFirstAvailableVariant?.image?.id ||
222
- '',
223
- url:
224
- product?.selectedOrFirstAvailableVariant?.image
225
- ?.url || '',
226
- width:
227
- product?.selectedOrFirstAvailableVariant?.image
228
- ?.width || 100,
229
- },
230
- priceV2: {
231
- amount:
232
- product?.selectedOrFirstAvailableVariant?.price
233
- .amount || '',
234
- currencyCode:
235
- product?.selectedOrFirstAvailableVariant?.price
236
- .currencyCode || 'USD',
237
- },
238
- product: {
239
- handle: product?.handle || '',
240
- id: product?.id || '',
241
- title: product?.title || '',
242
- vendor: product?.vendor || '',
243
- },
244
- selectedOptions:
245
- product?.selectedOrFirstAvailableVariant
246
- ?.selectedOptions || [],
247
- sku: product?.selectedOrFirstAvailableVariant?.sku || '',
248
- title: product?.selectedOrFirstAvailableVariant?.title || '',
249
- },
250
- sellingPlanGroups: [],
251
- seo: {
252
- description: null,
253
- title: null,
254
- },
255
- title: product?.title || '',
256
- variants: {
257
- nodes: [
258
- {
259
- availableForSale:
260
- product?.selectedOrFirstAvailableVariant
261
- ?.availableForSale || false,
262
- compareAtPriceV2: {
263
- amount:
264
- product?.selectedOrFirstAvailableVariant
265
- ?.compareAtPrice?.amount || '',
266
- currencyCode:
267
- product?.selectedOrFirstAvailableVariant
268
- ?.compareAtPrice?.currencyCode || 'USD',
269
- },
270
- id:
271
- product?.selectedOrFirstAvailableVariant?.id ||
272
- '',
273
- image: {
274
- altText:
275
- product?.selectedOrFirstAvailableVariant
276
- ?.image?.altText || '',
277
- height:
278
- product?.selectedOrFirstAvailableVariant
279
- ?.image?.height || 100,
280
- id:
281
- product?.selectedOrFirstAvailableVariant
282
- ?.image?.id || '',
283
- url:
284
- product?.selectedOrFirstAvailableVariant
285
- ?.image?.url || '',
286
- width:
287
- product?.selectedOrFirstAvailableVariant
288
- ?.image?.width || 100,
289
- },
290
- priceV2: {
291
- amount:
292
- product?.selectedOrFirstAvailableVariant
293
- ?.price.amount || '',
294
- currencyCode:
295
- product?.selectedOrFirstAvailableVariant
296
- ?.price.currencyCode || 'USD',
297
- },
298
- product: {
299
- handle: product?.handle || '',
300
- id: product?.id || '',
301
- title: product?.title || '',
302
- vendor: product?.vendor || '',
303
- },
304
- selectedOptions:
305
- product?.selectedOrFirstAvailableVariant
306
- ?.selectedOptions || [],
307
- sku:
308
- product?.selectedOrFirstAvailableVariant?.sku ||
309
- '',
310
- title:
311
- product?.selectedOrFirstAvailableVariant?.title ||
312
- '',
313
- },
314
- ...mainProductVariants,
315
- ],
316
- },
317
- vendor: product?.vendor || '',
318
- };
319
- };
@@ -1,142 +0,0 @@
1
- import * as Utilities from '@rebuy/rebuy/utilities';
2
-
3
- import type { Attribute } from '@shopify/hydrogen-react/storefront-api-types';
4
- import type {
5
- CartContext,
6
- CartItem,
7
- ContextParameters,
8
- RebuyContextProps,
9
- } from '~/types/rebuyCustom';
10
-
11
- import { getEncodedAttributes } from '~/utils/getEncodedAttributes';
12
-
13
- export const createContextParameters = ({
14
- cacheKey,
15
- cartAttributes,
16
- cartId,
17
- cartLines,
18
- cartLinesLength,
19
- cartNote,
20
- cartSubtotal,
21
- cartTotalQuantity,
22
- isHydrogenReact,
23
- queryObject,
24
- windowUrl,
25
- }: RebuyContextProps) => {
26
- const contextParameters: ContextParameters = {
27
- cache_key: cacheKey,
28
- cart_count: 0,
29
- cart_item_count: 0,
30
- cart_line_count: 0,
31
- cart_subtotal: 0,
32
- isHydrogenReact,
33
- time: '',
34
- url: windowUrl,
35
- };
36
-
37
- const cartContext: CartContext = {
38
- attributes: '',
39
- item_count: 0,
40
- items: [],
41
- line_count: 0,
42
- note: '',
43
- subtotal: 0,
44
- token: '',
45
- };
46
- if (Object.prototype.hasOwnProperty.call(queryObject, 'time')) {
47
- contextParameters.time = queryObject.time;
48
- }
49
-
50
- // Set Cart: token
51
- if (cartId) {
52
- cartContext.token = Utilities.getIdFromGraphUrl(cartId, 'Cart');
53
- contextParameters.cart_token = Utilities.getIdFromGraphUrl(
54
- cartId,
55
- 'Cart'
56
- );
57
- }
58
-
59
- // Set Cart: subtotal
60
- if (cartSubtotal) {
61
- cartContext.subtotal = Utilities.amountToCents(
62
- parseFloat(cartSubtotal)
63
- );
64
- contextParameters.cart_subtotal = Utilities.amountToCents(
65
- parseFloat(cartSubtotal)
66
- );
67
- }
68
-
69
- // Set Cart: line count
70
- if (cartLinesLength) {
71
- const totalLines = cartLinesLength;
72
- cartContext.line_count = totalLines;
73
- contextParameters.cart_count = totalLines;
74
- contextParameters.cart_line_count = totalLines;
75
- }
76
-
77
- // Set Cart: item count
78
- if (cartTotalQuantity) {
79
- cartContext.item_count = cartTotalQuantity;
80
- contextParameters.cart_item_count = cartTotalQuantity;
81
- }
82
-
83
- if (cartLines) {
84
- cartContext.items = [];
85
-
86
- for (const cartItem of cartLines) {
87
- const item: CartItem = {
88
- attributes: [],
89
- product_id: '',
90
- properties: '',
91
- quantity: cartItem?.quantity,
92
- variant_id: '',
93
- };
94
-
95
- if (cartItem?.merchandise?.product?.id) {
96
- item.product_id = Utilities.getIdFromGraphUrl(
97
- cartItem.merchandise.product.id,
98
- 'Product'
99
- );
100
- }
101
-
102
- if (cartItem?.merchandise?.id) {
103
- item.variant_id = Utilities.getIdFromGraphUrl(
104
- cartItem.merchandise.id,
105
- 'ProductVariant'
106
- );
107
- }
108
-
109
- if (cartItem?.attributes?.length) {
110
- const validAttributes = cartItem.attributes.filter(
111
- (attr: Attribute) =>
112
- attr !== undefined &&
113
- typeof attr.key === 'string' &&
114
- typeof attr.value === 'string'
115
- );
116
- item.properties = getEncodedAttributes(validAttributes);
117
- }
118
- cartContext.items.push(item);
119
- }
120
- }
121
-
122
- // Set Cart: attributes
123
- if (cartAttributes) {
124
- const validAttributes = cartAttributes.filter(
125
- (attr): attr is Attribute =>
126
- attr !== undefined &&
127
- typeof attr.key === 'string' &&
128
- typeof attr.value === 'string'
129
- );
130
- cartContext.attributes = getEncodedAttributes(validAttributes);
131
- }
132
-
133
- // Set Cart: notes
134
- if (cartNote) {
135
- cartContext.note = cartNote;
136
- }
137
-
138
- // Set cart
139
- contextParameters.cart = cartContext;
140
-
141
- return contextParameters;
142
- };
@@ -1,11 +0,0 @@
1
- import type { Attribute } from '@shopify/hydrogen-react/storefront-api-types';
2
-
3
- export const getEncodedAttributes = (attributes: Attribute[]) =>
4
- encodeURIComponent(
5
- JSON.stringify(
6
- attributes.reduce(
7
- (merged, { key, value }) => ({ ...merged, [key]: value }),
8
- {}
9
- )
10
- )
11
- );
@@ -1,31 +0,0 @@
1
- import { RebuyClient } from '@rebuy/rebuy';
2
- import type { RebuyConfig, RebuyResponse } from '~/types/rebuyCustom';
3
-
4
- export const getRebuyConfig = async (
5
- rebuyKey: string,
6
- storeDomain: string
7
- ): Promise<RebuyConfig> => {
8
- try {
9
- const request = {
10
- parameters: { shop: storeDomain },
11
- url: `/api/v1/user/config`,
12
- };
13
-
14
- const { data: rebuy, ...response } = (await new RebuyClient(
15
- rebuyKey
16
- ).getShieldedAsset(request.url, request.parameters)) as RebuyResponse;
17
-
18
- if (!rebuy?.shop) {
19
- throw new Error(
20
- 'Rebuy configuration is not properly set up - missing shop',
21
- { cause: response }
22
- );
23
- }
24
- return rebuy;
25
- } catch (error: unknown) {
26
- const err = error as Error;
27
- console.warn('Error fetching Rebuy shop config');
28
- console.error(err, err.cause);
29
- throw err;
30
- }
31
- };
@@ -1,183 +0,0 @@
1
- import { RebuyClient } from '@rebuy/rebuy';
2
- import * as Utilities from '@rebuy/rebuy/utilities';
3
- import { flattenConnection } from '@shopify/hydrogen';
4
- import React, {
5
- ComponentType,
6
- useContext,
7
- useEffect,
8
- useMemo,
9
- useState,
10
- } from 'react';
11
-
12
- import type {
13
- RebuyProduct,
14
- RebuyWidgetContainerProps,
15
- RebuyWidgetMetadata,
16
- } from '~/types/rebuyCustom';
17
-
18
- import { RebuyContext } from '~/context/RebuyContext';
19
-
20
- type RebuyWidgetContainerComponent = {
21
- (props: RebuyWidgetContainerProps): JSX.Element;
22
- } & ComponentType<RebuyWidgetContainerProps>;
23
-
24
- const RebuyWidgetContainerBase = ({
25
- children,
26
- ...props
27
- }: RebuyWidgetContainerProps) => {
28
- const {
29
- collection,
30
- collectionId,
31
- dataSource,
32
- limit,
33
- options,
34
- product,
35
- productId,
36
- variant,
37
- variantId,
38
- } = props;
39
-
40
- const contextParameters = useContext(RebuyContext);
41
-
42
- const [Rebuy, setRebuy] = useState<RebuyClient | null>(null);
43
- const [initialized, setInitialized] = useState(false);
44
- const shopifyProductId = product?.id ?? productId ?? null;
45
- const shopifyVariantId = variant?.id ?? variantId ?? null;
46
- const shopifyCollectionId = collection?.id ?? collectionId ?? null;
47
- const [products, setProducts] = useState<RebuyProduct[]>([]);
48
- const [metadata, setMetadata] = useState<RebuyWidgetMetadata>();
49
-
50
- const REBUY_API_KEY = import.meta.env.PUBLIC_REBUY_API_KEY;
51
-
52
- // Initialize Rebuy API client
53
- useEffect(() => {
54
- if (!Rebuy) {
55
- const client = new RebuyClient(REBUY_API_KEY);
56
- client.setContextParameters(
57
- contextParameters as Record<string, unknown> // TODO: fix this type when @rebuy/rebuy is moved to typescript
58
- );
59
-
60
- if (options) {
61
- client.setDefaultParameters(options as Record<string, unknown>); // TODO: fix this type when @rebuy/rebuy is moved to typescript
62
- }
63
-
64
- setRebuy(client);
65
- setInitialized(true);
66
- }
67
- }, [REBUY_API_KEY, Rebuy, contextParameters, options]);
68
-
69
- useEffect(() => {
70
- if (!Rebuy) return;
71
-
72
- Rebuy.setContextParameters(
73
- contextParameters as Record<string, unknown> // TODO: fix this type when @rebuy/rebuy is moved to typescript
74
- );
75
- }, [Rebuy, contextParameters]);
76
-
77
- // Memoize request object on prop changes (e.g. product)
78
- const request = useMemo(() => {
79
- const request = {
80
- endpoint: dataSource || '/api/v1/products/recommended',
81
- params: {} as Record<string, string | number>, // Keeping this object generic to allow for custom endpoints
82
- };
83
-
84
- if (shopifyProductId) {
85
- request.params.shopify_product_ids = Utilities.getIdFromGraphUrl(
86
- shopifyProductId,
87
- 'Product'
88
- );
89
- }
90
-
91
- if (shopifyProductId) {
92
- request.params.shopify_product_ids = Utilities.getIdFromGraphUrl(
93
- shopifyProductId,
94
- 'Product'
95
- );
96
- }
97
-
98
- if (shopifyVariantId) {
99
- request.params.shopify_variant_ids = Utilities.getIdFromGraphUrl(
100
- shopifyVariantId,
101
- 'ProductVariant'
102
- );
103
- }
104
-
105
- if (shopifyCollectionId) {
106
- request.params.shopify_collection_ids = Utilities.getIdFromGraphUrl(
107
- shopifyCollectionId,
108
- 'Collection'
109
- );
110
- }
111
-
112
- if (limit) {
113
- request.params.limit = limit;
114
- }
115
-
116
- return request;
117
- }, [
118
- dataSource,
119
- shopifyProductId,
120
- shopifyVariantId,
121
- shopifyCollectionId,
122
- limit,
123
- ]);
124
-
125
- // Update product recommendations on cart or request change
126
- useEffect(() => {
127
- let isMounted = true;
128
- if (!Rebuy || !initialized) return;
129
-
130
- const fetchData = async () => {
131
- const { data, metadata } = (await Rebuy.getStorefrontData(
132
- request.endpoint,
133
- request.params
134
- )) as {
135
- data: RebuyProduct[];
136
- metadata: RebuyWidgetMetadata;
137
- };
138
-
139
- // Set state only if mounted
140
- if (isMounted) {
141
- setProducts(
142
- Array.isArray(data)
143
- ? data.map((product) => ({
144
- ...product,
145
- variants: {
146
- nodes: product.variants
147
- ? flattenConnection(product.variants)
148
- : [],
149
- },
150
- }))
151
- : []
152
- );
153
- setMetadata(metadata);
154
- }
155
- };
156
-
157
- fetchData();
158
- // Unmounted?
159
- return () => {
160
- isMounted = false;
161
- };
162
- }, [Rebuy, initialized, request]);
163
-
164
- const childrenWithProps = (props: RebuyWidgetContainerProps) =>
165
- React.Children.map(children, (child) =>
166
- React.isValidElement(child)
167
- ? React.cloneElement(child, props)
168
- : child
169
- );
170
-
171
- const childProps = {
172
- ...props,
173
- isHydrogenReact: contextParameters?.contextParameters?.isHydrogenReact,
174
- key: product?.id,
175
- metadata,
176
- products,
177
- };
178
-
179
- return childrenWithProps(childProps);
180
- };
181
-
182
- export const RebuyWidgetContainer =
183
- RebuyWidgetContainerBase as RebuyWidgetContainerComponent;