@rebuy/rebuy-hydrogen 3.0.0-beta.3 → 3.0.0-beta.5
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/dist/components/AddToCartBtn/AddToCartBtn.d.ts.map +1 -1
- package/dist/components/AddToCartBtn/HydrogenAddToCartBtn.d.ts.map +1 -1
- package/dist/components/AddToCartBtn/HydrogenReactAddToCartBtn.d.ts.map +1 -1
- package/dist/components/ProductCard/ProductCard.d.ts.map +1 -1
- package/dist/components/ProductPrice/ProductPrice.d.ts +1 -1
- package/dist/components/ProductPrice/ProductPrice.d.ts.map +1 -1
- package/dist/components/VariantSelect/VariantSelect.d.ts +1 -1
- package/dist/components/VariantSelect/VariantSelect.d.ts.map +1 -1
- package/dist/hooks/titleLevel.d.ts.map +1 -1
- package/dist/index.css +88 -88
- package/dist/index.css.map +4 -4
- package/dist/index.js +204 -419
- package/dist/index.js.map +4 -4
- package/dist/index.mjs +204 -428
- package/dist/index.mjs.map +4 -4
- package/dist/providers/RebuyHydrogenContextProvider.d.ts +1 -1
- package/dist/providers/RebuyHydrogenContextProvider.d.ts.map +1 -1
- package/dist/providers/RebuyHydrogenReactContextProvider.d.ts.map +1 -1
- package/dist/providers/types.d.ts +1 -1
- package/dist/providers/types.d.ts.map +1 -1
- package/dist/types/rebuyCustom.d.ts.map +1 -1
- package/dist/types/shopify.d.ts.map +1 -1
- package/dist/types/widgets.d.ts +1 -1
- package/dist/types/widgets.d.ts.map +1 -1
- package/dist/utils/convertToRebuyProduct.d.ts.map +1 -1
- package/dist/utils/createContextParameters.d.ts.map +1 -1
- package/dist/utils/getEncodedAttributes.d.ts.map +1 -1
- package/dist/utils/getRebuyConfig.d.ts.map +1 -1
- package/dist/widgetContainer/RebuyWidgetContainer.d.ts +1 -1
- package/dist/widgetContainer/RebuyWidgetContainer.d.ts.map +1 -1
- package/dist/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.d.ts.map +1 -1
- package/dist/widgets/RebuyDynamicBundleProducts/BundleImages.d.ts.map +1 -1
- package/dist/widgets/RebuyDynamicBundleProducts/BundlePrice.d.ts.map +1 -1
- package/dist/widgets/RebuyDynamicBundleProducts/BundleSelection.d.ts +1 -1
- package/dist/widgets/RebuyDynamicBundleProducts/BundleSelection.d.ts.map +1 -1
- package/dist/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.d.ts.map +1 -1
- package/dist/widgets/RebuyDynamicBundleProducts/Select.d.ts.map +1 -1
- package/dist/widgets/RebuyProductAddOns/RebuyProductAddOnCard.d.ts.map +1 -1
- package/dist/widgets/RebuyProductAddOns/RebuyProductAddOns.d.ts.map +1 -1
- package/dist/widgets/RebuyProductAddOns/types.d.ts.map +1 -1
- package/dist/widgets/RebuyProductRecommendations/RebuyProductRecommendations.d.ts.map +1 -1
- package/package.json +3 -1
package/dist/index.mjs
CHANGED
@@ -12,12 +12,7 @@ import * as Utilities from "@rebuy/rebuy/utilities";
|
|
12
12
|
|
13
13
|
// src/utils/getEncodedAttributes.ts
|
14
14
|
var getEncodedAttributes = (attributes) => encodeURIComponent(
|
15
|
-
JSON.stringify(
|
16
|
-
attributes.reduce(
|
17
|
-
(merged, { key, value }) => ({ ...merged, [key]: value }),
|
18
|
-
{}
|
19
|
-
)
|
20
|
-
)
|
15
|
+
JSON.stringify(attributes.reduce((merged, { key, value }) => ({ ...merged, [key]: value }), {}))
|
21
16
|
);
|
22
17
|
|
23
18
|
// src/utils/createContextParameters.ts
|
@@ -58,18 +53,11 @@ var createContextParameters = ({
|
|
58
53
|
}
|
59
54
|
if (cartId) {
|
60
55
|
cartContext.token = Utilities.getIdFromGraphUrl(cartId, "Cart");
|
61
|
-
contextParameters.cart_token = Utilities.getIdFromGraphUrl(
|
62
|
-
cartId,
|
63
|
-
"Cart"
|
64
|
-
);
|
56
|
+
contextParameters.cart_token = Utilities.getIdFromGraphUrl(cartId, "Cart");
|
65
57
|
}
|
66
58
|
if (cartSubtotal) {
|
67
|
-
cartContext.subtotal = Utilities.amountToCents(
|
68
|
-
|
69
|
-
);
|
70
|
-
contextParameters.cart_subtotal = Utilities.amountToCents(
|
71
|
-
parseFloat(cartSubtotal)
|
72
|
-
);
|
59
|
+
cartContext.subtotal = Utilities.amountToCents(parseFloat(cartSubtotal));
|
60
|
+
contextParameters.cart_subtotal = Utilities.amountToCents(parseFloat(cartSubtotal));
|
73
61
|
}
|
74
62
|
if (cartLinesLength) {
|
75
63
|
const totalLines = cartLinesLength;
|
@@ -92,16 +80,10 @@ var createContextParameters = ({
|
|
92
80
|
variant_id: ""
|
93
81
|
};
|
94
82
|
if (cartItem?.merchandise?.product?.id) {
|
95
|
-
item.product_id = Utilities.getIdFromGraphUrl(
|
96
|
-
cartItem.merchandise.product.id,
|
97
|
-
"Product"
|
98
|
-
);
|
83
|
+
item.product_id = Utilities.getIdFromGraphUrl(cartItem.merchandise.product.id, "Product");
|
99
84
|
}
|
100
85
|
if (cartItem?.merchandise?.id) {
|
101
|
-
item.variant_id = Utilities.getIdFromGraphUrl(
|
102
|
-
cartItem.merchandise.id,
|
103
|
-
"ProductVariant"
|
104
|
-
);
|
86
|
+
item.variant_id = Utilities.getIdFromGraphUrl(cartItem.merchandise.id, "ProductVariant");
|
105
87
|
}
|
106
88
|
if (cartItem?.attributes?.length) {
|
107
89
|
const validAttributes = cartItem.attributes.filter(
|
@@ -133,14 +115,12 @@ var getRebuyConfig = async (rebuyKey, storeDomain) => {
|
|
133
115
|
parameters: { shop: storeDomain },
|
134
116
|
url: `/api/v1/user/config`
|
135
117
|
};
|
136
|
-
const { data: rebuy, ...response } = await new RebuyClient(
|
137
|
-
|
138
|
-
|
118
|
+
const { data: rebuy, ...response } = await new RebuyClient(rebuyKey, null, storeDomain).getShieldedAsset(
|
119
|
+
request.url,
|
120
|
+
request.parameters
|
121
|
+
);
|
139
122
|
if (!rebuy?.shop) {
|
140
|
-
throw new Error(
|
141
|
-
"Rebuy configuration is not properly set up - missing shop",
|
142
|
-
{ cause: response }
|
143
|
-
);
|
123
|
+
throw new Error("Rebuy configuration is not properly set up - missing shop", { cause: response });
|
144
124
|
}
|
145
125
|
return rebuy;
|
146
126
|
} catch (error) {
|
@@ -153,6 +133,9 @@ var getRebuyConfig = async (rebuyKey, storeDomain) => {
|
|
153
133
|
|
154
134
|
// src/providers/RebuyHydrogenContextProvider.tsx
|
155
135
|
import { jsx } from "react/jsx-runtime";
|
136
|
+
var PUBLIC_PRIMARY_DOMAIN = import.meta.env.PUBLIC_PRIMARY_DOMAIN;
|
137
|
+
var PUBLIC_REBUY_API_KEY = import.meta.env.PUBLIC_REBUY_API_KEY;
|
138
|
+
var PUBLIC_STORE_DOMAIN = import.meta.env.PUBLIC_STORE_DOMAIN;
|
156
139
|
var RebuyHydrogenContext = ({
|
157
140
|
cartAttributes,
|
158
141
|
cartCost,
|
@@ -162,22 +145,28 @@ var RebuyHydrogenContext = ({
|
|
162
145
|
cartQuantity,
|
163
146
|
children
|
164
147
|
}) => {
|
165
|
-
|
166
|
-
|
167
|
-
|
148
|
+
if (!PUBLIC_PRIMARY_DOMAIN) {
|
149
|
+
throw new Error("Missing required environment variable: PUBLIC_PRIMARY_DOMAIN");
|
150
|
+
}
|
151
|
+
if (!PUBLIC_REBUY_API_KEY) {
|
152
|
+
throw new Error("Missing required environment variable: PUBLIC_REBUY_API_KEY");
|
153
|
+
}
|
154
|
+
if (!PUBLIC_STORE_DOMAIN) {
|
155
|
+
throw new Error("Missing required environment variable: PUBLIC_STORE_DOMAIN");
|
156
|
+
}
|
168
157
|
const [rebuyConfig, setRebuyConfig] = useState(null);
|
169
158
|
const location = useLocation();
|
170
159
|
const queryObject = Utilities2.queryStringToObject(location.search);
|
171
|
-
const windowUrl = `${
|
160
|
+
const windowUrl = `${PUBLIC_PRIMARY_DOMAIN}${location.pathname}${location.search}`;
|
172
161
|
useEffect(() => {
|
173
162
|
const initConfig = async () => {
|
174
|
-
const config = await getRebuyConfig(
|
163
|
+
const config = await getRebuyConfig(PUBLIC_REBUY_API_KEY, PUBLIC_STORE_DOMAIN);
|
175
164
|
setRebuyConfig(config);
|
176
165
|
};
|
177
166
|
if (!rebuyConfig?.shop) {
|
178
167
|
initConfig();
|
179
168
|
}
|
180
|
-
}, [rebuyConfig,
|
169
|
+
}, [rebuyConfig, PUBLIC_REBUY_API_KEY, PUBLIC_STORE_DOMAIN]);
|
181
170
|
const contextParameters = useMemo(
|
182
171
|
() => createContextParameters({
|
183
172
|
cacheKey: rebuyConfig?.shop?.cache_key,
|
@@ -192,17 +181,7 @@ var RebuyHydrogenContext = ({
|
|
192
181
|
queryObject,
|
193
182
|
windowUrl
|
194
183
|
}),
|
195
|
-
[
|
196
|
-
rebuyConfig,
|
197
|
-
windowUrl,
|
198
|
-
queryObject,
|
199
|
-
cartAttributes,
|
200
|
-
cartCost,
|
201
|
-
cartId,
|
202
|
-
cartLines,
|
203
|
-
cartQuantity,
|
204
|
-
cartNote
|
205
|
-
]
|
184
|
+
[rebuyConfig, windowUrl, queryObject, cartAttributes, cartCost, cartId, cartLines, cartQuantity, cartNote]
|
206
185
|
);
|
207
186
|
const contextParametersJSON = JSON.stringify(contextParameters);
|
208
187
|
const contextValue = useMemo(
|
@@ -211,10 +190,7 @@ var RebuyHydrogenContext = ({
|
|
211
190
|
);
|
212
191
|
return /* @__PURE__ */ jsx(RebuyContext.Provider, { value: contextValue, children });
|
213
192
|
};
|
214
|
-
var RebuyHydrogenContextProvider = ({
|
215
|
-
cart,
|
216
|
-
children
|
217
|
-
}) => {
|
193
|
+
var RebuyHydrogenContextProvider = ({ cart, children }) => {
|
218
194
|
return /* @__PURE__ */ jsx(Await, { resolve: cart, children: (resolvedCart) => {
|
219
195
|
const cart2 = resolvedCart;
|
220
196
|
return /* @__PURE__ */ jsx(
|
@@ -235,11 +211,7 @@ var RebuyHydrogenContextProvider = ({
|
|
235
211
|
// src/providers/RebuyHydrogenReactContextProvider.tsx
|
236
212
|
import * as Utilities3 from "@rebuy/rebuy/utilities";
|
237
213
|
import { useLocation as useLocation2 } from "@remix-run/react";
|
238
|
-
import {
|
239
|
-
CartProvider,
|
240
|
-
ShopifyProvider,
|
241
|
-
useCart
|
242
|
-
} from "@shopify/hydrogen-react";
|
214
|
+
import { CartProvider, ShopifyProvider, useCart } from "@shopify/hydrogen-react";
|
243
215
|
import { useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
|
244
216
|
|
245
217
|
// src/queries/cart.queries.ts
|
@@ -705,24 +677,35 @@ var CART_FRAGMENT = `#graphql
|
|
705
677
|
|
706
678
|
// src/providers/RebuyHydrogenReactContextProvider.tsx
|
707
679
|
import { jsx as jsx2 } from "react/jsx-runtime";
|
680
|
+
var PUBLIC_PRIMARY_DOMAIN2 = import.meta.env.PUBLIC_PRIMARY_DOMAIN;
|
681
|
+
var PUBLIC_REBUY_API_KEY2 = import.meta.env.PUBLIC_REBUY_API_KEY;
|
682
|
+
var PUBLIC_STORE_DOMAIN2 = import.meta.env.PUBLIC_STORE_DOMAIN;
|
683
|
+
var PUBLIC_STOREFRONT_ID = import.meta.env.PUBLIC_STOREFRONT_ID;
|
684
|
+
var PUBLIC_STOREFRONT_API_TOKEN = import.meta.env.PUBLIC_STOREFRONT_API_TOKEN || "";
|
708
685
|
var RebuyHydrogenReactContext = ({ children }) => {
|
709
|
-
|
710
|
-
|
711
|
-
|
686
|
+
if (!PUBLIC_PRIMARY_DOMAIN2) {
|
687
|
+
throw new Error("Missing required environment variable: PUBLIC_PRIMARY_DOMAIN");
|
688
|
+
}
|
689
|
+
if (!PUBLIC_REBUY_API_KEY2) {
|
690
|
+
throw new Error("Missing required environment variable: PUBLIC_REBUY_API_KEY");
|
691
|
+
}
|
692
|
+
if (!PUBLIC_STORE_DOMAIN2) {
|
693
|
+
throw new Error("Missing required environment variable: PUBLIC_STORE_DOMAIN");
|
694
|
+
}
|
712
695
|
const [rebuyConfig, setRebuyConfig] = useState2(null);
|
713
696
|
const location = useLocation2();
|
714
697
|
const queryObject = Utilities3.queryStringToObject(location.search);
|
715
|
-
const windowUrl = `${
|
698
|
+
const windowUrl = `${PUBLIC_PRIMARY_DOMAIN2}${location.pathname}${location.search}`;
|
716
699
|
const cart = useCart();
|
717
700
|
useEffect2(() => {
|
718
701
|
const initConfig = async () => {
|
719
|
-
const config = await getRebuyConfig(
|
702
|
+
const config = await getRebuyConfig(PUBLIC_REBUY_API_KEY2, PUBLIC_STORE_DOMAIN2);
|
720
703
|
setRebuyConfig(config);
|
721
704
|
};
|
722
705
|
if (!rebuyConfig?.shop) {
|
723
706
|
initConfig();
|
724
707
|
}
|
725
|
-
}, [rebuyConfig,
|
708
|
+
}, [rebuyConfig, PUBLIC_REBUY_API_KEY2, PUBLIC_STORE_DOMAIN2]);
|
726
709
|
const contextParameters = useMemo2(
|
727
710
|
() => createContextParameters({
|
728
711
|
cacheKey: rebuyConfig?.shop?.cache_key,
|
@@ -771,9 +754,6 @@ var RebuyHydrogenReactContextProvider = ({
|
|
771
754
|
onNoteUpdateComplete,
|
772
755
|
storefrontApiVersion = "2025-01"
|
773
756
|
}) => {
|
774
|
-
const publicStoreDomain = import.meta.env.PUBLIC_STORE_DOMAIN;
|
775
|
-
const storefrontId = import.meta.env.PUBLIC_STOREFRONT_ID;
|
776
|
-
const storefrontToken = import.meta.env.PUBLIC_STOREFRONT_API_TOKEN || "";
|
777
757
|
const adapted = {
|
778
758
|
onAttributesUpdate: onAttributesUpdate ? () => onAttributesUpdate() : void 0,
|
779
759
|
onAttributesUpdateComplete: onAttributesUpdateComplete ? () => onAttributesUpdateComplete() : void 0,
|
@@ -797,10 +777,10 @@ var RebuyHydrogenReactContextProvider = ({
|
|
797
777
|
{
|
798
778
|
countryIsoCode,
|
799
779
|
languageIsoCode,
|
800
|
-
storeDomain:
|
780
|
+
storeDomain: PUBLIC_STORE_DOMAIN2,
|
801
781
|
storefrontApiVersion,
|
802
|
-
storefrontId,
|
803
|
-
storefrontToken,
|
782
|
+
storefrontId: PUBLIC_STOREFRONT_ID,
|
783
|
+
storefrontToken: PUBLIC_STOREFRONT_API_TOKEN,
|
804
784
|
children: /* @__PURE__ */ jsx2(
|
805
785
|
CartProvider,
|
806
786
|
{
|
@@ -837,27 +817,9 @@ var RebuyHydrogenReactContextProvider = ({
|
|
837
817
|
import { RebuyClient as RebuyClient2 } from "@rebuy/rebuy";
|
838
818
|
import * as Utilities4 from "@rebuy/rebuy/utilities";
|
839
819
|
import { flattenConnection } from "@shopify/hydrogen";
|
840
|
-
import React, {
|
841
|
-
|
842
|
-
|
843
|
-
useMemo as useMemo3,
|
844
|
-
useState as useState3
|
845
|
-
} from "react";
|
846
|
-
var RebuyWidgetContainerBase = ({
|
847
|
-
children,
|
848
|
-
...props
|
849
|
-
}) => {
|
850
|
-
const {
|
851
|
-
collection,
|
852
|
-
collectionId,
|
853
|
-
dataSource,
|
854
|
-
limit,
|
855
|
-
options,
|
856
|
-
product,
|
857
|
-
productId,
|
858
|
-
variant,
|
859
|
-
variantId
|
860
|
-
} = props;
|
820
|
+
import React, { useContext, useEffect as useEffect3, useMemo as useMemo3, useState as useState3 } from "react";
|
821
|
+
var RebuyWidgetContainerBase = ({ children, ...props }) => {
|
822
|
+
const { collection, collectionId, dataSource, limit, options, product, productId, variant, variantId } = props;
|
861
823
|
const contextParameters = useContext(RebuyContext);
|
862
824
|
const [Rebuy, setRebuy] = useState3(null);
|
863
825
|
const [initialized, setInitialized] = useState3(false);
|
@@ -895,48 +857,27 @@ var RebuyWidgetContainerBase = ({
|
|
895
857
|
// Keeping this object generic to allow for custom endpoints
|
896
858
|
};
|
897
859
|
if (shopifyProductId) {
|
898
|
-
request2.params.shopify_product_ids = Utilities4.getIdFromGraphUrl(
|
899
|
-
shopifyProductId,
|
900
|
-
"Product"
|
901
|
-
);
|
860
|
+
request2.params.shopify_product_ids = Utilities4.getIdFromGraphUrl(shopifyProductId, "Product");
|
902
861
|
}
|
903
862
|
if (shopifyProductId) {
|
904
|
-
request2.params.shopify_product_ids = Utilities4.getIdFromGraphUrl(
|
905
|
-
shopifyProductId,
|
906
|
-
"Product"
|
907
|
-
);
|
863
|
+
request2.params.shopify_product_ids = Utilities4.getIdFromGraphUrl(shopifyProductId, "Product");
|
908
864
|
}
|
909
865
|
if (shopifyVariantId) {
|
910
|
-
request2.params.shopify_variant_ids = Utilities4.getIdFromGraphUrl(
|
911
|
-
shopifyVariantId,
|
912
|
-
"ProductVariant"
|
913
|
-
);
|
866
|
+
request2.params.shopify_variant_ids = Utilities4.getIdFromGraphUrl(shopifyVariantId, "ProductVariant");
|
914
867
|
}
|
915
868
|
if (shopifyCollectionId) {
|
916
|
-
request2.params.shopify_collection_ids = Utilities4.getIdFromGraphUrl(
|
917
|
-
shopifyCollectionId,
|
918
|
-
"Collection"
|
919
|
-
);
|
869
|
+
request2.params.shopify_collection_ids = Utilities4.getIdFromGraphUrl(shopifyCollectionId, "Collection");
|
920
870
|
}
|
921
871
|
if (limit) {
|
922
872
|
request2.params.limit = limit;
|
923
873
|
}
|
924
874
|
return request2;
|
925
|
-
}, [
|
926
|
-
dataSource,
|
927
|
-
shopifyProductId,
|
928
|
-
shopifyVariantId,
|
929
|
-
shopifyCollectionId,
|
930
|
-
limit
|
931
|
-
]);
|
875
|
+
}, [dataSource, shopifyProductId, shopifyVariantId, shopifyCollectionId, limit]);
|
932
876
|
useEffect3(() => {
|
933
877
|
let isMounted = true;
|
934
878
|
if (!Rebuy || !initialized) return;
|
935
879
|
const fetchData = async () => {
|
936
|
-
const { data, metadata: metadata2 } = await Rebuy.getStorefrontData(
|
937
|
-
request.endpoint,
|
938
|
-
request.params
|
939
|
-
);
|
880
|
+
const { data, metadata: metadata2 } = await Rebuy.getStorefrontData(request.endpoint, request.params);
|
940
881
|
if (isMounted) {
|
941
882
|
setProducts(
|
942
883
|
Array.isArray(data) ? data.map((product2) => ({
|
@@ -969,24 +910,11 @@ var RebuyWidgetContainerBase = ({
|
|
969
910
|
};
|
970
911
|
var RebuyWidgetContainer = RebuyWidgetContainerBase;
|
971
912
|
|
972
|
-
// src/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.module.css
|
973
|
-
var RebuyCompleteTheLook_default = {
|
974
|
-
container: "RebuyCompleteTheLook_container",
|
975
|
-
productGrid: "RebuyCompleteTheLook_productGrid",
|
976
|
-
productItem: "RebuyCompleteTheLook_productItem"
|
977
|
-
};
|
978
|
-
|
979
913
|
// src/components/ProductCard/ProductCard.tsx
|
980
914
|
import { Link } from "@remix-run/react";
|
981
915
|
import { Image } from "@shopify/hydrogen";
|
982
916
|
import { useState as useState4 } from "react";
|
983
917
|
|
984
|
-
// src/components/ProductCard/ProductCard.module.css
|
985
|
-
var ProductCard_default = {
|
986
|
-
container: "ProductCard_container",
|
987
|
-
productInfo: "ProductCard_productInfo"
|
988
|
-
};
|
989
|
-
|
990
918
|
// src/components/AddToCartBtn/HydrogenAddToCartBtn.tsx
|
991
919
|
import { CartForm, Money } from "@shopify/hydrogen";
|
992
920
|
|
@@ -1047,22 +975,13 @@ var HydrogenReactAddToCartBtn = ({
|
|
1047
975
|
linesAdd(linesToAdd);
|
1048
976
|
addToCartCallback?.();
|
1049
977
|
};
|
1050
|
-
return /* @__PURE__ */ jsxs2(
|
1051
|
-
|
1052
|
-
{
|
1053
|
-
|
1054
|
-
|
1055
|
-
|
1056
|
-
|
1057
|
-
children: [
|
1058
|
-
addToCartBtnText,
|
1059
|
-
moneyData && /* @__PURE__ */ jsxs2(Fragment2, { children: [
|
1060
|
-
/* @__PURE__ */ jsx4("span", { children: " | " }),
|
1061
|
-
/* @__PURE__ */ jsx4(Money2, { data: moneyData, withoutTrailingZeros: true })
|
1062
|
-
] })
|
1063
|
-
]
|
1064
|
-
}
|
1065
|
-
);
|
978
|
+
return /* @__PURE__ */ jsxs2("button", { className: AddToCartBtn_default.button, disabled, onClick: handleAddToCart, type: "button", children: [
|
979
|
+
addToCartBtnText,
|
980
|
+
moneyData && /* @__PURE__ */ jsxs2(Fragment2, { children: [
|
981
|
+
/* @__PURE__ */ jsx4("span", { children: " | " }),
|
982
|
+
/* @__PURE__ */ jsx4(Money2, { data: moneyData, withoutTrailingZeros: true })
|
983
|
+
] })
|
984
|
+
] });
|
1066
985
|
};
|
1067
986
|
|
1068
987
|
// src/components/AddToCartBtn/AddToCartBtn.tsx
|
@@ -1119,24 +1038,12 @@ var ProductPrice_default = {
|
|
1119
1038
|
|
1120
1039
|
// src/components/ProductPrice/ProductPrice.tsx
|
1121
1040
|
import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
|
1122
|
-
var RebuyProductPrice = ({
|
1123
|
-
selectedVariant
|
1124
|
-
}) => {
|
1041
|
+
var RebuyProductPrice = ({ selectedVariant }) => {
|
1125
1042
|
if (!selectedVariant) return null;
|
1126
1043
|
const { compareAtPriceV2: compareAtPrice, priceV2: price } = selectedVariant;
|
1127
1044
|
const isDiscounted = (price2, compareAtPrice2) => Number(compareAtPrice2?.amount) > Number(price2?.amount);
|
1128
|
-
const CompareAtPrice = ({
|
1129
|
-
data: compareAtPrice2
|
1130
|
-
}) => {
|
1131
|
-
return compareAtPrice2 && /* @__PURE__ */ jsx6(
|
1132
|
-
Money3,
|
1133
|
-
{
|
1134
|
-
as: "span",
|
1135
|
-
className: ProductPrice_default.compareAtPrice,
|
1136
|
-
data: compareAtPrice2,
|
1137
|
-
withoutTrailingZeros: true
|
1138
|
-
}
|
1139
|
-
);
|
1045
|
+
const CompareAtPrice = ({ data: compareAtPrice2 }) => {
|
1046
|
+
return compareAtPrice2 && /* @__PURE__ */ jsx6(Money3, { as: "span", className: ProductPrice_default.compareAtPrice, data: compareAtPrice2, withoutTrailingZeros: true });
|
1140
1047
|
};
|
1141
1048
|
return price && /* @__PURE__ */ jsxs3("div", { className: ProductPrice_default.priceContainer, children: [
|
1142
1049
|
/* @__PURE__ */ jsx6(Money3, { data: price, withoutTrailingZeros: true }),
|
@@ -1171,17 +1078,12 @@ var VariantSelect_default = {
|
|
1171
1078
|
|
1172
1079
|
// src/components/VariantSelect/VariantSelect.tsx
|
1173
1080
|
import { jsx as jsx8 } from "react/jsx-runtime";
|
1174
|
-
var VariantSelect = ({
|
1175
|
-
handleSelectedVariant,
|
1176
|
-
product
|
1177
|
-
}) => {
|
1081
|
+
var VariantSelect = ({ handleSelectedVariant, product }) => {
|
1178
1082
|
const getOptionsLabel = (product2) => {
|
1179
1083
|
const options = product2.variants.nodes[0].selectedOptions;
|
1180
1084
|
const optionsFromKeys = options ? Object.keys(options[0]) : [];
|
1181
1085
|
const optionsFromValues = options ? options.map((option) => option.name) : [];
|
1182
|
-
const useValues = optionsFromKeys.every(
|
1183
|
-
(key) => ["name", "value"].includes(key)
|
1184
|
-
);
|
1086
|
+
const useValues = optionsFromKeys.every((key) => ["name", "value"].includes(key));
|
1185
1087
|
return (useValues ? optionsFromValues : optionsFromKeys).join(" / ");
|
1186
1088
|
};
|
1187
1089
|
return product?.variants.nodes.length > 1 && /* @__PURE__ */ jsx8("div", { children: /* @__PURE__ */ jsx8(
|
@@ -1195,6 +1097,12 @@ var VariantSelect = ({
|
|
1195
1097
|
) });
|
1196
1098
|
};
|
1197
1099
|
|
1100
|
+
// src/components/ProductCard/ProductCard.module.css
|
1101
|
+
var ProductCard_default = {
|
1102
|
+
container: "ProductCard_container",
|
1103
|
+
productInfo: "ProductCard_productInfo"
|
1104
|
+
};
|
1105
|
+
|
1198
1106
|
// src/components/ProductCard/ProductCard.tsx
|
1199
1107
|
import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
|
1200
1108
|
var ProductCard = ({
|
@@ -1204,14 +1112,10 @@ var ProductCard = ({
|
|
1204
1112
|
product,
|
1205
1113
|
productCardTitleLevel
|
1206
1114
|
}) => {
|
1207
|
-
const [selectedVariant, setSelectedVariant] = useState4(
|
1208
|
-
product.variants.nodes[0]
|
1209
|
-
);
|
1115
|
+
const [selectedVariant, setSelectedVariant] = useState4(product.variants.nodes[0]);
|
1210
1116
|
const { image } = selectedVariant;
|
1211
1117
|
const handleSelectedVariant = (product2, variant_id) => {
|
1212
|
-
const updatedVariant = product2.variants.nodes.find(
|
1213
|
-
(variant) => variant.id === variant_id
|
1214
|
-
);
|
1118
|
+
const updatedVariant = product2.variants.nodes.find((variant) => variant.id === variant_id);
|
1215
1119
|
if (updatedVariant) {
|
1216
1120
|
setSelectedVariant(updatedVariant);
|
1217
1121
|
}
|
@@ -1227,21 +1131,9 @@ var ProductCard = ({
|
|
1227
1131
|
}
|
1228
1132
|
) }),
|
1229
1133
|
/* @__PURE__ */ jsxs4("div", { className: ProductCard_default.productInfo, children: [
|
1230
|
-
/* @__PURE__ */ jsx9(Link, { to: `/products/${product.handle}`, children: /* @__PURE__ */ jsx9(
|
1231
|
-
Title,
|
1232
|
-
{
|
1233
|
-
level: productCardTitleLevel,
|
1234
|
-
text: product.title
|
1235
|
-
}
|
1236
|
-
) }),
|
1134
|
+
/* @__PURE__ */ jsx9(Link, { to: `/products/${product.handle}`, children: /* @__PURE__ */ jsx9(Title, { level: productCardTitleLevel, text: product.title }) }),
|
1237
1135
|
/* @__PURE__ */ jsx9(RebuyProductPrice, { selectedVariant }),
|
1238
|
-
/* @__PURE__ */ jsx9(
|
1239
|
-
VariantSelect,
|
1240
|
-
{
|
1241
|
-
handleSelectedVariant,
|
1242
|
-
product
|
1243
|
-
}
|
1244
|
-
)
|
1136
|
+
/* @__PURE__ */ jsx9(VariantSelect, { handleSelectedVariant, product })
|
1245
1137
|
] })
|
1246
1138
|
] }),
|
1247
1139
|
/* @__PURE__ */ jsx9(
|
@@ -1294,6 +1186,13 @@ var getTitleLevel = (level, decreaseLevel = false) => {
|
|
1294
1186
|
}
|
1295
1187
|
};
|
1296
1188
|
|
1189
|
+
// src/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.module.css
|
1190
|
+
var RebuyCompleteTheLook_default = {
|
1191
|
+
container: "RebuyCompleteTheLook_container",
|
1192
|
+
productGrid: "RebuyCompleteTheLook_productGrid",
|
1193
|
+
productItem: "RebuyCompleteTheLook_productItem"
|
1194
|
+
};
|
1195
|
+
|
1297
1196
|
// src/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.tsx
|
1298
1197
|
import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
|
1299
1198
|
var RebuyCompleteTheLook = (props) => {
|
@@ -1310,14 +1209,7 @@ var RebuyCompleteTheLook = (props) => {
|
|
1310
1209
|
return null;
|
1311
1210
|
}
|
1312
1211
|
return /* @__PURE__ */ jsxs5("section", { className: RebuyCompleteTheLook_default.container, children: [
|
1313
|
-
/* @__PURE__ */ jsx10(
|
1314
|
-
Title,
|
1315
|
-
{
|
1316
|
-
level: getTitleLevel(customTitleLevel),
|
1317
|
-
style: customTitleStyle,
|
1318
|
-
text: customTitle
|
1319
|
-
}
|
1320
|
-
),
|
1212
|
+
/* @__PURE__ */ jsx10(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
|
1321
1213
|
/* @__PURE__ */ jsx10("ul", { className: RebuyCompleteTheLook_default.productGrid, children: products.map((product) => /* @__PURE__ */ jsx10("li", { className: RebuyCompleteTheLook_default.productItem, children: /* @__PURE__ */ jsx10(
|
1322
1214
|
ProductCard,
|
1323
1215
|
{
|
@@ -1325,10 +1217,7 @@ var RebuyCompleteTheLook = (props) => {
|
|
1325
1217
|
addToCartCallback,
|
1326
1218
|
isHydrogenReact: props.isHydrogenReact,
|
1327
1219
|
product,
|
1328
|
-
productCardTitleLevel: getTitleLevel(
|
1329
|
-
customTitleLevel,
|
1330
|
-
true
|
1331
|
-
)
|
1220
|
+
productCardTitleLevel: getTitleLevel(customTitleLevel, true)
|
1332
1221
|
}
|
1333
1222
|
) }, product.id)) })
|
1334
1223
|
] });
|
@@ -1337,84 +1226,6 @@ var RebuyCompleteTheLook = (props) => {
|
|
1337
1226
|
// src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.tsx
|
1338
1227
|
import { useCallback, useEffect as useEffect4, useState as useState5 } from "react";
|
1339
1228
|
|
1340
|
-
// src/widgets/RebuyDynamicBundleProducts/BundlePrice.tsx
|
1341
|
-
import { Money as Money4 } from "@shopify/hydrogen";
|
1342
|
-
|
1343
|
-
// src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.module.css
|
1344
|
-
var RebuyDynamicBundleProducts_default = {
|
1345
|
-
container: "RebuyDynamicBundleProducts_container",
|
1346
|
-
addCartBtnContainer: "RebuyDynamicBundleProducts_addCartBtnContainer",
|
1347
|
-
bundleContainer: "RebuyDynamicBundleProducts_bundleContainer",
|
1348
|
-
select: "RebuyDynamicBundleProducts_select",
|
1349
|
-
bundleItemRowContainer: "RebuyDynamicBundleProducts_bundleItemRowContainer",
|
1350
|
-
unselected: "RebuyDynamicBundleProducts_unselected",
|
1351
|
-
bundleItemRow: "RebuyDynamicBundleProducts_bundleItemRow",
|
1352
|
-
bundleItemInput: "RebuyDynamicBundleProducts_bundleItemInput",
|
1353
|
-
bundleItemLabel: "RebuyDynamicBundleProducts_bundleItemLabel",
|
1354
|
-
bundleImages: "RebuyDynamicBundleProducts_bundleImages",
|
1355
|
-
bundleImage: "RebuyDynamicBundleProducts_bundleImage",
|
1356
|
-
fadeIn: "RebuyDynamicBundleProducts_fadeIn",
|
1357
|
-
bundleImageDelimiter: "RebuyDynamicBundleProducts_bundleImageDelimiter",
|
1358
|
-
compareAtPrice: "RebuyDynamicBundleProducts_compareAtPrice"
|
1359
|
-
};
|
1360
|
-
|
1361
|
-
// src/widgets/RebuyDynamicBundleProducts/BundlePrice.tsx
|
1362
|
-
import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
|
1363
|
-
var BundlePrice = ({ products }) => {
|
1364
|
-
const isDisabled = products.filter((product) => product.selected).length < 1;
|
1365
|
-
const totalBundlePrice = () => {
|
1366
|
-
let total = 0;
|
1367
|
-
let currencyCode = "USD";
|
1368
|
-
for (const product of products) {
|
1369
|
-
if (product.selected && product.selectedVariant) {
|
1370
|
-
const { priceV2: price2 } = product.selectedVariant;
|
1371
|
-
total += Number(price2?.amount);
|
1372
|
-
currencyCode = price2?.currencyCode || "USD";
|
1373
|
-
}
|
1374
|
-
}
|
1375
|
-
return {
|
1376
|
-
amount: String(total),
|
1377
|
-
currencyCode
|
1378
|
-
};
|
1379
|
-
};
|
1380
|
-
const totalBundleCompareAtPrice = () => {
|
1381
|
-
let compareAtTotal = 0;
|
1382
|
-
let currencyCode = "USD";
|
1383
|
-
for (const product of products) {
|
1384
|
-
if (product.selected && product.selectedVariant) {
|
1385
|
-
const { compareAtPriceV2: compareAtPrice2, priceV2: price2 } = product.selectedVariant;
|
1386
|
-
currencyCode = price2?.currencyCode || "USD";
|
1387
|
-
compareAtTotal += Number((compareAtPrice2 || price2)?.amount);
|
1388
|
-
}
|
1389
|
-
}
|
1390
|
-
return {
|
1391
|
-
amount: String(compareAtTotal),
|
1392
|
-
currencyCode
|
1393
|
-
};
|
1394
|
-
};
|
1395
|
-
const isDiscounted = (price2, compareAtPrice2) => Number(compareAtPrice2?.amount) > Number(price2?.amount);
|
1396
|
-
const price = totalBundlePrice();
|
1397
|
-
const compareAtPrice = totalBundleCompareAtPrice();
|
1398
|
-
const CompareAtPrice = ({
|
1399
|
-
data: compareAtPrice2
|
1400
|
-
}) => {
|
1401
|
-
return compareAtPrice2 && /* @__PURE__ */ jsx11(
|
1402
|
-
Money4,
|
1403
|
-
{
|
1404
|
-
as: "span",
|
1405
|
-
className: RebuyDynamicBundleProducts_default.compareAtPrice,
|
1406
|
-
data: compareAtPrice2,
|
1407
|
-
withoutTrailingZeros: true
|
1408
|
-
}
|
1409
|
-
);
|
1410
|
-
};
|
1411
|
-
return products.length > 0 && /* @__PURE__ */ jsx11("div", { className: "flex items-center flex-col", children: !isDisabled && /* @__PURE__ */ jsxs6("p", { className: "flex items-center gap-2 mb-2", children: [
|
1412
|
-
/* @__PURE__ */ jsx11("span", { children: "Total Price:" }),
|
1413
|
-
/* @__PURE__ */ jsx11(Money4, { as: "span", data: price, withoutTrailingZeros: true }),
|
1414
|
-
isDiscounted(price, compareAtPrice) && /* @__PURE__ */ jsx11(CompareAtPrice, { data: compareAtPrice })
|
1415
|
-
] }) });
|
1416
|
-
};
|
1417
|
-
|
1418
1229
|
// src/utils/convertToRebuyProduct.tsx
|
1419
1230
|
var convertToRebuyProduct = (isHydrogenReact, product) => {
|
1420
1231
|
const mainProductVariants = isHydrogenReact ? product?.variants?.nodes?.map((variant) => {
|
@@ -1474,9 +1285,7 @@ var convertToRebuyProduct = (isHydrogenReact, product) => {
|
|
1474
1285
|
},
|
1475
1286
|
handle: product?.handle || "",
|
1476
1287
|
id: product?.id || "",
|
1477
|
-
images: [
|
1478
|
-
{ altText: "", height: 100, id: "", url: "", width: 100 }
|
1479
|
-
],
|
1288
|
+
images: [{ altText: "", height: 100, id: "", url: "", width: 100 }],
|
1480
1289
|
media: [],
|
1481
1290
|
metafields: [],
|
1482
1291
|
options: [],
|
@@ -1485,12 +1294,9 @@ var convertToRebuyProduct = (isHydrogenReact, product) => {
|
|
1485
1294
|
minVariantPrice: { amount: "0", currencyCode: "USD" }
|
1486
1295
|
},
|
1487
1296
|
selected: true,
|
1488
|
-
selectedOptions: product?.selectedVariant?.selectedOptions?.reduce(
|
1489
|
-
|
1490
|
-
|
1491
|
-
},
|
1492
|
-
{}
|
1493
|
-
) || {},
|
1297
|
+
selectedOptions: product?.selectedVariant?.selectedOptions?.reduce((acc, option) => {
|
1298
|
+
return { ...acc, [option.name]: option.value };
|
1299
|
+
}, {}) || {},
|
1494
1300
|
selectedSellingPlan: {},
|
1495
1301
|
selectedSellingPlanAllocation: {},
|
1496
1302
|
selectedVariant: {
|
@@ -1567,12 +1373,9 @@ var convertToRebuyProduct = (isHydrogenReact, product) => {
|
|
1567
1373
|
minVariantPrice: { amount: "0", currencyCode: "USD" }
|
1568
1374
|
},
|
1569
1375
|
selected: true,
|
1570
|
-
selectedOptions: product?.selectedOrFirstAvailableVariant?.selectedOptions?.reduce(
|
1571
|
-
|
1572
|
-
|
1573
|
-
},
|
1574
|
-
{}
|
1575
|
-
) || {},
|
1376
|
+
selectedOptions: product?.selectedOrFirstAvailableVariant?.selectedOptions?.reduce((acc, option) => {
|
1377
|
+
return { ...acc, [option.name]: option.value };
|
1378
|
+
}, {}) || {},
|
1576
1379
|
selectedSellingPlan: {},
|
1577
1380
|
selectedSellingPlanAllocation: {},
|
1578
1381
|
selectedVariant: {
|
@@ -1650,12 +1453,32 @@ var convertToRebuyProduct = (isHydrogenReact, product) => {
|
|
1650
1453
|
import { Link as Link2 } from "@remix-run/react";
|
1651
1454
|
import { Image as Image2 } from "@shopify/hydrogen";
|
1652
1455
|
import { Fragment as Fragment3 } from "react";
|
1653
|
-
|
1456
|
+
|
1457
|
+
// src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.module.css
|
1458
|
+
var RebuyDynamicBundleProducts_default = {
|
1459
|
+
container: "RebuyDynamicBundleProducts_container",
|
1460
|
+
addCartBtnContainer: "RebuyDynamicBundleProducts_addCartBtnContainer",
|
1461
|
+
bundleContainer: "RebuyDynamicBundleProducts_bundleContainer",
|
1462
|
+
select: "RebuyDynamicBundleProducts_select",
|
1463
|
+
bundleItemRowContainer: "RebuyDynamicBundleProducts_bundleItemRowContainer",
|
1464
|
+
unselected: "RebuyDynamicBundleProducts_unselected",
|
1465
|
+
bundleItemRow: "RebuyDynamicBundleProducts_bundleItemRow",
|
1466
|
+
bundleItemInput: "RebuyDynamicBundleProducts_bundleItemInput",
|
1467
|
+
bundleItemLabel: "RebuyDynamicBundleProducts_bundleItemLabel",
|
1468
|
+
bundleImages: "RebuyDynamicBundleProducts_bundleImages",
|
1469
|
+
bundleImage: "RebuyDynamicBundleProducts_bundleImage",
|
1470
|
+
"fade-in": "RebuyDynamicBundleProducts_fade-in",
|
1471
|
+
bundleImageDelimiter: "RebuyDynamicBundleProducts_bundleImageDelimiter",
|
1472
|
+
compareAtPrice: "RebuyDynamicBundleProducts_compareAtPrice"
|
1473
|
+
};
|
1474
|
+
|
1475
|
+
// src/widgets/RebuyDynamicBundleProducts/BundleImages.tsx
|
1476
|
+
import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
|
1654
1477
|
var BundleImages = ({ products }) => {
|
1655
1478
|
const selected = products.filter((product) => product.selected);
|
1656
|
-
return /* @__PURE__ */
|
1479
|
+
return /* @__PURE__ */ jsx11("ul", { className: RebuyDynamicBundleProducts_default.bundleImages, children: products.map((product, index) => {
|
1657
1480
|
const image = product.selectedVariant?.image;
|
1658
|
-
const productImage = image ? /* @__PURE__ */
|
1481
|
+
const productImage = image ? /* @__PURE__ */ jsx11(
|
1659
1482
|
Image2,
|
1660
1483
|
{
|
1661
1484
|
alt: image.altText || `Picture of ${product.title}`,
|
@@ -1670,66 +1493,53 @@ var BundleImages = ({ products }) => {
|
|
1670
1493
|
product.title
|
1671
1494
|
);
|
1672
1495
|
const showDelimiter = selected[0]?.id !== product.id;
|
1673
|
-
return /* @__PURE__ */
|
1674
|
-
showDelimiter && /* @__PURE__ */
|
1675
|
-
/* @__PURE__ */
|
1496
|
+
return /* @__PURE__ */ jsx11(Fragment3, { children: product.selected && /* @__PURE__ */ jsxs6(Fragment4, { children: [
|
1497
|
+
showDelimiter && /* @__PURE__ */ jsx11("li", { className: RebuyDynamicBundleProducts_default.bundleImageDelimiter, children: /* @__PURE__ */ jsx11("span", { children: "+" }) }),
|
1498
|
+
/* @__PURE__ */ jsx11("li", { className: "flex items-center", children: product.default ? (
|
1676
1499
|
// Already on product page
|
1677
1500
|
productImage
|
1678
1501
|
) : (
|
1679
1502
|
// Link to product
|
1680
|
-
/* @__PURE__ */
|
1681
|
-
Link2,
|
1682
|
-
{
|
1683
|
-
title: product.title,
|
1684
|
-
to: `/products/${product.handle}`,
|
1685
|
-
children: productImage
|
1686
|
-
}
|
1687
|
-
)
|
1503
|
+
/* @__PURE__ */ jsx11(Link2, { title: product.title, to: `/products/${product.handle}`, children: productImage })
|
1688
1504
|
) })
|
1689
1505
|
] }) }, product.id + "-BundleImages-" + index);
|
1690
1506
|
}) });
|
1691
1507
|
};
|
1692
1508
|
|
1693
1509
|
// src/widgets/RebuyDynamicBundleProducts/Select.tsx
|
1694
|
-
import { jsx as
|
1510
|
+
import { jsx as jsx12 } from "react/jsx-runtime";
|
1695
1511
|
var Select = ({ onSelectVariant, product }) => {
|
1696
1512
|
const getOptionsLabel = (product2) => {
|
1697
1513
|
const options = product2.variants.nodes[0].selectedOptions;
|
1698
1514
|
const optionsFromKeys = options ? Object.keys(options[0]) : [];
|
1699
1515
|
const optionsFromValues = options ? options.map((option) => option.name) : [];
|
1700
|
-
const useValues = optionsFromKeys.every(
|
1701
|
-
(key) => ["name", "value"].includes(key)
|
1702
|
-
);
|
1516
|
+
const useValues = optionsFromKeys.every((key) => ["name", "value"].includes(key));
|
1703
1517
|
return (useValues ? optionsFromValues : optionsFromKeys).join(" / ");
|
1704
1518
|
};
|
1705
|
-
return product && /* @__PURE__ */
|
1519
|
+
return product && /* @__PURE__ */ jsx12(
|
1706
1520
|
"select",
|
1707
1521
|
{
|
1708
1522
|
"aria-label": "select variant",
|
1709
1523
|
className: RebuyDynamicBundleProducts_default.select,
|
1710
1524
|
onChange: (e) => onSelectVariant(product, e.target.value),
|
1711
1525
|
value: product.selectedVariant.id,
|
1712
|
-
children: /* @__PURE__ */
|
1526
|
+
children: /* @__PURE__ */ jsx12("optgroup", { label: getOptionsLabel(product), children: product.variants.nodes.map(({ id, title }) => /* @__PURE__ */ jsx12("option", { value: id, children: title }, id + "-BundleVariant")) })
|
1713
1527
|
}
|
1714
1528
|
);
|
1715
1529
|
};
|
1716
1530
|
|
1717
1531
|
// src/widgets/RebuyDynamicBundleProducts/BundleSelection.tsx
|
1718
|
-
import { jsx as
|
1719
|
-
var BundleSelection = ({
|
1720
|
-
|
1721
|
-
onToggleBundleItem,
|
1722
|
-
products
|
1723
|
-
}) => {
|
1724
|
-
return /* @__PURE__ */ jsx14("ul", { children: products.map((product, index) => {
|
1532
|
+
import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
|
1533
|
+
var BundleSelection = ({ onSelectVariant, onToggleBundleItem, products }) => {
|
1534
|
+
return /* @__PURE__ */ jsx13("ul", { children: products.map((product, index) => {
|
1725
1535
|
const { availableForSale } = product.selectedVariant;
|
1726
1536
|
const isOutOfStock = !availableForSale;
|
1727
|
-
return /* @__PURE__ */
|
1537
|
+
return /* @__PURE__ */ jsx13(
|
1728
1538
|
"li",
|
1729
1539
|
{
|
1730
1540
|
className: `${RebuyDynamicBundleProducts_default.bundleItemRowContainer} ${!product.selected && RebuyDynamicBundleProducts_default.unselected}`,
|
1731
|
-
children: /* @__PURE__ */
|
1732
|
-
/* @__PURE__ */
|
1541
|
+
children: /* @__PURE__ */ jsxs7("div", { className: RebuyDynamicBundleProducts_default.bundleItemRow, children: [
|
1542
|
+
/* @__PURE__ */ jsx13(
|
1733
1543
|
"input",
|
1734
1544
|
{
|
1735
1545
|
checked: product.selected && availableForSale,
|
@@ -1741,32 +1551,14 @@ var BundleSelection = ({
|
|
1741
1551
|
value: product.id
|
1742
1552
|
}
|
1743
1553
|
),
|
1744
|
-
/* @__PURE__ */
|
1745
|
-
/* @__PURE__ */
|
1746
|
-
"
|
1747
|
-
{
|
1748
|
-
|
1749
|
-
|
1750
|
-
|
1751
|
-
|
1752
|
-
product.default && /* @__PURE__ */ jsx14("b", { children: "This item:" }),
|
1753
|
-
product.title,
|
1754
|
-
/* @__PURE__ */ jsx14(
|
1755
|
-
RebuyProductPrice,
|
1756
|
-
{
|
1757
|
-
selectedVariant: product.selectedVariant
|
1758
|
-
}
|
1759
|
-
)
|
1760
|
-
]
|
1761
|
-
}
|
1762
|
-
),
|
1763
|
-
product.variants.nodes.length > 1 && /* @__PURE__ */ jsx14(
|
1764
|
-
Select,
|
1765
|
-
{
|
1766
|
-
onSelectVariant,
|
1767
|
-
product
|
1768
|
-
}
|
1769
|
-
)
|
1554
|
+
/* @__PURE__ */ jsxs7("div", { className: RebuyDynamicBundleProducts_default.bundleItemInput, children: [
|
1555
|
+
/* @__PURE__ */ jsxs7("label", { className: RebuyDynamicBundleProducts_default.bundleItemLabel, htmlFor: `${product.id}-toggle`, children: [
|
1556
|
+
isOutOfStock && /* @__PURE__ */ jsx13("b", { children: "SOLD OUT" }),
|
1557
|
+
product.default && /* @__PURE__ */ jsx13("b", { children: "This item:" }),
|
1558
|
+
product.title,
|
1559
|
+
/* @__PURE__ */ jsx13(RebuyProductPrice, { selectedVariant: product.selectedVariant })
|
1560
|
+
] }),
|
1561
|
+
product.variants.nodes.length > 1 && /* @__PURE__ */ jsx13(Select, { onSelectVariant, product })
|
1770
1562
|
] })
|
1771
1563
|
] })
|
1772
1564
|
},
|
@@ -1775,6 +1567,54 @@ var BundleSelection = ({
|
|
1775
1567
|
}) });
|
1776
1568
|
};
|
1777
1569
|
|
1570
|
+
// src/widgets/RebuyDynamicBundleProducts/BundlePrice.tsx
|
1571
|
+
import { Money as Money4 } from "@shopify/hydrogen";
|
1572
|
+
import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
|
1573
|
+
var BundlePrice = ({ products }) => {
|
1574
|
+
const isDisabled = products.filter((product) => product.selected).length < 1;
|
1575
|
+
const totalBundlePrice = () => {
|
1576
|
+
let total = 0;
|
1577
|
+
let currencyCode = "USD";
|
1578
|
+
for (const product of products) {
|
1579
|
+
if (product.selected && product.selectedVariant) {
|
1580
|
+
const { priceV2: price2 } = product.selectedVariant;
|
1581
|
+
total += Number(price2?.amount);
|
1582
|
+
currencyCode = price2?.currencyCode || "USD";
|
1583
|
+
}
|
1584
|
+
}
|
1585
|
+
return {
|
1586
|
+
amount: String(total),
|
1587
|
+
currencyCode
|
1588
|
+
};
|
1589
|
+
};
|
1590
|
+
const totalBundleCompareAtPrice = () => {
|
1591
|
+
let compareAtTotal = 0;
|
1592
|
+
let currencyCode = "USD";
|
1593
|
+
for (const product of products) {
|
1594
|
+
if (product.selected && product.selectedVariant) {
|
1595
|
+
const { compareAtPriceV2: compareAtPrice2, priceV2: price2 } = product.selectedVariant;
|
1596
|
+
currencyCode = price2?.currencyCode || "USD";
|
1597
|
+
compareAtTotal += Number((compareAtPrice2 || price2)?.amount);
|
1598
|
+
}
|
1599
|
+
}
|
1600
|
+
return {
|
1601
|
+
amount: String(compareAtTotal),
|
1602
|
+
currencyCode
|
1603
|
+
};
|
1604
|
+
};
|
1605
|
+
const isDiscounted = (price2, compareAtPrice2) => Number(compareAtPrice2?.amount) > Number(price2?.amount);
|
1606
|
+
const price = totalBundlePrice();
|
1607
|
+
const compareAtPrice = totalBundleCompareAtPrice();
|
1608
|
+
const CompareAtPrice = ({ data: compareAtPrice2 }) => {
|
1609
|
+
return compareAtPrice2 && /* @__PURE__ */ jsx14(Money4, { as: "span", className: RebuyDynamicBundleProducts_default.compareAtPrice, data: compareAtPrice2, withoutTrailingZeros: true });
|
1610
|
+
};
|
1611
|
+
return products.length > 0 && /* @__PURE__ */ jsx14("div", { className: "flex items-center flex-col", children: !isDisabled && /* @__PURE__ */ jsxs8("p", { className: "flex items-center gap-2 mb-2", children: [
|
1612
|
+
/* @__PURE__ */ jsx14("span", { children: "Total Price:" }),
|
1613
|
+
/* @__PURE__ */ jsx14(Money4, { as: "span", data: price, withoutTrailingZeros: true }),
|
1614
|
+
isDiscounted(price, compareAtPrice) && /* @__PURE__ */ jsx14(CompareAtPrice, { data: compareAtPrice })
|
1615
|
+
] }) });
|
1616
|
+
};
|
1617
|
+
|
1778
1618
|
// src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.tsx
|
1779
1619
|
import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
|
1780
1620
|
var RebuyDynamicBundleProducts = (props) => {
|
@@ -1790,10 +1630,7 @@ var RebuyDynamicBundleProducts = (props) => {
|
|
1790
1630
|
} = props;
|
1791
1631
|
const [bundleProducts, setBundleProducts] = useState5([]);
|
1792
1632
|
useEffect4(() => {
|
1793
|
-
const mainProduct = convertToRebuyProduct(
|
1794
|
-
isHydrogenReact || false,
|
1795
|
-
product
|
1796
|
-
);
|
1633
|
+
const mainProduct = convertToRebuyProduct(isHydrogenReact || false, product);
|
1797
1634
|
const formattedProducts = products.map((product2) => {
|
1798
1635
|
return {
|
1799
1636
|
...product2,
|
@@ -1812,9 +1649,7 @@ var RebuyDynamicBundleProducts = (props) => {
|
|
1812
1649
|
);
|
1813
1650
|
const onSelectVariant = useCallback(
|
1814
1651
|
(product2, variant_id) => {
|
1815
|
-
const variant = product2.variants.nodes.find(
|
1816
|
-
({ id }) => id === variant_id
|
1817
|
-
);
|
1652
|
+
const variant = product2.variants.nodes.find(({ id }) => id === variant_id);
|
1818
1653
|
if (variant) {
|
1819
1654
|
product2.selectedVariant = variant;
|
1820
1655
|
product2.selected = variant.availableForSale || false;
|
@@ -1828,14 +1663,7 @@ var RebuyDynamicBundleProducts = (props) => {
|
|
1828
1663
|
return null;
|
1829
1664
|
}
|
1830
1665
|
return /* @__PURE__ */ jsxs9("section", { className: RebuyDynamicBundleProducts_default.container, children: [
|
1831
|
-
/* @__PURE__ */ jsx15(
|
1832
|
-
Title,
|
1833
|
-
{
|
1834
|
-
level: getTitleLevel(customTitleLevel),
|
1835
|
-
style: customTitleStyle,
|
1836
|
-
text: customTitle
|
1837
|
-
}
|
1838
|
-
),
|
1666
|
+
/* @__PURE__ */ jsx15(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
|
1839
1667
|
/* @__PURE__ */ jsxs9("div", { className: RebuyDynamicBundleProducts_default.bundleContainer, children: [
|
1840
1668
|
/* @__PURE__ */ jsx15(BundleImages, { products: bundleProducts }),
|
1841
1669
|
/* @__PURE__ */ jsx15(BundlePrice, { products: bundleProducts }),
|
@@ -1922,20 +1750,8 @@ var RebuyProductAddOnCard = ({
|
|
1922
1750
|
/* @__PURE__ */ jsxs10("div", { className: RebuyProductAddOns_default.addOnCardTextContent, children: [
|
1923
1751
|
!availableForSale && /* @__PURE__ */ jsx16("p", { className: RebuyProductAddOns_default.addOnCardOutOfStock, children: outOfStockText }),
|
1924
1752
|
/* @__PURE__ */ jsx16(Title, { level: titleLevel, text: product.title }),
|
1925
|
-
/* @__PURE__ */ jsx16(
|
1926
|
-
|
1927
|
-
{
|
1928
|
-
selectedVariant: product.selectedVariant
|
1929
|
-
}
|
1930
|
-
),
|
1931
|
-
/* @__PURE__ */ jsx16(
|
1932
|
-
Link3,
|
1933
|
-
{
|
1934
|
-
className: RebuyProductAddOns_default.addOnCardLearnMore,
|
1935
|
-
to: `/products/${product.handle}`,
|
1936
|
-
children: learnMoreText
|
1937
|
-
}
|
1938
|
-
)
|
1753
|
+
/* @__PURE__ */ jsx16(RebuyProductPrice, { selectedVariant: product.selectedVariant }),
|
1754
|
+
/* @__PURE__ */ jsx16(Link3, { className: RebuyProductAddOns_default.addOnCardLearnMore, to: `/products/${product.handle}`, children: learnMoreText })
|
1939
1755
|
] })
|
1940
1756
|
] }) });
|
1941
1757
|
};
|
@@ -1986,10 +1802,7 @@ var RebuyProductAddOns = (props) => {
|
|
1986
1802
|
});
|
1987
1803
|
setAddedItems(products);
|
1988
1804
|
if (includeMainProduct) {
|
1989
|
-
setAddedItems([
|
1990
|
-
convertToRebuyProduct(isHydrogenReact || false, product),
|
1991
|
-
...products
|
1992
|
-
]);
|
1805
|
+
setAddedItems([convertToRebuyProduct(isHydrogenReact || false, product), ...products]);
|
1993
1806
|
} else {
|
1994
1807
|
setAddedItems(products);
|
1995
1808
|
}
|
@@ -1997,9 +1810,7 @@ var RebuyProductAddOns = (props) => {
|
|
1997
1810
|
const handleChange = useCallback2(
|
1998
1811
|
(event, product2) => {
|
1999
1812
|
const newProducts = [...products];
|
2000
|
-
const productIndex = newProducts.findIndex(
|
2001
|
-
(p) => p.id === product2.id
|
2002
|
-
);
|
1813
|
+
const productIndex = newProducts.findIndex((p) => p.id === product2.id);
|
2003
1814
|
if (productIndex !== -1) {
|
2004
1815
|
newProducts[productIndex] = {
|
2005
1816
|
...newProducts[productIndex],
|
@@ -2009,9 +1820,7 @@ var RebuyProductAddOns = (props) => {
|
|
2009
1820
|
if (event.target.checked) {
|
2010
1821
|
setAddedItems((prev) => [...prev, product2]);
|
2011
1822
|
} else {
|
2012
|
-
setAddedItems(
|
2013
|
-
(prev) => prev.filter((item) => item.id !== product2.id)
|
2014
|
-
);
|
1823
|
+
setAddedItems((prev) => prev.filter((item) => item.id !== product2.id));
|
2015
1824
|
}
|
2016
1825
|
}
|
2017
1826
|
},
|
@@ -2044,14 +1853,7 @@ var RebuyProductAddOns = (props) => {
|
|
2044
1853
|
return null;
|
2045
1854
|
}
|
2046
1855
|
return /* @__PURE__ */ jsxs11("div", { className: RebuyProductAddOns_default.container, children: [
|
2047
|
-
/* @__PURE__ */ jsx17(
|
2048
|
-
Title,
|
2049
|
-
{
|
2050
|
-
level: getTitleLevel(customTitleLevel),
|
2051
|
-
style: customTitleStyle,
|
2052
|
-
text: customTitle
|
2053
|
-
}
|
2054
|
-
),
|
1856
|
+
/* @__PURE__ */ jsx17(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
|
2055
1857
|
/* @__PURE__ */ jsx17("ul", { className: RebuyProductAddOns_default.productAddOnsList, children: products.map((product2) => /* @__PURE__ */ jsx17("li", { children: /* @__PURE__ */ jsx17(
|
2056
1858
|
RebuyProductAddOnCard,
|
2057
1859
|
{
|
@@ -2065,23 +1867,11 @@ var RebuyProductAddOns = (props) => {
|
|
2065
1867
|
/* @__PURE__ */ jsxs11("div", { className: RebuyProductAddOns_default.productAddOnsFooter, children: [
|
2066
1868
|
/* @__PURE__ */ jsxs11("div", { className: RebuyProductAddOns_default.moneyContainer, children: [
|
2067
1869
|
subtotalText,
|
2068
|
-
subtotalWithOutProduct && /* @__PURE__ */ jsx17(
|
2069
|
-
Money5,
|
2070
|
-
{
|
2071
|
-
data: subtotalWithOutProduct,
|
2072
|
-
withoutTrailingZeros: true
|
2073
|
-
}
|
2074
|
-
)
|
1870
|
+
subtotalWithOutProduct && /* @__PURE__ */ jsx17(Money5, { data: subtotalWithOutProduct, withoutTrailingZeros: true })
|
2075
1871
|
] }),
|
2076
1872
|
includeMainProduct && /* @__PURE__ */ jsxs11("div", { className: RebuyProductAddOns_default.moneyContainer, children: [
|
2077
1873
|
withProductText,
|
2078
|
-
subtotalWithProduct && /* @__PURE__ */ jsx17(
|
2079
|
-
Money5,
|
2080
|
-
{
|
2081
|
-
data: subtotalWithProduct,
|
2082
|
-
withoutTrailingZeros: true
|
2083
|
-
}
|
2084
|
-
)
|
1874
|
+
subtotalWithProduct && /* @__PURE__ */ jsx17(Money5, { data: subtotalWithProduct, withoutTrailingZeros: true })
|
2085
1875
|
] }),
|
2086
1876
|
/* @__PURE__ */ jsx17("div", { className: RebuyProductAddOns_default.addCartBtnContainer, children: includeMainProduct ? /* @__PURE__ */ jsx17(
|
2087
1877
|
AddToCartBtn,
|
@@ -2091,9 +1881,7 @@ var RebuyProductAddOns = (props) => {
|
|
2091
1881
|
disabled: addedItems.length === 0,
|
2092
1882
|
isHydrogenReact,
|
2093
1883
|
moneyData: subtotalWithProduct,
|
2094
|
-
selectedVariants: addedItems.map(
|
2095
|
-
(item) => item.selectedVariant
|
2096
|
-
)
|
1884
|
+
selectedVariants: addedItems.map((item) => item.selectedVariant)
|
2097
1885
|
}
|
2098
1886
|
) : /* @__PURE__ */ jsx17(
|
2099
1887
|
AddToCartBtn,
|
@@ -2103,9 +1891,7 @@ var RebuyProductAddOns = (props) => {
|
|
2103
1891
|
disabled: addedItems.length === 0,
|
2104
1892
|
isHydrogenReact,
|
2105
1893
|
moneyData: subtotalWithOutProduct,
|
2106
|
-
selectedVariants: addedItems.map(
|
2107
|
-
(item) => item.selectedVariant
|
2108
|
-
)
|
1894
|
+
selectedVariants: addedItems.map((item) => item.selectedVariant)
|
2109
1895
|
}
|
2110
1896
|
) })
|
2111
1897
|
] })
|
@@ -2134,14 +1920,7 @@ var RebuyProductRecommendations = (props) => {
|
|
2134
1920
|
return null;
|
2135
1921
|
}
|
2136
1922
|
return /* @__PURE__ */ jsxs12("section", { className: RebuyProductRecommendations_default.container, children: [
|
2137
|
-
/* @__PURE__ */ jsx18(
|
2138
|
-
Title,
|
2139
|
-
{
|
2140
|
-
level: getTitleLevel(customTitleLevel),
|
2141
|
-
style: customTitleStyle,
|
2142
|
-
text: customTitle
|
2143
|
-
}
|
2144
|
-
),
|
1923
|
+
/* @__PURE__ */ jsx18(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
|
2145
1924
|
/* @__PURE__ */ jsx18("ul", { className: RebuyProductRecommendations_default.productGrid, children: products.map((product) => /* @__PURE__ */ jsx18("li", { className: RebuyProductRecommendations_default.productItem, children: /* @__PURE__ */ jsx18(
|
2146
1925
|
ProductCard,
|
2147
1926
|
{
|
@@ -2149,10 +1928,7 @@ var RebuyProductRecommendations = (props) => {
|
|
2149
1928
|
addToCartCallback,
|
2150
1929
|
isHydrogenReact: props.isHydrogenReact,
|
2151
1930
|
product,
|
2152
|
-
productCardTitleLevel: getTitleLevel(
|
2153
|
-
customTitleLevel,
|
2154
|
-
true
|
2155
|
-
)
|
1931
|
+
productCardTitleLevel: getTitleLevel(customTitleLevel, true)
|
2156
1932
|
}
|
2157
1933
|
) }, product.id)) })
|
2158
1934
|
] });
|