@rebuy/rebuy-hydrogen 2.3.1 → 3.0.0-alpha.1
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 +195 -17
- package/dist/assets/Close.d.ts +2 -0
- package/dist/assets/Close.d.ts.map +1 -0
- package/dist/components/AddToCartBtn/AddToCartBtn.d.ts +3 -0
- package/dist/components/AddToCartBtn/AddToCartBtn.d.ts.map +1 -0
- package/dist/components/AddToCartBtn/HydrogenAddToCartBtn.d.ts +3 -0
- package/dist/components/AddToCartBtn/HydrogenAddToCartBtn.d.ts.map +1 -0
- package/dist/components/AddToCartBtn/HydrogenReactAddToCartBtn.d.ts +3 -0
- package/dist/components/AddToCartBtn/HydrogenReactAddToCartBtn.d.ts.map +1 -0
- package/dist/components/AddToCartBtn/index.d.ts +2 -0
- package/dist/components/AddToCartBtn/index.d.ts.map +1 -0
- package/dist/components/AddToCartBtn/types.d.ts +27 -0
- package/dist/components/AddToCartBtn/types.d.ts.map +1 -0
- package/dist/components/ProductCard/ProductCard.d.ts +3 -0
- package/dist/components/ProductCard/ProductCard.d.ts.map +1 -0
- 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 +3 -0
- package/dist/components/ProductCard/index.d.ts.map +1 -0
- package/dist/components/ProductCard/types.d.ts +52 -0
- package/dist/components/ProductCard/types.d.ts.map +1 -0
- 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 +3 -0
- package/dist/components/ProductPrice/ProductPrice.d.ts.map +1 -0
- package/dist/components/ProductPrice/index.d.ts +2 -0
- package/dist/components/ProductPrice/index.d.ts.map +1 -0
- 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 +3 -0
- package/dist/components/Title/Title.d.ts.map +1 -0
- package/dist/components/Title/index.d.ts +2 -0
- package/dist/components/Title/index.d.ts.map +1 -0
- package/dist/components/Title/types.d.ts +8 -0
- package/dist/components/Title/types.d.ts.map +1 -0
- package/dist/components/VariantSelect/VariantSelect.d.ts +3 -0
- package/dist/components/VariantSelect/VariantSelect.d.ts.map +1 -0
- package/dist/components/VariantSelect/index.d.ts +2 -0
- package/dist/components/VariantSelect/index.d.ts.map +1 -0
- package/dist/components/VariantSelect/types.d.ts +8 -0
- package/dist/components/VariantSelect/types.d.ts.map +1 -0
- 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/context/RebuyContext.d.ts +6 -0
- package/dist/context/RebuyContext.d.ts.map +1 -0
- package/dist/hooks/titleLevel.d.ts +3 -0
- package/dist/hooks/titleLevel.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 +853 -0
- package/dist/index.css.map +7 -0
- package/dist/index.d.ts +14 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +3211 -0
- package/dist/index.js.map +7 -0
- package/dist/index.mjs +3178 -0
- package/dist/index.mjs.map +7 -0
- package/dist/providers/RebuyHydrogenContextProvider.d.ts +3 -0
- package/dist/providers/RebuyHydrogenContextProvider.d.ts.map +1 -0
- package/dist/providers/RebuyHydrogenReactContextProvider.d.ts +8 -0
- package/dist/providers/RebuyHydrogenReactContextProvider.d.ts.map +1 -0
- package/dist/providers/types.d.ts +71 -0
- package/dist/providers/types.d.ts.map +1 -0
- package/dist/queries/cart.queries.d.ts +5 -0
- package/dist/queries/cart.queries.d.ts.map +1 -0
- package/dist/types/common.d.ts +9 -0
- package/dist/types/common.d.ts.map +1 -0
- package/dist/types/rebuyCustom.d.ts +275 -0
- package/dist/types/rebuyCustom.d.ts.map +1 -0
- package/dist/types/rebuySmartCart.d.ts +184 -0
- package/dist/types/rebuySmartCart.d.ts.map +1 -0
- package/dist/types/shopify.d.ts +85 -0
- package/dist/types/shopify.d.ts.map +1 -0
- package/dist/types/widgets.d.ts +23 -0
- package/dist/types/widgets.d.ts.map +1 -0
- package/dist/utils/convertToRebuyProduct.d.ts +156 -0
- package/dist/utils/convertToRebuyProduct.d.ts.map +1 -0
- package/dist/utils/createContextParameters.d.ts +3 -0
- package/dist/utils/createContextParameters.d.ts.map +1 -0
- package/dist/utils/csp.d.ts +16 -0
- package/dist/utils/csp.d.ts.map +1 -0
- package/dist/utils/getEncodedAttributes.d.ts +3 -0
- package/dist/utils/getEncodedAttributes.d.ts.map +1 -0
- package/dist/utils/getRebuyConfig.d.ts +3 -0
- package/dist/utils/getRebuyConfig.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 +8 -0
- package/dist/widgetContainer/RebuyWidgetContainer.d.ts.map +1 -0
- package/dist/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.d.ts +3 -0
- package/dist/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.d.ts.map +1 -0
- package/dist/widgets/RebuyCompleteTheLook/index.d.ts +2 -0
- package/dist/widgets/RebuyCompleteTheLook/index.d.ts.map +1 -0
- package/dist/widgets/RebuyCompleteTheLook/types.d.ts +5 -0
- package/dist/widgets/RebuyCompleteTheLook/types.d.ts.map +1 -0
- package/dist/widgets/RebuyDynamicBundleProducts/BundleImages.d.ts +5 -0
- package/dist/widgets/RebuyDynamicBundleProducts/BundleImages.d.ts.map +1 -0
- package/dist/widgets/RebuyDynamicBundleProducts/BundlePrice.d.ts +5 -0
- package/dist/widgets/RebuyDynamicBundleProducts/BundlePrice.d.ts.map +1 -0
- package/dist/widgets/RebuyDynamicBundleProducts/BundleSelection.d.ts +3 -0
- package/dist/widgets/RebuyDynamicBundleProducts/BundleSelection.d.ts.map +1 -0
- package/dist/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.d.ts +3 -0
- package/dist/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.d.ts.map +1 -0
- package/dist/widgets/RebuyDynamicBundleProducts/Select.d.ts +3 -0
- package/dist/widgets/RebuyDynamicBundleProducts/Select.d.ts.map +1 -0
- package/dist/widgets/RebuyDynamicBundleProducts/index.d.ts +2 -0
- package/dist/widgets/RebuyDynamicBundleProducts/index.d.ts.map +1 -0
- package/dist/widgets/RebuyDynamicBundleProducts/types.d.ts +19 -0
- package/dist/widgets/RebuyDynamicBundleProducts/types.d.ts.map +1 -0
- package/dist/widgets/RebuyProductAddOns/RebuyProductAddOnCard.d.ts +3 -0
- package/dist/widgets/RebuyProductAddOns/RebuyProductAddOnCard.d.ts.map +1 -0
- package/dist/widgets/RebuyProductAddOns/RebuyProductAddOns.d.ts +3 -0
- package/dist/widgets/RebuyProductAddOns/RebuyProductAddOns.d.ts.map +1 -0
- package/dist/widgets/RebuyProductAddOns/index.d.ts +2 -0
- package/dist/widgets/RebuyProductAddOns/index.d.ts.map +1 -0
- package/dist/widgets/RebuyProductAddOns/types.d.ts +19 -0
- package/dist/widgets/RebuyProductAddOns/types.d.ts.map +1 -0
- package/dist/widgets/RebuyProductRecommendations/RebuyProductRecommendations.d.ts +3 -0
- package/dist/widgets/RebuyProductRecommendations/RebuyProductRecommendations.d.ts.map +1 -0
- package/dist/widgets/RebuyProductRecommendations/index.d.ts +2 -0
- package/dist/widgets/RebuyProductRecommendations/index.d.ts.map +1 -0
- package/dist/widgets/RebuyProductRecommendations/types.d.ts +5 -0
- package/dist/widgets/RebuyProductRecommendations/types.d.ts.map +1 -0
- 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 +86 -47
- package/RebuyCompleteTheLook.client.jsx +0 -188
- package/RebuyContextProvider.client.jsx +0 -222
- package/RebuyContexts.client.jsx +0 -3
- package/RebuyDynamicBundleProducts.client.jsx +0 -415
- package/RebuyProductAddOnCard.client.jsx +0 -89
- package/RebuyProductAddOns.client.jsx +0 -227
- package/RebuyProductRecommendations.client.jsx +0 -68
- package/RebuyProductViewed.client.jsx +0 -62
- package/RebuyRecentlyViewedProducts.client.jsx +0 -68
- package/RebuyWidgetContainer.client.jsx +0 -136
package/dist/index.mjs
ADDED
@@ -0,0 +1,3178 @@
|
|
1
|
+
// src/providers/RebuyHydrogenContextProvider.tsx
|
2
|
+
import * as Utilities2 from "@rebuy/rebuy/utilities";
|
3
|
+
import { Await, useLocation } from "@remix-run/react";
|
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
|
+
};
|
99
|
+
|
100
|
+
// src/context/RebuyContext.tsx
|
101
|
+
import { createContext as createContext2 } from "react";
|
102
|
+
var RebuyContext = createContext2(null);
|
103
|
+
|
104
|
+
// src/utils/createContextParameters.ts
|
105
|
+
import * as Utilities from "@rebuy/rebuy/utilities";
|
106
|
+
|
107
|
+
// src/utils/getEncodedAttributes.ts
|
108
|
+
var getEncodedAttributes = (attributes) => encodeURIComponent(
|
109
|
+
JSON.stringify(attributes.reduce((merged, { key, value }) => ({ ...merged, [key]: value }), {}))
|
110
|
+
);
|
111
|
+
|
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
|
+
});
|
134
|
+
var createContextParameters = ({
|
135
|
+
cacheKey,
|
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,
|
151
|
+
isHydrogenReact,
|
152
|
+
/* H-React specific */
|
153
|
+
queryObject,
|
154
|
+
sourceHydrogenCart,
|
155
|
+
windowUrl
|
156
|
+
}) => {
|
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,
|
257
|
+
isHydrogenReact,
|
258
|
+
time: queryObject.time ?? "",
|
259
|
+
url: windowUrl
|
260
|
+
};
|
261
|
+
const cartContext = {
|
262
|
+
attributes: "",
|
263
|
+
item_count: totalQuantity,
|
264
|
+
items: [],
|
265
|
+
line_count: lineCount,
|
266
|
+
note: legacyNote ?? "",
|
267
|
+
subtotal: cartSubtotalInCents,
|
268
|
+
token: numericCartToken ?? ""
|
269
|
+
};
|
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);
|
275
|
+
}
|
276
|
+
if (linesForCounts.length > 0) {
|
277
|
+
cartContext.items = linesForCounts.map((line) => {
|
278
|
+
const item = {
|
279
|
+
attributes: line.attributes ? [...line.attributes] : [],
|
280
|
+
product_id: line.merchandise?.product?.id ? Utilities.getIdFromGraphUrl(line.merchandise.product.id, "Product") : "",
|
281
|
+
properties: "",
|
282
|
+
quantity: line.quantity,
|
283
|
+
variant_id: line.merchandise?.id ? Utilities.getIdFromGraphUrl(line.merchandise.id, "ProductVariant") : ""
|
284
|
+
};
|
285
|
+
if (line.attributes?.length) {
|
286
|
+
const validLineAttributes = line.attributes.filter(
|
287
|
+
(attr) => typeof attr.key === "string" && typeof attr.value === "string"
|
288
|
+
);
|
289
|
+
item.properties = getEncodedAttributes(validLineAttributes);
|
290
|
+
}
|
291
|
+
return item;
|
292
|
+
});
|
293
|
+
}
|
294
|
+
return {
|
295
|
+
...contextParametersOutput,
|
296
|
+
cart: cartContext
|
297
|
+
};
|
298
|
+
};
|
299
|
+
|
300
|
+
// src/providers/RebuyHydrogenContextProvider.tsx
|
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();
|
309
|
+
const location = useLocation();
|
310
|
+
const queryObject = Utilities2.queryStringToObject(location.search);
|
311
|
+
const windowUrl = `${shop}${location.pathname}${location.search}`;
|
312
|
+
const contextParameters = useMemo2(
|
313
|
+
() => createContextParameters({
|
314
|
+
cacheKey: rebuyConfig?.shop?.cache_key,
|
315
|
+
isHydrogenReact: false,
|
316
|
+
queryObject,
|
317
|
+
sourceHydrogenCart,
|
318
|
+
windowUrl
|
319
|
+
}),
|
320
|
+
[rebuyConfig?.shop?.cache_key, windowUrl, queryObject, sourceHydrogenCart]
|
321
|
+
);
|
322
|
+
const defaultContextValue = useMemo2(() => null, []);
|
323
|
+
const contextValue = useMemo2(
|
324
|
+
() => configLoadingStatus === "success" && rebuyConfig ? { contextParameters } : defaultContextValue,
|
325
|
+
[configLoadingStatus, rebuyConfig, contextParameters, defaultContextValue]
|
326
|
+
);
|
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 });
|
337
|
+
};
|
338
|
+
var RebuyHydrogenContextProvider = ({
|
339
|
+
cart,
|
340
|
+
children,
|
341
|
+
overrideApiKey,
|
342
|
+
publicStoreDomain,
|
343
|
+
shop
|
344
|
+
}) => {
|
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 }) });
|
352
|
+
} });
|
353
|
+
};
|
354
|
+
|
355
|
+
// src/providers/RebuyHydrogenReactContextProvider.tsx
|
356
|
+
import * as Utilities3 from "@rebuy/rebuy/utilities";
|
357
|
+
import { useLocation as useLocation2 } from "@remix-run/react";
|
358
|
+
import { CartProvider, ShopifyProvider, useCart } from "@shopify/hydrogen-react";
|
359
|
+
import { useMemo as useMemo3 } from "react";
|
360
|
+
|
361
|
+
// src/queries/cart.queries.ts
|
362
|
+
var OPTION_FRAGMENT = `#graphql
|
363
|
+
fragment OptionFragment on ProductOption {
|
364
|
+
id
|
365
|
+
name
|
366
|
+
optionValues {
|
367
|
+
id
|
368
|
+
name
|
369
|
+
swatch {
|
370
|
+
color
|
371
|
+
image {
|
372
|
+
mediaContentType
|
373
|
+
previewImage {
|
374
|
+
height
|
375
|
+
id
|
376
|
+
url
|
377
|
+
width
|
378
|
+
altText
|
379
|
+
}
|
380
|
+
id
|
381
|
+
alt
|
382
|
+
}
|
383
|
+
}
|
384
|
+
}
|
385
|
+
}
|
386
|
+
`;
|
387
|
+
var CART_LINE_FRAGMENT = `#graphql
|
388
|
+
fragment CartLineFragment on CartLine {
|
389
|
+
id
|
390
|
+
quantity
|
391
|
+
cost {
|
392
|
+
amountPerQuantity {
|
393
|
+
amount
|
394
|
+
currencyCode
|
395
|
+
}
|
396
|
+
compareAtAmountPerQuantity {
|
397
|
+
amount
|
398
|
+
currencyCode
|
399
|
+
}
|
400
|
+
totalAmount {
|
401
|
+
amount
|
402
|
+
currencyCode
|
403
|
+
}
|
404
|
+
subtotalAmount {
|
405
|
+
amount
|
406
|
+
currencyCode
|
407
|
+
}
|
408
|
+
}
|
409
|
+
attributes {
|
410
|
+
key
|
411
|
+
value
|
412
|
+
}
|
413
|
+
discountAllocations {
|
414
|
+
discountedAmount {
|
415
|
+
amount
|
416
|
+
currencyCode
|
417
|
+
}
|
418
|
+
... on CartAutomaticDiscountAllocation {
|
419
|
+
__typename
|
420
|
+
discountedAmount {
|
421
|
+
amount
|
422
|
+
currencyCode
|
423
|
+
}
|
424
|
+
title
|
425
|
+
}
|
426
|
+
... on CartCodeDiscountAllocation {
|
427
|
+
__typename
|
428
|
+
code
|
429
|
+
discountedAmount {
|
430
|
+
amount
|
431
|
+
currencyCode
|
432
|
+
}
|
433
|
+
}
|
434
|
+
... on CartCustomDiscountAllocation {
|
435
|
+
__typename
|
436
|
+
discountedAmount {
|
437
|
+
amount
|
438
|
+
currencyCode
|
439
|
+
}
|
440
|
+
title
|
441
|
+
}
|
442
|
+
}
|
443
|
+
merchandise {
|
444
|
+
... on ProductVariant {
|
445
|
+
availableForSale
|
446
|
+
id
|
447
|
+
sku
|
448
|
+
title
|
449
|
+
compareAtPrice {
|
450
|
+
amount
|
451
|
+
currencyCode
|
452
|
+
}
|
453
|
+
image {
|
454
|
+
altText
|
455
|
+
height
|
456
|
+
id
|
457
|
+
url
|
458
|
+
width
|
459
|
+
}
|
460
|
+
price {
|
461
|
+
amount
|
462
|
+
currencyCode
|
463
|
+
}
|
464
|
+
product {
|
465
|
+
handle
|
466
|
+
id
|
467
|
+
productType
|
468
|
+
tags
|
469
|
+
title
|
470
|
+
vendor
|
471
|
+
collections(first: 10) {
|
472
|
+
nodes {
|
473
|
+
handle
|
474
|
+
}
|
475
|
+
}
|
476
|
+
options {
|
477
|
+
...OptionFragment
|
478
|
+
}
|
479
|
+
images(first: 20) {
|
480
|
+
nodes {
|
481
|
+
altText
|
482
|
+
height
|
483
|
+
id
|
484
|
+
url
|
485
|
+
width
|
486
|
+
}
|
487
|
+
}
|
488
|
+
}
|
489
|
+
selectedOptions {
|
490
|
+
name
|
491
|
+
value
|
492
|
+
}
|
493
|
+
}
|
494
|
+
}
|
495
|
+
}
|
496
|
+
`;
|
497
|
+
var CART_LINE_COMPONENT_FRAGMENT = `#graphql
|
498
|
+
fragment CartLineComponentFragment on ComponentizableCartLine {
|
499
|
+
id
|
500
|
+
quantity
|
501
|
+
cost {
|
502
|
+
amountPerQuantity {
|
503
|
+
amount
|
504
|
+
currencyCode
|
505
|
+
}
|
506
|
+
compareAtAmountPerQuantity {
|
507
|
+
amount
|
508
|
+
currencyCode
|
509
|
+
}
|
510
|
+
totalAmount {
|
511
|
+
amount
|
512
|
+
currencyCode
|
513
|
+
}
|
514
|
+
subtotalAmount {
|
515
|
+
amount
|
516
|
+
currencyCode
|
517
|
+
}
|
518
|
+
}
|
519
|
+
attributes {
|
520
|
+
key
|
521
|
+
value
|
522
|
+
}
|
523
|
+
discountAllocations {
|
524
|
+
discountedAmount {
|
525
|
+
amount
|
526
|
+
currencyCode
|
527
|
+
}
|
528
|
+
... on CartAutomaticDiscountAllocation {
|
529
|
+
__typename
|
530
|
+
discountedAmount {
|
531
|
+
amount
|
532
|
+
currencyCode
|
533
|
+
}
|
534
|
+
title
|
535
|
+
}
|
536
|
+
... on CartCodeDiscountAllocation {
|
537
|
+
__typename
|
538
|
+
code
|
539
|
+
discountedAmount {
|
540
|
+
amount
|
541
|
+
currencyCode
|
542
|
+
}
|
543
|
+
}
|
544
|
+
... on CartCustomDiscountAllocation {
|
545
|
+
__typename
|
546
|
+
discountedAmount {
|
547
|
+
amount
|
548
|
+
currencyCode
|
549
|
+
}
|
550
|
+
title
|
551
|
+
}
|
552
|
+
}
|
553
|
+
merchandise {
|
554
|
+
... on ProductVariant {
|
555
|
+
availableForSale
|
556
|
+
id
|
557
|
+
sku
|
558
|
+
title
|
559
|
+
compareAtPrice {
|
560
|
+
amount
|
561
|
+
currencyCode
|
562
|
+
}
|
563
|
+
image {
|
564
|
+
altText
|
565
|
+
height
|
566
|
+
id
|
567
|
+
url
|
568
|
+
width
|
569
|
+
}
|
570
|
+
price {
|
571
|
+
amount
|
572
|
+
currencyCode
|
573
|
+
}
|
574
|
+
product {
|
575
|
+
handle
|
576
|
+
id
|
577
|
+
productType
|
578
|
+
tags
|
579
|
+
title
|
580
|
+
vendor
|
581
|
+
collections(first: 10) {
|
582
|
+
nodes {
|
583
|
+
handle
|
584
|
+
}
|
585
|
+
}
|
586
|
+
options {
|
587
|
+
id
|
588
|
+
name
|
589
|
+
optionValues {
|
590
|
+
id
|
591
|
+
name
|
592
|
+
swatch {
|
593
|
+
color
|
594
|
+
image {
|
595
|
+
mediaContentType
|
596
|
+
previewImage {
|
597
|
+
height
|
598
|
+
id
|
599
|
+
url
|
600
|
+
width
|
601
|
+
altText
|
602
|
+
}
|
603
|
+
id
|
604
|
+
alt
|
605
|
+
}
|
606
|
+
}
|
607
|
+
}
|
608
|
+
}
|
609
|
+
images(first: 20) {
|
610
|
+
nodes {
|
611
|
+
altText
|
612
|
+
height
|
613
|
+
id
|
614
|
+
url
|
615
|
+
width
|
616
|
+
}
|
617
|
+
}
|
618
|
+
}
|
619
|
+
selectedOptions {
|
620
|
+
name
|
621
|
+
value
|
622
|
+
}
|
623
|
+
}
|
624
|
+
}
|
625
|
+
lineComponents {
|
626
|
+
id
|
627
|
+
quantity
|
628
|
+
cost {
|
629
|
+
amountPerQuantity {
|
630
|
+
amount
|
631
|
+
currencyCode
|
632
|
+
}
|
633
|
+
compareAtAmountPerQuantity {
|
634
|
+
amount
|
635
|
+
currencyCode
|
636
|
+
}
|
637
|
+
totalAmount {
|
638
|
+
amount
|
639
|
+
currencyCode
|
640
|
+
}
|
641
|
+
subtotalAmount {
|
642
|
+
amount
|
643
|
+
currencyCode
|
644
|
+
}
|
645
|
+
}
|
646
|
+
attributes {
|
647
|
+
key
|
648
|
+
value
|
649
|
+
}
|
650
|
+
discountAllocations {
|
651
|
+
discountedAmount {
|
652
|
+
amount
|
653
|
+
currencyCode
|
654
|
+
}
|
655
|
+
... on CartAutomaticDiscountAllocation {
|
656
|
+
__typename
|
657
|
+
discountedAmount {
|
658
|
+
amount
|
659
|
+
currencyCode
|
660
|
+
}
|
661
|
+
title
|
662
|
+
}
|
663
|
+
... on CartCodeDiscountAllocation {
|
664
|
+
__typename
|
665
|
+
code
|
666
|
+
discountedAmount {
|
667
|
+
amount
|
668
|
+
currencyCode
|
669
|
+
}
|
670
|
+
}
|
671
|
+
... on CartCustomDiscountAllocation {
|
672
|
+
__typename
|
673
|
+
discountedAmount {
|
674
|
+
amount
|
675
|
+
currencyCode
|
676
|
+
}
|
677
|
+
title
|
678
|
+
}
|
679
|
+
}
|
680
|
+
merchandise {
|
681
|
+
... on ProductVariant {
|
682
|
+
availableForSale
|
683
|
+
id
|
684
|
+
sku
|
685
|
+
title
|
686
|
+
compareAtPrice {
|
687
|
+
amount
|
688
|
+
currencyCode
|
689
|
+
}
|
690
|
+
image {
|
691
|
+
altText
|
692
|
+
height
|
693
|
+
id
|
694
|
+
url
|
695
|
+
width
|
696
|
+
}
|
697
|
+
price {
|
698
|
+
amount
|
699
|
+
currencyCode
|
700
|
+
}
|
701
|
+
product {
|
702
|
+
handle
|
703
|
+
id
|
704
|
+
productType
|
705
|
+
tags
|
706
|
+
title
|
707
|
+
vendor
|
708
|
+
collections(first: 10) {
|
709
|
+
nodes {
|
710
|
+
handle
|
711
|
+
}
|
712
|
+
}
|
713
|
+
options {
|
714
|
+
...OptionFragment
|
715
|
+
}
|
716
|
+
images(first: 20) {
|
717
|
+
nodes {
|
718
|
+
altText
|
719
|
+
height
|
720
|
+
id
|
721
|
+
url
|
722
|
+
width
|
723
|
+
}
|
724
|
+
}
|
725
|
+
}
|
726
|
+
selectedOptions {
|
727
|
+
name
|
728
|
+
value
|
729
|
+
}
|
730
|
+
}
|
731
|
+
}
|
732
|
+
}
|
733
|
+
}
|
734
|
+
`;
|
735
|
+
var CART_FRAGMENT = `#graphql
|
736
|
+
fragment CartFragment on Cart {
|
737
|
+
id
|
738
|
+
checkoutUrl
|
739
|
+
createdAt
|
740
|
+
totalQuantity
|
741
|
+
note
|
742
|
+
updatedAt
|
743
|
+
__typename
|
744
|
+
buyerIdentity {
|
745
|
+
countryCode
|
746
|
+
customer {
|
747
|
+
id
|
748
|
+
email
|
749
|
+
firstName
|
750
|
+
lastName
|
751
|
+
displayName
|
752
|
+
}
|
753
|
+
email
|
754
|
+
phone
|
755
|
+
}
|
756
|
+
attributes {
|
757
|
+
key
|
758
|
+
value
|
759
|
+
}
|
760
|
+
cost {
|
761
|
+
subtotalAmount {
|
762
|
+
amount
|
763
|
+
currencyCode
|
764
|
+
}
|
765
|
+
totalAmount {
|
766
|
+
amount
|
767
|
+
currencyCode
|
768
|
+
}
|
769
|
+
}
|
770
|
+
discountAllocations {
|
771
|
+
discountedAmount {
|
772
|
+
amount
|
773
|
+
currencyCode
|
774
|
+
}
|
775
|
+
... on CartAutomaticDiscountAllocation {
|
776
|
+
__typename
|
777
|
+
discountedAmount {
|
778
|
+
amount
|
779
|
+
currencyCode
|
780
|
+
}
|
781
|
+
title
|
782
|
+
}
|
783
|
+
... on CartCodeDiscountAllocation {
|
784
|
+
__typename
|
785
|
+
code
|
786
|
+
discountedAmount {
|
787
|
+
amount
|
788
|
+
currencyCode
|
789
|
+
}
|
790
|
+
}
|
791
|
+
... on CartCustomDiscountAllocation {
|
792
|
+
__typename
|
793
|
+
discountedAmount {
|
794
|
+
amount
|
795
|
+
currencyCode
|
796
|
+
}
|
797
|
+
title
|
798
|
+
}
|
799
|
+
}
|
800
|
+
discountCodes {
|
801
|
+
applicable
|
802
|
+
code
|
803
|
+
}
|
804
|
+
lines(first: $numCartLines) {
|
805
|
+
edges {
|
806
|
+
node {
|
807
|
+
...CartLineComponentFragment
|
808
|
+
}
|
809
|
+
}
|
810
|
+
edges {
|
811
|
+
node {
|
812
|
+
...CartLineFragment
|
813
|
+
}
|
814
|
+
}
|
815
|
+
}
|
816
|
+
}
|
817
|
+
${CART_LINE_FRAGMENT}
|
818
|
+
${CART_LINE_COMPONENT_FRAGMENT}
|
819
|
+
${OPTION_FRAGMENT}
|
820
|
+
`;
|
821
|
+
|
822
|
+
// src/providers/RebuyHydrogenReactContextProvider.tsx
|
823
|
+
import { Fragment as Fragment2, jsx as jsx3 } from "react/jsx-runtime";
|
824
|
+
var RebuyHydrogenReactContext = ({ children, publicPrimaryDomian }) => {
|
825
|
+
const { loadingStatus: configLoadingStatus, rebuyConfig } = useRebuyConfig();
|
826
|
+
const location = useLocation2();
|
827
|
+
const queryObject = Utilities3.queryStringToObject(location.search);
|
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 = {
|
855
|
+
cacheKey: rebuyConfig?.shop?.cache_key,
|
856
|
+
hydrogenReactCartActions,
|
857
|
+
hydrogenReactCartError,
|
858
|
+
hydrogenReactCartStatus,
|
859
|
+
isHydrogenReact: true,
|
860
|
+
queryObject,
|
861
|
+
sourceHydrogenCart: hydrogenReactCartData,
|
862
|
+
// eslint-disable-line @typescript-eslint/no-explicit-any
|
863
|
+
windowUrl
|
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]
|
879
|
+
);
|
880
|
+
return /* @__PURE__ */ jsx3(RebuyContext.Provider, { value: rebuyContextValue, children: configLoadingStatus === "success" && rebuyConfig ? children : configLoadingStatus === "error" ? /* @__PURE__ */ jsx3(Fragment2, { children }) : null });
|
881
|
+
};
|
882
|
+
var RebuyHydrogenReactContextProvider = ({
|
883
|
+
// --- Rebuy Specific Props ---
|
884
|
+
cartFragment = CART_FRAGMENT,
|
885
|
+
// --- ShopifyProvider Props ---
|
886
|
+
children,
|
887
|
+
countryIsoCode = "US",
|
888
|
+
customerAccessToken = "",
|
889
|
+
data,
|
890
|
+
languageIsoCode = "EN",
|
891
|
+
numCartLines,
|
892
|
+
onAttributesUpdate,
|
893
|
+
// --- CartProvider Props ---
|
894
|
+
onAttributesUpdateComplete,
|
895
|
+
onBuyerIdentityUpdate,
|
896
|
+
onBuyerIdentityUpdateComplete,
|
897
|
+
onCreate,
|
898
|
+
// --- CartProvider Callbacks (adapted) ---
|
899
|
+
onCreateComplete,
|
900
|
+
onDiscountCodesUpdate,
|
901
|
+
onDiscountCodesUpdateComplete,
|
902
|
+
onLineAdd,
|
903
|
+
onLineAddComplete,
|
904
|
+
onLineRemove,
|
905
|
+
onLineRemoveComplete,
|
906
|
+
onLineUpdate,
|
907
|
+
onLineUpdateComplete,
|
908
|
+
onNoteUpdate,
|
909
|
+
onNoteUpdateComplete,
|
910
|
+
overrideApiKey,
|
911
|
+
publicPrimaryDomian = "",
|
912
|
+
publicStoreDomain = "",
|
913
|
+
publicStorefrontApiToken = "",
|
914
|
+
publicStorefrontId = "",
|
915
|
+
storefrontApiVersion = "2024-07"
|
916
|
+
}) => {
|
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(
|
962
|
+
ShopifyProvider,
|
963
|
+
{
|
964
|
+
countryIsoCode,
|
965
|
+
languageIsoCode,
|
966
|
+
storeDomain: publicStoreDomain,
|
967
|
+
storefrontApiVersion,
|
968
|
+
storefrontId: publicStorefrontId,
|
969
|
+
storefrontToken: publicStorefrontApiToken,
|
970
|
+
children: /* @__PURE__ */ jsx3(
|
971
|
+
CartProvider,
|
972
|
+
{
|
973
|
+
cartFragment,
|
974
|
+
countryCode: countryIsoCode,
|
975
|
+
customerAccessToken,
|
976
|
+
data,
|
977
|
+
languageCode: languageIsoCode,
|
978
|
+
numCartLines,
|
979
|
+
...adaptedCallbacks,
|
980
|
+
children: /* @__PURE__ */ jsx3(RebuyConfigProvider, { initialShopDomain: publicStoreDomain, overrideApiKey, children: /* @__PURE__ */ jsx3(RebuyHydrogenReactContext, { publicPrimaryDomian, children }) })
|
981
|
+
}
|
982
|
+
)
|
983
|
+
}
|
984
|
+
);
|
985
|
+
};
|
986
|
+
|
987
|
+
// src/widgetContainer/RebuyWidgetContainer.tsx
|
988
|
+
import { RebuyClient as RebuyClient2 } from "@rebuy/rebuy";
|
989
|
+
import * as Utilities4 from "@rebuy/rebuy/utilities";
|
990
|
+
import { flattenConnection } from "@shopify/hydrogen";
|
991
|
+
import React, { useEffect as useEffect2, useMemo as useMemo4, useState as useState2 } from "react";
|
992
|
+
var RebuyWidgetContainerBase = ({ children, ...props }) => {
|
993
|
+
const { apiKey, collection, collectionId, dataSource, limit, options, product, productId, variant, variantId } = props;
|
994
|
+
const { apiKey: apiKeyFromContext, loadingStatus: configLoadingStatus, rebuyConfig } = useRebuyConfig();
|
995
|
+
const [rebuyApiClient, setRebuyApiClient] = useState2(null);
|
996
|
+
const [initialized, setInitialized] = useState2(false);
|
997
|
+
const shopifyProductId = product?.id ?? productId ?? null;
|
998
|
+
const shopifyVariantId = variant?.id ?? variantId ?? null;
|
999
|
+
const shopifyCollectionId = collection?.id ?? collectionId ?? null;
|
1000
|
+
const [products, setProducts] = useState2([]);
|
1001
|
+
const [metadata, setMetadata] = useState2();
|
1002
|
+
useEffect2(() => {
|
1003
|
+
if (!rebuyApiClient && apiKeyFromContext && configLoadingStatus === "success") {
|
1004
|
+
const client = new RebuyClient2(apiKeyFromContext);
|
1005
|
+
if (options) {
|
1006
|
+
client.setDefaultParameters(options);
|
1007
|
+
}
|
1008
|
+
setRebuyApiClient(client);
|
1009
|
+
setInitialized(true);
|
1010
|
+
}
|
1011
|
+
}, [apiKeyFromContext, rebuyApiClient, configLoadingStatus, options]);
|
1012
|
+
const request = useMemo4(() => {
|
1013
|
+
const req = {
|
1014
|
+
endpoint: dataSource || "/api/v1/products/recommended",
|
1015
|
+
params: {}
|
1016
|
+
// Keeping this object generic to allow for custom endpoints
|
1017
|
+
};
|
1018
|
+
if (shopifyProductId) {
|
1019
|
+
req.params.shopify_product_ids = Utilities4.getIdFromGraphUrl(shopifyProductId, "Product") ?? "";
|
1020
|
+
}
|
1021
|
+
if (shopifyVariantId) {
|
1022
|
+
req.params.shopify_variant_ids = Utilities4.getIdFromGraphUrl(shopifyVariantId, "ProductVariant") ?? "";
|
1023
|
+
}
|
1024
|
+
if (shopifyCollectionId) {
|
1025
|
+
req.params.shopify_collection_ids = Utilities4.getIdFromGraphUrl(shopifyCollectionId, "Collection") ?? "";
|
1026
|
+
}
|
1027
|
+
if (limit) {
|
1028
|
+
req.params.limit = limit;
|
1029
|
+
}
|
1030
|
+
return req;
|
1031
|
+
}, [dataSource, shopifyProductId, shopifyVariantId, shopifyCollectionId, limit]);
|
1032
|
+
useEffect2(() => {
|
1033
|
+
let isMounted = true;
|
1034
|
+
if (!rebuyApiClient || !initialized || configLoadingStatus !== "success") return;
|
1035
|
+
const fetchData = async () => {
|
1036
|
+
const { data, metadata: metadata2 } = await rebuyApiClient.getStorefrontData(request.endpoint, request.params);
|
1037
|
+
if (isMounted) {
|
1038
|
+
setProducts(
|
1039
|
+
Array.isArray(data) ? data.map((product2) => ({
|
1040
|
+
...product2,
|
1041
|
+
variants: {
|
1042
|
+
nodes: product2.variants ? flattenConnection(product2.variants) : []
|
1043
|
+
}
|
1044
|
+
})) : []
|
1045
|
+
);
|
1046
|
+
setMetadata(metadata2);
|
1047
|
+
}
|
1048
|
+
};
|
1049
|
+
fetchData();
|
1050
|
+
return () => {
|
1051
|
+
isMounted = false;
|
1052
|
+
};
|
1053
|
+
}, [rebuyApiClient, initialized, request, configLoadingStatus]);
|
1054
|
+
const childrenWithProps = (currentProps) => React.Children.map(
|
1055
|
+
children,
|
1056
|
+
(child) => React.isValidElement(child) ? React.cloneElement(child, currentProps) : child
|
1057
|
+
);
|
1058
|
+
const childProps = {
|
1059
|
+
...props,
|
1060
|
+
cacheKey: rebuyConfig?.shop?.cache_key,
|
1061
|
+
key: product?.id,
|
1062
|
+
metadata,
|
1063
|
+
products
|
1064
|
+
};
|
1065
|
+
if (configLoadingStatus !== "success" || !rebuyApiClient) {
|
1066
|
+
return null;
|
1067
|
+
}
|
1068
|
+
return childrenWithProps(childProps);
|
1069
|
+
};
|
1070
|
+
var RebuyWidgetContainer = RebuyWidgetContainerBase;
|
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
|
+
|
1113
|
+
// src/components/ProductCard/ProductCard.tsx
|
1114
|
+
import { Link } from "@remix-run/react";
|
1115
|
+
import { Image } from "@shopify/hydrogen";
|
1116
|
+
import { useState as useState5 } from "react";
|
1117
|
+
|
1118
|
+
// src/components/AddToCartBtn/HydrogenAddToCartBtn.tsx
|
1119
|
+
import { CartForm, Money } from "@shopify/hydrogen";
|
1120
|
+
|
1121
|
+
// src/components/AddToCartBtn/AddToCartBtn.module.css
|
1122
|
+
var AddToCartBtn_default = {
|
1123
|
+
"rebuy-cart-button": "AddToCartBtn_rebuy-cart-button",
|
1124
|
+
"rebuy-cart-button__container": "AddToCartBtn_rebuy-cart-button__container"
|
1125
|
+
};
|
1126
|
+
|
1127
|
+
// src/components/AddToCartBtn/HydrogenAddToCartBtn.tsx
|
1128
|
+
import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
|
1129
|
+
var HydrogenAddToCartBtn = ({
|
1130
|
+
addToCartBtnText,
|
1131
|
+
addToCartCallback,
|
1132
|
+
disabled,
|
1133
|
+
linesToAdd,
|
1134
|
+
moneyData
|
1135
|
+
}) => {
|
1136
|
+
return /* @__PURE__ */ jsx4("div", { className: AddToCartBtn_default["rebuy-cart-button__container"], children: /* @__PURE__ */ jsx4(
|
1137
|
+
CartForm,
|
1138
|
+
{
|
1139
|
+
action: CartForm.ACTIONS.LinesAdd,
|
1140
|
+
inputs: {
|
1141
|
+
lines: linesToAdd
|
1142
|
+
},
|
1143
|
+
route: "/cart",
|
1144
|
+
children: (fetcher) => /* @__PURE__ */ jsx4(Fragment3, { children: /* @__PURE__ */ jsxs2(
|
1145
|
+
"button",
|
1146
|
+
{
|
1147
|
+
className: AddToCartBtn_default["rebuy-cart-button"],
|
1148
|
+
disabled: disabled || fetcher.state !== "idle",
|
1149
|
+
onClick: addToCartCallback,
|
1150
|
+
type: "submit",
|
1151
|
+
children: [
|
1152
|
+
addToCartBtnText,
|
1153
|
+
moneyData && /* @__PURE__ */ jsxs2(Fragment3, { children: [
|
1154
|
+
/* @__PURE__ */ jsx4("span", { children: " | " }),
|
1155
|
+
/* @__PURE__ */ jsx4(Money, { data: moneyData, withoutTrailingZeros: true })
|
1156
|
+
] })
|
1157
|
+
]
|
1158
|
+
}
|
1159
|
+
) })
|
1160
|
+
}
|
1161
|
+
) });
|
1162
|
+
};
|
1163
|
+
|
1164
|
+
// src/components/AddToCartBtn/HydrogenReactAddToCartBtn.tsx
|
1165
|
+
import { Money as Money2, useCart as useCart2 } from "@shopify/hydrogen-react";
|
1166
|
+
import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
|
1167
|
+
var HydrogenReactAddToCartBtn = ({
|
1168
|
+
addToCartBtnText,
|
1169
|
+
addToCartCallback,
|
1170
|
+
disabled,
|
1171
|
+
linesToAdd,
|
1172
|
+
moneyData
|
1173
|
+
}) => {
|
1174
|
+
const { linesAdd } = useCart2();
|
1175
|
+
const handleAddToCart = () => {
|
1176
|
+
linesAdd(linesToAdd);
|
1177
|
+
addToCartCallback?.();
|
1178
|
+
};
|
1179
|
+
return /* @__PURE__ */ jsxs3("button", { className: AddToCartBtn_default["rebuy-cart-button"], disabled, onClick: handleAddToCart, type: "button", children: [
|
1180
|
+
addToCartBtnText,
|
1181
|
+
moneyData && /* @__PURE__ */ jsxs3(Fragment4, { children: [
|
1182
|
+
/* @__PURE__ */ jsx5("span", { children: " | " }),
|
1183
|
+
/* @__PURE__ */ jsx5(Money2, { data: moneyData, withoutTrailingZeros: true })
|
1184
|
+
] })
|
1185
|
+
] });
|
1186
|
+
};
|
1187
|
+
|
1188
|
+
// src/components/AddToCartBtn/AddToCartBtn.tsx
|
1189
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
1190
|
+
var AddToCartBtn = ({
|
1191
|
+
addToCartBtnText,
|
1192
|
+
addToCartCallback,
|
1193
|
+
disabled,
|
1194
|
+
isHydrogenReact,
|
1195
|
+
moneyData,
|
1196
|
+
quantity,
|
1197
|
+
selectedVariants
|
1198
|
+
}) => {
|
1199
|
+
const linesToAdd = selectedVariants.map((variant) => ({
|
1200
|
+
attributes: [
|
1201
|
+
{ key: "_source", value: "Rebuy" },
|
1202
|
+
{ key: "_attribution", value: "Rebuy Product Recommendations" }
|
1203
|
+
],
|
1204
|
+
merchandiseId: variant.id,
|
1205
|
+
quantity: quantity || 1,
|
1206
|
+
selectedVariant: variant
|
1207
|
+
}));
|
1208
|
+
if (isHydrogenReact) {
|
1209
|
+
return /* @__PURE__ */ jsx6(
|
1210
|
+
HydrogenReactAddToCartBtn,
|
1211
|
+
{
|
1212
|
+
addToCartBtnText,
|
1213
|
+
addToCartCallback,
|
1214
|
+
disabled,
|
1215
|
+
linesToAdd,
|
1216
|
+
moneyData
|
1217
|
+
}
|
1218
|
+
);
|
1219
|
+
}
|
1220
|
+
return /* @__PURE__ */ jsx6(
|
1221
|
+
HydrogenAddToCartBtn,
|
1222
|
+
{
|
1223
|
+
addToCartBtnText,
|
1224
|
+
addToCartCallback,
|
1225
|
+
disabled,
|
1226
|
+
linesToAdd,
|
1227
|
+
moneyData
|
1228
|
+
}
|
1229
|
+
);
|
1230
|
+
};
|
1231
|
+
|
1232
|
+
// src/components/ProductPrice/ProductPrice.tsx
|
1233
|
+
import { Money as Money3 } from "@shopify/hydrogen";
|
1234
|
+
|
1235
|
+
// src/components/ProductPrice/ProductPrice.module.css
|
1236
|
+
var ProductPrice_default = {
|
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"
|
1241
|
+
};
|
1242
|
+
|
1243
|
+
// src/components/ProductPrice/ProductPrice.tsx
|
1244
|
+
import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
|
1245
|
+
var RebuyProductPrice = ({ selectedVariant, settingsDiscount }) => {
|
1246
|
+
if (!selectedVariant) return null;
|
1247
|
+
const { compareAtPriceV2: compareAtPrice, priceV2: price } = selectedVariant;
|
1248
|
+
const isDiscounted = (price2, compareAtPrice2) => Number(compareAtPrice2?.amount) > Number(price2?.amount);
|
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
|
+
);
|
1260
|
+
};
|
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 })
|
1272
|
+
] });
|
1273
|
+
};
|
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
|
+
|
1313
|
+
// src/components/Title/Title.tsx
|
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);
|
1325
|
+
switch (level) {
|
1326
|
+
case "h1":
|
1327
|
+
return /* @__PURE__ */ jsx9("h1", { className: combinedClassName, style, children: text });
|
1328
|
+
default:
|
1329
|
+
case "h2":
|
1330
|
+
return /* @__PURE__ */ jsx9("h2", { className: combinedClassName, style, children: text });
|
1331
|
+
case "h3":
|
1332
|
+
return /* @__PURE__ */ jsx9("h3", { className: combinedClassName, style, children: text });
|
1333
|
+
case "h4":
|
1334
|
+
return /* @__PURE__ */ jsx9("h4", { className: combinedClassName, style, children: text });
|
1335
|
+
case "h5":
|
1336
|
+
return /* @__PURE__ */ jsx9("h5", { className: combinedClassName, style, children: text });
|
1337
|
+
case "h6":
|
1338
|
+
return /* @__PURE__ */ jsx9("h6", { className: combinedClassName, style, children: text });
|
1339
|
+
}
|
1340
|
+
};
|
1341
|
+
|
1342
|
+
// src/components/VariantSelect/VariantSelect.tsx
|
1343
|
+
import clsx2 from "clsx";
|
1344
|
+
import { useEffect as useEffect3, useState as useState4 } from "react";
|
1345
|
+
|
1346
|
+
// src/components/VariantSelect/VariantSelect.module.css
|
1347
|
+
var VariantSelect_default = {
|
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"
|
1355
|
+
};
|
1356
|
+
|
1357
|
+
// src/components/VariantSelect/VariantSelect.tsx
|
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(" / ");
|
1372
|
+
};
|
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(
|
1381
|
+
"select",
|
1382
|
+
{
|
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
|
+
)
|
1403
|
+
}
|
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
|
+
)) }) });
|
1418
|
+
};
|
1419
|
+
|
1420
|
+
// src/components/ProductCard/ProductCard.module.css
|
1421
|
+
var ProductCard_default = {
|
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"
|
1448
|
+
};
|
1449
|
+
|
1450
|
+
// src/components/ProductCard/ProductCard.tsx
|
1451
|
+
import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
|
1452
|
+
var ProductCard = ({
|
1453
|
+
addToCartBtnText,
|
1454
|
+
addToCartCallback,
|
1455
|
+
isHydrogenReact,
|
1456
|
+
isInPopup,
|
1457
|
+
onPopupDismiss,
|
1458
|
+
product,
|
1459
|
+
productCardTitleLevel,
|
1460
|
+
settings = defaultProductCardSettings
|
1461
|
+
}) => {
|
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;
|
1465
|
+
const handleSelectedVariant = (product2, variant_id) => {
|
1466
|
+
const updatedVariant = product2.variants.nodes.find((variant) => variant.id === variant_id);
|
1467
|
+
if (updatedVariant) {
|
1468
|
+
setSelectedVariant(updatedVariant);
|
1469
|
+
}
|
1470
|
+
};
|
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,
|
1490
|
+
{
|
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
|
+
)
|
1505
|
+
}
|
1506
|
+
) }),
|
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
|
+
] })
|
1612
|
+
] })
|
1613
|
+
] }),
|
1614
|
+
showVariantSelect && /* @__PURE__ */ jsx11("div", { className: ProductCard_default["rebuy-product-card__variant-select"], "data-layout": cardLayout, children: /* @__PURE__ */ jsx11(
|
1615
|
+
VariantSelect,
|
1616
|
+
{
|
1617
|
+
handleSelectedVariant,
|
1618
|
+
product,
|
1619
|
+
selectedId: selectedVariant.id,
|
1620
|
+
style: settings?.variantSelector
|
1621
|
+
}
|
1622
|
+
) })
|
1623
|
+
] });
|
1624
|
+
};
|
1625
|
+
|
1626
|
+
// src/hooks/titleLevel.tsx
|
1627
|
+
var getTitleLevel = (level, decreaseLevel = false) => {
|
1628
|
+
switch (level) {
|
1629
|
+
case "h1":
|
1630
|
+
if (decreaseLevel) {
|
1631
|
+
return "h2" /* H2 */;
|
1632
|
+
}
|
1633
|
+
return "h1" /* H1 */;
|
1634
|
+
case "h2":
|
1635
|
+
if (decreaseLevel) {
|
1636
|
+
return "h3" /* H3 */;
|
1637
|
+
}
|
1638
|
+
return "h2" /* H2 */;
|
1639
|
+
case "h3":
|
1640
|
+
if (decreaseLevel) {
|
1641
|
+
return "h4" /* H4 */;
|
1642
|
+
}
|
1643
|
+
return "h3" /* H3 */;
|
1644
|
+
case "h4":
|
1645
|
+
if (decreaseLevel) {
|
1646
|
+
return "h5" /* H5 */;
|
1647
|
+
}
|
1648
|
+
return "h4" /* H4 */;
|
1649
|
+
case "h5":
|
1650
|
+
if (decreaseLevel) {
|
1651
|
+
return "h6" /* H6 */;
|
1652
|
+
}
|
1653
|
+
return "h5" /* H5 */;
|
1654
|
+
case "h6":
|
1655
|
+
if (decreaseLevel) {
|
1656
|
+
return "h6" /* H6 */;
|
1657
|
+
}
|
1658
|
+
return "h6" /* H6 */;
|
1659
|
+
default:
|
1660
|
+
return "h2" /* H2 */;
|
1661
|
+
}
|
1662
|
+
};
|
1663
|
+
|
1664
|
+
// src/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.module.css
|
1665
|
+
var RebuyCompleteTheLook_default = {
|
1666
|
+
container: "RebuyCompleteTheLook_container",
|
1667
|
+
productGrid: "RebuyCompleteTheLook_productGrid",
|
1668
|
+
productItem: "RebuyCompleteTheLook_productItem"
|
1669
|
+
};
|
1670
|
+
|
1671
|
+
// src/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.tsx
|
1672
|
+
import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
|
1673
|
+
var RebuyCompleteTheLook = (props) => {
|
1674
|
+
const {
|
1675
|
+
addToCartBtnText = "Add to cart",
|
1676
|
+
addToCartCallback,
|
1677
|
+
customTitle = `These pair with ${props.product?.title}`,
|
1678
|
+
customTitleLevel = "h2",
|
1679
|
+
customTitleStyle,
|
1680
|
+
products = []
|
1681
|
+
} = props;
|
1682
|
+
if (products.length === 0) {
|
1683
|
+
console.log("RebuyCompleteTheLook: No products found");
|
1684
|
+
return null;
|
1685
|
+
}
|
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(
|
1689
|
+
ProductCard,
|
1690
|
+
{
|
1691
|
+
addToCartBtnText,
|
1692
|
+
addToCartCallback,
|
1693
|
+
isHydrogenReact: props.isHydrogenReact,
|
1694
|
+
product,
|
1695
|
+
productCardTitleLevel: getTitleLevel(customTitleLevel, true)
|
1696
|
+
}
|
1697
|
+
) }, product.id)) })
|
1698
|
+
] });
|
1699
|
+
};
|
1700
|
+
|
1701
|
+
// src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.tsx
|
1702
|
+
import { useCallback, useEffect as useEffect4, useState as useState6 } from "react";
|
1703
|
+
|
1704
|
+
// src/utils/convertToRebuyProduct.tsx
|
1705
|
+
var convertToRebuyProduct = (isHydrogenReact, product) => {
|
1706
|
+
const mainProductVariants = isHydrogenReact ? product?.variants?.nodes?.map((variant) => {
|
1707
|
+
return {
|
1708
|
+
...variant
|
1709
|
+
};
|
1710
|
+
}) || [] : product?.adjacentVariants.map((variant) => {
|
1711
|
+
return {
|
1712
|
+
availableForSale: variant.availableForSale,
|
1713
|
+
compareAtPriceV2: {
|
1714
|
+
amount: variant.compareAtPrice?.amount || "",
|
1715
|
+
currencyCode: variant.compareAtPrice?.currencyCode || "USD"
|
1716
|
+
},
|
1717
|
+
id: variant.id,
|
1718
|
+
image: {
|
1719
|
+
altText: variant.image?.altText || "",
|
1720
|
+
height: variant.image?.height || 100,
|
1721
|
+
id: variant.image?.id || "",
|
1722
|
+
url: variant.image?.url || "",
|
1723
|
+
width: variant.image?.width || 100
|
1724
|
+
},
|
1725
|
+
priceV2: {
|
1726
|
+
amount: variant.price.amount || "",
|
1727
|
+
currencyCode: variant.price.currencyCode || "USD"
|
1728
|
+
},
|
1729
|
+
product: {
|
1730
|
+
handle: product.handle,
|
1731
|
+
id: product.id,
|
1732
|
+
title: product.title,
|
1733
|
+
vendor: product.vendor
|
1734
|
+
},
|
1735
|
+
selectedOptions: variant.selectedOptions,
|
1736
|
+
sku: variant.sku || "",
|
1737
|
+
title: variant.title || ""
|
1738
|
+
};
|
1739
|
+
}) || [];
|
1740
|
+
return isHydrogenReact ? {
|
1741
|
+
collections: {
|
1742
|
+
nodes: product?.collections.nodes.map((collection) => {
|
1743
|
+
return {
|
1744
|
+
handle: collection.handle
|
1745
|
+
};
|
1746
|
+
}) || []
|
1747
|
+
},
|
1748
|
+
compareAtPriceRange: {
|
1749
|
+
maxVariantCompareAtPrice: null,
|
1750
|
+
minVariantCompareAtPrice: null
|
1751
|
+
},
|
1752
|
+
description: product?.description || "",
|
1753
|
+
descriptionHtml: product?.descriptionHtml || "",
|
1754
|
+
featuredImage: {
|
1755
|
+
altText: product?.featuredImage?.altText || "",
|
1756
|
+
height: product?.featuredImage?.height || 100,
|
1757
|
+
id: product?.featuredImage?.id || "",
|
1758
|
+
url: product?.featuredImage?.url || "",
|
1759
|
+
width: product?.featuredImage?.width || 100
|
1760
|
+
},
|
1761
|
+
handle: product?.handle || "",
|
1762
|
+
id: product?.id || "",
|
1763
|
+
images: [{ altText: "", height: 100, id: "", url: "", width: 100 }],
|
1764
|
+
media: [],
|
1765
|
+
metafields: [],
|
1766
|
+
options: [],
|
1767
|
+
priceRange: product?.priceRange || {
|
1768
|
+
maxVariantPrice: { amount: "0", currencyCode: "USD" },
|
1769
|
+
minVariantPrice: { amount: "0", currencyCode: "USD" }
|
1770
|
+
},
|
1771
|
+
selected: true,
|
1772
|
+
selectedOptions: product?.selectedVariant?.selectedOptions?.reduce((acc, option) => {
|
1773
|
+
return { ...acc, [option.name]: option.value };
|
1774
|
+
}, {}) || {},
|
1775
|
+
selectedSellingPlan: {},
|
1776
|
+
selectedSellingPlanAllocation: {},
|
1777
|
+
selectedVariant: {
|
1778
|
+
availableForSale: product?.selectedVariant?.availableForSale || false,
|
1779
|
+
compareAtPriceV2: {
|
1780
|
+
amount: product?.selectedVariant?.compareAtPrice?.amount || "",
|
1781
|
+
currencyCode: product?.selectedVariant?.compareAtPrice?.currencyCode || "USD"
|
1782
|
+
},
|
1783
|
+
id: product?.selectedVariant?.id || "",
|
1784
|
+
image: {
|
1785
|
+
altText: product?.selectedVariant?.image?.altText || "",
|
1786
|
+
height: product?.selectedVariant?.image?.height || 100,
|
1787
|
+
id: product?.selectedVariant?.image?.id || "",
|
1788
|
+
url: product?.selectedVariant?.image?.url || "",
|
1789
|
+
width: product?.selectedVariant?.image?.width || 100
|
1790
|
+
},
|
1791
|
+
priceV2: {
|
1792
|
+
amount: product?.selectedVariant?.price.amount || "",
|
1793
|
+
currencyCode: product?.selectedVariant?.price.currencyCode || "USD"
|
1794
|
+
},
|
1795
|
+
product: {
|
1796
|
+
handle: product?.handle || "",
|
1797
|
+
id: product?.id || "",
|
1798
|
+
title: product?.title || "",
|
1799
|
+
vendor: product?.vendor || ""
|
1800
|
+
},
|
1801
|
+
selectedOptions: product?.selectedVariant?.selectedOptions || [],
|
1802
|
+
sku: product?.selectedVariant?.sku || "",
|
1803
|
+
title: product?.selectedVariant?.title || ""
|
1804
|
+
},
|
1805
|
+
sellingPlanGroups: [],
|
1806
|
+
seo: {
|
1807
|
+
description: product?.seo?.description || "",
|
1808
|
+
title: product?.seo?.title || ""
|
1809
|
+
},
|
1810
|
+
title: product?.title || "",
|
1811
|
+
variants: {
|
1812
|
+
nodes: mainProductVariants
|
1813
|
+
},
|
1814
|
+
vendor: product?.vendor || ""
|
1815
|
+
} : {
|
1816
|
+
collections: {
|
1817
|
+
nodes: []
|
1818
|
+
},
|
1819
|
+
compareAtPriceRange: {
|
1820
|
+
maxVariantCompareAtPrice: null,
|
1821
|
+
minVariantCompareAtPrice: null
|
1822
|
+
},
|
1823
|
+
description: product?.description || "",
|
1824
|
+
descriptionHtml: product?.descriptionHtml || "",
|
1825
|
+
featuredImage: {
|
1826
|
+
altText: product?.selectedOrFirstAvailableVariant?.image?.altText || "",
|
1827
|
+
height: product?.selectedOrFirstAvailableVariant?.image?.height || 100,
|
1828
|
+
id: product?.selectedOrFirstAvailableVariant?.image?.id || "",
|
1829
|
+
url: product?.selectedOrFirstAvailableVariant?.image?.url || "",
|
1830
|
+
width: product?.selectedOrFirstAvailableVariant?.image?.width || 100
|
1831
|
+
},
|
1832
|
+
handle: product?.handle || "",
|
1833
|
+
id: product?.id || "",
|
1834
|
+
images: [
|
1835
|
+
{
|
1836
|
+
altText: product?.selectedOrFirstAvailableVariant?.image?.altText || "",
|
1837
|
+
height: product?.selectedOrFirstAvailableVariant?.image?.height || 100,
|
1838
|
+
id: product?.selectedOrFirstAvailableVariant?.image?.id || "",
|
1839
|
+
url: product?.selectedOrFirstAvailableVariant?.image?.url || "",
|
1840
|
+
width: product?.selectedOrFirstAvailableVariant?.image?.width || 100
|
1841
|
+
}
|
1842
|
+
],
|
1843
|
+
media: [],
|
1844
|
+
metafields: [],
|
1845
|
+
options: [],
|
1846
|
+
priceRange: product?.priceRange || {
|
1847
|
+
maxVariantPrice: { amount: "0", currencyCode: "USD" },
|
1848
|
+
minVariantPrice: { amount: "0", currencyCode: "USD" }
|
1849
|
+
},
|
1850
|
+
selected: true,
|
1851
|
+
selectedOptions: product?.selectedOrFirstAvailableVariant?.selectedOptions?.reduce((acc, option) => {
|
1852
|
+
return { ...acc, [option.name]: option.value };
|
1853
|
+
}, {}) || {},
|
1854
|
+
selectedSellingPlan: {},
|
1855
|
+
selectedSellingPlanAllocation: {},
|
1856
|
+
selectedVariant: {
|
1857
|
+
availableForSale: product?.selectedOrFirstAvailableVariant?.availableForSale || false,
|
1858
|
+
compareAtPriceV2: {
|
1859
|
+
amount: product?.selectedOrFirstAvailableVariant?.compareAtPrice?.amount || "",
|
1860
|
+
currencyCode: product?.selectedOrFirstAvailableVariant?.compareAtPrice?.currencyCode || "USD"
|
1861
|
+
},
|
1862
|
+
id: product?.selectedOrFirstAvailableVariant?.id || "",
|
1863
|
+
image: {
|
1864
|
+
altText: product?.selectedOrFirstAvailableVariant?.image?.altText || "",
|
1865
|
+
height: product?.selectedOrFirstAvailableVariant?.image?.height || 100,
|
1866
|
+
id: product?.selectedOrFirstAvailableVariant?.image?.id || "",
|
1867
|
+
url: product?.selectedOrFirstAvailableVariant?.image?.url || "",
|
1868
|
+
width: product?.selectedOrFirstAvailableVariant?.image?.width || 100
|
1869
|
+
},
|
1870
|
+
priceV2: {
|
1871
|
+
amount: product?.selectedOrFirstAvailableVariant?.price.amount || "",
|
1872
|
+
currencyCode: product?.selectedOrFirstAvailableVariant?.price.currencyCode || "USD"
|
1873
|
+
},
|
1874
|
+
product: {
|
1875
|
+
handle: product?.handle || "",
|
1876
|
+
id: product?.id || "",
|
1877
|
+
title: product?.title || "",
|
1878
|
+
vendor: product?.vendor || ""
|
1879
|
+
},
|
1880
|
+
selectedOptions: product?.selectedOrFirstAvailableVariant?.selectedOptions || [],
|
1881
|
+
sku: product?.selectedOrFirstAvailableVariant?.sku || "",
|
1882
|
+
title: product?.selectedOrFirstAvailableVariant?.title || ""
|
1883
|
+
},
|
1884
|
+
sellingPlanGroups: [],
|
1885
|
+
seo: {
|
1886
|
+
description: null,
|
1887
|
+
title: null
|
1888
|
+
},
|
1889
|
+
title: product?.title || "",
|
1890
|
+
variants: {
|
1891
|
+
nodes: [
|
1892
|
+
{
|
1893
|
+
availableForSale: product?.selectedOrFirstAvailableVariant?.availableForSale || false,
|
1894
|
+
compareAtPriceV2: {
|
1895
|
+
amount: product?.selectedOrFirstAvailableVariant?.compareAtPrice?.amount || "",
|
1896
|
+
currencyCode: product?.selectedOrFirstAvailableVariant?.compareAtPrice?.currencyCode || "USD"
|
1897
|
+
},
|
1898
|
+
id: product?.selectedOrFirstAvailableVariant?.id || "",
|
1899
|
+
image: {
|
1900
|
+
altText: product?.selectedOrFirstAvailableVariant?.image?.altText || "",
|
1901
|
+
height: product?.selectedOrFirstAvailableVariant?.image?.height || 100,
|
1902
|
+
id: product?.selectedOrFirstAvailableVariant?.image?.id || "",
|
1903
|
+
url: product?.selectedOrFirstAvailableVariant?.image?.url || "",
|
1904
|
+
width: product?.selectedOrFirstAvailableVariant?.image?.width || 100
|
1905
|
+
},
|
1906
|
+
priceV2: {
|
1907
|
+
amount: product?.selectedOrFirstAvailableVariant?.price.amount || "",
|
1908
|
+
currencyCode: product?.selectedOrFirstAvailableVariant?.price.currencyCode || "USD"
|
1909
|
+
},
|
1910
|
+
product: {
|
1911
|
+
handle: product?.handle || "",
|
1912
|
+
id: product?.id || "",
|
1913
|
+
title: product?.title || "",
|
1914
|
+
vendor: product?.vendor || ""
|
1915
|
+
},
|
1916
|
+
selectedOptions: product?.selectedOrFirstAvailableVariant?.selectedOptions || [],
|
1917
|
+
sku: product?.selectedOrFirstAvailableVariant?.sku || "",
|
1918
|
+
title: product?.selectedOrFirstAvailableVariant?.title || ""
|
1919
|
+
},
|
1920
|
+
...mainProductVariants
|
1921
|
+
]
|
1922
|
+
},
|
1923
|
+
vendor: product?.vendor || ""
|
1924
|
+
};
|
1925
|
+
};
|
1926
|
+
|
1927
|
+
// src/widgets/RebuyDynamicBundleProducts/BundleImages.tsx
|
1928
|
+
import { Link as Link2 } from "@remix-run/react";
|
1929
|
+
import { Image as Image2 } from "@shopify/hydrogen";
|
1930
|
+
import { Fragment as Fragment6 } from "react";
|
1931
|
+
|
1932
|
+
// src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.module.css
|
1933
|
+
var RebuyDynamicBundleProducts_default = {
|
1934
|
+
container: "RebuyDynamicBundleProducts_container",
|
1935
|
+
addCartBtnContainer: "RebuyDynamicBundleProducts_addCartBtnContainer",
|
1936
|
+
bundleContainer: "RebuyDynamicBundleProducts_bundleContainer",
|
1937
|
+
select: "RebuyDynamicBundleProducts_select",
|
1938
|
+
bundleItemRowContainer: "RebuyDynamicBundleProducts_bundleItemRowContainer",
|
1939
|
+
unselected: "RebuyDynamicBundleProducts_unselected",
|
1940
|
+
bundleItemRow: "RebuyDynamicBundleProducts_bundleItemRow",
|
1941
|
+
bundleItemInput: "RebuyDynamicBundleProducts_bundleItemInput",
|
1942
|
+
bundleItemLabel: "RebuyDynamicBundleProducts_bundleItemLabel",
|
1943
|
+
bundleImages: "RebuyDynamicBundleProducts_bundleImages",
|
1944
|
+
bundleImage: "RebuyDynamicBundleProducts_bundleImage",
|
1945
|
+
"fade-in": "RebuyDynamicBundleProducts_fade-in",
|
1946
|
+
bundleImageDelimiter: "RebuyDynamicBundleProducts_bundleImageDelimiter",
|
1947
|
+
compareAtPrice: "RebuyDynamicBundleProducts_compareAtPrice"
|
1948
|
+
};
|
1949
|
+
|
1950
|
+
// src/widgets/RebuyDynamicBundleProducts/BundleImages.tsx
|
1951
|
+
import { Fragment as Fragment7, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
|
1952
|
+
var BundleImages = ({ products }) => {
|
1953
|
+
const selected = products.filter((product) => product.selected);
|
1954
|
+
return /* @__PURE__ */ jsx13("ul", { className: RebuyDynamicBundleProducts_default.bundleImages, children: products.map((product, index) => {
|
1955
|
+
const image = product.selectedVariant?.image;
|
1956
|
+
const productImage = image ? /* @__PURE__ */ jsx13(
|
1957
|
+
Image2,
|
1958
|
+
{
|
1959
|
+
alt: image.altText || `Picture of ${product.title}`,
|
1960
|
+
className: RebuyDynamicBundleProducts_default.bundleImage,
|
1961
|
+
data: image,
|
1962
|
+
height: 80,
|
1963
|
+
title: product.title,
|
1964
|
+
width: 80
|
1965
|
+
}
|
1966
|
+
) : (
|
1967
|
+
// No image defined
|
1968
|
+
product.title
|
1969
|
+
);
|
1970
|
+
const showDelimiter = selected[0]?.id !== product.id;
|
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 ? (
|
1974
|
+
// Already on product page
|
1975
|
+
productImage
|
1976
|
+
) : (
|
1977
|
+
// Link to product
|
1978
|
+
/* @__PURE__ */ jsx13(Link2, { title: product.title, to: `/products/${product.handle}`, children: productImage })
|
1979
|
+
) })
|
1980
|
+
] }) }, product.id + "-BundleImages-" + index);
|
1981
|
+
}) });
|
1982
|
+
};
|
1983
|
+
|
1984
|
+
// src/widgets/RebuyDynamicBundleProducts/Select.tsx
|
1985
|
+
import { jsx as jsx14 } from "react/jsx-runtime";
|
1986
|
+
var Select = ({ onSelectVariant, product }) => {
|
1987
|
+
const getOptionsLabel = (product2) => {
|
1988
|
+
const options = product2.variants.nodes[0].selectedOptions;
|
1989
|
+
const optionsFromKeys = options ? Object.keys(options[0]) : [];
|
1990
|
+
const optionsFromValues = options ? options.map((option) => option.name) : [];
|
1991
|
+
const useValues = optionsFromKeys.every((key) => ["name", "value"].includes(key));
|
1992
|
+
return (useValues ? optionsFromValues : optionsFromKeys).join(" / ");
|
1993
|
+
};
|
1994
|
+
return product && /* @__PURE__ */ jsx14(
|
1995
|
+
"select",
|
1996
|
+
{
|
1997
|
+
"aria-label": "select variant",
|
1998
|
+
className: RebuyDynamicBundleProducts_default.select,
|
1999
|
+
onChange: (e) => onSelectVariant(product, e.target.value),
|
2000
|
+
value: product.selectedVariant.id,
|
2001
|
+
children: /* @__PURE__ */ jsx14("optgroup", { label: getOptionsLabel(product), children: product.variants.nodes.map(({ id, title }) => /* @__PURE__ */ jsx14("option", { value: id, children: title }, id + "-BundleVariant")) })
|
2002
|
+
}
|
2003
|
+
);
|
2004
|
+
};
|
2005
|
+
|
2006
|
+
// src/widgets/RebuyDynamicBundleProducts/BundleSelection.tsx
|
2007
|
+
import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
|
2008
|
+
var BundleSelection = ({ onSelectVariant, onToggleBundleItem, products }) => {
|
2009
|
+
return /* @__PURE__ */ jsx15("ul", { children: products.map((product, index) => {
|
2010
|
+
const { availableForSale } = product.selectedVariant;
|
2011
|
+
const isOutOfStock = !availableForSale;
|
2012
|
+
return /* @__PURE__ */ jsx15(
|
2013
|
+
"li",
|
2014
|
+
{
|
2015
|
+
className: `${RebuyDynamicBundleProducts_default.bundleItemRowContainer} ${!product.selected && RebuyDynamicBundleProducts_default.unselected}`,
|
2016
|
+
children: /* @__PURE__ */ jsxs8("div", { className: RebuyDynamicBundleProducts_default.bundleItemRow, children: [
|
2017
|
+
/* @__PURE__ */ jsx15(
|
2018
|
+
"input",
|
2019
|
+
{
|
2020
|
+
checked: product.selected && availableForSale,
|
2021
|
+
className: "mt-1 rounded-sm accent-black cursor-pointer",
|
2022
|
+
disabled: isOutOfStock,
|
2023
|
+
id: `${product.id}-toggle`,
|
2024
|
+
onChange: () => onToggleBundleItem(product),
|
2025
|
+
type: "checkbox",
|
2026
|
+
value: product.id
|
2027
|
+
}
|
2028
|
+
),
|
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:" }),
|
2033
|
+
product.title,
|
2034
|
+
/* @__PURE__ */ jsx15(RebuyProductPrice, { selectedVariant: product.selectedVariant })
|
2035
|
+
] }),
|
2036
|
+
product.variants.nodes.length > 1 && /* @__PURE__ */ jsx15(Select, { onSelectVariant, product })
|
2037
|
+
] })
|
2038
|
+
] })
|
2039
|
+
},
|
2040
|
+
product.id + "-BundleSelection" + index
|
2041
|
+
);
|
2042
|
+
}) });
|
2043
|
+
};
|
2044
|
+
|
2045
|
+
// src/widgets/RebuyDynamicBundleProducts/BundlePrice.tsx
|
2046
|
+
import { Money as Money4 } from "@shopify/hydrogen";
|
2047
|
+
import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
|
2048
|
+
var BundlePrice = ({ products }) => {
|
2049
|
+
const isDisabled = products.filter((product) => product.selected).length < 1;
|
2050
|
+
const totalBundlePrice = () => {
|
2051
|
+
let total = 0;
|
2052
|
+
let currencyCode = "USD";
|
2053
|
+
for (const product of products) {
|
2054
|
+
if (product.selected && product.selectedVariant) {
|
2055
|
+
const { priceV2: price2 } = product.selectedVariant;
|
2056
|
+
total += Number(price2?.amount);
|
2057
|
+
currencyCode = price2?.currencyCode || "USD";
|
2058
|
+
}
|
2059
|
+
}
|
2060
|
+
return {
|
2061
|
+
amount: String(total),
|
2062
|
+
currencyCode
|
2063
|
+
};
|
2064
|
+
};
|
2065
|
+
const totalBundleCompareAtPrice = () => {
|
2066
|
+
let compareAtTotal = 0;
|
2067
|
+
let currencyCode = "USD";
|
2068
|
+
for (const product of products) {
|
2069
|
+
if (product.selected && product.selectedVariant) {
|
2070
|
+
const { compareAtPriceV2: compareAtPrice2, priceV2: price2 } = product.selectedVariant;
|
2071
|
+
currencyCode = price2?.currencyCode || "USD";
|
2072
|
+
compareAtTotal += Number((compareAtPrice2 || price2)?.amount);
|
2073
|
+
}
|
2074
|
+
}
|
2075
|
+
return {
|
2076
|
+
amount: String(compareAtTotal),
|
2077
|
+
currencyCode
|
2078
|
+
};
|
2079
|
+
};
|
2080
|
+
const isDiscounted = (price2, compareAtPrice2) => Number(compareAtPrice2?.amount) > Number(price2?.amount);
|
2081
|
+
const price = totalBundlePrice();
|
2082
|
+
const compareAtPrice = totalBundleCompareAtPrice();
|
2083
|
+
const CompareAtPrice = ({ data: compareAtPrice2 }) => {
|
2084
|
+
return compareAtPrice2 && /* @__PURE__ */ jsx16(Money4, { as: "span", className: RebuyDynamicBundleProducts_default.compareAtPrice, data: compareAtPrice2, withoutTrailingZeros: true });
|
2085
|
+
};
|
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 })
|
2090
|
+
] }) });
|
2091
|
+
};
|
2092
|
+
|
2093
|
+
// src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.tsx
|
2094
|
+
import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
|
2095
|
+
var RebuyDynamicBundleProducts = (props) => {
|
2096
|
+
const {
|
2097
|
+
addToCartBtnText = "Add to cart",
|
2098
|
+
addToCartCallback,
|
2099
|
+
customTitle = `These pair with ${props.product?.title}`,
|
2100
|
+
customTitleLevel = "h2",
|
2101
|
+
customTitleStyle,
|
2102
|
+
isHydrogenReact,
|
2103
|
+
product,
|
2104
|
+
products = []
|
2105
|
+
} = props;
|
2106
|
+
const [bundleProducts, setBundleProducts] = useState6([]);
|
2107
|
+
useEffect4(() => {
|
2108
|
+
const mainProduct = convertToRebuyProduct(isHydrogenReact || false, product);
|
2109
|
+
const formattedProducts = products.map((product2) => {
|
2110
|
+
return {
|
2111
|
+
...product2,
|
2112
|
+
selected: true,
|
2113
|
+
selectedVariant: product2.variants.nodes[0]
|
2114
|
+
};
|
2115
|
+
});
|
2116
|
+
setBundleProducts([mainProduct, ...formattedProducts]);
|
2117
|
+
}, [product, products, isHydrogenReact]);
|
2118
|
+
const onToggleBundleItem = useCallback(
|
2119
|
+
(product2) => {
|
2120
|
+
product2.selected = !product2.selected;
|
2121
|
+
setBundleProducts([...bundleProducts]);
|
2122
|
+
},
|
2123
|
+
[bundleProducts]
|
2124
|
+
);
|
2125
|
+
const onSelectVariant = useCallback(
|
2126
|
+
(product2, variant_id) => {
|
2127
|
+
const variant = product2.variants.nodes.find(({ id }) => id === variant_id);
|
2128
|
+
if (variant) {
|
2129
|
+
product2.selectedVariant = variant;
|
2130
|
+
product2.selected = variant.availableForSale || false;
|
2131
|
+
setBundleProducts([...bundleProducts]);
|
2132
|
+
}
|
2133
|
+
},
|
2134
|
+
[bundleProducts]
|
2135
|
+
);
|
2136
|
+
if (products.length === 0) {
|
2137
|
+
console.log("RebuyDynamicBundleProducts: No products found");
|
2138
|
+
return null;
|
2139
|
+
}
|
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(
|
2146
|
+
AddToCartBtn,
|
2147
|
+
{
|
2148
|
+
addToCartBtnText,
|
2149
|
+
addToCartCallback,
|
2150
|
+
disabled: bundleProducts.filter((product2) => product2.selected).length === 0,
|
2151
|
+
isHydrogenReact,
|
2152
|
+
selectedVariants: bundleProducts.filter((product2) => product2.selected).map((product2) => {
|
2153
|
+
return product2.selectedVariant;
|
2154
|
+
})
|
2155
|
+
}
|
2156
|
+
) }),
|
2157
|
+
/* @__PURE__ */ jsx17(
|
2158
|
+
BundleSelection,
|
2159
|
+
{
|
2160
|
+
onSelectVariant,
|
2161
|
+
onToggleBundleItem,
|
2162
|
+
products: bundleProducts
|
2163
|
+
}
|
2164
|
+
)
|
2165
|
+
] })
|
2166
|
+
] });
|
2167
|
+
};
|
2168
|
+
|
2169
|
+
// src/widgets/RebuyProductAddOns/RebuyProductAddOns.tsx
|
2170
|
+
import { Money as Money5 } from "@shopify/hydrogen-react";
|
2171
|
+
import { useCallback as useCallback2, useEffect as useEffect5, useState as useState7 } from "react";
|
2172
|
+
|
2173
|
+
// src/widgets/RebuyProductAddOns/RebuyProductAddOnCard.tsx
|
2174
|
+
import { Link as Link3 } from "@remix-run/react";
|
2175
|
+
import { Image as Image3 } from "@shopify/hydrogen";
|
2176
|
+
|
2177
|
+
// src/widgets/RebuyProductAddOns/RebuyProductAddOns.module.css
|
2178
|
+
var RebuyProductAddOns_default = {
|
2179
|
+
container: "RebuyProductAddOns_container",
|
2180
|
+
productAddOnsList: "RebuyProductAddOns_productAddOnsList",
|
2181
|
+
addOnCard: "RebuyProductAddOns_addOnCard",
|
2182
|
+
addOnCardContent: "RebuyProductAddOns_addOnCardContent",
|
2183
|
+
addOnCardInput: "RebuyProductAddOns_addOnCardInput",
|
2184
|
+
addOnCardContentImage: "RebuyProductAddOns_addOnCardContentImage",
|
2185
|
+
addOnCardOutOfStock: "RebuyProductAddOns_addOnCardOutOfStock",
|
2186
|
+
addOnCardTextContent: "RebuyProductAddOns_addOnCardTextContent",
|
2187
|
+
addOnCardLearnMore: "RebuyProductAddOns_addOnCardLearnMore",
|
2188
|
+
addCartBtnContainer: "RebuyProductAddOns_addCartBtnContainer",
|
2189
|
+
moneyContainer: "RebuyProductAddOns_moneyContainer"
|
2190
|
+
};
|
2191
|
+
|
2192
|
+
// src/widgets/RebuyProductAddOns/RebuyProductAddOnCard.tsx
|
2193
|
+
import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
|
2194
|
+
var RebuyProductAddOnCard = ({
|
2195
|
+
handleChange,
|
2196
|
+
learnMoreText,
|
2197
|
+
outOfStockText,
|
2198
|
+
product,
|
2199
|
+
titleLevel
|
2200
|
+
}) => {
|
2201
|
+
const { availableForSale, image } = product.selectedVariant || {};
|
2202
|
+
return /* @__PURE__ */ jsx18("label", { className: RebuyProductAddOns_default.addOnCard, htmlFor: product.id, children: /* @__PURE__ */ jsxs11("div", { className: RebuyProductAddOns_default.addOnCardContent, children: [
|
2203
|
+
/* @__PURE__ */ jsx18(
|
2204
|
+
"input",
|
2205
|
+
{
|
2206
|
+
checked: Boolean(product.selected),
|
2207
|
+
className: RebuyProductAddOns_default.addOnCardInput,
|
2208
|
+
disabled: !product.variants.nodes[0].availableForSale,
|
2209
|
+
id: product.id,
|
2210
|
+
name: product.title,
|
2211
|
+
onChange: (event) => handleChange(event, product),
|
2212
|
+
type: "checkbox",
|
2213
|
+
value: ""
|
2214
|
+
}
|
2215
|
+
),
|
2216
|
+
/* @__PURE__ */ jsx18("div", { className: RebuyProductAddOns_default.addOnCardContentImage, children: image && /* @__PURE__ */ jsx18(
|
2217
|
+
Image3,
|
2218
|
+
{
|
2219
|
+
alt: image.altText || `Picture of ${product.title}`,
|
2220
|
+
data: image,
|
2221
|
+
height: 150,
|
2222
|
+
width: 300
|
2223
|
+
}
|
2224
|
+
) }),
|
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 })
|
2230
|
+
] })
|
2231
|
+
] }) });
|
2232
|
+
};
|
2233
|
+
|
2234
|
+
// src/widgets/RebuyProductAddOns/RebuyProductAddOns.tsx
|
2235
|
+
import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
|
2236
|
+
var RebuyProductAddOns = (props) => {
|
2237
|
+
const {
|
2238
|
+
addToCartCallback,
|
2239
|
+
customTitle = `These pair with ${props.product?.title}`,
|
2240
|
+
customTitleLevel = "h2",
|
2241
|
+
customTitleStyle,
|
2242
|
+
includeMainProduct = false,
|
2243
|
+
isHydrogenReact,
|
2244
|
+
learnMoreText = "Learn more",
|
2245
|
+
outOfStockText = "Out of stock",
|
2246
|
+
product,
|
2247
|
+
products = [],
|
2248
|
+
addToCartBtnText = "Add to cart",
|
2249
|
+
subtotalText = "Add-ons Subtotal: ",
|
2250
|
+
withProductText = `With ${product?.title}: `
|
2251
|
+
} = props;
|
2252
|
+
const [addedItems, setAddedItems] = useState7(products);
|
2253
|
+
const [subtotalWithProduct, setSubtotalWithProduct] = useState7();
|
2254
|
+
const [subtotalWithOutProduct, setSubtotalWithOutProduct] = useState7();
|
2255
|
+
useEffect5(() => {
|
2256
|
+
let initialTotal = 0;
|
2257
|
+
let currencyCode = "USD";
|
2258
|
+
products.map((product2) => {
|
2259
|
+
product2.selectedVariant = product2.variants.nodes[0];
|
2260
|
+
product2.selected = true;
|
2261
|
+
if (product2.selectedVariant?.priceV2) {
|
2262
|
+
initialTotal += Number(product2.selectedVariant.priceV2.amount);
|
2263
|
+
currencyCode = product2.selectedVariant.priceV2.currencyCode || "USD";
|
2264
|
+
}
|
2265
|
+
});
|
2266
|
+
setSubtotalWithProduct({
|
2267
|
+
amount: String(initialTotal),
|
2268
|
+
currencyCode
|
2269
|
+
});
|
2270
|
+
setSubtotalWithOutProduct({
|
2271
|
+
amount: String(
|
2272
|
+
initialTotal - Number(
|
2273
|
+
isHydrogenReact ? product?.selectedVariant?.price.amount : product?.selectedOrFirstAvailableVariant?.price.amount
|
2274
|
+
)
|
2275
|
+
),
|
2276
|
+
currencyCode
|
2277
|
+
});
|
2278
|
+
setAddedItems(products);
|
2279
|
+
if (includeMainProduct) {
|
2280
|
+
setAddedItems([convertToRebuyProduct(isHydrogenReact || false, product), ...products]);
|
2281
|
+
} else {
|
2282
|
+
setAddedItems(products);
|
2283
|
+
}
|
2284
|
+
}, [products, product, isHydrogenReact, includeMainProduct]);
|
2285
|
+
const handleChange = useCallback2(
|
2286
|
+
(event, product2) => {
|
2287
|
+
const newProducts = [...products];
|
2288
|
+
const productIndex = newProducts.findIndex((p) => p.id === product2.id);
|
2289
|
+
if (productIndex !== -1) {
|
2290
|
+
newProducts[productIndex] = {
|
2291
|
+
...newProducts[productIndex],
|
2292
|
+
selected: event.target.checked
|
2293
|
+
};
|
2294
|
+
product2.selected = event.target.checked;
|
2295
|
+
if (event.target.checked) {
|
2296
|
+
setAddedItems((prev) => [...prev, product2]);
|
2297
|
+
} else {
|
2298
|
+
setAddedItems((prev) => prev.filter((item) => item.id !== product2.id));
|
2299
|
+
}
|
2300
|
+
}
|
2301
|
+
},
|
2302
|
+
[products]
|
2303
|
+
);
|
2304
|
+
useEffect5(() => {
|
2305
|
+
let total = 0;
|
2306
|
+
let currencyCode = "USD";
|
2307
|
+
addedItems.forEach((item) => {
|
2308
|
+
if (item.selected && item.selectedVariant?.priceV2) {
|
2309
|
+
total += Number(item.selectedVariant.priceV2.amount);
|
2310
|
+
currencyCode = item.selectedVariant.priceV2.currencyCode || "USD";
|
2311
|
+
}
|
2312
|
+
});
|
2313
|
+
setSubtotalWithProduct({
|
2314
|
+
amount: String(total),
|
2315
|
+
currencyCode
|
2316
|
+
});
|
2317
|
+
setSubtotalWithOutProduct({
|
2318
|
+
amount: String(
|
2319
|
+
total - Number(
|
2320
|
+
isHydrogenReact ? product?.selectedVariant?.price.amount : product?.selectedOrFirstAvailableVariant?.price.amount
|
2321
|
+
)
|
2322
|
+
),
|
2323
|
+
currencyCode
|
2324
|
+
});
|
2325
|
+
}, [addedItems, product, isHydrogenReact]);
|
2326
|
+
if (products.length === 0) {
|
2327
|
+
console.log("RebuyProductAddOns: No products found");
|
2328
|
+
return null;
|
2329
|
+
}
|
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(
|
2333
|
+
RebuyProductAddOnCard,
|
2334
|
+
{
|
2335
|
+
handleChange,
|
2336
|
+
learnMoreText,
|
2337
|
+
outOfStockText,
|
2338
|
+
product: product2,
|
2339
|
+
titleLevel: getTitleLevel(customTitleLevel, true)
|
2340
|
+
}
|
2341
|
+
) }, product2.id)) }),
|
2342
|
+
/* @__PURE__ */ jsxs12("div", { className: RebuyProductAddOns_default.productAddOnsFooter, children: [
|
2343
|
+
/* @__PURE__ */ jsxs12("div", { className: RebuyProductAddOns_default.moneyContainer, children: [
|
2344
|
+
subtotalText,
|
2345
|
+
subtotalWithOutProduct && /* @__PURE__ */ jsx19(Money5, { data: subtotalWithOutProduct, withoutTrailingZeros: true })
|
2346
|
+
] }),
|
2347
|
+
includeMainProduct && /* @__PURE__ */ jsxs12("div", { className: RebuyProductAddOns_default.moneyContainer, children: [
|
2348
|
+
withProductText,
|
2349
|
+
subtotalWithProduct && /* @__PURE__ */ jsx19(Money5, { data: subtotalWithProduct, withoutTrailingZeros: true })
|
2350
|
+
] }),
|
2351
|
+
/* @__PURE__ */ jsx19("div", { className: RebuyProductAddOns_default.addCartBtnContainer, children: includeMainProduct ? /* @__PURE__ */ jsx19(
|
2352
|
+
AddToCartBtn,
|
2353
|
+
{
|
2354
|
+
addToCartBtnText,
|
2355
|
+
addToCartCallback,
|
2356
|
+
disabled: addedItems.length === 0,
|
2357
|
+
isHydrogenReact,
|
2358
|
+
moneyData: subtotalWithProduct,
|
2359
|
+
selectedVariants: addedItems.map((item) => item.selectedVariant)
|
2360
|
+
}
|
2361
|
+
) : /* @__PURE__ */ jsx19(
|
2362
|
+
AddToCartBtn,
|
2363
|
+
{
|
2364
|
+
addToCartBtnText,
|
2365
|
+
addToCartCallback,
|
2366
|
+
disabled: addedItems.length === 0,
|
2367
|
+
isHydrogenReact,
|
2368
|
+
moneyData: subtotalWithOutProduct,
|
2369
|
+
selectedVariants: addedItems.map((item) => item.selectedVariant)
|
2370
|
+
}
|
2371
|
+
) })
|
2372
|
+
] })
|
2373
|
+
] });
|
2374
|
+
};
|
2375
|
+
|
2376
|
+
// src/widgets/RebuyProductRecommendations/RebuyProductRecommendations.module.css
|
2377
|
+
var RebuyProductRecommendations_default = {
|
2378
|
+
container: "RebuyProductRecommendations_container",
|
2379
|
+
productGrid: "RebuyProductRecommendations_productGrid"
|
2380
|
+
};
|
2381
|
+
|
2382
|
+
// src/widgets/RebuyProductRecommendations/RebuyProductRecommendations.tsx
|
2383
|
+
import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
|
2384
|
+
var RebuyProductRecommendations = (props) => {
|
2385
|
+
const {
|
2386
|
+
addToCartBtnText = "Add to cart",
|
2387
|
+
addToCartCallback,
|
2388
|
+
customTitle = `These pair with ${props.product?.title}`,
|
2389
|
+
customTitleLevel = "h2",
|
2390
|
+
customTitleStyle,
|
2391
|
+
products = []
|
2392
|
+
} = props;
|
2393
|
+
if (products.length === 0) {
|
2394
|
+
console.log("RebuyProductRecommendations: No products found");
|
2395
|
+
return null;
|
2396
|
+
}
|
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(
|
2400
|
+
ProductCard,
|
2401
|
+
{
|
2402
|
+
addToCartBtnText,
|
2403
|
+
addToCartCallback,
|
2404
|
+
isHydrogenReact: props.isHydrogenReact,
|
2405
|
+
product,
|
2406
|
+
productCardTitleLevel: getTitleLevel(customTitleLevel, true)
|
2407
|
+
}
|
2408
|
+
) }, product.id)) })
|
2409
|
+
] });
|
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
|
+
};
|
3163
|
+
export {
|
3164
|
+
RebuyCompleteTheLook,
|
3165
|
+
RebuyConfigProvider,
|
3166
|
+
RebuyDynamicBundleProducts,
|
3167
|
+
RebuyHydrogenContextProvider,
|
3168
|
+
RebuyHydrogenReactContextProvider,
|
3169
|
+
RebuyProductAddOns,
|
3170
|
+
RebuyProductRecommendations,
|
3171
|
+
RebuyWidget,
|
3172
|
+
RebuyWidgetContainer,
|
3173
|
+
getRebuyThemeStylesLink,
|
3174
|
+
updateRebuyCsp,
|
3175
|
+
useRebuyConfig,
|
3176
|
+
useRebuyTheme
|
3177
|
+
};
|
3178
|
+
//# sourceMappingURL=index.mjs.map
|