@rebuy/rebuy-hydrogen 3.0.0-beta.10 → 3.0.0-beta.11
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.
- package/README.md +196 -16
- package/dist/assets/Close.d.ts +2 -0
- package/dist/assets/Close.d.ts.map +1 -0
- package/dist/components/AddToCartBtn/AddToCartBtn.d.ts +1 -1
- package/dist/components/AddToCartBtn/AddToCartBtn.d.ts.map +1 -1
- package/dist/components/AddToCartBtn/HydrogenAddToCartBtn.d.ts.map +1 -1
- package/dist/components/AddToCartBtn/types.d.ts +1 -0
- package/dist/components/AddToCartBtn/types.d.ts.map +1 -1
- package/dist/components/ProductCard/ProductCard.d.ts +1 -1
- package/dist/components/ProductCard/ProductCard.d.ts.map +1 -1
- package/dist/components/ProductCard/defaultSettings.d.ts +3 -0
- package/dist/components/ProductCard/defaultSettings.d.ts.map +1 -0
- package/dist/components/ProductCard/index.d.ts +1 -0
- package/dist/components/ProductCard/index.d.ts.map +1 -1
- package/dist/components/ProductCard/types.d.ts +42 -0
- package/dist/components/ProductCard/types.d.ts.map +1 -1
- package/dist/components/ProductCarousel/ProductCarousel.d.ts +16 -0
- package/dist/components/ProductCarousel/ProductCarousel.d.ts.map +1 -0
- package/dist/components/ProductCarousel/index.d.ts +2 -0
- package/dist/components/ProductCarousel/index.d.ts.map +1 -0
- package/dist/components/ProductPrice/ProductPrice.d.ts +2 -4
- package/dist/components/ProductPrice/ProductPrice.d.ts.map +1 -1
- package/dist/components/ProductPrice/types.d.ts +23 -0
- package/dist/components/ProductPrice/types.d.ts.map +1 -0
- package/dist/components/QuantityInput/QuantityInput.d.ts +3 -0
- package/dist/components/QuantityInput/QuantityInput.d.ts.map +1 -0
- package/dist/components/QuantityInput/index.d.ts +3 -0
- package/dist/components/QuantityInput/index.d.ts.map +1 -0
- package/dist/components/QuantityInput/types.d.ts +7 -0
- package/dist/components/QuantityInput/types.d.ts.map +1 -0
- package/dist/components/Timer/Timer.d.ts +3 -0
- package/dist/components/Timer/Timer.d.ts.map +1 -0
- package/dist/components/Timer/index.d.ts +3 -0
- package/dist/components/Timer/index.d.ts.map +1 -0
- package/dist/components/Timer/types.d.ts +16 -0
- package/dist/components/Timer/types.d.ts.map +1 -0
- package/dist/components/Title/Title.d.ts +1 -1
- package/dist/components/Title/Title.d.ts.map +1 -1
- package/dist/components/Title/types.d.ts +1 -0
- package/dist/components/Title/types.d.ts.map +1 -1
- package/dist/components/VariantSelect/VariantSelect.d.ts +1 -1
- package/dist/components/VariantSelect/VariantSelect.d.ts.map +1 -1
- package/dist/components/VariantSelect/types.d.ts +2 -0
- package/dist/components/VariantSelect/types.d.ts.map +1 -1
- package/dist/constants/api.d.ts +2 -0
- package/dist/constants/api.d.ts.map +1 -0
- package/dist/context/RebuyConfigContext.d.ts +21 -0
- package/dist/context/RebuyConfigContext.d.ts.map +1 -0
- package/dist/hooks/useBreakpoint.d.ts +5 -0
- package/dist/hooks/useBreakpoint.d.ts.map +1 -0
- package/dist/hooks/usePopupTrigger.d.ts +3 -0
- package/dist/hooks/usePopupTrigger.d.ts.map +1 -0
- package/dist/hooks/useRebuyTheme.d.ts +21 -0
- package/dist/hooks/useRebuyTheme.d.ts.map +1 -0
- package/dist/index.css +588 -31
- package/dist/index.css.map +4 -4
- package/dist/index.d.ts +6 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1669 -425
- package/dist/index.js.map +4 -4
- package/dist/index.mjs +1656 -413
- package/dist/index.mjs.map +4 -4
- package/dist/providers/RebuyHydrogenContextProvider.d.ts +1 -1
- package/dist/providers/RebuyHydrogenContextProvider.d.ts.map +1 -1
- package/dist/providers/RebuyHydrogenReactContextProvider.d.ts +6 -1
- package/dist/providers/RebuyHydrogenReactContextProvider.d.ts.map +1 -1
- package/dist/providers/types.d.ts +21 -4
- package/dist/providers/types.d.ts.map +1 -1
- package/dist/rebuy-rebuy-hydrogen-3.0.0-beta.11.tgz +0 -0
- package/dist/types/rebuyCustom.d.ts +52 -17
- package/dist/types/rebuyCustom.d.ts.map +1 -1
- package/dist/types/widgets.d.ts +5 -4
- package/dist/types/widgets.d.ts.map +1 -1
- package/dist/utils/createContextParameters.d.ts +1 -1
- package/dist/utils/createContextParameters.d.ts.map +1 -1
- package/dist/utils/csp.d.ts +16 -0
- package/dist/utils/csp.d.ts.map +1 -0
- package/dist/utils/theme.d.ts +20 -0
- package/dist/utils/theme.d.ts.map +1 -0
- package/dist/widgetContainer/RebuyWidgetContainer.d.ts.map +1 -1
- package/dist/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.d.ts.map +1 -1
- package/dist/widgets/RebuyDynamicBundleProducts/BundleImages.d.ts.map +1 -1
- package/dist/widgets/RebuyDynamicBundleProducts/BundleSelection.d.ts.map +1 -1
- package/dist/widgets/RebuyDynamicBundleProducts/Select.d.ts.map +1 -1
- package/dist/widgets/RebuyWidget/RebuyWidget.d.ts +3 -0
- package/dist/widgets/RebuyWidget/RebuyWidget.d.ts.map +1 -0
- package/dist/widgets/RebuyWidget/WidgetContent.d.ts +3 -0
- package/dist/widgets/RebuyWidget/WidgetContent.d.ts.map +1 -0
- package/dist/widgets/RebuyWidget/index.d.ts +2 -0
- package/dist/widgets/RebuyWidget/index.d.ts.map +1 -0
- package/dist/widgets/RebuyWidget/types.d.ts +335 -0
- package/dist/widgets/RebuyWidget/types.d.ts.map +1 -0
- package/package.json +3 -2
package/dist/index.mjs
CHANGED
@@ -1,11 +1,105 @@
|
|
1
1
|
// src/providers/RebuyHydrogenContextProvider.tsx
|
2
2
|
import * as Utilities2 from "@rebuy/rebuy/utilities";
|
3
3
|
import { Await, useLocation } from "@remix-run/react";
|
4
|
-
import {
|
4
|
+
import { useMemo as useMemo2 } from "react";
|
5
|
+
|
6
|
+
// src/context/RebuyConfigContext.tsx
|
7
|
+
import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
|
8
|
+
|
9
|
+
// src/utils/getRebuyConfig.ts
|
10
|
+
import { RebuyClient } from "@rebuy/rebuy";
|
11
|
+
var getRebuyConfig = async (storeDomain) => {
|
12
|
+
try {
|
13
|
+
const request = {
|
14
|
+
parameters: { shop: storeDomain },
|
15
|
+
url: `/api/v1/user/config`
|
16
|
+
};
|
17
|
+
const { data: rebuy, ...response } = await new RebuyClient(void 0, void 0, storeDomain).getShieldedAsset(
|
18
|
+
request.url,
|
19
|
+
request.parameters
|
20
|
+
);
|
21
|
+
if (!rebuy?.shop) {
|
22
|
+
throw new Error("Rebuy configuration is not properly set up - missing shop", { cause: response });
|
23
|
+
}
|
24
|
+
return rebuy;
|
25
|
+
} catch (error) {
|
26
|
+
const err = error;
|
27
|
+
console.warn("Error fetching Rebuy shop config");
|
28
|
+
console.error(err, err.cause);
|
29
|
+
throw err;
|
30
|
+
}
|
31
|
+
};
|
32
|
+
|
33
|
+
// src/context/RebuyConfigContext.tsx
|
34
|
+
import { jsx } from "react/jsx-runtime";
|
35
|
+
var RebuyConfigContext = createContext(void 0);
|
36
|
+
var RebuyConfigProvider = ({ children, initialShopDomain, overrideApiKey }) => {
|
37
|
+
const [rebuyConfig, setRebuyConfig] = useState(null);
|
38
|
+
const [apiKey, setApiKey] = useState(overrideApiKey || null);
|
39
|
+
const [loadingStatus, setLoadingStatus] = useState("idle");
|
40
|
+
const [fetchError, setFetchError] = useState(null);
|
41
|
+
const [currentShopDomain, setCurrentShopDomain] = useState(initialShopDomain || null);
|
42
|
+
const isMounted = useRef(true);
|
43
|
+
const fetchRebuyConfig = async (domainToFetch) => {
|
44
|
+
if (!domainToFetch) {
|
45
|
+
console.warn("[RebuyConfigProvider] No shop domain provided to fetchRebuyConfig.");
|
46
|
+
setLoadingStatus("error");
|
47
|
+
setFetchError("Shop domain is required to fetch Rebuy config.");
|
48
|
+
return;
|
49
|
+
}
|
50
|
+
setCurrentShopDomain(domainToFetch);
|
51
|
+
setLoadingStatus("loading");
|
52
|
+
setFetchError(null);
|
53
|
+
try {
|
54
|
+
const config = await getRebuyConfig(domainToFetch);
|
55
|
+
if (isMounted.current) {
|
56
|
+
setRebuyConfig(config);
|
57
|
+
setApiKey(overrideApiKey || config?.shop?.api_key || null);
|
58
|
+
setLoadingStatus("success");
|
59
|
+
}
|
60
|
+
} catch (error) {
|
61
|
+
const errorMessage = error instanceof Error ? error.message : String(error);
|
62
|
+
console.error("[RebuyConfigProvider] Error fetching Rebuy config:", errorMessage, error);
|
63
|
+
if (isMounted.current) {
|
64
|
+
setFetchError(error instanceof Error ? error : errorMessage);
|
65
|
+
setLoadingStatus("error");
|
66
|
+
setRebuyConfig(null);
|
67
|
+
}
|
68
|
+
}
|
69
|
+
};
|
70
|
+
useEffect(() => {
|
71
|
+
isMounted.current = true;
|
72
|
+
if (initialShopDomain && loadingStatus === "idle") {
|
73
|
+
fetchRebuyConfig(initialShopDomain);
|
74
|
+
}
|
75
|
+
return () => {
|
76
|
+
isMounted.current = false;
|
77
|
+
};
|
78
|
+
}, [initialShopDomain]);
|
79
|
+
const contextValue = useMemo(
|
80
|
+
() => ({
|
81
|
+
apiKey,
|
82
|
+
fetchError,
|
83
|
+
fetchRebuyConfig,
|
84
|
+
loadingStatus,
|
85
|
+
rebuyConfig,
|
86
|
+
shopDomain: currentShopDomain
|
87
|
+
}),
|
88
|
+
[rebuyConfig, apiKey, loadingStatus, fetchError, currentShopDomain]
|
89
|
+
);
|
90
|
+
return /* @__PURE__ */ jsx(RebuyConfigContext.Provider, { value: contextValue, children });
|
91
|
+
};
|
92
|
+
var useRebuyConfig = () => {
|
93
|
+
const context = useContext(RebuyConfigContext);
|
94
|
+
if (context === void 0) {
|
95
|
+
throw new Error("useRebuyConfig must be used within a RebuyConfigProvider");
|
96
|
+
}
|
97
|
+
return context;
|
98
|
+
};
|
5
99
|
|
6
100
|
// src/context/RebuyContext.tsx
|
7
|
-
import { createContext } from "react";
|
8
|
-
var RebuyContext =
|
101
|
+
import { createContext as createContext2 } from "react";
|
102
|
+
var RebuyContext = createContext2(null);
|
9
103
|
|
10
104
|
// src/utils/createContextParameters.ts
|
11
105
|
import * as Utilities from "@rebuy/rebuy/utilities";
|
@@ -16,195 +110,245 @@ var getEncodedAttributes = (attributes) => encodeURIComponent(
|
|
16
110
|
);
|
17
111
|
|
18
112
|
// src/utils/createContextParameters.ts
|
113
|
+
var defaultMoney = (currencyCode = "USD") => ({
|
114
|
+
__typename: "MoneyV2",
|
115
|
+
amount: "0.0",
|
116
|
+
currencyCode
|
117
|
+
});
|
118
|
+
var defaultPageInfo = () => ({
|
119
|
+
__typename: "PageInfo",
|
120
|
+
endCursor: null,
|
121
|
+
hasNextPage: false,
|
122
|
+
hasPreviousPage: false,
|
123
|
+
startCursor: null
|
124
|
+
});
|
125
|
+
var defaultBuyerIdentity = () => ({
|
126
|
+
__typename: "CartBuyerIdentity",
|
127
|
+
countryCode: null,
|
128
|
+
customer: null,
|
129
|
+
deliveryAddressPreferences: [],
|
130
|
+
email: null,
|
131
|
+
phone: null
|
132
|
+
// preferences and purchasingCompany are not on the official type
|
133
|
+
});
|
19
134
|
var createContextParameters = ({
|
20
135
|
cacheKey,
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
136
|
+
/* Legacy props */
|
137
|
+
cartAttributes: legacyCartAttributes,
|
138
|
+
cartCost: legacyCartCost,
|
139
|
+
cartId: legacyCartId,
|
140
|
+
cartLines: legacyCartLines,
|
141
|
+
cartLinesLength: legacyCartLinesLength,
|
142
|
+
cartNote: legacyCartNote,
|
143
|
+
cartSubtotal: legacyCartSubtotal,
|
144
|
+
cartTotalQuantity: legacyCartTotalQuantity,
|
145
|
+
checkoutUrl: legacyCheckoutUrl,
|
146
|
+
discountCodes: legacyDiscountCodes,
|
147
|
+
/* Modern props */
|
148
|
+
hydrogenReactCartActions,
|
149
|
+
hydrogenReactCartError,
|
150
|
+
hydrogenReactCartStatus,
|
28
151
|
isHydrogenReact,
|
152
|
+
/* H-React specific */
|
29
153
|
queryObject,
|
154
|
+
sourceHydrogenCart,
|
30
155
|
windowUrl
|
31
156
|
}) => {
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
157
|
+
let solidifiedHydrogenCart = null;
|
158
|
+
const sourceCartCurrency = sourceHydrogenCart?.cost?.totalAmount?.currencyCode ?? "USD";
|
159
|
+
if (sourceHydrogenCart && sourceHydrogenCart.id) {
|
160
|
+
const builtCart = {
|
161
|
+
__typename: "Cart",
|
162
|
+
appliedGiftCards: sourceHydrogenCart.appliedGiftCards ?? [],
|
163
|
+
attributes: sourceHydrogenCart.attributes ?? [],
|
164
|
+
buyerIdentity: sourceHydrogenCart.buyerIdentity ?? defaultBuyerIdentity(),
|
165
|
+
checkoutUrl: sourceHydrogenCart.checkoutUrl ?? "",
|
166
|
+
cost: sourceHydrogenCart.cost ?? {
|
167
|
+
__typename: "CartCost",
|
168
|
+
checkoutChargeAmount: defaultMoney(sourceCartCurrency),
|
169
|
+
subtotalAmount: defaultMoney(sourceCartCurrency),
|
170
|
+
subtotalAmountEstimated: false,
|
171
|
+
totalAmount: defaultMoney(sourceCartCurrency),
|
172
|
+
totalAmountEstimated: false,
|
173
|
+
totalDutyAmount: null,
|
174
|
+
totalDutyAmountEstimated: false,
|
175
|
+
totalTaxAmount: null,
|
176
|
+
totalTaxAmountEstimated: false
|
177
|
+
},
|
178
|
+
createdAt: sourceHydrogenCart.createdAt ?? (/* @__PURE__ */ new Date()).toISOString(),
|
179
|
+
deliveryGroups: sourceHydrogenCart.deliveryGroups ?? {
|
180
|
+
__typename: "CartDeliveryGroupConnection",
|
181
|
+
edges: [],
|
182
|
+
nodes: [],
|
183
|
+
pageInfo: defaultPageInfo()
|
184
|
+
},
|
185
|
+
discountAllocations: sourceHydrogenCart.discountAllocations ?? [],
|
186
|
+
discountCodes: sourceHydrogenCart.discountCodes ?? [],
|
187
|
+
id: sourceHydrogenCart.id,
|
188
|
+
lines: sourceHydrogenCart.lines ?? {
|
189
|
+
__typename: "BaseCartLineConnection",
|
190
|
+
edges: [],
|
191
|
+
nodes: [],
|
192
|
+
pageInfo: defaultPageInfo()
|
193
|
+
},
|
194
|
+
metafields: sourceHydrogenCart.metafields ?? [],
|
195
|
+
note: sourceHydrogenCart.note ?? null,
|
196
|
+
totalQuantity: sourceHydrogenCart.totalQuantity ?? 0,
|
197
|
+
updatedAt: sourceHydrogenCart.updatedAt ?? (/* @__PURE__ */ new Date()).toISOString()
|
198
|
+
};
|
199
|
+
solidifiedHydrogenCart = builtCart;
|
200
|
+
}
|
201
|
+
let numericCartToken;
|
202
|
+
let cartSubtotalInCents = 0;
|
203
|
+
let linesForCounts = [];
|
204
|
+
let totalQuantity = 0;
|
205
|
+
let lineCount = 0;
|
206
|
+
let legacyNote = null;
|
207
|
+
let legacyAttributes = [];
|
208
|
+
let legacyCheckoutUrlValue;
|
209
|
+
let legacyDiscountCodesValue = [];
|
210
|
+
let legacyCartCostValue;
|
211
|
+
let legacyCartIdValue;
|
212
|
+
if (solidifiedHydrogenCart) {
|
213
|
+
numericCartToken = Utilities.getIdFromGraphUrl(solidifiedHydrogenCart.id, "Cart");
|
214
|
+
cartSubtotalInCents = solidifiedHydrogenCart.cost?.subtotalAmount?.amount ? Utilities.amountToCents(parseFloat(solidifiedHydrogenCart.cost.subtotalAmount.amount)) : 0;
|
215
|
+
linesForCounts = (solidifiedHydrogenCart.lines.nodes?.length ?? 0) > 0 ? solidifiedHydrogenCart.lines.nodes : solidifiedHydrogenCart.lines.edges?.map((e) => e.node) ?? [];
|
216
|
+
totalQuantity = solidifiedHydrogenCart.totalQuantity;
|
217
|
+
lineCount = linesForCounts.length;
|
218
|
+
legacyNote = solidifiedHydrogenCart.note ?? null;
|
219
|
+
legacyAttributes = [...solidifiedHydrogenCart.attributes];
|
220
|
+
legacyCheckoutUrlValue = solidifiedHydrogenCart.checkoutUrl;
|
221
|
+
legacyDiscountCodesValue = [...solidifiedHydrogenCart.discountCodes];
|
222
|
+
legacyCartCostValue = solidifiedHydrogenCart.cost;
|
223
|
+
legacyCartIdValue = solidifiedHydrogenCart.id;
|
224
|
+
} else {
|
225
|
+
numericCartToken = legacyCartId ? Utilities.getIdFromGraphUrl(legacyCartId, "Cart") : void 0;
|
226
|
+
const subtotalString = legacyCartCost?.subtotalAmount?.amount ?? legacyCartSubtotal;
|
227
|
+
cartSubtotalInCents = subtotalString ? Utilities.amountToCents(parseFloat(subtotalString)) : 0;
|
228
|
+
linesForCounts = Array.isArray(legacyCartLines) ? [...legacyCartLines] : [];
|
229
|
+
totalQuantity = legacyCartTotalQuantity ?? linesForCounts.reduce((sum, line) => sum + (line?.quantity ?? 0), 0);
|
230
|
+
lineCount = legacyCartLinesLength ?? linesForCounts.length;
|
231
|
+
legacyNote = legacyCartNote ?? null;
|
232
|
+
legacyAttributes = legacyCartAttributes ? [...legacyCartAttributes] : [];
|
233
|
+
legacyCheckoutUrlValue = legacyCheckoutUrl;
|
234
|
+
legacyDiscountCodesValue = legacyDiscountCodes ? [...legacyDiscountCodes] : [];
|
235
|
+
legacyCartCostValue = legacyCartCost;
|
236
|
+
legacyCartIdValue = legacyCartId;
|
237
|
+
}
|
238
|
+
const contextParametersOutput = {
|
239
|
+
cacheKey,
|
240
|
+
cart: void 0,
|
241
|
+
cartAttributes: legacyAttributes,
|
242
|
+
cartCost: legacyCartCostValue,
|
243
|
+
cartCount: totalQuantity,
|
244
|
+
cartId: legacyCartIdValue,
|
245
|
+
cartItemCount: totalQuantity,
|
246
|
+
cartLineCount: lineCount,
|
247
|
+
cartLines: linesForCounts,
|
248
|
+
cartNote: legacyNote,
|
249
|
+
cartSubtotal: cartSubtotalInCents,
|
250
|
+
cartToken: numericCartToken,
|
251
|
+
checkoutUrl: legacyCheckoutUrlValue,
|
252
|
+
discountCodes: legacyDiscountCodesValue,
|
253
|
+
hydrogenCart: solidifiedHydrogenCart,
|
254
|
+
hydrogenReactCartActions,
|
255
|
+
hydrogenReactCartError,
|
256
|
+
hydrogenReactCartStatus,
|
38
257
|
isHydrogenReact,
|
39
|
-
time: "",
|
258
|
+
time: queryObject.time ?? "",
|
40
259
|
url: windowUrl
|
41
260
|
};
|
42
261
|
const cartContext = {
|
43
262
|
attributes: "",
|
44
|
-
item_count:
|
263
|
+
item_count: totalQuantity,
|
45
264
|
items: [],
|
46
|
-
line_count:
|
47
|
-
note: "",
|
48
|
-
subtotal:
|
49
|
-
token: ""
|
265
|
+
line_count: lineCount,
|
266
|
+
note: legacyNote ?? "",
|
267
|
+
subtotal: cartSubtotalInCents,
|
268
|
+
token: numericCartToken ?? ""
|
50
269
|
};
|
51
|
-
if (
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
cartContext.
|
56
|
-
contextParameters.cart_token = Utilities.getIdFromGraphUrl(cartId, "Cart");
|
57
|
-
}
|
58
|
-
if (cartSubtotal) {
|
59
|
-
cartContext.subtotal = Utilities.amountToCents(parseFloat(cartSubtotal));
|
60
|
-
contextParameters.cart_subtotal = Utilities.amountToCents(parseFloat(cartSubtotal));
|
61
|
-
}
|
62
|
-
if (cartLinesLength) {
|
63
|
-
const totalLines = cartLinesLength;
|
64
|
-
cartContext.line_count = totalLines;
|
65
|
-
contextParameters.cart_count = totalLines;
|
66
|
-
contextParameters.cart_line_count = totalLines;
|
67
|
-
}
|
68
|
-
if (cartTotalQuantity) {
|
69
|
-
cartContext.item_count = cartTotalQuantity;
|
70
|
-
contextParameters.cart_item_count = cartTotalQuantity;
|
270
|
+
if (legacyAttributes.length > 0) {
|
271
|
+
const validAttributes = legacyAttributes.filter(
|
272
|
+
(attr) => typeof attr.key === "string" && typeof attr.value === "string"
|
273
|
+
);
|
274
|
+
cartContext.attributes = getEncodedAttributes(validAttributes);
|
71
275
|
}
|
72
|
-
if (
|
73
|
-
cartContext.items =
|
74
|
-
for (const cartItem of cartLines) {
|
276
|
+
if (linesForCounts.length > 0) {
|
277
|
+
cartContext.items = linesForCounts.map((line) => {
|
75
278
|
const item = {
|
76
|
-
attributes: [],
|
77
|
-
product_id: "",
|
279
|
+
attributes: line.attributes ? [...line.attributes] : [],
|
280
|
+
product_id: line.merchandise?.product?.id ? Utilities.getIdFromGraphUrl(line.merchandise.product.id, "Product") : "",
|
78
281
|
properties: "",
|
79
|
-
quantity:
|
80
|
-
variant_id: ""
|
282
|
+
quantity: line.quantity,
|
283
|
+
variant_id: line.merchandise?.id ? Utilities.getIdFromGraphUrl(line.merchandise.id, "ProductVariant") : ""
|
81
284
|
};
|
82
|
-
if (
|
83
|
-
|
84
|
-
|
85
|
-
if (cartItem?.merchandise?.id) {
|
86
|
-
item.variant_id = Utilities.getIdFromGraphUrl(cartItem.merchandise.id, "ProductVariant");
|
87
|
-
}
|
88
|
-
if (cartItem?.attributes?.length) {
|
89
|
-
const validAttributes = cartItem.attributes.filter(
|
90
|
-
(attr) => attr !== void 0 && typeof attr.key === "string" && typeof attr.value === "string"
|
285
|
+
if (line.attributes?.length) {
|
286
|
+
const validLineAttributes = line.attributes.filter(
|
287
|
+
(attr) => typeof attr.key === "string" && typeof attr.value === "string"
|
91
288
|
);
|
92
|
-
item.properties = getEncodedAttributes(
|
289
|
+
item.properties = getEncodedAttributes(validLineAttributes);
|
93
290
|
}
|
94
|
-
|
95
|
-
}
|
96
|
-
}
|
97
|
-
if (cartAttributes) {
|
98
|
-
const validAttributes = cartAttributes.filter(
|
99
|
-
(attr) => attr !== void 0 && typeof attr.key === "string" && typeof attr.value === "string"
|
100
|
-
);
|
101
|
-
cartContext.attributes = getEncodedAttributes(validAttributes);
|
102
|
-
}
|
103
|
-
if (cartNote) {
|
104
|
-
cartContext.note = cartNote;
|
105
|
-
}
|
106
|
-
contextParameters.cart = cartContext;
|
107
|
-
return contextParameters;
|
108
|
-
};
|
109
|
-
|
110
|
-
// src/utils/getRebuyConfig.ts
|
111
|
-
import { RebuyClient } from "@rebuy/rebuy";
|
112
|
-
var getRebuyConfig = async (storeDomain) => {
|
113
|
-
try {
|
114
|
-
const request = {
|
115
|
-
parameters: { shop: storeDomain },
|
116
|
-
url: `/api/v1/user/config`
|
117
|
-
};
|
118
|
-
const { data: rebuy, ...response } = await new RebuyClient(void 0, void 0, storeDomain).getShieldedAsset(
|
119
|
-
request.url,
|
120
|
-
request.parameters
|
121
|
-
);
|
122
|
-
if (!rebuy?.shop) {
|
123
|
-
throw new Error("Rebuy configuration is not properly set up - missing shop", { cause: response });
|
124
|
-
}
|
125
|
-
return rebuy;
|
126
|
-
} catch (error) {
|
127
|
-
const err = error;
|
128
|
-
console.warn("Error fetching Rebuy shop config");
|
129
|
-
console.error(err, err.cause);
|
130
|
-
throw err;
|
291
|
+
return item;
|
292
|
+
});
|
131
293
|
}
|
294
|
+
return {
|
295
|
+
...contextParametersOutput,
|
296
|
+
cart: cartContext
|
297
|
+
};
|
132
298
|
};
|
133
299
|
|
134
300
|
// src/providers/RebuyHydrogenContextProvider.tsx
|
135
|
-
import { jsx } from "react/jsx-runtime";
|
136
|
-
var RebuyHydrogenContext = ({
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
cartQuantity,
|
144
|
-
children,
|
145
|
-
publicStoreDomain,
|
146
|
-
shop
|
147
|
-
}) => {
|
148
|
-
const [rebuyConfig, setRebuyConfig] = useState(null);
|
301
|
+
import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
|
302
|
+
var RebuyHydrogenContext = ({ children, shop, sourceHydrogenCart }) => {
|
303
|
+
const {
|
304
|
+
fetchError: configFetchError,
|
305
|
+
loadingStatus: configLoadingStatus,
|
306
|
+
rebuyConfig,
|
307
|
+
shopDomain: configShopDomain
|
308
|
+
} = useRebuyConfig();
|
149
309
|
const location = useLocation();
|
150
310
|
const queryObject = Utilities2.queryStringToObject(location.search);
|
151
311
|
const windowUrl = `${shop}${location.pathname}${location.search}`;
|
152
|
-
|
153
|
-
const initConfig = async () => {
|
154
|
-
const config = await getRebuyConfig(publicStoreDomain);
|
155
|
-
setRebuyConfig(config);
|
156
|
-
};
|
157
|
-
if (!rebuyConfig?.shop) {
|
158
|
-
initConfig();
|
159
|
-
}
|
160
|
-
}, [rebuyConfig]);
|
161
|
-
const contextParameters = useMemo(
|
312
|
+
const contextParameters = useMemo2(
|
162
313
|
() => createContextParameters({
|
163
314
|
cacheKey: rebuyConfig?.shop?.cache_key,
|
164
|
-
cartAttributes,
|
165
|
-
cartId,
|
166
|
-
cartLines,
|
167
|
-
cartLinesLength: cartLines?.length,
|
168
|
-
cartNote,
|
169
|
-
cartSubtotal: cartCost,
|
170
|
-
cartTotalQuantity: cartQuantity,
|
171
315
|
isHydrogenReact: false,
|
172
316
|
queryObject,
|
317
|
+
sourceHydrogenCart,
|
173
318
|
windowUrl
|
174
319
|
}),
|
175
|
-
[rebuyConfig, windowUrl, queryObject,
|
320
|
+
[rebuyConfig?.shop?.cache_key, windowUrl, queryObject, sourceHydrogenCart]
|
176
321
|
);
|
177
|
-
const
|
178
|
-
const contextValue =
|
179
|
-
() =>
|
180
|
-
[
|
322
|
+
const defaultContextValue = useMemo2(() => null, []);
|
323
|
+
const contextValue = useMemo2(
|
324
|
+
() => configLoadingStatus === "success" && rebuyConfig ? { contextParameters } : defaultContextValue,
|
325
|
+
[configLoadingStatus, rebuyConfig, contextParameters, defaultContextValue]
|
181
326
|
);
|
182
|
-
return /* @__PURE__ */
|
327
|
+
return /* @__PURE__ */ jsx2(RebuyContext.Provider, { value: contextValue, children: configLoadingStatus === "success" && rebuyConfig ? children : configLoadingStatus === "error" ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
328
|
+
(() => {
|
329
|
+
console.error(
|
330
|
+
`[Rebuy Provider] Failed to load Rebuy configuration for ${configShopDomain}. Rebuy features unavailable. Error:`,
|
331
|
+
configFetchError instanceof Error ? configFetchError.message : configFetchError
|
332
|
+
);
|
333
|
+
return null;
|
334
|
+
})(),
|
335
|
+
children
|
336
|
+
] }) : null });
|
183
337
|
};
|
184
338
|
var RebuyHydrogenContextProvider = ({
|
185
|
-
apiKey,
|
186
339
|
cart,
|
187
340
|
children,
|
341
|
+
overrideApiKey,
|
188
342
|
publicStoreDomain,
|
189
343
|
shop
|
190
344
|
}) => {
|
191
|
-
|
192
|
-
|
193
|
-
return /* @__PURE__ */
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
cartCost: cart2?.cost?.subtotalAmount?.amount,
|
199
|
-
cartId: cart2?.id,
|
200
|
-
cartLines: cart2?.lines?.nodes,
|
201
|
-
cartNote: cart2?.note,
|
202
|
-
cartQuantity: cart2?.totalQuantity,
|
203
|
-
publicStoreDomain,
|
204
|
-
shop,
|
205
|
-
children
|
206
|
-
}
|
207
|
-
);
|
345
|
+
if (!publicStoreDomain || !shop) {
|
346
|
+
console.warn('[Rebuy Provider Wrapper] Waiting for "publicStoreDomain" and "shop" props.');
|
347
|
+
return /* @__PURE__ */ jsx2(Fragment, { children });
|
348
|
+
}
|
349
|
+
return /* @__PURE__ */ jsx2(Await, { resolve: cart, children: (resolvedCart) => {
|
350
|
+
const hydrogenCartFromRemix = resolvedCart;
|
351
|
+
return /* @__PURE__ */ jsx2(RebuyConfigProvider, { initialShopDomain: publicStoreDomain, overrideApiKey, children: /* @__PURE__ */ jsx2(RebuyHydrogenContext, { shop, sourceHydrogenCart: hydrogenCartFromRemix, children }) });
|
208
352
|
} });
|
209
353
|
};
|
210
354
|
|
@@ -212,7 +356,7 @@ var RebuyHydrogenContextProvider = ({
|
|
212
356
|
import * as Utilities3 from "@rebuy/rebuy/utilities";
|
213
357
|
import { useLocation as useLocation2 } from "@remix-run/react";
|
214
358
|
import { CartProvider, ShopifyProvider, useCart } from "@shopify/hydrogen-react";
|
215
|
-
import {
|
359
|
+
import { useMemo as useMemo3 } from "react";
|
216
360
|
|
217
361
|
// src/queries/cart.queries.ts
|
218
362
|
var OPTION_FRAGMENT = `#graphql
|
@@ -676,51 +820,69 @@ var CART_FRAGMENT = `#graphql
|
|
676
820
|
`;
|
677
821
|
|
678
822
|
// src/providers/RebuyHydrogenReactContextProvider.tsx
|
679
|
-
import { jsx as
|
680
|
-
var
|
681
|
-
|
682
|
-
var PUBLIC_STORE_DOMAIN = import.meta.env.PUBLIC_STORE_DOMAIN;
|
683
|
-
var PUBLIC_STOREFRONT_ID = import.meta.env.PUBLIC_STOREFRONT_ID;
|
684
|
-
var PUBLIC_STOREFRONT_API_TOKEN = import.meta.env.PUBLIC_STOREFRONT_API_TOKEN || "";
|
685
|
-
var RebuyHydrogenReactContext = ({ children }) => {
|
686
|
-
const [rebuyConfig, setRebuyConfig] = useState2(null);
|
823
|
+
import { Fragment as Fragment2, jsx as jsx3 } from "react/jsx-runtime";
|
824
|
+
var RebuyHydrogenReactContext = ({ children, publicPrimaryDomian }) => {
|
825
|
+
const { loadingStatus: configLoadingStatus, rebuyConfig } = useRebuyConfig();
|
687
826
|
const location = useLocation2();
|
688
827
|
const queryObject = Utilities3.queryStringToObject(location.search);
|
689
|
-
const windowUrl = `${
|
690
|
-
const
|
691
|
-
|
692
|
-
|
693
|
-
|
694
|
-
|
695
|
-
|
696
|
-
|
697
|
-
|
698
|
-
|
699
|
-
|
700
|
-
|
701
|
-
|
828
|
+
const windowUrl = publicPrimaryDomian ? `${publicPrimaryDomian}${location.pathname}${location.search}` : "";
|
829
|
+
const {
|
830
|
+
cartAttributesUpdate,
|
831
|
+
cartCreate,
|
832
|
+
discountCodesUpdate,
|
833
|
+
error: hydrogenReactCartError,
|
834
|
+
linesAdd,
|
835
|
+
linesRemove,
|
836
|
+
linesUpdate,
|
837
|
+
noteUpdate,
|
838
|
+
status: hydrogenReactCartStatus,
|
839
|
+
...hydrogenReactCartData
|
840
|
+
} = useCart();
|
841
|
+
const hydrogenReactCartActions = useMemo3(
|
842
|
+
() => ({
|
843
|
+
cartAttributesUpdate,
|
844
|
+
cartCreate,
|
845
|
+
discountCodesUpdate,
|
846
|
+
linesAdd,
|
847
|
+
linesRemove,
|
848
|
+
linesUpdate,
|
849
|
+
noteUpdate
|
850
|
+
}),
|
851
|
+
[cartAttributesUpdate, cartCreate, discountCodesUpdate, linesAdd, linesRemove, linesUpdate, noteUpdate]
|
852
|
+
);
|
853
|
+
const contextParameters = useMemo3(() => {
|
854
|
+
const propsForParamCreation = {
|
702
855
|
cacheKey: rebuyConfig?.shop?.cache_key,
|
703
|
-
|
704
|
-
|
705
|
-
|
706
|
-
cartLinesLength: cart?.lines?.length,
|
707
|
-
cartSubtotal: cart?.cost?.subtotalAmount?.amount,
|
708
|
-
cartTotalQuantity: cart?.totalQuantity,
|
856
|
+
hydrogenReactCartActions,
|
857
|
+
hydrogenReactCartError,
|
858
|
+
hydrogenReactCartStatus,
|
709
859
|
isHydrogenReact: true,
|
710
860
|
queryObject,
|
861
|
+
sourceHydrogenCart: hydrogenReactCartData,
|
862
|
+
// eslint-disable-line @typescript-eslint/no-explicit-any
|
711
863
|
windowUrl
|
712
|
-
}
|
713
|
-
|
714
|
-
|
715
|
-
|
716
|
-
|
717
|
-
|
718
|
-
|
864
|
+
};
|
865
|
+
return createContextParameters(propsForParamCreation);
|
866
|
+
}, [
|
867
|
+
rebuyConfig?.shop?.cache_key,
|
868
|
+
windowUrl,
|
869
|
+
queryObject,
|
870
|
+
hydrogenReactCartData,
|
871
|
+
hydrogenReactCartActions,
|
872
|
+
hydrogenReactCartStatus,
|
873
|
+
hydrogenReactCartError
|
874
|
+
]);
|
875
|
+
const defaultContextValue = useMemo3(() => ({ contextParameters: {} }), []);
|
876
|
+
const rebuyContextValue = useMemo3(
|
877
|
+
() => configLoadingStatus === "success" && rebuyConfig ? { contextParameters } : defaultContextValue,
|
878
|
+
[configLoadingStatus, rebuyConfig, contextParameters, defaultContextValue]
|
719
879
|
);
|
720
|
-
return /* @__PURE__ */
|
880
|
+
return /* @__PURE__ */ jsx3(RebuyContext.Provider, { value: rebuyContextValue, children: configLoadingStatus === "success" && rebuyConfig ? children : configLoadingStatus === "error" ? /* @__PURE__ */ jsx3(Fragment2, { children }) : null });
|
721
881
|
};
|
722
882
|
var RebuyHydrogenReactContextProvider = ({
|
883
|
+
// --- Rebuy Specific Props ---
|
723
884
|
cartFragment = CART_FRAGMENT,
|
885
|
+
// --- ShopifyProvider Props ---
|
724
886
|
children,
|
725
887
|
countryIsoCode = "US",
|
726
888
|
customerAccessToken = "",
|
@@ -728,10 +890,12 @@ var RebuyHydrogenReactContextProvider = ({
|
|
728
890
|
languageIsoCode = "EN",
|
729
891
|
numCartLines,
|
730
892
|
onAttributesUpdate,
|
893
|
+
// --- CartProvider Props ---
|
731
894
|
onAttributesUpdateComplete,
|
732
895
|
onBuyerIdentityUpdate,
|
733
896
|
onBuyerIdentityUpdateComplete,
|
734
897
|
onCreate,
|
898
|
+
// --- CartProvider Callbacks (adapted) ---
|
735
899
|
onCreateComplete,
|
736
900
|
onDiscountCodesUpdate,
|
737
901
|
onDiscountCodesUpdateComplete,
|
@@ -743,36 +907,67 @@ var RebuyHydrogenReactContextProvider = ({
|
|
743
907
|
onLineUpdateComplete,
|
744
908
|
onNoteUpdate,
|
745
909
|
onNoteUpdateComplete,
|
746
|
-
|
910
|
+
overrideApiKey,
|
911
|
+
publicPrimaryDomian = "",
|
912
|
+
publicStoreDomain = "",
|
913
|
+
publicStorefrontApiToken = "",
|
914
|
+
publicStorefrontId = "",
|
915
|
+
storefrontApiVersion = "2024-07"
|
747
916
|
}) => {
|
748
|
-
const
|
749
|
-
|
750
|
-
|
751
|
-
|
752
|
-
|
753
|
-
|
754
|
-
|
755
|
-
|
756
|
-
|
757
|
-
|
758
|
-
|
759
|
-
|
760
|
-
|
761
|
-
|
762
|
-
|
763
|
-
|
764
|
-
|
765
|
-
|
766
|
-
|
917
|
+
const adaptedCallbacks = useMemo3(
|
918
|
+
() => ({
|
919
|
+
onAttributesUpdate: onAttributesUpdate ? () => onAttributesUpdate() : void 0,
|
920
|
+
onAttributesUpdateComplete: onAttributesUpdateComplete ? () => onAttributesUpdateComplete() : void 0,
|
921
|
+
onBuyerIdentityUpdate: onBuyerIdentityUpdate ? () => onBuyerIdentityUpdate() : void 0,
|
922
|
+
onBuyerIdentityUpdateComplete: onBuyerIdentityUpdateComplete ? () => onBuyerIdentityUpdateComplete() : void 0,
|
923
|
+
onCreate: onCreate ? () => onCreate() : void 0,
|
924
|
+
onCreateComplete: onCreateComplete ? () => onCreateComplete() : void 0,
|
925
|
+
onDiscountCodesUpdate: onDiscountCodesUpdate ? () => onDiscountCodesUpdate() : void 0,
|
926
|
+
onDiscountCodesUpdateComplete: onDiscountCodesUpdateComplete ? () => onDiscountCodesUpdateComplete() : void 0,
|
927
|
+
onLineAdd: onLineAdd ? () => onLineAdd() : void 0,
|
928
|
+
onLineAddComplete: onLineAddComplete ? () => onLineAddComplete() : void 0,
|
929
|
+
onLineRemove: onLineRemove ? () => onLineRemove() : void 0,
|
930
|
+
onLineRemoveComplete: onLineRemoveComplete ? () => onLineRemoveComplete() : void 0,
|
931
|
+
onLineUpdate: onLineUpdate ? () => onLineUpdate() : void 0,
|
932
|
+
onLineUpdateComplete: onLineUpdateComplete ? () => onLineUpdateComplete() : void 0,
|
933
|
+
onNoteUpdate: onNoteUpdate ? () => onNoteUpdate() : void 0,
|
934
|
+
onNoteUpdateComplete: onNoteUpdateComplete ? () => onNoteUpdateComplete() : void 0
|
935
|
+
}),
|
936
|
+
[
|
937
|
+
onAttributesUpdate,
|
938
|
+
onAttributesUpdateComplete,
|
939
|
+
onBuyerIdentityUpdate,
|
940
|
+
onBuyerIdentityUpdateComplete,
|
941
|
+
onCreate,
|
942
|
+
onCreateComplete,
|
943
|
+
onDiscountCodesUpdate,
|
944
|
+
onDiscountCodesUpdateComplete,
|
945
|
+
onLineAdd,
|
946
|
+
onLineAddComplete,
|
947
|
+
onLineRemove,
|
948
|
+
onLineRemoveComplete,
|
949
|
+
onLineUpdate,
|
950
|
+
onLineUpdateComplete,
|
951
|
+
onNoteUpdate,
|
952
|
+
onNoteUpdateComplete
|
953
|
+
]
|
954
|
+
);
|
955
|
+
if (!publicStoreDomain || !publicStorefrontApiToken) {
|
956
|
+
console.error(
|
957
|
+
"[Rebuy React Provider] Critical environment variables publicStoreDomain or publicStorefrontApiToken are missing. ShopifyProvider and CartProvider may not function correctly."
|
958
|
+
);
|
959
|
+
return /* @__PURE__ */ jsx3(Fragment2, { children });
|
960
|
+
}
|
961
|
+
return /* @__PURE__ */ jsx3(
|
767
962
|
ShopifyProvider,
|
768
963
|
{
|
769
964
|
countryIsoCode,
|
770
965
|
languageIsoCode,
|
771
|
-
storeDomain:
|
966
|
+
storeDomain: publicStoreDomain,
|
772
967
|
storefrontApiVersion,
|
773
|
-
storefrontId:
|
774
|
-
storefrontToken:
|
775
|
-
children: /* @__PURE__ */
|
968
|
+
storefrontId: publicStorefrontId,
|
969
|
+
storefrontToken: publicStorefrontApiToken,
|
970
|
+
children: /* @__PURE__ */ jsx3(
|
776
971
|
CartProvider,
|
777
972
|
{
|
778
973
|
cartFragment,
|
@@ -781,23 +976,8 @@ var RebuyHydrogenReactContextProvider = ({
|
|
781
976
|
data,
|
782
977
|
languageCode: languageIsoCode,
|
783
978
|
numCartLines,
|
784
|
-
|
785
|
-
|
786
|
-
onBuyerIdentityUpdate: adapted.onBuyerIdentityUpdate,
|
787
|
-
onBuyerIdentityUpdateComplete: adapted.onBuyerIdentityUpdateComplete,
|
788
|
-
onCreate: adapted.onCreate,
|
789
|
-
onCreateComplete: adapted.onCreateComplete,
|
790
|
-
onDiscountCodesUpdate: adapted.onDiscountCodesUpdate,
|
791
|
-
onDiscountCodesUpdateComplete: adapted.onDiscountCodesUpdateComplete,
|
792
|
-
onLineAdd: adapted.onLineAdd,
|
793
|
-
onLineAddComplete: adapted.onLineAddComplete,
|
794
|
-
onLineRemove: adapted.onLineRemove,
|
795
|
-
onLineRemoveComplete: adapted.onLineRemoveComplete,
|
796
|
-
onLineUpdate: adapted.onLineUpdate,
|
797
|
-
onLineUpdateComplete: adapted.onLineUpdateComplete,
|
798
|
-
onNoteUpdate: adapted.onNoteUpdate,
|
799
|
-
onNoteUpdateComplete: adapted.onNoteUpdateComplete,
|
800
|
-
children: /* @__PURE__ */ jsx2(RebuyHydrogenReactContext, { children })
|
979
|
+
...adaptedCallbacks,
|
980
|
+
children: /* @__PURE__ */ jsx3(RebuyConfigProvider, { initialShopDomain: publicStoreDomain, overrideApiKey, children: /* @__PURE__ */ jsx3(RebuyHydrogenReactContext, { publicPrimaryDomian, children }) })
|
801
981
|
}
|
802
982
|
)
|
803
983
|
}
|
@@ -808,66 +988,52 @@ var RebuyHydrogenReactContextProvider = ({
|
|
808
988
|
import { RebuyClient as RebuyClient2 } from "@rebuy/rebuy";
|
809
989
|
import * as Utilities4 from "@rebuy/rebuy/utilities";
|
810
990
|
import { flattenConnection } from "@shopify/hydrogen";
|
811
|
-
import React, {
|
991
|
+
import React, { useEffect as useEffect2, useMemo as useMemo4, useState as useState2 } from "react";
|
812
992
|
var RebuyWidgetContainerBase = ({ children, ...props }) => {
|
813
993
|
const { apiKey, collection, collectionId, dataSource, limit, options, product, productId, variant, variantId } = props;
|
814
|
-
const
|
815
|
-
const [
|
816
|
-
const [initialized, setInitialized] =
|
994
|
+
const { apiKey: apiKeyFromContext, loadingStatus: configLoadingStatus, rebuyConfig } = useRebuyConfig();
|
995
|
+
const [rebuyApiClient, setRebuyApiClient] = useState2(null);
|
996
|
+
const [initialized, setInitialized] = useState2(false);
|
817
997
|
const shopifyProductId = product?.id ?? productId ?? null;
|
818
998
|
const shopifyVariantId = variant?.id ?? variantId ?? null;
|
819
999
|
const shopifyCollectionId = collection?.id ?? collectionId ?? null;
|
820
|
-
const [products, setProducts] =
|
821
|
-
const [metadata, setMetadata] =
|
822
|
-
|
823
|
-
if (!
|
824
|
-
const client = new RebuyClient2(
|
825
|
-
client.setContextParameters(
|
826
|
-
contextParameters
|
827
|
-
// TODO: fix this type when @rebuy/rebuy is moved to typescript
|
828
|
-
);
|
1000
|
+
const [products, setProducts] = useState2([]);
|
1001
|
+
const [metadata, setMetadata] = useState2();
|
1002
|
+
useEffect2(() => {
|
1003
|
+
if (!rebuyApiClient && apiKeyFromContext && configLoadingStatus === "success") {
|
1004
|
+
const client = new RebuyClient2(apiKeyFromContext);
|
829
1005
|
if (options) {
|
830
1006
|
client.setDefaultParameters(options);
|
831
1007
|
}
|
832
|
-
|
1008
|
+
setRebuyApiClient(client);
|
833
1009
|
setInitialized(true);
|
834
1010
|
}
|
835
|
-
}, [
|
836
|
-
|
837
|
-
|
838
|
-
Rebuy.setContextParameters(
|
839
|
-
contextParameters
|
840
|
-
// TODO: fix this type when @rebuy/rebuy is moved to typescript
|
841
|
-
);
|
842
|
-
}, [Rebuy, contextParameters]);
|
843
|
-
const request = useMemo3(() => {
|
844
|
-
const request2 = {
|
1011
|
+
}, [apiKeyFromContext, rebuyApiClient, configLoadingStatus, options]);
|
1012
|
+
const request = useMemo4(() => {
|
1013
|
+
const req = {
|
845
1014
|
endpoint: dataSource || "/api/v1/products/recommended",
|
846
1015
|
params: {}
|
847
1016
|
// Keeping this object generic to allow for custom endpoints
|
848
1017
|
};
|
849
1018
|
if (shopifyProductId) {
|
850
|
-
|
851
|
-
}
|
852
|
-
if (shopifyProductId) {
|
853
|
-
request2.params.shopify_product_ids = Utilities4.getIdFromGraphUrl(shopifyProductId, "Product");
|
1019
|
+
req.params.shopify_product_ids = Utilities4.getIdFromGraphUrl(shopifyProductId, "Product") ?? "";
|
854
1020
|
}
|
855
1021
|
if (shopifyVariantId) {
|
856
|
-
|
1022
|
+
req.params.shopify_variant_ids = Utilities4.getIdFromGraphUrl(shopifyVariantId, "ProductVariant") ?? "";
|
857
1023
|
}
|
858
1024
|
if (shopifyCollectionId) {
|
859
|
-
|
1025
|
+
req.params.shopify_collection_ids = Utilities4.getIdFromGraphUrl(shopifyCollectionId, "Collection") ?? "";
|
860
1026
|
}
|
861
1027
|
if (limit) {
|
862
|
-
|
1028
|
+
req.params.limit = limit;
|
863
1029
|
}
|
864
|
-
return
|
1030
|
+
return req;
|
865
1031
|
}, [dataSource, shopifyProductId, shopifyVariantId, shopifyCollectionId, limit]);
|
866
|
-
|
1032
|
+
useEffect2(() => {
|
867
1033
|
let isMounted = true;
|
868
|
-
if (!
|
1034
|
+
if (!rebuyApiClient || !initialized || configLoadingStatus !== "success") return;
|
869
1035
|
const fetchData = async () => {
|
870
|
-
const { data, metadata: metadata2 } = await
|
1036
|
+
const { data, metadata: metadata2 } = await rebuyApiClient.getStorefrontData(request.endpoint, request.params);
|
871
1037
|
if (isMounted) {
|
872
1038
|
setProducts(
|
873
1039
|
Array.isArray(data) ? data.map((product2) => ({
|
@@ -884,37 +1050,82 @@ var RebuyWidgetContainerBase = ({ children, ...props }) => {
|
|
884
1050
|
return () => {
|
885
1051
|
isMounted = false;
|
886
1052
|
};
|
887
|
-
}, [
|
888
|
-
const childrenWithProps = (
|
1053
|
+
}, [rebuyApiClient, initialized, request, configLoadingStatus]);
|
1054
|
+
const childrenWithProps = (currentProps) => React.Children.map(
|
889
1055
|
children,
|
890
|
-
(child) => React.isValidElement(child) ? React.cloneElement(child,
|
1056
|
+
(child) => React.isValidElement(child) ? React.cloneElement(child, currentProps) : child
|
891
1057
|
);
|
892
1058
|
const childProps = {
|
893
1059
|
...props,
|
894
|
-
|
1060
|
+
cacheKey: rebuyConfig?.shop?.cache_key,
|
895
1061
|
key: product?.id,
|
896
1062
|
metadata,
|
897
1063
|
products
|
898
1064
|
};
|
1065
|
+
if (configLoadingStatus !== "success" || !rebuyApiClient) {
|
1066
|
+
return null;
|
1067
|
+
}
|
899
1068
|
return childrenWithProps(childProps);
|
900
1069
|
};
|
901
1070
|
var RebuyWidgetContainer = RebuyWidgetContainerBase;
|
902
1071
|
|
1072
|
+
// src/components/ProductCard/defaultSettings.ts
|
1073
|
+
var defaultProductCardSettings = {
|
1074
|
+
layoutStyle: "grid",
|
1075
|
+
productOptions: {
|
1076
|
+
hide_out_of_stock_variants: false,
|
1077
|
+
match_variant: false,
|
1078
|
+
match_variant_out_of_stock: false,
|
1079
|
+
show_product_description: "hide",
|
1080
|
+
show_subscription_options: "always",
|
1081
|
+
show_variant_options: "always",
|
1082
|
+
show_variant_title: "show",
|
1083
|
+
show_variants_as_products: false,
|
1084
|
+
variant_display_limit: "product_limit"
|
1085
|
+
},
|
1086
|
+
quantityInput: {
|
1087
|
+
default_quantity: 1,
|
1088
|
+
enabled: true,
|
1089
|
+
max_value: 11,
|
1090
|
+
min_value: 1
|
1091
|
+
},
|
1092
|
+
settingsDiscount: {
|
1093
|
+
amount: 0,
|
1094
|
+
bundle_protection: {
|
1095
|
+
allowed_removals: 0,
|
1096
|
+
disable_atc_on_incomplete: false,
|
1097
|
+
enabled: false
|
1098
|
+
},
|
1099
|
+
discount_protection: {
|
1100
|
+
enabled: false,
|
1101
|
+
minimum_items_to_get_discount: 2
|
1102
|
+
},
|
1103
|
+
discounted_by: "other",
|
1104
|
+
discounted_from: "original_price",
|
1105
|
+
message: "",
|
1106
|
+
quantity: 1,
|
1107
|
+
show_saving_amount: false,
|
1108
|
+
type: "none"
|
1109
|
+
},
|
1110
|
+
variantSelector: "select"
|
1111
|
+
};
|
1112
|
+
|
903
1113
|
// src/components/ProductCard/ProductCard.tsx
|
904
1114
|
import { Link } from "@remix-run/react";
|
905
1115
|
import { Image } from "@shopify/hydrogen";
|
906
|
-
import { useState as
|
1116
|
+
import { useState as useState5 } from "react";
|
907
1117
|
|
908
1118
|
// src/components/AddToCartBtn/HydrogenAddToCartBtn.tsx
|
909
1119
|
import { CartForm, Money } from "@shopify/hydrogen";
|
910
1120
|
|
911
1121
|
// src/components/AddToCartBtn/AddToCartBtn.module.css
|
912
1122
|
var AddToCartBtn_default = {
|
913
|
-
button: "
|
1123
|
+
"rebuy-cart-button": "AddToCartBtn_rebuy-cart-button",
|
1124
|
+
"rebuy-cart-button__container": "AddToCartBtn_rebuy-cart-button__container"
|
914
1125
|
};
|
915
1126
|
|
916
1127
|
// src/components/AddToCartBtn/HydrogenAddToCartBtn.tsx
|
917
|
-
import { Fragment, jsx as
|
1128
|
+
import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
|
918
1129
|
var HydrogenAddToCartBtn = ({
|
919
1130
|
addToCartBtnText,
|
920
1131
|
addToCartCallback,
|
@@ -922,7 +1133,7 @@ var HydrogenAddToCartBtn = ({
|
|
922
1133
|
linesToAdd,
|
923
1134
|
moneyData
|
924
1135
|
}) => {
|
925
|
-
return /* @__PURE__ */
|
1136
|
+
return /* @__PURE__ */ jsx4("div", { className: AddToCartBtn_default["rebuy-cart-button__container"], children: /* @__PURE__ */ jsx4(
|
926
1137
|
CartForm,
|
927
1138
|
{
|
928
1139
|
action: CartForm.ACTIONS.LinesAdd,
|
@@ -930,29 +1141,29 @@ var HydrogenAddToCartBtn = ({
|
|
930
1141
|
lines: linesToAdd
|
931
1142
|
},
|
932
1143
|
route: "/cart",
|
933
|
-
children: (fetcher) => /* @__PURE__ */
|
1144
|
+
children: (fetcher) => /* @__PURE__ */ jsx4(Fragment3, { children: /* @__PURE__ */ jsxs2(
|
934
1145
|
"button",
|
935
1146
|
{
|
936
|
-
className: AddToCartBtn_default
|
1147
|
+
className: AddToCartBtn_default["rebuy-cart-button"],
|
937
1148
|
disabled: disabled || fetcher.state !== "idle",
|
938
1149
|
onClick: addToCartCallback,
|
939
1150
|
type: "submit",
|
940
1151
|
children: [
|
941
1152
|
addToCartBtnText,
|
942
|
-
moneyData && /* @__PURE__ */
|
943
|
-
/* @__PURE__ */
|
944
|
-
/* @__PURE__ */
|
1153
|
+
moneyData && /* @__PURE__ */ jsxs2(Fragment3, { children: [
|
1154
|
+
/* @__PURE__ */ jsx4("span", { children: " | " }),
|
1155
|
+
/* @__PURE__ */ jsx4(Money, { data: moneyData, withoutTrailingZeros: true })
|
945
1156
|
] })
|
946
1157
|
]
|
947
1158
|
}
|
948
1159
|
) })
|
949
1160
|
}
|
950
|
-
);
|
1161
|
+
) });
|
951
1162
|
};
|
952
1163
|
|
953
1164
|
// src/components/AddToCartBtn/HydrogenReactAddToCartBtn.tsx
|
954
1165
|
import { Money as Money2, useCart as useCart2 } from "@shopify/hydrogen-react";
|
955
|
-
import { Fragment as
|
1166
|
+
import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
|
956
1167
|
var HydrogenReactAddToCartBtn = ({
|
957
1168
|
addToCartBtnText,
|
958
1169
|
addToCartCallback,
|
@@ -965,23 +1176,24 @@ var HydrogenReactAddToCartBtn = ({
|
|
965
1176
|
linesAdd(linesToAdd);
|
966
1177
|
addToCartCallback?.();
|
967
1178
|
};
|
968
|
-
return /* @__PURE__ */
|
1179
|
+
return /* @__PURE__ */ jsxs3("button", { className: AddToCartBtn_default["rebuy-cart-button"], disabled, onClick: handleAddToCart, type: "button", children: [
|
969
1180
|
addToCartBtnText,
|
970
|
-
moneyData && /* @__PURE__ */
|
971
|
-
/* @__PURE__ */
|
972
|
-
/* @__PURE__ */
|
1181
|
+
moneyData && /* @__PURE__ */ jsxs3(Fragment4, { children: [
|
1182
|
+
/* @__PURE__ */ jsx5("span", { children: " | " }),
|
1183
|
+
/* @__PURE__ */ jsx5(Money2, { data: moneyData, withoutTrailingZeros: true })
|
973
1184
|
] })
|
974
1185
|
] });
|
975
1186
|
};
|
976
1187
|
|
977
1188
|
// src/components/AddToCartBtn/AddToCartBtn.tsx
|
978
|
-
import { jsx as
|
1189
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
979
1190
|
var AddToCartBtn = ({
|
980
1191
|
addToCartBtnText,
|
981
1192
|
addToCartCallback,
|
982
1193
|
disabled,
|
983
1194
|
isHydrogenReact,
|
984
1195
|
moneyData,
|
1196
|
+
quantity,
|
985
1197
|
selectedVariants
|
986
1198
|
}) => {
|
987
1199
|
const linesToAdd = selectedVariants.map((variant) => ({
|
@@ -990,11 +1202,11 @@ var AddToCartBtn = ({
|
|
990
1202
|
{ key: "_attribution", value: "Rebuy Product Recommendations" }
|
991
1203
|
],
|
992
1204
|
merchandiseId: variant.id,
|
993
|
-
quantity: 1,
|
1205
|
+
quantity: quantity || 1,
|
994
1206
|
selectedVariant: variant
|
995
1207
|
}));
|
996
1208
|
if (isHydrogenReact) {
|
997
|
-
return /* @__PURE__ */
|
1209
|
+
return /* @__PURE__ */ jsx6(
|
998
1210
|
HydrogenReactAddToCartBtn,
|
999
1211
|
{
|
1000
1212
|
addToCartBtnText,
|
@@ -1005,7 +1217,7 @@ var AddToCartBtn = ({
|
|
1005
1217
|
}
|
1006
1218
|
);
|
1007
1219
|
}
|
1008
|
-
return /* @__PURE__ */
|
1220
|
+
return /* @__PURE__ */ jsx6(
|
1009
1221
|
HydrogenAddToCartBtn,
|
1010
1222
|
{
|
1011
1223
|
addToCartBtnText,
|
@@ -1022,119 +1234,392 @@ import { Money as Money3 } from "@shopify/hydrogen";
|
|
1022
1234
|
|
1023
1235
|
// src/components/ProductPrice/ProductPrice.module.css
|
1024
1236
|
var ProductPrice_default = {
|
1025
|
-
|
1026
|
-
|
1237
|
+
"rebuy-product-price": "ProductPrice_rebuy-product-price",
|
1238
|
+
"rebuy-product-price__current": "ProductPrice_rebuy-product-price__current",
|
1239
|
+
"rebuy-product-price__current--sale": "ProductPrice_rebuy-product-price__current--sale",
|
1240
|
+
"rebuy-product-price__compare-at": "ProductPrice_rebuy-product-price__compare-at"
|
1027
1241
|
};
|
1028
1242
|
|
1029
1243
|
// src/components/ProductPrice/ProductPrice.tsx
|
1030
|
-
import { jsx as
|
1031
|
-
var RebuyProductPrice = ({ selectedVariant }) => {
|
1244
|
+
import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
|
1245
|
+
var RebuyProductPrice = ({ selectedVariant, settingsDiscount }) => {
|
1032
1246
|
if (!selectedVariant) return null;
|
1033
1247
|
const { compareAtPriceV2: compareAtPrice, priceV2: price } = selectedVariant;
|
1034
1248
|
const isDiscounted = (price2, compareAtPrice2) => Number(compareAtPrice2?.amount) > Number(price2?.amount);
|
1035
|
-
const
|
1036
|
-
|
1249
|
+
const currentPriceIsOnSale = compareAtPrice && isDiscounted(price, compareAtPrice);
|
1250
|
+
const CompareAtPrice = ({ data: compareAtPriceData }) => {
|
1251
|
+
return compareAtPriceData && /* @__PURE__ */ jsx7(
|
1252
|
+
Money3,
|
1253
|
+
{
|
1254
|
+
as: "span",
|
1255
|
+
className: ProductPrice_default["rebuy-product-price__compare-at"],
|
1256
|
+
data: compareAtPriceData,
|
1257
|
+
withoutTrailingZeros: true
|
1258
|
+
}
|
1259
|
+
);
|
1037
1260
|
};
|
1038
|
-
return price && /* @__PURE__ */
|
1039
|
-
/* @__PURE__ */
|
1040
|
-
|
1261
|
+
return price && /* @__PURE__ */ jsxs4("div", { className: ProductPrice_default["rebuy-product-price"], children: [
|
1262
|
+
/* @__PURE__ */ jsx7(
|
1263
|
+
Money3,
|
1264
|
+
{
|
1265
|
+
as: "span",
|
1266
|
+
className: `${ProductPrice_default["rebuy-product-price__current"]} ${currentPriceIsOnSale ? ProductPrice_default["rebuy-product-price__current--sale"] : ""}`,
|
1267
|
+
data: price,
|
1268
|
+
withoutTrailingZeros: true
|
1269
|
+
}
|
1270
|
+
),
|
1271
|
+
currentPriceIsOnSale && /* @__PURE__ */ jsx7(CompareAtPrice, { data: compareAtPrice })
|
1041
1272
|
] });
|
1042
1273
|
};
|
1043
1274
|
|
1275
|
+
// src/components/QuantityInput/QuantityInput.tsx
|
1276
|
+
import { useState as useState3 } from "react";
|
1277
|
+
|
1278
|
+
// src/components/QuantityInput/QuantityInput.module.css
|
1279
|
+
var QuantityInput_default = {
|
1280
|
+
"rebuy-quantity__container": "QuantityInput_rebuy-quantity__container",
|
1281
|
+
"rebuy-quantity__select": "QuantityInput_rebuy-quantity__select"
|
1282
|
+
};
|
1283
|
+
|
1284
|
+
// src/components/QuantityInput/QuantityInput.tsx
|
1285
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
1286
|
+
var QuantityInput = ({
|
1287
|
+
defaultQuantity = 1,
|
1288
|
+
handleSelectedQuantity,
|
1289
|
+
maxValue = 10,
|
1290
|
+
minValue = 1
|
1291
|
+
}) => {
|
1292
|
+
const [quantity, setQuantity] = useState3(defaultQuantity);
|
1293
|
+
const handleChange = (event) => {
|
1294
|
+
const newValue = parseInt(event.target.value, 10);
|
1295
|
+
setQuantity(newValue);
|
1296
|
+
if (handleSelectedQuantity) {
|
1297
|
+
handleSelectedQuantity(newValue);
|
1298
|
+
}
|
1299
|
+
};
|
1300
|
+
const quantityOptions = Array.from({ length: maxValue - minValue + 1 }, (_, i) => minValue + i);
|
1301
|
+
return /* @__PURE__ */ jsx8("div", { className: QuantityInput_default["rebuy-quantity__container"], children: /* @__PURE__ */ jsx8(
|
1302
|
+
"select",
|
1303
|
+
{
|
1304
|
+
"aria-label": "Product quantity",
|
1305
|
+
className: QuantityInput_default["rebuy-quantity__select"],
|
1306
|
+
onChange: handleChange,
|
1307
|
+
value: quantity,
|
1308
|
+
children: quantityOptions.map((value) => /* @__PURE__ */ jsx8("option", { value, children: value }, `quantity-${value}`))
|
1309
|
+
}
|
1310
|
+
) });
|
1311
|
+
};
|
1312
|
+
|
1044
1313
|
// src/components/Title/Title.tsx
|
1045
|
-
import
|
1046
|
-
|
1314
|
+
import clsx from "clsx";
|
1315
|
+
|
1316
|
+
// src/components/Title/Title.module.css
|
1317
|
+
var Title_default = {
|
1318
|
+
"rebuy-title": "Title_rebuy-title"
|
1319
|
+
};
|
1320
|
+
|
1321
|
+
// src/components/Title/Title.tsx
|
1322
|
+
import { jsx as jsx9 } from "react/jsx-runtime";
|
1323
|
+
var Title = ({ className, level, style, text }) => {
|
1324
|
+
const combinedClassName = clsx(Title_default["rebuy-title"], className);
|
1047
1325
|
switch (level) {
|
1048
1326
|
case "h1":
|
1049
|
-
return /* @__PURE__ */
|
1327
|
+
return /* @__PURE__ */ jsx9("h1", { className: combinedClassName, style, children: text });
|
1050
1328
|
default:
|
1051
1329
|
case "h2":
|
1052
|
-
return /* @__PURE__ */
|
1330
|
+
return /* @__PURE__ */ jsx9("h2", { className: combinedClassName, style, children: text });
|
1053
1331
|
case "h3":
|
1054
|
-
return /* @__PURE__ */
|
1332
|
+
return /* @__PURE__ */ jsx9("h3", { className: combinedClassName, style, children: text });
|
1055
1333
|
case "h4":
|
1056
|
-
return /* @__PURE__ */
|
1334
|
+
return /* @__PURE__ */ jsx9("h4", { className: combinedClassName, style, children: text });
|
1057
1335
|
case "h5":
|
1058
|
-
return /* @__PURE__ */
|
1336
|
+
return /* @__PURE__ */ jsx9("h5", { className: combinedClassName, style, children: text });
|
1059
1337
|
case "h6":
|
1060
|
-
return /* @__PURE__ */
|
1338
|
+
return /* @__PURE__ */ jsx9("h6", { className: combinedClassName, style, children: text });
|
1061
1339
|
}
|
1062
1340
|
};
|
1063
1341
|
|
1342
|
+
// src/components/VariantSelect/VariantSelect.tsx
|
1343
|
+
import clsx2 from "clsx";
|
1344
|
+
import { useEffect as useEffect3, useState as useState4 } from "react";
|
1345
|
+
|
1064
1346
|
// src/components/VariantSelect/VariantSelect.module.css
|
1065
1347
|
var VariantSelect_default = {
|
1066
|
-
|
1348
|
+
"rebuy-variant__container": "VariantSelect_rebuy-variant__container",
|
1349
|
+
"rebuy-variant__select": "VariantSelect_rebuy-variant__select",
|
1350
|
+
"rebuy-variant__select-optgroup-label": "VariantSelect_rebuy-variant__select-optgroup-label",
|
1351
|
+
"rebuy-variant__select-option": "VariantSelect_rebuy-variant__select-option",
|
1352
|
+
"rebuy-variant__buttons": "VariantSelect_rebuy-variant__buttons",
|
1353
|
+
"rebuy-variant__button": "VariantSelect_rebuy-variant__button",
|
1354
|
+
"rebuy-variant__button--selected": "VariantSelect_rebuy-variant__button--selected"
|
1067
1355
|
};
|
1068
1356
|
|
1069
1357
|
// src/components/VariantSelect/VariantSelect.tsx
|
1070
|
-
import { jsx as
|
1071
|
-
var VariantSelect = ({ handleSelectedVariant, product }) => {
|
1072
|
-
const
|
1073
|
-
|
1074
|
-
|
1075
|
-
|
1076
|
-
|
1077
|
-
|
1358
|
+
import { jsx as jsx10 } from "react/jsx-runtime";
|
1359
|
+
var VariantSelect = ({ handleSelectedVariant, product, selectedId, style = "select" }) => {
|
1360
|
+
const [selectedVariantId, setSelectedVariantId] = useState4(selectedId || product.variants.nodes[0]?.id);
|
1361
|
+
useEffect3(() => {
|
1362
|
+
if (selectedId && selectedId !== selectedVariantId) {
|
1363
|
+
setSelectedVariantId(selectedId);
|
1364
|
+
}
|
1365
|
+
}, [selectedId, selectedVariantId]);
|
1366
|
+
const getOptionsLabel = (currentProduct) => {
|
1367
|
+
const firstVariantOptions = currentProduct.variants.nodes[0]?.selectedOptions;
|
1368
|
+
if (!firstVariantOptions || firstVariantOptions.length === 0) {
|
1369
|
+
return "Options";
|
1370
|
+
}
|
1371
|
+
return firstVariantOptions.map((option) => option.name).join(" / ");
|
1078
1372
|
};
|
1079
|
-
|
1373
|
+
const handleLocalVariantChange = (variantId) => {
|
1374
|
+
setSelectedVariantId(variantId);
|
1375
|
+
handleSelectedVariant(product, variantId);
|
1376
|
+
};
|
1377
|
+
if (!product?.variants?.nodes || product.variants.nodes.length <= 1) {
|
1378
|
+
return null;
|
1379
|
+
}
|
1380
|
+
return /* @__PURE__ */ jsx10("div", { className: VariantSelect_default["rebuy-variant__container"], children: style === "select" ? /* @__PURE__ */ jsx10(
|
1080
1381
|
"select",
|
1081
1382
|
{
|
1082
|
-
"aria-label": "
|
1083
|
-
className: VariantSelect_default
|
1084
|
-
onChange: (e) =>
|
1085
|
-
|
1383
|
+
"aria-label": "Select variant",
|
1384
|
+
className: VariantSelect_default["rebuy-variant__select"],
|
1385
|
+
onChange: (e) => handleLocalVariantChange(e.target.value),
|
1386
|
+
value: selectedVariantId,
|
1387
|
+
children: /* @__PURE__ */ jsx10(
|
1388
|
+
"optgroup",
|
1389
|
+
{
|
1390
|
+
className: VariantSelect_default["rebuy-variant__select-optgroup-label"],
|
1391
|
+
label: getOptionsLabel(product),
|
1392
|
+
children: product.variants.nodes.map(({ id, title }) => /* @__PURE__ */ jsx10(
|
1393
|
+
"option",
|
1394
|
+
{
|
1395
|
+
className: VariantSelect_default["rebuy-variant__select-option"],
|
1396
|
+
value: id,
|
1397
|
+
children: title
|
1398
|
+
},
|
1399
|
+
`${id}-variant-option`
|
1400
|
+
))
|
1401
|
+
}
|
1402
|
+
)
|
1086
1403
|
}
|
1087
|
-
) })
|
1404
|
+
) : /* @__PURE__ */ jsx10("div", { className: VariantSelect_default["rebuy-variant__buttons"], children: product.variants.nodes.map(({ id, title }) => /* @__PURE__ */ jsx10(
|
1405
|
+
"button",
|
1406
|
+
{
|
1407
|
+
"aria-pressed": id === selectedVariantId,
|
1408
|
+
className: clsx2(
|
1409
|
+
VariantSelect_default["rebuy-variant__button"],
|
1410
|
+
id === selectedVariantId && VariantSelect_default["rebuy-variant__button--selected"]
|
1411
|
+
),
|
1412
|
+
onClick: () => handleLocalVariantChange(id),
|
1413
|
+
type: "button",
|
1414
|
+
children: title
|
1415
|
+
},
|
1416
|
+
`${id}-variant-button`
|
1417
|
+
)) }) });
|
1088
1418
|
};
|
1089
1419
|
|
1090
1420
|
// src/components/ProductCard/ProductCard.module.css
|
1091
1421
|
var ProductCard_default = {
|
1092
|
-
|
1093
|
-
|
1422
|
+
"rebuy-product-card__container": "ProductCard_rebuy-product-card__container",
|
1423
|
+
"rebuy-product-card": "ProductCard_rebuy-product-card",
|
1424
|
+
"rebuy-product-card__content": "ProductCard_rebuy-product-card__content",
|
1425
|
+
"rebuy-product-card__header": "ProductCard_rebuy-product-card__header",
|
1426
|
+
"rebuy-product-card__info": "ProductCard_rebuy-product-card__info",
|
1427
|
+
"rebuy-product-card__actions": "ProductCard_rebuy-product-card__actions",
|
1428
|
+
"rebuy-product-card__media-link": "ProductCard_rebuy-product-card__media-link",
|
1429
|
+
"rebuy-product-card__image": "ProductCard_rebuy-product-card__image",
|
1430
|
+
"rebuy-product-card__title": "ProductCard_rebuy-product-card__title",
|
1431
|
+
"rebuy-product-card__title-link": "ProductCard_rebuy-product-card__title-link",
|
1432
|
+
"rebuy-product-card__actions-variant-select": "ProductCard_rebuy-product-card__actions-variant-select",
|
1433
|
+
"rebuy-product-card__variant-select": "ProductCard_rebuy-product-card__variant-select",
|
1434
|
+
"rebuy-product-card__actions-quantity": "ProductCard_rebuy-product-card__actions-quantity",
|
1435
|
+
"rebuy-product-card__actions-button": "ProductCard_rebuy-product-card__actions-button",
|
1436
|
+
"rebuy-product-card__vendor": "ProductCard_rebuy-product-card__vendor",
|
1437
|
+
"rebuy-product-card__variant-title": "ProductCard_rebuy-product-card__variant-title",
|
1438
|
+
"rebuy-product-card__review": "ProductCard_rebuy-product-card__review",
|
1439
|
+
"rebuy-product-card__star-rating": "ProductCard_rebuy-product-card__star-rating",
|
1440
|
+
"rebuy-product-card__star-rating-value": "ProductCard_rebuy-product-card__star-rating-value",
|
1441
|
+
"rebuy-product-card__star-rating-background": "ProductCard_rebuy-product-card__star-rating-background",
|
1442
|
+
"rebuy-product-card__star-rating-foreground": "ProductCard_rebuy-product-card__star-rating-foreground",
|
1443
|
+
"rebuy-product-card__review-count": "ProductCard_rebuy-product-card__review-count",
|
1444
|
+
"rebuy-product-card__review-count-parenthesis": "ProductCard_rebuy-product-card__review-count-parenthesis",
|
1445
|
+
"rebuy-product-card__review-count-number": "ProductCard_rebuy-product-card__review-count-number",
|
1446
|
+
"rebuy-product-card__review-count-label": "ProductCard_rebuy-product-card__review-count-label",
|
1447
|
+
"rebuy-product-card__description": "ProductCard_rebuy-product-card__description"
|
1094
1448
|
};
|
1095
1449
|
|
1096
1450
|
// src/components/ProductCard/ProductCard.tsx
|
1097
|
-
import { jsx as
|
1451
|
+
import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
|
1098
1452
|
var ProductCard = ({
|
1099
1453
|
addToCartBtnText,
|
1100
1454
|
addToCartCallback,
|
1101
1455
|
isHydrogenReact,
|
1456
|
+
isInPopup,
|
1457
|
+
onPopupDismiss,
|
1102
1458
|
product,
|
1103
|
-
productCardTitleLevel
|
1459
|
+
productCardTitleLevel,
|
1460
|
+
settings = defaultProductCardSettings
|
1104
1461
|
}) => {
|
1105
|
-
const [selectedVariant, setSelectedVariant] =
|
1106
|
-
const
|
1462
|
+
const [selectedVariant, setSelectedVariant] = useState5(product.variants.nodes[0]);
|
1463
|
+
const [selectedQuantity, setSelectedQuantity] = useState5(settings?.quantityInput?.default_quantity || 1);
|
1464
|
+
const displayImage = selectedVariant.image || product.featuredImage;
|
1107
1465
|
const handleSelectedVariant = (product2, variant_id) => {
|
1108
1466
|
const updatedVariant = product2.variants.nodes.find((variant) => variant.id === variant_id);
|
1109
1467
|
if (updatedVariant) {
|
1110
1468
|
setSelectedVariant(updatedVariant);
|
1111
1469
|
}
|
1112
1470
|
};
|
1113
|
-
|
1114
|
-
|
1115
|
-
|
1116
|
-
|
1471
|
+
const handleSelectedQuantity = (quantity) => {
|
1472
|
+
setSelectedQuantity(quantity);
|
1473
|
+
};
|
1474
|
+
const handleLinkClick = () => {
|
1475
|
+
if (isInPopup && onPopupDismiss) {
|
1476
|
+
onPopupDismiss();
|
1477
|
+
}
|
1478
|
+
};
|
1479
|
+
const showVariantTitle = settings?.productOptions?.show_variant_title && selectedVariant.title.toLowerCase() !== "default title";
|
1480
|
+
const showReviews = product.reviews && product?.reviews?.review_count && product?.reviews?.review_count > 0;
|
1481
|
+
const productReviewsRating = product.reviews?.star_rating;
|
1482
|
+
const showProductDescription = settings?.productOptions?.show_product_description === "show" && product.description !== "" && product.description !== null;
|
1483
|
+
const showVariantSelect = product?.variants.nodes.length > 1 && (settings?.productOptions?.show_variant_options === "default" || settings?.productOptions?.show_variant_options === "always");
|
1484
|
+
const showQuantityInput = settings?.quantityInput?.enabled && settings?.quantityInput?.max_value !== null && settings?.quantityInput?.min_value !== null;
|
1485
|
+
const cardLayout = settings?.layoutStyle || "grid";
|
1486
|
+
return /* @__PURE__ */ jsxs5("div", { className: ProductCard_default["rebuy-product-card__container"], children: [
|
1487
|
+
/* @__PURE__ */ jsxs5("div", { className: ProductCard_default["rebuy-product-card"], "data-layout": cardLayout, children: [
|
1488
|
+
/* @__PURE__ */ jsx11("div", { children: /* @__PURE__ */ jsx11(
|
1489
|
+
Link,
|
1117
1490
|
{
|
1118
|
-
|
1119
|
-
|
1120
|
-
|
1491
|
+
"aria-label": `View ${product.title}`,
|
1492
|
+
className: ProductCard_default["rebuy-product-card__media-link"],
|
1493
|
+
onClick: handleLinkClick,
|
1494
|
+
rel: "nofollow",
|
1495
|
+
to: `/products/${product.handle}`,
|
1496
|
+
children: /* @__PURE__ */ jsx11(
|
1497
|
+
Image,
|
1498
|
+
{
|
1499
|
+
alt: displayImage?.altText ?? `Picture of ${product.title}`,
|
1500
|
+
className: ProductCard_default["rebuy-product-card__image"],
|
1501
|
+
data: displayImage,
|
1502
|
+
sizes: "(max-width: 320px) 280px, (max-width: 768px) 720px, 1440px"
|
1503
|
+
}
|
1504
|
+
)
|
1121
1505
|
}
|
1122
1506
|
) }),
|
1123
|
-
/* @__PURE__ */
|
1124
|
-
/* @__PURE__ */
|
1125
|
-
|
1126
|
-
|
1507
|
+
/* @__PURE__ */ jsxs5("div", { className: ProductCard_default["rebuy-product-card__info"], children: [
|
1508
|
+
/* @__PURE__ */ jsxs5("div", { className: ProductCard_default["rebuy-product-card__content"], children: [
|
1509
|
+
/* @__PURE__ */ jsxs5("div", { className: ProductCard_default["rebuy-product-card__header"], children: [
|
1510
|
+
/* @__PURE__ */ jsx11("p", { className: ProductCard_default["rebuy-product-card__vendor"], children: product.vendor }),
|
1511
|
+
/* @__PURE__ */ jsx11(
|
1512
|
+
Link,
|
1513
|
+
{
|
1514
|
+
"aria-label": `View ${product.title}`,
|
1515
|
+
className: ProductCard_default["rebuy-product-card__title-link"],
|
1516
|
+
onClick: handleLinkClick,
|
1517
|
+
rel: "nofollow",
|
1518
|
+
to: `/products/${product.handle}`,
|
1519
|
+
children: /* @__PURE__ */ jsx11(
|
1520
|
+
Title,
|
1521
|
+
{
|
1522
|
+
className: ProductCard_default["rebuy-product-card__title"],
|
1523
|
+
level: productCardTitleLevel,
|
1524
|
+
text: product.title
|
1525
|
+
}
|
1526
|
+
)
|
1527
|
+
}
|
1528
|
+
),
|
1529
|
+
showVariantTitle && /* @__PURE__ */ jsx11("div", { className: ProductCard_default["rebuy-product-card__variant-title"], children: selectedVariant.title })
|
1530
|
+
] }),
|
1531
|
+
/* @__PURE__ */ jsx11(
|
1532
|
+
RebuyProductPrice,
|
1533
|
+
{
|
1534
|
+
selectedVariant,
|
1535
|
+
settingsDiscount: settings?.settingsDiscount
|
1536
|
+
}
|
1537
|
+
),
|
1538
|
+
showReviews && /* @__PURE__ */ jsxs5("div", { "aria-label": "product star rating", className: ProductCard_default["rebuy-product-card__review"], children: [
|
1539
|
+
/* @__PURE__ */ jsxs5("span", { className: ProductCard_default["rebuy-product-card__star-rating"], children: [
|
1540
|
+
productReviewsRating && /* @__PURE__ */ jsxs5("span", { className: ProductCard_default["rebuy-product-card__star-rating-value"], children: [
|
1541
|
+
productReviewsRating,
|
1542
|
+
" stars out of 5 stars"
|
1543
|
+
] }),
|
1544
|
+
/* @__PURE__ */ jsx11("span", { className: ProductCard_default["rebuy-product-card__star-rating-background"] }),
|
1545
|
+
/* @__PURE__ */ jsx11(
|
1546
|
+
"span",
|
1547
|
+
{
|
1548
|
+
className: ProductCard_default["rebuy-product-card__star-rating-foreground"],
|
1549
|
+
style: productReviewsRating ? { width: productReviewsRating / 5 * 100 + "%" } : {},
|
1550
|
+
children: product.reviews && productReviewsRating && /* @__PURE__ */ jsxs5(Fragment5, { children: [
|
1551
|
+
/* @__PURE__ */ jsx11(
|
1552
|
+
"span",
|
1553
|
+
{
|
1554
|
+
className: ProductCard_default["rebuy-product-card__review-count-parenthesis"],
|
1555
|
+
children: "("
|
1556
|
+
}
|
1557
|
+
),
|
1558
|
+
/* @__PURE__ */ jsx11("span", { className: ProductCard_default["rebuy-product-card__review-count-number"], children: productReviewsRating.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }),
|
1559
|
+
/* @__PURE__ */ jsx11("span", { className: ProductCard_default["rebuy-product-card__review-count-label"], children: "Reviews" }),
|
1560
|
+
/* @__PURE__ */ jsx11(
|
1561
|
+
"span",
|
1562
|
+
{
|
1563
|
+
className: ProductCard_default["rebuy-product-card__review-count-parenthesis"],
|
1564
|
+
children: ")"
|
1565
|
+
}
|
1566
|
+
)
|
1567
|
+
] })
|
1568
|
+
}
|
1569
|
+
)
|
1570
|
+
] }),
|
1571
|
+
/* @__PURE__ */ jsx11("span", { className: ProductCard_default["rebuy-product-card__review-count"], children: productReviewsRating })
|
1572
|
+
] }),
|
1573
|
+
showProductDescription && /* @__PURE__ */ jsx11("div", { className: ProductCard_default["rebuy-product-card__description"], children: /* @__PURE__ */ jsx11("p", { children: product.description }) })
|
1574
|
+
] }),
|
1575
|
+
/* @__PURE__ */ jsxs5("div", { className: ProductCard_default["rebuy-product-card__actions"], children: [
|
1576
|
+
showVariantSelect && /* @__PURE__ */ jsx11(
|
1577
|
+
"div",
|
1578
|
+
{
|
1579
|
+
className: ProductCard_default["rebuy-product-card__actions-variant-select"],
|
1580
|
+
"data-layout": cardLayout,
|
1581
|
+
children: /* @__PURE__ */ jsx11(
|
1582
|
+
VariantSelect,
|
1583
|
+
{
|
1584
|
+
handleSelectedVariant,
|
1585
|
+
product,
|
1586
|
+
selectedId: selectedVariant.id,
|
1587
|
+
style: settings?.variantSelector
|
1588
|
+
}
|
1589
|
+
)
|
1590
|
+
}
|
1591
|
+
),
|
1592
|
+
showQuantityInput && /* @__PURE__ */ jsx11("div", { className: ProductCard_default["rebuy-product-card__actions-quantity"], children: /* @__PURE__ */ jsx11(
|
1593
|
+
QuantityInput,
|
1594
|
+
{
|
1595
|
+
defaultQuantity: settings?.quantityInput?.default_quantity,
|
1596
|
+
handleSelectedQuantity,
|
1597
|
+
maxValue: settings?.quantityInput?.max_value,
|
1598
|
+
minValue: settings?.quantityInput?.min_value
|
1599
|
+
}
|
1600
|
+
) }),
|
1601
|
+
/* @__PURE__ */ jsx11("div", { className: ProductCard_default["rebuy-product-card__actions-button"], children: /* @__PURE__ */ jsx11(
|
1602
|
+
AddToCartBtn,
|
1603
|
+
{
|
1604
|
+
addToCartBtnText,
|
1605
|
+
addToCartCallback,
|
1606
|
+
isHydrogenReact,
|
1607
|
+
quantity: selectedQuantity,
|
1608
|
+
selectedVariants: [selectedVariant]
|
1609
|
+
}
|
1610
|
+
) })
|
1611
|
+
] })
|
1127
1612
|
] })
|
1128
1613
|
] }),
|
1129
|
-
/* @__PURE__ */
|
1130
|
-
|
1614
|
+
showVariantSelect && /* @__PURE__ */ jsx11("div", { className: ProductCard_default["rebuy-product-card__variant-select"], "data-layout": cardLayout, children: /* @__PURE__ */ jsx11(
|
1615
|
+
VariantSelect,
|
1131
1616
|
{
|
1132
|
-
|
1133
|
-
|
1134
|
-
|
1135
|
-
|
1617
|
+
handleSelectedVariant,
|
1618
|
+
product,
|
1619
|
+
selectedId: selectedVariant.id,
|
1620
|
+
style: settings?.variantSelector
|
1136
1621
|
}
|
1137
|
-
)
|
1622
|
+
) })
|
1138
1623
|
] });
|
1139
1624
|
};
|
1140
1625
|
|
@@ -1184,7 +1669,7 @@ var RebuyCompleteTheLook_default = {
|
|
1184
1669
|
};
|
1185
1670
|
|
1186
1671
|
// src/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.tsx
|
1187
|
-
import { jsx as
|
1672
|
+
import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
|
1188
1673
|
var RebuyCompleteTheLook = (props) => {
|
1189
1674
|
const {
|
1190
1675
|
addToCartBtnText = "Add to cart",
|
@@ -1198,9 +1683,9 @@ var RebuyCompleteTheLook = (props) => {
|
|
1198
1683
|
console.log("RebuyCompleteTheLook: No products found");
|
1199
1684
|
return null;
|
1200
1685
|
}
|
1201
|
-
return /* @__PURE__ */
|
1202
|
-
/* @__PURE__ */
|
1203
|
-
/* @__PURE__ */
|
1686
|
+
return /* @__PURE__ */ jsxs6("section", { className: RebuyCompleteTheLook_default.container, children: [
|
1687
|
+
/* @__PURE__ */ jsx12(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
|
1688
|
+
/* @__PURE__ */ jsx12("ul", { className: RebuyCompleteTheLook_default.productGrid, children: products.map((product) => /* @__PURE__ */ jsx12("li", { className: RebuyCompleteTheLook_default.productItem, children: /* @__PURE__ */ jsx12(
|
1204
1689
|
ProductCard,
|
1205
1690
|
{
|
1206
1691
|
addToCartBtnText,
|
@@ -1214,7 +1699,7 @@ var RebuyCompleteTheLook = (props) => {
|
|
1214
1699
|
};
|
1215
1700
|
|
1216
1701
|
// src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.tsx
|
1217
|
-
import { useCallback, useEffect as useEffect4, useState as
|
1702
|
+
import { useCallback, useEffect as useEffect4, useState as useState6 } from "react";
|
1218
1703
|
|
1219
1704
|
// src/utils/convertToRebuyProduct.tsx
|
1220
1705
|
var convertToRebuyProduct = (isHydrogenReact, product) => {
|
@@ -1442,7 +1927,7 @@ var convertToRebuyProduct = (isHydrogenReact, product) => {
|
|
1442
1927
|
// src/widgets/RebuyDynamicBundleProducts/BundleImages.tsx
|
1443
1928
|
import { Link as Link2 } from "@remix-run/react";
|
1444
1929
|
import { Image as Image2 } from "@shopify/hydrogen";
|
1445
|
-
import { Fragment as
|
1930
|
+
import { Fragment as Fragment6 } from "react";
|
1446
1931
|
|
1447
1932
|
// src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.module.css
|
1448
1933
|
var RebuyDynamicBundleProducts_default = {
|
@@ -1463,12 +1948,12 @@ var RebuyDynamicBundleProducts_default = {
|
|
1463
1948
|
};
|
1464
1949
|
|
1465
1950
|
// src/widgets/RebuyDynamicBundleProducts/BundleImages.tsx
|
1466
|
-
import { Fragment as
|
1951
|
+
import { Fragment as Fragment7, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
|
1467
1952
|
var BundleImages = ({ products }) => {
|
1468
1953
|
const selected = products.filter((product) => product.selected);
|
1469
|
-
return /* @__PURE__ */
|
1954
|
+
return /* @__PURE__ */ jsx13("ul", { className: RebuyDynamicBundleProducts_default.bundleImages, children: products.map((product, index) => {
|
1470
1955
|
const image = product.selectedVariant?.image;
|
1471
|
-
const productImage = image ? /* @__PURE__ */
|
1956
|
+
const productImage = image ? /* @__PURE__ */ jsx13(
|
1472
1957
|
Image2,
|
1473
1958
|
{
|
1474
1959
|
alt: image.altText || `Picture of ${product.title}`,
|
@@ -1483,21 +1968,21 @@ var BundleImages = ({ products }) => {
|
|
1483
1968
|
product.title
|
1484
1969
|
);
|
1485
1970
|
const showDelimiter = selected[0]?.id !== product.id;
|
1486
|
-
return /* @__PURE__ */
|
1487
|
-
showDelimiter && /* @__PURE__ */
|
1488
|
-
/* @__PURE__ */
|
1971
|
+
return /* @__PURE__ */ jsx13(Fragment6, { children: product.selected && /* @__PURE__ */ jsxs7(Fragment7, { children: [
|
1972
|
+
showDelimiter && /* @__PURE__ */ jsx13("li", { className: RebuyDynamicBundleProducts_default.bundleImageDelimiter, children: /* @__PURE__ */ jsx13("span", { children: "+" }) }),
|
1973
|
+
/* @__PURE__ */ jsx13("li", { className: "flex items-center", children: product.default ? (
|
1489
1974
|
// Already on product page
|
1490
1975
|
productImage
|
1491
1976
|
) : (
|
1492
1977
|
// Link to product
|
1493
|
-
/* @__PURE__ */
|
1978
|
+
/* @__PURE__ */ jsx13(Link2, { title: product.title, to: `/products/${product.handle}`, children: productImage })
|
1494
1979
|
) })
|
1495
1980
|
] }) }, product.id + "-BundleImages-" + index);
|
1496
1981
|
}) });
|
1497
1982
|
};
|
1498
1983
|
|
1499
1984
|
// src/widgets/RebuyDynamicBundleProducts/Select.tsx
|
1500
|
-
import { jsx as
|
1985
|
+
import { jsx as jsx14 } from "react/jsx-runtime";
|
1501
1986
|
var Select = ({ onSelectVariant, product }) => {
|
1502
1987
|
const getOptionsLabel = (product2) => {
|
1503
1988
|
const options = product2.variants.nodes[0].selectedOptions;
|
@@ -1506,30 +1991,30 @@ var Select = ({ onSelectVariant, product }) => {
|
|
1506
1991
|
const useValues = optionsFromKeys.every((key) => ["name", "value"].includes(key));
|
1507
1992
|
return (useValues ? optionsFromValues : optionsFromKeys).join(" / ");
|
1508
1993
|
};
|
1509
|
-
return product && /* @__PURE__ */
|
1994
|
+
return product && /* @__PURE__ */ jsx14(
|
1510
1995
|
"select",
|
1511
1996
|
{
|
1512
1997
|
"aria-label": "select variant",
|
1513
1998
|
className: RebuyDynamicBundleProducts_default.select,
|
1514
1999
|
onChange: (e) => onSelectVariant(product, e.target.value),
|
1515
2000
|
value: product.selectedVariant.id,
|
1516
|
-
children: /* @__PURE__ */
|
2001
|
+
children: /* @__PURE__ */ jsx14("optgroup", { label: getOptionsLabel(product), children: product.variants.nodes.map(({ id, title }) => /* @__PURE__ */ jsx14("option", { value: id, children: title }, id + "-BundleVariant")) })
|
1517
2002
|
}
|
1518
2003
|
);
|
1519
2004
|
};
|
1520
2005
|
|
1521
2006
|
// src/widgets/RebuyDynamicBundleProducts/BundleSelection.tsx
|
1522
|
-
import { jsx as
|
2007
|
+
import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
|
1523
2008
|
var BundleSelection = ({ onSelectVariant, onToggleBundleItem, products }) => {
|
1524
|
-
return /* @__PURE__ */
|
2009
|
+
return /* @__PURE__ */ jsx15("ul", { children: products.map((product, index) => {
|
1525
2010
|
const { availableForSale } = product.selectedVariant;
|
1526
2011
|
const isOutOfStock = !availableForSale;
|
1527
|
-
return /* @__PURE__ */
|
2012
|
+
return /* @__PURE__ */ jsx15(
|
1528
2013
|
"li",
|
1529
2014
|
{
|
1530
2015
|
className: `${RebuyDynamicBundleProducts_default.bundleItemRowContainer} ${!product.selected && RebuyDynamicBundleProducts_default.unselected}`,
|
1531
|
-
children: /* @__PURE__ */
|
1532
|
-
/* @__PURE__ */
|
2016
|
+
children: /* @__PURE__ */ jsxs8("div", { className: RebuyDynamicBundleProducts_default.bundleItemRow, children: [
|
2017
|
+
/* @__PURE__ */ jsx15(
|
1533
2018
|
"input",
|
1534
2019
|
{
|
1535
2020
|
checked: product.selected && availableForSale,
|
@@ -1541,14 +2026,14 @@ var BundleSelection = ({ onSelectVariant, onToggleBundleItem, products }) => {
|
|
1541
2026
|
value: product.id
|
1542
2027
|
}
|
1543
2028
|
),
|
1544
|
-
/* @__PURE__ */
|
1545
|
-
/* @__PURE__ */
|
1546
|
-
isOutOfStock && /* @__PURE__ */
|
1547
|
-
product.default && /* @__PURE__ */
|
2029
|
+
/* @__PURE__ */ jsxs8("div", { className: RebuyDynamicBundleProducts_default.bundleItemInput, children: [
|
2030
|
+
/* @__PURE__ */ jsxs8("label", { className: RebuyDynamicBundleProducts_default.bundleItemLabel, htmlFor: `${product.id}-toggle`, children: [
|
2031
|
+
isOutOfStock && /* @__PURE__ */ jsx15("b", { children: "SOLD OUT" }),
|
2032
|
+
product.default && /* @__PURE__ */ jsx15("b", { children: "This item:" }),
|
1548
2033
|
product.title,
|
1549
|
-
/* @__PURE__ */
|
2034
|
+
/* @__PURE__ */ jsx15(RebuyProductPrice, { selectedVariant: product.selectedVariant })
|
1550
2035
|
] }),
|
1551
|
-
product.variants.nodes.length > 1 && /* @__PURE__ */
|
2036
|
+
product.variants.nodes.length > 1 && /* @__PURE__ */ jsx15(Select, { onSelectVariant, product })
|
1552
2037
|
] })
|
1553
2038
|
] })
|
1554
2039
|
},
|
@@ -1559,7 +2044,7 @@ var BundleSelection = ({ onSelectVariant, onToggleBundleItem, products }) => {
|
|
1559
2044
|
|
1560
2045
|
// src/widgets/RebuyDynamicBundleProducts/BundlePrice.tsx
|
1561
2046
|
import { Money as Money4 } from "@shopify/hydrogen";
|
1562
|
-
import { jsx as
|
2047
|
+
import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
|
1563
2048
|
var BundlePrice = ({ products }) => {
|
1564
2049
|
const isDisabled = products.filter((product) => product.selected).length < 1;
|
1565
2050
|
const totalBundlePrice = () => {
|
@@ -1596,17 +2081,17 @@ var BundlePrice = ({ products }) => {
|
|
1596
2081
|
const price = totalBundlePrice();
|
1597
2082
|
const compareAtPrice = totalBundleCompareAtPrice();
|
1598
2083
|
const CompareAtPrice = ({ data: compareAtPrice2 }) => {
|
1599
|
-
return compareAtPrice2 && /* @__PURE__ */
|
2084
|
+
return compareAtPrice2 && /* @__PURE__ */ jsx16(Money4, { as: "span", className: RebuyDynamicBundleProducts_default.compareAtPrice, data: compareAtPrice2, withoutTrailingZeros: true });
|
1600
2085
|
};
|
1601
|
-
return products.length > 0 && /* @__PURE__ */
|
1602
|
-
/* @__PURE__ */
|
1603
|
-
/* @__PURE__ */
|
1604
|
-
isDiscounted(price, compareAtPrice) && /* @__PURE__ */
|
2086
|
+
return products.length > 0 && /* @__PURE__ */ jsx16("div", { className: "flex items-center flex-col", children: !isDisabled && /* @__PURE__ */ jsxs9("p", { className: "flex items-center gap-2 mb-2", children: [
|
2087
|
+
/* @__PURE__ */ jsx16("span", { children: "Total Price:" }),
|
2088
|
+
/* @__PURE__ */ jsx16(Money4, { as: "span", data: price, withoutTrailingZeros: true }),
|
2089
|
+
isDiscounted(price, compareAtPrice) && /* @__PURE__ */ jsx16(CompareAtPrice, { data: compareAtPrice })
|
1605
2090
|
] }) });
|
1606
2091
|
};
|
1607
2092
|
|
1608
2093
|
// src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.tsx
|
1609
|
-
import { jsx as
|
2094
|
+
import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
|
1610
2095
|
var RebuyDynamicBundleProducts = (props) => {
|
1611
2096
|
const {
|
1612
2097
|
addToCartBtnText = "Add to cart",
|
@@ -1618,7 +2103,7 @@ var RebuyDynamicBundleProducts = (props) => {
|
|
1618
2103
|
product,
|
1619
2104
|
products = []
|
1620
2105
|
} = props;
|
1621
|
-
const [bundleProducts, setBundleProducts] =
|
2106
|
+
const [bundleProducts, setBundleProducts] = useState6([]);
|
1622
2107
|
useEffect4(() => {
|
1623
2108
|
const mainProduct = convertToRebuyProduct(isHydrogenReact || false, product);
|
1624
2109
|
const formattedProducts = products.map((product2) => {
|
@@ -1652,12 +2137,12 @@ var RebuyDynamicBundleProducts = (props) => {
|
|
1652
2137
|
console.log("RebuyDynamicBundleProducts: No products found");
|
1653
2138
|
return null;
|
1654
2139
|
}
|
1655
|
-
return /* @__PURE__ */
|
1656
|
-
/* @__PURE__ */
|
1657
|
-
/* @__PURE__ */
|
1658
|
-
/* @__PURE__ */
|
1659
|
-
/* @__PURE__ */
|
1660
|
-
/* @__PURE__ */
|
2140
|
+
return /* @__PURE__ */ jsxs10("section", { className: RebuyDynamicBundleProducts_default.container, children: [
|
2141
|
+
/* @__PURE__ */ jsx17(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
|
2142
|
+
/* @__PURE__ */ jsxs10("div", { className: RebuyDynamicBundleProducts_default.bundleContainer, children: [
|
2143
|
+
/* @__PURE__ */ jsx17(BundleImages, { products: bundleProducts }),
|
2144
|
+
/* @__PURE__ */ jsx17(BundlePrice, { products: bundleProducts }),
|
2145
|
+
/* @__PURE__ */ jsx17("div", { className: RebuyDynamicBundleProducts_default.addCartBtnContainer, children: /* @__PURE__ */ jsx17(
|
1661
2146
|
AddToCartBtn,
|
1662
2147
|
{
|
1663
2148
|
addToCartBtnText,
|
@@ -1669,7 +2154,7 @@ var RebuyDynamicBundleProducts = (props) => {
|
|
1669
2154
|
})
|
1670
2155
|
}
|
1671
2156
|
) }),
|
1672
|
-
/* @__PURE__ */
|
2157
|
+
/* @__PURE__ */ jsx17(
|
1673
2158
|
BundleSelection,
|
1674
2159
|
{
|
1675
2160
|
onSelectVariant,
|
@@ -1683,7 +2168,7 @@ var RebuyDynamicBundleProducts = (props) => {
|
|
1683
2168
|
|
1684
2169
|
// src/widgets/RebuyProductAddOns/RebuyProductAddOns.tsx
|
1685
2170
|
import { Money as Money5 } from "@shopify/hydrogen-react";
|
1686
|
-
import { useCallback as useCallback2, useEffect as useEffect5, useState as
|
2171
|
+
import { useCallback as useCallback2, useEffect as useEffect5, useState as useState7 } from "react";
|
1687
2172
|
|
1688
2173
|
// src/widgets/RebuyProductAddOns/RebuyProductAddOnCard.tsx
|
1689
2174
|
import { Link as Link3 } from "@remix-run/react";
|
@@ -1705,7 +2190,7 @@ var RebuyProductAddOns_default = {
|
|
1705
2190
|
};
|
1706
2191
|
|
1707
2192
|
// src/widgets/RebuyProductAddOns/RebuyProductAddOnCard.tsx
|
1708
|
-
import { jsx as
|
2193
|
+
import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
|
1709
2194
|
var RebuyProductAddOnCard = ({
|
1710
2195
|
handleChange,
|
1711
2196
|
learnMoreText,
|
@@ -1714,8 +2199,8 @@ var RebuyProductAddOnCard = ({
|
|
1714
2199
|
titleLevel
|
1715
2200
|
}) => {
|
1716
2201
|
const { availableForSale, image } = product.selectedVariant || {};
|
1717
|
-
return /* @__PURE__ */
|
1718
|
-
/* @__PURE__ */
|
2202
|
+
return /* @__PURE__ */ jsx18("label", { className: RebuyProductAddOns_default.addOnCard, htmlFor: product.id, children: /* @__PURE__ */ jsxs11("div", { className: RebuyProductAddOns_default.addOnCardContent, children: [
|
2203
|
+
/* @__PURE__ */ jsx18(
|
1719
2204
|
"input",
|
1720
2205
|
{
|
1721
2206
|
checked: Boolean(product.selected),
|
@@ -1728,7 +2213,7 @@ var RebuyProductAddOnCard = ({
|
|
1728
2213
|
value: ""
|
1729
2214
|
}
|
1730
2215
|
),
|
1731
|
-
/* @__PURE__ */
|
2216
|
+
/* @__PURE__ */ jsx18("div", { className: RebuyProductAddOns_default.addOnCardContentImage, children: image && /* @__PURE__ */ jsx18(
|
1732
2217
|
Image3,
|
1733
2218
|
{
|
1734
2219
|
alt: image.altText || `Picture of ${product.title}`,
|
@@ -1737,17 +2222,17 @@ var RebuyProductAddOnCard = ({
|
|
1737
2222
|
width: 300
|
1738
2223
|
}
|
1739
2224
|
) }),
|
1740
|
-
/* @__PURE__ */
|
1741
|
-
!availableForSale && /* @__PURE__ */
|
1742
|
-
/* @__PURE__ */
|
1743
|
-
/* @__PURE__ */
|
1744
|
-
/* @__PURE__ */
|
2225
|
+
/* @__PURE__ */ jsxs11("div", { className: RebuyProductAddOns_default.addOnCardTextContent, children: [
|
2226
|
+
!availableForSale && /* @__PURE__ */ jsx18("p", { className: RebuyProductAddOns_default.addOnCardOutOfStock, children: outOfStockText }),
|
2227
|
+
/* @__PURE__ */ jsx18(Title, { level: titleLevel, text: product.title }),
|
2228
|
+
/* @__PURE__ */ jsx18(RebuyProductPrice, { selectedVariant: product.selectedVariant }),
|
2229
|
+
/* @__PURE__ */ jsx18(Link3, { className: RebuyProductAddOns_default.addOnCardLearnMore, to: `/products/${product.handle}`, children: learnMoreText })
|
1745
2230
|
] })
|
1746
2231
|
] }) });
|
1747
2232
|
};
|
1748
2233
|
|
1749
2234
|
// src/widgets/RebuyProductAddOns/RebuyProductAddOns.tsx
|
1750
|
-
import { jsx as
|
2235
|
+
import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
|
1751
2236
|
var RebuyProductAddOns = (props) => {
|
1752
2237
|
const {
|
1753
2238
|
addToCartCallback,
|
@@ -1764,9 +2249,9 @@ var RebuyProductAddOns = (props) => {
|
|
1764
2249
|
subtotalText = "Add-ons Subtotal: ",
|
1765
2250
|
withProductText = `With ${product?.title}: `
|
1766
2251
|
} = props;
|
1767
|
-
const [addedItems, setAddedItems] =
|
1768
|
-
const [subtotalWithProduct, setSubtotalWithProduct] =
|
1769
|
-
const [subtotalWithOutProduct, setSubtotalWithOutProduct] =
|
2252
|
+
const [addedItems, setAddedItems] = useState7(products);
|
2253
|
+
const [subtotalWithProduct, setSubtotalWithProduct] = useState7();
|
2254
|
+
const [subtotalWithOutProduct, setSubtotalWithOutProduct] = useState7();
|
1770
2255
|
useEffect5(() => {
|
1771
2256
|
let initialTotal = 0;
|
1772
2257
|
let currencyCode = "USD";
|
@@ -1842,9 +2327,9 @@ var RebuyProductAddOns = (props) => {
|
|
1842
2327
|
console.log("RebuyProductAddOns: No products found");
|
1843
2328
|
return null;
|
1844
2329
|
}
|
1845
|
-
return /* @__PURE__ */
|
1846
|
-
/* @__PURE__ */
|
1847
|
-
/* @__PURE__ */
|
2330
|
+
return /* @__PURE__ */ jsxs12("div", { className: RebuyProductAddOns_default.container, children: [
|
2331
|
+
/* @__PURE__ */ jsx19(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
|
2332
|
+
/* @__PURE__ */ jsx19("ul", { className: RebuyProductAddOns_default.productAddOnsList, children: products.map((product2) => /* @__PURE__ */ jsx19("li", { children: /* @__PURE__ */ jsx19(
|
1848
2333
|
RebuyProductAddOnCard,
|
1849
2334
|
{
|
1850
2335
|
handleChange,
|
@@ -1854,16 +2339,16 @@ var RebuyProductAddOns = (props) => {
|
|
1854
2339
|
titleLevel: getTitleLevel(customTitleLevel, true)
|
1855
2340
|
}
|
1856
2341
|
) }, product2.id)) }),
|
1857
|
-
/* @__PURE__ */
|
1858
|
-
/* @__PURE__ */
|
2342
|
+
/* @__PURE__ */ jsxs12("div", { className: RebuyProductAddOns_default.productAddOnsFooter, children: [
|
2343
|
+
/* @__PURE__ */ jsxs12("div", { className: RebuyProductAddOns_default.moneyContainer, children: [
|
1859
2344
|
subtotalText,
|
1860
|
-
subtotalWithOutProduct && /* @__PURE__ */
|
2345
|
+
subtotalWithOutProduct && /* @__PURE__ */ jsx19(Money5, { data: subtotalWithOutProduct, withoutTrailingZeros: true })
|
1861
2346
|
] }),
|
1862
|
-
includeMainProduct && /* @__PURE__ */
|
2347
|
+
includeMainProduct && /* @__PURE__ */ jsxs12("div", { className: RebuyProductAddOns_default.moneyContainer, children: [
|
1863
2348
|
withProductText,
|
1864
|
-
subtotalWithProduct && /* @__PURE__ */
|
2349
|
+
subtotalWithProduct && /* @__PURE__ */ jsx19(Money5, { data: subtotalWithProduct, withoutTrailingZeros: true })
|
1865
2350
|
] }),
|
1866
|
-
/* @__PURE__ */
|
2351
|
+
/* @__PURE__ */ jsx19("div", { className: RebuyProductAddOns_default.addCartBtnContainer, children: includeMainProduct ? /* @__PURE__ */ jsx19(
|
1867
2352
|
AddToCartBtn,
|
1868
2353
|
{
|
1869
2354
|
addToCartBtnText,
|
@@ -1873,7 +2358,7 @@ var RebuyProductAddOns = (props) => {
|
|
1873
2358
|
moneyData: subtotalWithProduct,
|
1874
2359
|
selectedVariants: addedItems.map((item) => item.selectedVariant)
|
1875
2360
|
}
|
1876
|
-
) : /* @__PURE__ */
|
2361
|
+
) : /* @__PURE__ */ jsx19(
|
1877
2362
|
AddToCartBtn,
|
1878
2363
|
{
|
1879
2364
|
addToCartBtnText,
|
@@ -1895,7 +2380,7 @@ var RebuyProductRecommendations_default = {
|
|
1895
2380
|
};
|
1896
2381
|
|
1897
2382
|
// src/widgets/RebuyProductRecommendations/RebuyProductRecommendations.tsx
|
1898
|
-
import { jsx as
|
2383
|
+
import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
|
1899
2384
|
var RebuyProductRecommendations = (props) => {
|
1900
2385
|
const {
|
1901
2386
|
addToCartBtnText = "Add to cart",
|
@@ -1909,9 +2394,9 @@ var RebuyProductRecommendations = (props) => {
|
|
1909
2394
|
console.log("RebuyProductRecommendations: No products found");
|
1910
2395
|
return null;
|
1911
2396
|
}
|
1912
|
-
return /* @__PURE__ */
|
1913
|
-
/* @__PURE__ */
|
1914
|
-
/* @__PURE__ */
|
2397
|
+
return /* @__PURE__ */ jsxs13("section", { className: RebuyProductRecommendations_default.container, children: [
|
2398
|
+
/* @__PURE__ */ jsx20(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
|
2399
|
+
/* @__PURE__ */ jsx20("ul", { className: RebuyProductRecommendations_default.productGrid, children: products.map((product) => /* @__PURE__ */ jsx20("li", { className: RebuyProductRecommendations_default.productItem, children: /* @__PURE__ */ jsx20(
|
1915
2400
|
ProductCard,
|
1916
2401
|
{
|
1917
2402
|
addToCartBtnText,
|
@@ -1923,13 +2408,771 @@ var RebuyProductRecommendations = (props) => {
|
|
1923
2408
|
) }, product.id)) })
|
1924
2409
|
] });
|
1925
2410
|
};
|
2411
|
+
|
2412
|
+
// src/widgets/RebuyWidget/RebuyWidget.tsx
|
2413
|
+
import { RebuyClient as RebuyClient3 } from "@rebuy/rebuy";
|
2414
|
+
import * as Utilities5 from "@rebuy/rebuy/utilities";
|
2415
|
+
import { flattenConnection as flattenConnection2 } from "@shopify/hydrogen";
|
2416
|
+
import { useContext as useContext2, useEffect as useEffect10, useMemo as useMemo5, useRef as useRef2, useState as useState11 } from "react";
|
2417
|
+
|
2418
|
+
// src/assets/Close.tsx
|
2419
|
+
import { jsx as jsx21 } from "react/jsx-runtime";
|
2420
|
+
var Close = () => {
|
2421
|
+
return /* @__PURE__ */ jsx21("svg", { height: "1em", viewBox: "0 0 352 512", width: "1em", children: /* @__PURE__ */ jsx21("path", { d: "M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.19 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.19 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z" }) });
|
2422
|
+
};
|
2423
|
+
|
2424
|
+
// src/hooks/useBreakpoint.ts
|
2425
|
+
import { useEffect as useEffect6, useState as useState8 } from "react";
|
2426
|
+
var useBreakpoint = (settings) => {
|
2427
|
+
const [breakpoint, setBreakpoint] = useState8("medium");
|
2428
|
+
useEffect6(() => {
|
2429
|
+
if (!settings?.breakpoints) return;
|
2430
|
+
const handleResize = () => {
|
2431
|
+
const width = window.innerWidth;
|
2432
|
+
if (width <= settings.breakpoints.medium.max) {
|
2433
|
+
if (width >= settings.breakpoints.medium.min) {
|
2434
|
+
setBreakpoint("medium");
|
2435
|
+
} else {
|
2436
|
+
setBreakpoint("small");
|
2437
|
+
}
|
2438
|
+
} else {
|
2439
|
+
setBreakpoint("large");
|
2440
|
+
}
|
2441
|
+
};
|
2442
|
+
handleResize();
|
2443
|
+
const debounceDelay = 150;
|
2444
|
+
let timeoutId;
|
2445
|
+
const debouncedHandleResize = () => {
|
2446
|
+
clearTimeout(timeoutId);
|
2447
|
+
timeoutId = setTimeout(handleResize, debounceDelay);
|
2448
|
+
};
|
2449
|
+
window.addEventListener("resize", debouncedHandleResize);
|
2450
|
+
return () => {
|
2451
|
+
window.removeEventListener("resize", debouncedHandleResize);
|
2452
|
+
clearTimeout(timeoutId);
|
2453
|
+
};
|
2454
|
+
}, [settings]);
|
2455
|
+
return breakpoint;
|
2456
|
+
};
|
2457
|
+
|
2458
|
+
// src/hooks/usePopupTrigger.tsx
|
2459
|
+
import { useCallback as useCallback3, useEffect as useEffect7 } from "react";
|
2460
|
+
var usePopupTrigger = (settings, popupTriggerId, widgetId, popupShownOnce, showPopup, setShowPopup, setPopupShownOnce) => {
|
2461
|
+
const delayInMs = settings?.display_type === "popup" ? (settings?.popup_delay || 0) * 1e3 : 0;
|
2462
|
+
const popupTrigger = settings?.popup_trigger;
|
2463
|
+
const showPopupWithDelay = useCallback3(() => {
|
2464
|
+
if (!settings || settings.display_type !== "popup") return;
|
2465
|
+
setTimeout(() => {
|
2466
|
+
setShowPopup(true);
|
2467
|
+
setPopupShownOnce(true);
|
2468
|
+
}, delayInMs);
|
2469
|
+
}, [delayInMs, setShowPopup, setPopupShownOnce, settings]);
|
2470
|
+
useEffect7(() => {
|
2471
|
+
if (!settings || settings.display_type !== "popup" || popupTrigger !== "load" || popupShownOnce) return;
|
2472
|
+
const timer = setTimeout(() => {
|
2473
|
+
setShowPopup(true);
|
2474
|
+
setPopupShownOnce(true);
|
2475
|
+
}, delayInMs);
|
2476
|
+
return () => clearTimeout(timer);
|
2477
|
+
}, [popupTrigger, popupShownOnce, delayInMs, setShowPopup, setPopupShownOnce, settings]);
|
2478
|
+
useEffect7(() => {
|
2479
|
+
if (!settings || settings.display_type !== "popup" || popupTrigger !== "add_to_cart" || !popupTriggerId) return;
|
2480
|
+
const selector = `#${popupTriggerId}`;
|
2481
|
+
const handleCartAdd = () => {
|
2482
|
+
if (!showPopup) {
|
2483
|
+
showPopupWithDelay();
|
2484
|
+
}
|
2485
|
+
};
|
2486
|
+
const observer = new MutationObserver(() => {
|
2487
|
+
const elements2 = document.querySelectorAll(selector);
|
2488
|
+
if (elements2.length) {
|
2489
|
+
elements2.forEach((el) => {
|
2490
|
+
el.addEventListener("click", handleCartAdd);
|
2491
|
+
});
|
2492
|
+
observer.disconnect();
|
2493
|
+
}
|
2494
|
+
});
|
2495
|
+
const elements = document.querySelectorAll(selector);
|
2496
|
+
if (elements.length) {
|
2497
|
+
elements.forEach((el) => {
|
2498
|
+
el.addEventListener("click", handleCartAdd);
|
2499
|
+
});
|
2500
|
+
} else {
|
2501
|
+
observer.observe(document.body, { childList: true, subtree: true });
|
2502
|
+
}
|
2503
|
+
return () => {
|
2504
|
+
observer.disconnect();
|
2505
|
+
document.querySelectorAll(selector).forEach((el) => {
|
2506
|
+
el.removeEventListener("click", handleCartAdd);
|
2507
|
+
});
|
2508
|
+
};
|
2509
|
+
}, [popupTrigger, popupTriggerId, showPopup, showPopupWithDelay, settings]);
|
2510
|
+
useEffect7(() => {
|
2511
|
+
if (!settings || settings.display_type !== "popup" || popupTrigger !== "submit") return;
|
2512
|
+
const selector = "form";
|
2513
|
+
const handleSubmit = () => {
|
2514
|
+
showPopupWithDelay();
|
2515
|
+
};
|
2516
|
+
const forms = document.querySelectorAll(selector);
|
2517
|
+
forms.forEach((form) => {
|
2518
|
+
form.addEventListener("submit", handleSubmit);
|
2519
|
+
});
|
2520
|
+
return () => {
|
2521
|
+
forms.forEach((form) => {
|
2522
|
+
form.removeEventListener("submit", handleSubmit);
|
2523
|
+
});
|
2524
|
+
};
|
2525
|
+
}, [popupTrigger, showPopupWithDelay, settings]);
|
2526
|
+
useEffect7(() => {
|
2527
|
+
if (!settings || settings.display_type !== "popup" || popupTrigger !== "exit") return;
|
2528
|
+
const handleExitIntent = (e) => {
|
2529
|
+
if (e.clientY <= 0 && !popupShownOnce) {
|
2530
|
+
showPopupWithDelay();
|
2531
|
+
}
|
2532
|
+
};
|
2533
|
+
const handleVisibilityChange = () => {
|
2534
|
+
if (document.visibilityState === "hidden" && !popupShownOnce) {
|
2535
|
+
const shouldShowOnFocus = true;
|
2536
|
+
localStorage.setItem(`rebuy-popup-pending-${widgetId}`, shouldShowOnFocus.toString());
|
2537
|
+
} else if (document.visibilityState === "visible") {
|
2538
|
+
const pendingPopup = localStorage.getItem(`rebuy-popup-pending-${widgetId}`);
|
2539
|
+
if (pendingPopup === "true" && !popupShownOnce) {
|
2540
|
+
showPopupWithDelay();
|
2541
|
+
localStorage.removeItem(`rebuy-popup-pending-${widgetId}`);
|
2542
|
+
}
|
2543
|
+
}
|
2544
|
+
};
|
2545
|
+
document.addEventListener("mouseleave", handleExitIntent);
|
2546
|
+
document.addEventListener("visibilitychange", handleVisibilityChange);
|
2547
|
+
if (document.visibilityState === "visible") {
|
2548
|
+
const pendingPopup = localStorage.getItem(`rebuy-popup-pending-${widgetId}`);
|
2549
|
+
if (pendingPopup === "true" && !popupShownOnce) {
|
2550
|
+
showPopupWithDelay();
|
2551
|
+
localStorage.removeItem(`rebuy-popup-pending-${widgetId}`);
|
2552
|
+
}
|
2553
|
+
}
|
2554
|
+
return () => {
|
2555
|
+
document.removeEventListener("mouseleave", handleExitIntent);
|
2556
|
+
document.removeEventListener("visibilitychange", handleVisibilityChange);
|
2557
|
+
};
|
2558
|
+
}, [popupTrigger, popupShownOnce, showPopupWithDelay, widgetId, settings]);
|
2559
|
+
};
|
2560
|
+
|
2561
|
+
// src/components/ProductCarousel/ProductCarousel.tsx
|
2562
|
+
import { useEffect as useEffect8, useState as useState9 } from "react";
|
2563
|
+
|
2564
|
+
// src/components/ProductCarousel/ProductCarousel.module.css
|
2565
|
+
var ProductCarousel_default = {
|
2566
|
+
"rebuy-carousel": "ProductCarousel_rebuy-carousel",
|
2567
|
+
"rebuy-carousel__container": "ProductCarousel_rebuy-carousel__container",
|
2568
|
+
"rebuy-carousel__slide": "ProductCarousel_rebuy-carousel__slide",
|
2569
|
+
"rebuy-carousel__controls": "ProductCarousel_rebuy-carousel__controls",
|
2570
|
+
"rebuy-carousel__prev": "ProductCarousel_rebuy-carousel__prev",
|
2571
|
+
"rebuy-carousel__next": "ProductCarousel_rebuy-carousel__next",
|
2572
|
+
"rebuy-carousel__pagination": "ProductCarousel_rebuy-carousel__pagination",
|
2573
|
+
"rebuy-carousel__dot": "ProductCarousel_rebuy-carousel__dot",
|
2574
|
+
"rebuy-carousel__grid": "ProductCarousel_rebuy-carousel__grid"
|
2575
|
+
};
|
2576
|
+
|
2577
|
+
// src/components/ProductCarousel/ProductCarousel.tsx
|
2578
|
+
import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
|
2579
|
+
var ProductCarousel = ({
|
2580
|
+
addToCartBtnText,
|
2581
|
+
addToCartCallback,
|
2582
|
+
columns,
|
2583
|
+
isHydrogenReact,
|
2584
|
+
productCardTitleLevel,
|
2585
|
+
products,
|
2586
|
+
settings,
|
2587
|
+
showPagination = true
|
2588
|
+
}) => {
|
2589
|
+
const [currentSlide, setCurrentSlide] = useState9(0);
|
2590
|
+
const [totalSlides, setTotalSlides] = useState9(0);
|
2591
|
+
const [repeatedProducts, setRepeatedProducts] = useState9([]);
|
2592
|
+
useEffect8(() => {
|
2593
|
+
if (products.length === 0) {
|
2594
|
+
setRepeatedProducts([]);
|
2595
|
+
return;
|
2596
|
+
}
|
2597
|
+
const productsNeeded = Math.ceil(products.length / columns) * columns;
|
2598
|
+
let repeated = [...products];
|
2599
|
+
while (repeated.length < productsNeeded) {
|
2600
|
+
const remaining = productsNeeded - repeated.length;
|
2601
|
+
repeated = [...repeated, ...products.slice(0, remaining)];
|
2602
|
+
}
|
2603
|
+
setRepeatedProducts(repeated);
|
2604
|
+
}, [products, columns]);
|
2605
|
+
useEffect8(() => {
|
2606
|
+
if (repeatedProducts.length && columns) {
|
2607
|
+
setTotalSlides(Math.ceil(repeatedProducts.length / columns));
|
2608
|
+
}
|
2609
|
+
}, [repeatedProducts.length, columns]);
|
2610
|
+
const nextSlide = () => {
|
2611
|
+
setCurrentSlide((prev) => (prev + 1) % totalSlides);
|
2612
|
+
};
|
2613
|
+
const prevSlide = () => {
|
2614
|
+
setCurrentSlide((prev) => (prev - 1 + totalSlides) % totalSlides);
|
2615
|
+
};
|
2616
|
+
const goToSlide = (slideIndex) => {
|
2617
|
+
setCurrentSlide(slideIndex);
|
2618
|
+
};
|
2619
|
+
const slides = [];
|
2620
|
+
for (let i = 0; i < repeatedProducts.length; i += columns) {
|
2621
|
+
slides.push(repeatedProducts.slice(i, i + columns));
|
2622
|
+
}
|
2623
|
+
return /* @__PURE__ */ jsxs14("div", { className: ProductCarousel_default["rebuy-carousel"], children: [
|
2624
|
+
/* @__PURE__ */ jsx22(
|
2625
|
+
"div",
|
2626
|
+
{
|
2627
|
+
className: ProductCarousel_default["rebuy-carousel__container"],
|
2628
|
+
style: { transform: `translateX(-${currentSlide * 100}%)` },
|
2629
|
+
children: slides.map((slideProducts, index) => /* @__PURE__ */ jsx22("div", { className: ProductCarousel_default["rebuy-carousel__slide"], children: /* @__PURE__ */ jsx22("div", { className: ProductCarousel_default["rebuy-carousel__grid"], "data-columns": columns, children: slideProducts.map((product, productIndex) => /* @__PURE__ */ jsx22(
|
2630
|
+
ProductCard,
|
2631
|
+
{
|
2632
|
+
addToCartBtnText,
|
2633
|
+
addToCartCallback,
|
2634
|
+
isHydrogenReact,
|
2635
|
+
product,
|
2636
|
+
productCardTitleLevel,
|
2637
|
+
settings
|
2638
|
+
},
|
2639
|
+
`${product.id}-${index}-${productIndex}`
|
2640
|
+
)) }) }, index))
|
2641
|
+
}
|
2642
|
+
),
|
2643
|
+
totalSlides > 1 && /* @__PURE__ */ jsxs14("div", { className: ProductCarousel_default["rebuy-carousel__controls"], children: [
|
2644
|
+
/* @__PURE__ */ jsx22("button", { className: ProductCarousel_default["rebuy-carousel__prev"], onClick: prevSlide, type: "button", children: "\u2190" }),
|
2645
|
+
/* @__PURE__ */ jsx22("button", { className: ProductCarousel_default["rebuy-carousel__next"], onClick: nextSlide, type: "button", children: "\u2192" })
|
2646
|
+
] }),
|
2647
|
+
showPagination && totalSlides > 1 && /* @__PURE__ */ jsx22("div", { className: ProductCarousel_default["rebuy-carousel__pagination"], children: Array.from({ length: totalSlides }).map((_, index) => /* @__PURE__ */ jsx22(
|
2648
|
+
"button",
|
2649
|
+
{
|
2650
|
+
className: ProductCarousel_default["rebuy-carousel__dot"],
|
2651
|
+
"data-active": index === currentSlide ? "true" : "false",
|
2652
|
+
onClick: () => goToSlide(index),
|
2653
|
+
type: "button"
|
2654
|
+
},
|
2655
|
+
index
|
2656
|
+
)) })
|
2657
|
+
] });
|
2658
|
+
};
|
2659
|
+
|
2660
|
+
// src/components/Timer/Timer.tsx
|
2661
|
+
import { useCallback as useCallback4, useEffect as useEffect9, useState as useState10 } from "react";
|
2662
|
+
|
2663
|
+
// src/components/Timer/Timer.module.css
|
2664
|
+
var Timer_default = {
|
2665
|
+
"rebuy-timer__container": "Timer_rebuy-timer__container",
|
2666
|
+
"rebuy-timer__text": "Timer_rebuy-timer__text",
|
2667
|
+
"rebuy-timer__title": "Timer_rebuy-timer__title",
|
2668
|
+
"rebuy-timer__display": "Timer_rebuy-timer__display",
|
2669
|
+
"rebuy-timer__display--urgent": "Timer_rebuy-timer__display--urgent",
|
2670
|
+
pulse: "Timer_pulse",
|
2671
|
+
"rebuy-timer__minutes": "Timer_rebuy-timer__minutes",
|
2672
|
+
"rebuy-timer__seconds": "Timer_rebuy-timer__seconds",
|
2673
|
+
"rebuy-timer__separator": "Timer_rebuy-timer__separator"
|
2674
|
+
};
|
2675
|
+
|
2676
|
+
// src/components/Timer/Timer.tsx
|
2677
|
+
import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
|
2678
|
+
var Timer = ({ action, durationMinutes, durationSeconds, isPopup = false, onDismiss, title }) => {
|
2679
|
+
const initialTotalSeconds = (durationMinutes || 0) * 60 + (durationSeconds || 0);
|
2680
|
+
const [totalSeconds, setTotalSeconds] = useState10(initialTotalSeconds);
|
2681
|
+
const [timerActive, setTimerActive] = useState10(true);
|
2682
|
+
const minutes = Math.floor(totalSeconds / 60);
|
2683
|
+
const seconds = totalSeconds % 60;
|
2684
|
+
const formattedMinutes = String(minutes).padStart(2, "0");
|
2685
|
+
const formattedSeconds = String(seconds).padStart(2, "0");
|
2686
|
+
const handleTimerEnd = useCallback4(() => {
|
2687
|
+
setTimerActive(false);
|
2688
|
+
switch (action) {
|
2689
|
+
case "dismiss":
|
2690
|
+
if (isPopup && onDismiss) {
|
2691
|
+
onDismiss();
|
2692
|
+
}
|
2693
|
+
break;
|
2694
|
+
case "checkout":
|
2695
|
+
window.location.href = "/checkout";
|
2696
|
+
break;
|
2697
|
+
case "cart":
|
2698
|
+
window.location.href = "/cart";
|
2699
|
+
break;
|
2700
|
+
case "stop":
|
2701
|
+
default:
|
2702
|
+
break;
|
2703
|
+
}
|
2704
|
+
}, [action, isPopup, onDismiss]);
|
2705
|
+
useEffect9(() => {
|
2706
|
+
if (!timerActive) return;
|
2707
|
+
const interval = setInterval(() => {
|
2708
|
+
setTotalSeconds((prevSeconds) => {
|
2709
|
+
if (prevSeconds <= 0) {
|
2710
|
+
clearInterval(interval);
|
2711
|
+
handleTimerEnd();
|
2712
|
+
return 0;
|
2713
|
+
}
|
2714
|
+
return prevSeconds - 1;
|
2715
|
+
});
|
2716
|
+
}, 1e3);
|
2717
|
+
return () => clearInterval(interval);
|
2718
|
+
}, [timerActive, handleTimerEnd]);
|
2719
|
+
const isUrgent = totalSeconds < 10;
|
2720
|
+
return /* @__PURE__ */ jsx23("div", { className: Timer_default["rebuy-timer__container"], children: /* @__PURE__ */ jsxs15("p", { className: Timer_default["rebuy-timer__text"], children: [
|
2721
|
+
/* @__PURE__ */ jsx23("span", { className: Timer_default["rebuy-timer__title"], children: title }),
|
2722
|
+
/* @__PURE__ */ jsxs15(
|
2723
|
+
"span",
|
2724
|
+
{
|
2725
|
+
className: `${Timer_default["rebuy-timer__display"]} ${isUrgent ? Timer_default["rebuy-timer__display--urgent"] : ""}`,
|
2726
|
+
children: [
|
2727
|
+
/* @__PURE__ */ jsx23("span", { className: Timer_default["rebuy-timer__minutes"], children: formattedMinutes }),
|
2728
|
+
/* @__PURE__ */ jsx23("span", { className: Timer_default["rebuy-timer__separator"], children: ":" }),
|
2729
|
+
/* @__PURE__ */ jsx23("span", { className: Timer_default["rebuy-timer__seconds"], children: formattedSeconds })
|
2730
|
+
]
|
2731
|
+
}
|
2732
|
+
)
|
2733
|
+
] }) });
|
2734
|
+
};
|
2735
|
+
|
2736
|
+
// src/widgets/RebuyWidget/RebuyWidget.module.css
|
2737
|
+
var RebuyWidget_default = {
|
2738
|
+
"rebuy-widget__container": "RebuyWidget_rebuy-widget__container",
|
2739
|
+
"rebuy-widget__popup-overlay": "RebuyWidget_rebuy-widget__popup-overlay",
|
2740
|
+
"rebuy-widget__popup-content": "RebuyWidget_rebuy-widget__popup-content",
|
2741
|
+
"rebuy-widget__content": "RebuyWidget_rebuy-widget__content",
|
2742
|
+
"rebuy-widget__inner-content": "RebuyWidget_rebuy-widget__inner-content",
|
2743
|
+
"rebuy-widget__description": "RebuyWidget_rebuy-widget__description",
|
2744
|
+
"rebuy-widget__modal-close": "RebuyWidget_rebuy-widget__modal-close",
|
2745
|
+
"rebuy-widget__product-grid": "RebuyWidget_rebuy-widget__product-grid"
|
2746
|
+
};
|
2747
|
+
|
2748
|
+
// src/widgets/RebuyWidget/WidgetContent.tsx
|
2749
|
+
import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
|
2750
|
+
var WidgetContent = ({
|
2751
|
+
addToCartCallback,
|
2752
|
+
customTitleLevel,
|
2753
|
+
isHydrogenReact,
|
2754
|
+
isInPopup,
|
2755
|
+
onDismiss,
|
2756
|
+
products,
|
2757
|
+
settings
|
2758
|
+
}) => {
|
2759
|
+
const currentBreakpoint = useBreakpoint(settings);
|
2760
|
+
const hasTimer = settings && settings.timer.enabled && settings.language.timer_title !== "" && (settings.timer.duration_minutes !== null || settings.timer.duration_seconds !== null);
|
2761
|
+
const hasSuperTitle = settings?.language.super_title !== "";
|
2762
|
+
const hasPrimaryTitle = settings?.language.title !== "";
|
2763
|
+
const hasDescription = settings?.language.description !== "";
|
2764
|
+
const layoutSettings = settings?.layout?.[currentBreakpoint];
|
2765
|
+
const isCarousel = layoutSettings?.carousel || false;
|
2766
|
+
const columns = layoutSettings?.columns || 1;
|
2767
|
+
const showPagination = layoutSettings?.show_paginations || false;
|
2768
|
+
const productCardSettings = {
|
2769
|
+
layoutStyle: layoutSettings?.style,
|
2770
|
+
productOptions: settings?.product_options,
|
2771
|
+
quantityInput: settings?.quantity_inputs,
|
2772
|
+
settingsDiscount: settings?.discount,
|
2773
|
+
variantSelector: settings?.view_options.variant_selector
|
2774
|
+
};
|
2775
|
+
const productCardTitleLevel = hasSuperTitle ? getTitleLevel(getTitleLevel(customTitleLevel, true), true) : getTitleLevel(customTitleLevel, true);
|
2776
|
+
const renderProducts = () => {
|
2777
|
+
if (!products || products.length === 0) {
|
2778
|
+
return null;
|
2779
|
+
}
|
2780
|
+
if (isCarousel) {
|
2781
|
+
return /* @__PURE__ */ jsx24(
|
2782
|
+
ProductCarousel,
|
2783
|
+
{
|
2784
|
+
addToCartBtnText: settings?.language.add_to_cart,
|
2785
|
+
addToCartCallback,
|
2786
|
+
columns,
|
2787
|
+
isHydrogenReact,
|
2788
|
+
productCardTitleLevel,
|
2789
|
+
products,
|
2790
|
+
settings: productCardSettings,
|
2791
|
+
showPagination
|
2792
|
+
}
|
2793
|
+
);
|
2794
|
+
}
|
2795
|
+
return /* @__PURE__ */ jsx24("div", { className: RebuyWidget_default["rebuy-widget__product-grid"], "data-columns": columns, role: "list", tabIndex: 0, children: products.map((product) => /* @__PURE__ */ jsx24("div", { children: /* @__PURE__ */ jsx24(
|
2796
|
+
ProductCard,
|
2797
|
+
{
|
2798
|
+
addToCartBtnText: settings?.language.add_to_cart,
|
2799
|
+
addToCartCallback,
|
2800
|
+
isHydrogenReact,
|
2801
|
+
isInPopup,
|
2802
|
+
onPopupDismiss: onDismiss,
|
2803
|
+
product,
|
2804
|
+
productCardTitleLevel,
|
2805
|
+
settings: productCardSettings
|
2806
|
+
}
|
2807
|
+
) }, product.id)) });
|
2808
|
+
};
|
2809
|
+
return /* @__PURE__ */ jsxs16("div", { className: RebuyWidget_default["rebuy-widget__inner-content"], children: [
|
2810
|
+
hasTimer && /* @__PURE__ */ jsx24(
|
2811
|
+
Timer,
|
2812
|
+
{
|
2813
|
+
action: settings?.timer.action,
|
2814
|
+
durationMinutes: settings?.timer.duration_minutes,
|
2815
|
+
durationSeconds: settings?.timer.duration_seconds,
|
2816
|
+
isPopup: settings?.display_type === "popup",
|
2817
|
+
onDismiss,
|
2818
|
+
title: settings?.language.timer_title
|
2819
|
+
}
|
2820
|
+
),
|
2821
|
+
hasSuperTitle && /* @__PURE__ */ jsx24(
|
2822
|
+
Title,
|
2823
|
+
{
|
2824
|
+
level: getTitleLevel(customTitleLevel),
|
2825
|
+
style: { marginBottom: "0", textAlign: "center" },
|
2826
|
+
text: settings.language.super_title
|
2827
|
+
}
|
2828
|
+
),
|
2829
|
+
hasPrimaryTitle && /* @__PURE__ */ jsx24(
|
2830
|
+
Title,
|
2831
|
+
{
|
2832
|
+
level: getTitleLevel(customTitleLevel, hasSuperTitle ? true : false),
|
2833
|
+
style: { textAlign: "center" },
|
2834
|
+
text: settings.language.title
|
2835
|
+
}
|
2836
|
+
),
|
2837
|
+
hasDescription && /* @__PURE__ */ jsx24("p", { className: RebuyWidget_default["rebuy-widget__description"], children: settings.language.description }),
|
2838
|
+
renderProducts()
|
2839
|
+
] });
|
2840
|
+
};
|
2841
|
+
|
2842
|
+
// src/widgets/RebuyWidget/RebuyWidget.tsx
|
2843
|
+
import { Fragment as Fragment8, jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
|
2844
|
+
var RebuyWidget = (props) => {
|
2845
|
+
const {
|
2846
|
+
addToCartCallback,
|
2847
|
+
customTitleLevel = "h2",
|
2848
|
+
isHydrogenReact,
|
2849
|
+
popupTriggerId,
|
2850
|
+
product,
|
2851
|
+
productId,
|
2852
|
+
variant,
|
2853
|
+
variantId,
|
2854
|
+
widgetId
|
2855
|
+
} = props;
|
2856
|
+
const { apiKey: apiKeyFromConfig, loadingStatus: configLoadingStatus, rebuyConfig } = useRebuyConfig();
|
2857
|
+
const [settings, setSettings] = useState11(null);
|
2858
|
+
const [loadingSettings, setLoadingSettings] = useState11(true);
|
2859
|
+
const [error, setError] = useState11(null);
|
2860
|
+
const [showPopup, setShowPopup] = useState11(false);
|
2861
|
+
const [popupShownOnce, setPopupShownOnce] = useState11(false);
|
2862
|
+
const popupRef = useRef2(null);
|
2863
|
+
const [Rebuy, setRebuy] = useState11(null);
|
2864
|
+
const rebuyGeneralContext = useContext2(RebuyContext);
|
2865
|
+
const generalContextParams = rebuyGeneralContext?.contextParameters;
|
2866
|
+
const mainCacheKey = rebuyConfig?.shop?.cache_key;
|
2867
|
+
const generalContextCacheKey = generalContextParams?.cacheKey;
|
2868
|
+
const cacheKeyToUse = mainCacheKey || generalContextCacheKey || "";
|
2869
|
+
const [initialized, setInitialized] = useState11(false);
|
2870
|
+
const shopifyProductId = product?.id ?? productId ?? null;
|
2871
|
+
const shopifyVariantId = variant?.id ?? variantId ?? null;
|
2872
|
+
const [products, setProducts] = useState11([]);
|
2873
|
+
const currentBreakpoint = useBreakpoint(settings);
|
2874
|
+
const shouldHideWidget = settings?.layout?.[currentBreakpoint]?.style === "none";
|
2875
|
+
usePopupTrigger(settings, popupTriggerId, widgetId, popupShownOnce, showPopup, setShowPopup, setPopupShownOnce);
|
2876
|
+
useEffect10(() => {
|
2877
|
+
if (!Rebuy && apiKeyFromConfig && configLoadingStatus === "success") {
|
2878
|
+
const client = new RebuyClient3(apiKeyFromConfig);
|
2879
|
+
if (generalContextParams) {
|
2880
|
+
client.setContextParameters(generalContextParams);
|
2881
|
+
}
|
2882
|
+
setRebuy(client);
|
2883
|
+
setInitialized(true);
|
2884
|
+
}
|
2885
|
+
}, [Rebuy, apiKeyFromConfig, configLoadingStatus, generalContextParams]);
|
2886
|
+
useEffect10(() => {
|
2887
|
+
if (!Rebuy || !generalContextParams) return;
|
2888
|
+
Rebuy.setContextParameters(generalContextParams);
|
2889
|
+
}, [Rebuy, generalContextParams]);
|
2890
|
+
useEffect10(() => {
|
2891
|
+
if (configLoadingStatus === "loading") {
|
2892
|
+
return;
|
2893
|
+
}
|
2894
|
+
if (!widgetId || !Rebuy || configLoadingStatus !== "success") {
|
2895
|
+
if (!widgetId && !loadingSettings && configLoadingStatus === "idle") {
|
2896
|
+
setError("Widget ID is missing.");
|
2897
|
+
} else if (!loadingSettings && configLoadingStatus === "error") {
|
2898
|
+
setError("Rebuy configuration failed to load.");
|
2899
|
+
} else if (!loadingSettings && apiKeyFromConfig && !Rebuy) {
|
2900
|
+
setError("Rebuy client not initialized.");
|
2901
|
+
} else if (!apiKeyFromConfig && !loadingSettings && configLoadingStatus === "success") {
|
2902
|
+
setError("Rebuy API Key is missing.");
|
2903
|
+
}
|
2904
|
+
if (!loadingSettings) setLoadingSettings(false);
|
2905
|
+
return;
|
2906
|
+
}
|
2907
|
+
const fetchSettings = async () => {
|
2908
|
+
setLoadingSettings(true);
|
2909
|
+
setError(null);
|
2910
|
+
try {
|
2911
|
+
const settingsParams = { id: widgetId };
|
2912
|
+
if (cacheKeyToUse) {
|
2913
|
+
settingsParams.cache_key = cacheKeyToUse;
|
2914
|
+
}
|
2915
|
+
const settingsResponse = await Rebuy.getShieldedAsset("/api/v1/widgets/settings", settingsParams);
|
2916
|
+
const fetchedWidgetSettings = settingsResponse?.data;
|
2917
|
+
if (!fetchedWidgetSettings || typeof fetchedWidgetSettings.endpoint !== "string" || fetchedWidgetSettings.endpoint.trim() === "") {
|
2918
|
+
throw new Error("Received invalid settings data: endpoint is missing or invalid.");
|
2919
|
+
}
|
2920
|
+
setSettings({
|
2921
|
+
...fetchedWidgetSettings,
|
2922
|
+
hide_quantity_selector: fetchedWidgetSettings.hide_quantity_selector ?? false
|
2923
|
+
});
|
2924
|
+
} catch (e) {
|
2925
|
+
console.error(`[RebuyCrossSell] Error fetching widget settings for ID ${widgetId}:`, e);
|
2926
|
+
setError(e instanceof Error ? e.message : "Failed to load widget configuration.");
|
2927
|
+
setSettings(null);
|
2928
|
+
} finally {
|
2929
|
+
setLoadingSettings(false);
|
2930
|
+
}
|
2931
|
+
};
|
2932
|
+
fetchSettings();
|
2933
|
+
}, [widgetId, Rebuy, configLoadingStatus, apiKeyFromConfig, cacheKeyToUse]);
|
2934
|
+
const request = useMemo5(() => {
|
2935
|
+
const request2 = {
|
2936
|
+
endpoint: settings?.endpoint || "/api/v1/products/recommended",
|
2937
|
+
params: {}
|
2938
|
+
// Keeping this object generic to allow for custom endpoints
|
2939
|
+
};
|
2940
|
+
if (shopifyProductId) {
|
2941
|
+
request2.params.shopify_product_ids = Utilities5.getIdFromGraphUrl(shopifyProductId, "Product");
|
2942
|
+
}
|
2943
|
+
if (shopifyVariantId) {
|
2944
|
+
request2.params.shopify_variant_ids = Utilities5.getIdFromGraphUrl(shopifyVariantId, "ProductVariant");
|
2945
|
+
}
|
2946
|
+
if (settings?.limit) {
|
2947
|
+
request2.params.limit = settings.limit;
|
2948
|
+
}
|
2949
|
+
return request2;
|
2950
|
+
}, [settings, shopifyProductId, shopifyVariantId]);
|
2951
|
+
useEffect10(() => {
|
2952
|
+
let isMounted = true;
|
2953
|
+
if (!Rebuy || !initialized || !settings || configLoadingStatus !== "success") return;
|
2954
|
+
const fetchData = async () => {
|
2955
|
+
try {
|
2956
|
+
const params = { ...request.params };
|
2957
|
+
if (cacheKeyToUse) {
|
2958
|
+
params.cache_key = cacheKeyToUse;
|
2959
|
+
}
|
2960
|
+
params.uuid = crypto.randomUUID?.() || Math.random().toString(36).substring(2);
|
2961
|
+
if (apiKeyFromConfig) {
|
2962
|
+
params.key = apiKeyFromConfig;
|
2963
|
+
}
|
2964
|
+
let endpointToUse = request.endpoint;
|
2965
|
+
if (endpointToUse && endpointToUse.startsWith("/") && !endpointToUse.startsWith("/api/v1/")) {
|
2966
|
+
if (endpointToUse.startsWith("/custom") || endpointToUse.startsWith("/rules")) {
|
2967
|
+
endpointToUse = `/api/v1${endpointToUse}`;
|
2968
|
+
}
|
2969
|
+
}
|
2970
|
+
const { data } = await Rebuy.getStorefrontData(endpointToUse, params);
|
2971
|
+
if (isMounted) {
|
2972
|
+
setProducts(
|
2973
|
+
Array.isArray(data) ? data.map((product2) => ({
|
2974
|
+
...product2,
|
2975
|
+
variants: {
|
2976
|
+
nodes: product2.variants ? flattenConnection2(product2.variants) : []
|
2977
|
+
}
|
2978
|
+
})) : []
|
2979
|
+
);
|
2980
|
+
}
|
2981
|
+
} catch (e) {
|
2982
|
+
console.error(`Error fetching products for widget ID ${widgetId}:`, e);
|
2983
|
+
if (isMounted) {
|
2984
|
+
setProducts([]);
|
2985
|
+
setError(e instanceof Error ? e.message : "Failed to load products.");
|
2986
|
+
}
|
2987
|
+
}
|
2988
|
+
};
|
2989
|
+
fetchData();
|
2990
|
+
return () => {
|
2991
|
+
isMounted = false;
|
2992
|
+
};
|
2993
|
+
}, [
|
2994
|
+
Rebuy,
|
2995
|
+
initialized,
|
2996
|
+
request,
|
2997
|
+
generalContextParams,
|
2998
|
+
widgetId,
|
2999
|
+
settings,
|
3000
|
+
configLoadingStatus,
|
3001
|
+
apiKeyFromConfig,
|
3002
|
+
cacheKeyToUse
|
3003
|
+
]);
|
3004
|
+
useEffect10(() => {
|
3005
|
+
if (!showPopup) return;
|
3006
|
+
const handleClickOutside = (event) => {
|
3007
|
+
if (popupRef.current && !popupRef.current.contains(event.target)) {
|
3008
|
+
setShowPopup(false);
|
3009
|
+
}
|
3010
|
+
};
|
3011
|
+
document.addEventListener("mousedown", handleClickOutside);
|
3012
|
+
return () => {
|
3013
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
3014
|
+
};
|
3015
|
+
}, [showPopup]);
|
3016
|
+
const closePopup = () => {
|
3017
|
+
setShowPopup(false);
|
3018
|
+
};
|
3019
|
+
if (configLoadingStatus === "loading") {
|
3020
|
+
return null;
|
3021
|
+
}
|
3022
|
+
if (configLoadingStatus === "error") {
|
3023
|
+
console.error("Rebuy configuration failed to load");
|
3024
|
+
return null;
|
3025
|
+
}
|
3026
|
+
if (products?.length === 0 && settings && !loadingSettings) {
|
3027
|
+
console.log("No products to render for widgetId:", widgetId);
|
3028
|
+
return null;
|
3029
|
+
}
|
3030
|
+
if (error) {
|
3031
|
+
console.error("Error:", error);
|
3032
|
+
return null;
|
3033
|
+
}
|
3034
|
+
if (settings && !loadingSettings && shouldHideWidget) {
|
3035
|
+
return null;
|
3036
|
+
}
|
3037
|
+
return /* @__PURE__ */ jsx25(Fragment8, { children: products && settings && !loadingSettings && /* @__PURE__ */ jsx25("div", { className: `${RebuyWidget_default["rebuy-widget__container"]}`, id: `rebuy-widget-${widgetId}`, children: settings?.display_type === "popup" && (settings.popup_trigger !== "add_to_cart" || settings.popup_trigger === "add_to_cart" && popupTriggerId) ? /* @__PURE__ */ jsx25("div", { children: showPopup && /* @__PURE__ */ jsx25("div", { className: RebuyWidget_default["rebuy-widget__popup-overlay"], children: /* @__PURE__ */ jsx25("div", { className: RebuyWidget_default["rebuy-widget__popup-content"], ref: popupRef, children: /* @__PURE__ */ jsxs17("div", { className: RebuyWidget_default["rebuy-widget__content"], children: [
|
3038
|
+
/* @__PURE__ */ jsx25(
|
3039
|
+
"button",
|
3040
|
+
{
|
3041
|
+
"aria-label": "close modal",
|
3042
|
+
className: RebuyWidget_default["rebuy-widget__modal-close"],
|
3043
|
+
onClick: closePopup,
|
3044
|
+
children: /* @__PURE__ */ jsx25(Close, {})
|
3045
|
+
}
|
3046
|
+
),
|
3047
|
+
/* @__PURE__ */ jsx25(
|
3048
|
+
WidgetContent,
|
3049
|
+
{
|
3050
|
+
addToCartCallback: () => {
|
3051
|
+
addToCartCallback?.();
|
3052
|
+
setTimeout(() => {
|
3053
|
+
closePopup();
|
3054
|
+
}, 0);
|
3055
|
+
},
|
3056
|
+
customTitleLevel,
|
3057
|
+
isHydrogenReact,
|
3058
|
+
isInPopup: settings?.display_type === "popup",
|
3059
|
+
onDismiss: closePopup,
|
3060
|
+
products,
|
3061
|
+
settings
|
3062
|
+
}
|
3063
|
+
)
|
3064
|
+
] }) }) }) }) : /* @__PURE__ */ jsx25("div", { className: RebuyWidget_default["rebuy-widget__content"], children: /* @__PURE__ */ jsx25(
|
3065
|
+
WidgetContent,
|
3066
|
+
{
|
3067
|
+
addToCartCallback,
|
3068
|
+
customTitleLevel,
|
3069
|
+
isHydrogenReact,
|
3070
|
+
isInPopup: settings?.display_type === "popup",
|
3071
|
+
products,
|
3072
|
+
settings
|
3073
|
+
}
|
3074
|
+
) }) }) });
|
3075
|
+
};
|
3076
|
+
|
3077
|
+
// src/hooks/useRebuyTheme.ts
|
3078
|
+
import { useMemo as useMemo6 } from "react";
|
3079
|
+
|
3080
|
+
// src/constants/api.ts
|
3081
|
+
var REBUY_THEME_STYLES_BASE_URL = "https://rebuyengine.com/api/v1/theme-styles";
|
3082
|
+
|
3083
|
+
// src/hooks/useRebuyTheme.ts
|
3084
|
+
var useRebuyTheme = (options = {}) => {
|
3085
|
+
const { apiKey: contextApiKey, loadingStatus: configLoadingStatus, rebuyConfig } = useRebuyConfig();
|
3086
|
+
const linkObject = useMemo6(() => {
|
3087
|
+
if (configLoadingStatus === "loading" && !options.overrideApiKey) {
|
3088
|
+
return [];
|
3089
|
+
}
|
3090
|
+
if (configLoadingStatus === "error" && !options.overrideApiKey && !contextApiKey) {
|
3091
|
+
console.warn(
|
3092
|
+
"[useRebuyTheme] Rebuy config failed to load and no overrideApiKey provided. Cannot generate theme styles link."
|
3093
|
+
);
|
3094
|
+
return [];
|
3095
|
+
}
|
3096
|
+
const effectiveApiKey = options.overrideApiKey || contextApiKey;
|
3097
|
+
if (!effectiveApiKey) {
|
3098
|
+
if (configLoadingStatus === "success" || options.overrideApiKey) {
|
3099
|
+
console.warn(
|
3100
|
+
"[useRebuyTheme] API key is missing. Provide it via RebuyConfigProvider or options.overrideApiKey. Stylesheet will not be loaded."
|
3101
|
+
);
|
3102
|
+
}
|
3103
|
+
return [];
|
3104
|
+
}
|
3105
|
+
const stylesheetUrl = `${REBUY_THEME_STYLES_BASE_URL}?key=${effectiveApiKey}`;
|
3106
|
+
return [{ href: stylesheetUrl, rel: "stylesheet" }];
|
3107
|
+
}, [rebuyConfig, contextApiKey, configLoadingStatus, options.overrideApiKey]);
|
3108
|
+
return linkObject;
|
3109
|
+
};
|
3110
|
+
|
3111
|
+
// src/utils/csp.ts
|
3112
|
+
var REBUY_STYLE_SRC_DOMAIN = "https://rebuyengine.com";
|
3113
|
+
var updateRebuyCsp = (existing, options = {}) => {
|
3114
|
+
const {
|
3115
|
+
styleSrc = true
|
3116
|
+
/* , connectSrc = false */
|
3117
|
+
} = options;
|
3118
|
+
let currentCspString;
|
3119
|
+
const isHeadersObject = existing instanceof Headers;
|
3120
|
+
if (isHeadersObject) {
|
3121
|
+
currentCspString = existing.get("Content-Security-Policy") || "";
|
3122
|
+
} else {
|
3123
|
+
currentCspString = existing;
|
3124
|
+
}
|
3125
|
+
const cspParts = currentCspString.split(";").map((part) => part.trim()).filter((part) => part);
|
3126
|
+
const updateDirective = (directiveName, domainToAdd) => {
|
3127
|
+
const directiveIndex = cspParts.findIndex((part) => part.toLowerCase().startsWith(directiveName.toLowerCase()));
|
3128
|
+
if (directiveIndex !== -1) {
|
3129
|
+
const currentDirective = cspParts[directiveIndex];
|
3130
|
+
const values = currentDirective.substring(directiveName.length).trim().split(" ");
|
3131
|
+
if (!values.includes(domainToAdd)) {
|
3132
|
+
values.push(domainToAdd);
|
3133
|
+
}
|
3134
|
+
cspParts[directiveIndex] = `${directiveName} ${values.join(" ")}`;
|
3135
|
+
} else {
|
3136
|
+
cspParts.push(`${directiveName} ${domainToAdd}`);
|
3137
|
+
}
|
3138
|
+
};
|
3139
|
+
if (styleSrc) {
|
3140
|
+
updateDirective("style-src", REBUY_STYLE_SRC_DOMAIN);
|
3141
|
+
if (cspParts.some((part) => part.toLowerCase().startsWith("style-src-elem"))) {
|
3142
|
+
updateDirective("style-src-elem", REBUY_STYLE_SRC_DOMAIN);
|
3143
|
+
}
|
3144
|
+
}
|
3145
|
+
const newCspString = cspParts.join("; ");
|
3146
|
+
if (isHeadersObject) {
|
3147
|
+
existing.set("Content-Security-Policy", newCspString);
|
3148
|
+
return existing;
|
3149
|
+
}
|
3150
|
+
return newCspString;
|
3151
|
+
};
|
3152
|
+
|
3153
|
+
// src/utils/theme.ts
|
3154
|
+
var getRebuyThemeStylesLink = (options) => {
|
3155
|
+
const { apiKey } = options;
|
3156
|
+
if (!apiKey) {
|
3157
|
+
console.warn("[getRebuyThemeStylesLink] API key is missing. Stylesheet link will not be generated.");
|
3158
|
+
return [];
|
3159
|
+
}
|
3160
|
+
const stylesheetUrl = `${REBUY_THEME_STYLES_BASE_URL}?key=${apiKey}`;
|
3161
|
+
return [{ href: stylesheetUrl, rel: "stylesheet" }];
|
3162
|
+
};
|
1926
3163
|
export {
|
1927
3164
|
RebuyCompleteTheLook,
|
3165
|
+
RebuyConfigProvider,
|
1928
3166
|
RebuyDynamicBundleProducts,
|
1929
3167
|
RebuyHydrogenContextProvider,
|
1930
3168
|
RebuyHydrogenReactContextProvider,
|
1931
3169
|
RebuyProductAddOns,
|
1932
3170
|
RebuyProductRecommendations,
|
1933
|
-
|
3171
|
+
RebuyWidget,
|
3172
|
+
RebuyWidgetContainer,
|
3173
|
+
getRebuyThemeStylesLink,
|
3174
|
+
updateRebuyCsp,
|
3175
|
+
useRebuyConfig,
|
3176
|
+
useRebuyTheme
|
1934
3177
|
};
|
1935
3178
|
//# sourceMappingURL=index.mjs.map
|