@lime-bundles/react 6.1.0 → 6.2.0
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 +7 -1
- package/dist/index.cjs +620 -491
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +22 -3
- package/dist/index.d.ts +22 -3
- package/dist/index.js +565 -434
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1901 -0
- package/docs/hydrogen.md +28 -3
- package/docs/react-nextjs.md +23 -3
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// src/components/FixedBundle.tsx
|
|
2
|
-
import { useCallback as useCallback5, useEffect as
|
|
2
|
+
import { useCallback as useCallback5, useEffect as useEffect7, useMemo as useMemo4, useState as useState6 } from "react";
|
|
3
3
|
import {
|
|
4
4
|
formatMoney,
|
|
5
5
|
formatUnitPrice,
|
|
@@ -659,8 +659,48 @@ function VariantDropdown({
|
|
|
659
659
|
);
|
|
660
660
|
}
|
|
661
661
|
|
|
662
|
-
// src/components/
|
|
662
|
+
// src/components/BundleCountdown.tsx
|
|
663
|
+
import { useEffect as useEffect6, useState as useState5 } from "react";
|
|
663
664
|
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
665
|
+
function pad(n) {
|
|
666
|
+
return n < 10 ? "0" + n : String(n);
|
|
667
|
+
}
|
|
668
|
+
function formatRemaining(remaining) {
|
|
669
|
+
const days = Math.floor(remaining / 864e5);
|
|
670
|
+
const hours = Math.floor(remaining % 864e5 / 36e5);
|
|
671
|
+
const mins = Math.floor(remaining % 36e5 / 6e4);
|
|
672
|
+
const secs = Math.floor(remaining % 6e4 / 1e3);
|
|
673
|
+
return days > 0 ? days + "d " + pad(hours) + "h " + pad(mins) + "m " + pad(secs) + "s" : pad(hours) + "h " + pad(mins) + "m " + pad(secs) + "s";
|
|
674
|
+
}
|
|
675
|
+
function BundleCountdown({
|
|
676
|
+
endsAt,
|
|
677
|
+
widgetConfig,
|
|
678
|
+
label = "Limited time offer"
|
|
679
|
+
}) {
|
|
680
|
+
const enabled = !!endsAt && widgetConfig?.countdown?.showCountdown !== false;
|
|
681
|
+
const endTime = enabled ? new Date(endsAt).getTime() : NaN;
|
|
682
|
+
const [remaining, setRemaining] = useState5(null);
|
|
683
|
+
useEffect6(() => {
|
|
684
|
+
if (!enabled || isNaN(endTime)) {
|
|
685
|
+
setRemaining(null);
|
|
686
|
+
return;
|
|
687
|
+
}
|
|
688
|
+
const update = () => setRemaining(endTime - Date.now());
|
|
689
|
+
update();
|
|
690
|
+
const interval = setInterval(update, 1e3);
|
|
691
|
+
return () => clearInterval(interval);
|
|
692
|
+
}, [enabled, endTime]);
|
|
693
|
+
if (!enabled || isNaN(endTime) || remaining === null || remaining <= 0) {
|
|
694
|
+
return null;
|
|
695
|
+
}
|
|
696
|
+
return /* @__PURE__ */ jsxs2("div", { className: "lb-bundle-countdown", "data-countdown": true, children: [
|
|
697
|
+
/* @__PURE__ */ jsx2("div", { className: "lb-bundle-countdown__label", children: /* @__PURE__ */ jsx2("span", { children: label }) }),
|
|
698
|
+
/* @__PURE__ */ jsx2("span", { className: "lb-bundle-countdown__timer", "data-countdown-timer": true, children: formatRemaining(remaining) })
|
|
699
|
+
] });
|
|
700
|
+
}
|
|
701
|
+
|
|
702
|
+
// src/components/FixedBundle.tsx
|
|
703
|
+
import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
664
704
|
function FixedBundle(props) {
|
|
665
705
|
const {
|
|
666
706
|
shopDomain,
|
|
@@ -684,9 +724,9 @@ function FixedBundle(props) {
|
|
|
684
724
|
bundleType: "fixed",
|
|
685
725
|
enabled: analyticsEnabled !== false
|
|
686
726
|
});
|
|
687
|
-
const [addingToCart, setAddingToCart] =
|
|
688
|
-
const [cartError, setCartError] =
|
|
689
|
-
const [selectedVariants, setSelectedVariants] =
|
|
727
|
+
const [addingToCart, setAddingToCart] = useState6(false);
|
|
728
|
+
const [cartError, setCartError] = useState6(null);
|
|
729
|
+
const [selectedVariants, setSelectedVariants] = useState6({});
|
|
690
730
|
const handleVariantChange = useCallback5(
|
|
691
731
|
(productId, variant) => {
|
|
692
732
|
setSelectedVariants((prev) => {
|
|
@@ -699,7 +739,7 @@ function FixedBundle(props) {
|
|
|
699
739
|
const bundle = result.status === "success" && result.bundle.bundleType === "fixed" ? result.bundle : null;
|
|
700
740
|
const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
|
|
701
741
|
const productsEdgeFadeRef = useEdgeFade();
|
|
702
|
-
|
|
742
|
+
useEffect7(() => {
|
|
703
743
|
if (result.status === "error") {
|
|
704
744
|
onError?.(result.error);
|
|
705
745
|
return;
|
|
@@ -777,9 +817,9 @@ function FixedBundle(props) {
|
|
|
777
817
|
}
|
|
778
818
|
}, [bundle, onAddToCart, onError, trackAddToCart, selectedVariants]);
|
|
779
819
|
if (result.status === "loading") {
|
|
780
|
-
return /* @__PURE__ */
|
|
781
|
-
/* @__PURE__ */
|
|
782
|
-
/* @__PURE__ */
|
|
820
|
+
return /* @__PURE__ */ jsxs3("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
|
|
821
|
+
/* @__PURE__ */ jsx3("div", { className: "lb-skeleton lb-skeleton--title" }),
|
|
822
|
+
/* @__PURE__ */ jsx3("div", { className: "lb-skeleton lb-skeleton--products" })
|
|
783
823
|
] });
|
|
784
824
|
}
|
|
785
825
|
if (result.status === "error") return null;
|
|
@@ -806,7 +846,7 @@ function FixedBundle(props) {
|
|
|
806
846
|
const savingsPercent = comparePrice > 0 && savings > 0 ? Math.round(savings / comparePrice * 100) : 0;
|
|
807
847
|
const showCompare = bundle.widgetConfig.pricing.showComparePrice && savings > 0;
|
|
808
848
|
const showSavings = bundle.widgetConfig.savingsBar.visible && savings > 0;
|
|
809
|
-
return /* @__PURE__ */
|
|
849
|
+
return /* @__PURE__ */ jsxs3(
|
|
810
850
|
"div",
|
|
811
851
|
{
|
|
812
852
|
ref: (el) => {
|
|
@@ -817,11 +857,18 @@ function FixedBundle(props) {
|
|
|
817
857
|
role: "region",
|
|
818
858
|
"aria-label": bundle.title,
|
|
819
859
|
children: [
|
|
820
|
-
/* @__PURE__ */
|
|
821
|
-
/* @__PURE__ */
|
|
822
|
-
bundle.description && /* @__PURE__ */
|
|
860
|
+
/* @__PURE__ */ jsx3("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs3("div", { className: "lb-bundle-header__content", children: [
|
|
861
|
+
/* @__PURE__ */ jsx3("h3", { className: "lb-bundle-title", children: bundle.title }),
|
|
862
|
+
bundle.description && /* @__PURE__ */ jsx3("p", { className: "lb-bundle-subtitle", children: bundle.description })
|
|
823
863
|
] }) }),
|
|
824
|
-
/* @__PURE__ */
|
|
864
|
+
/* @__PURE__ */ jsx3(
|
|
865
|
+
BundleCountdown,
|
|
866
|
+
{
|
|
867
|
+
endsAt: bundle.endsAt,
|
|
868
|
+
widgetConfig: bundle.widgetConfig
|
|
869
|
+
}
|
|
870
|
+
),
|
|
871
|
+
/* @__PURE__ */ jsx3("div", { className: "lb-bundle__products lb-edge-fade", ref: productsEdgeFadeRef, children: bundle.products.map((product) => /* @__PURE__ */ jsx3(
|
|
825
872
|
FixedProductRow,
|
|
826
873
|
{
|
|
827
874
|
bundle,
|
|
@@ -832,29 +879,29 @@ function FixedBundle(props) {
|
|
|
832
879
|
},
|
|
833
880
|
product.id
|
|
834
881
|
)) }),
|
|
835
|
-
/* @__PURE__ */
|
|
836
|
-
/* @__PURE__ */
|
|
837
|
-
/* @__PURE__ */
|
|
838
|
-
/* @__PURE__ */
|
|
839
|
-
showSavings && /* @__PURE__ */
|
|
882
|
+
/* @__PURE__ */ jsx3("div", { className: "lb-bundle-divider" }),
|
|
883
|
+
/* @__PURE__ */ jsxs3("div", { className: "lb-bundle-summary", children: [
|
|
884
|
+
/* @__PURE__ */ jsxs3("div", { className: "lb-bundle-summary__text", children: [
|
|
885
|
+
/* @__PURE__ */ jsx3("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
|
|
886
|
+
showSavings && /* @__PURE__ */ jsxs3("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
|
|
840
887
|
"You save",
|
|
841
888
|
" ",
|
|
842
|
-
/* @__PURE__ */
|
|
889
|
+
/* @__PURE__ */ jsx3("span", { "data-savings-amount": true, children: formatMoney(savings, currency) }),
|
|
843
890
|
" ",
|
|
844
|
-
/* @__PURE__ */
|
|
891
|
+
/* @__PURE__ */ jsxs3("span", { "data-savings-percent": true, children: [
|
|
845
892
|
"(",
|
|
846
893
|
savingsPercent,
|
|
847
894
|
"%)"
|
|
848
895
|
] })
|
|
849
896
|
] })
|
|
850
897
|
] }),
|
|
851
|
-
/* @__PURE__ */
|
|
852
|
-
showCompare && /* @__PURE__ */
|
|
853
|
-
/* @__PURE__ */
|
|
898
|
+
/* @__PURE__ */ jsxs3("span", { className: "lb-bundle-summary__prices", children: [
|
|
899
|
+
showCompare && /* @__PURE__ */ jsx3("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney(comparePrice, currency) }),
|
|
900
|
+
/* @__PURE__ */ jsx3("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: formatMoney(salePrice, currency) })
|
|
854
901
|
] })
|
|
855
902
|
] }),
|
|
856
|
-
cartError && /* @__PURE__ */
|
|
857
|
-
/* @__PURE__ */
|
|
903
|
+
cartError && /* @__PURE__ */ jsx3("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
|
|
904
|
+
/* @__PURE__ */ jsx3(
|
|
858
905
|
"button",
|
|
859
906
|
{
|
|
860
907
|
className: "lb-bundle__cta",
|
|
@@ -879,7 +926,7 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
|
|
|
879
926
|
variants,
|
|
880
927
|
optionNames
|
|
881
928
|
});
|
|
882
|
-
|
|
929
|
+
useEffect7(() => {
|
|
883
930
|
onVariantChange(product.id, selectedVariant ?? null);
|
|
884
931
|
}, [selectedVariant, product.id, onVariantChange]);
|
|
885
932
|
const displayVariant = selectedVariant ?? variants.find(
|
|
@@ -900,15 +947,15 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
|
|
|
900
947
|
bundle.widgetConfig.lowStockThreshold,
|
|
901
948
|
bundle.widgetConfig.showLowStockBadge
|
|
902
949
|
);
|
|
903
|
-
return /* @__PURE__ */
|
|
950
|
+
return /* @__PURE__ */ jsxs3(
|
|
904
951
|
"div",
|
|
905
952
|
{
|
|
906
953
|
className: isOos ? "lb-bundle-product-row lb-bundle-product-row--oos" : "lb-bundle-product-row",
|
|
907
954
|
"aria-disabled": isOos || void 0,
|
|
908
955
|
part: "product",
|
|
909
956
|
children: [
|
|
910
|
-
isOos && /* @__PURE__ */
|
|
911
|
-
thumbImage && /* @__PURE__ */
|
|
957
|
+
isOos && /* @__PURE__ */ jsx3("span", { className: "lb-bundle-product-row__oos", children: "Out of stock" }),
|
|
958
|
+
thumbImage && /* @__PURE__ */ jsx3(
|
|
912
959
|
"img",
|
|
913
960
|
{
|
|
914
961
|
src: thumbImage.url,
|
|
@@ -917,11 +964,11 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
|
|
|
917
964
|
loading: "lazy"
|
|
918
965
|
}
|
|
919
966
|
),
|
|
920
|
-
/* @__PURE__ */
|
|
921
|
-
/* @__PURE__ */
|
|
922
|
-
!showPicker && displayVariant && variants.length > 1 && /* @__PURE__ */
|
|
923
|
-
/* @__PURE__ */
|
|
924
|
-
compareAt && /* @__PURE__ */
|
|
967
|
+
/* @__PURE__ */ jsxs3("div", { className: "lb-bundle__product-info", children: [
|
|
968
|
+
/* @__PURE__ */ jsx3("p", { className: "lb-bundle__product-title", children: product.title }),
|
|
969
|
+
!showPicker && displayVariant && variants.length > 1 && /* @__PURE__ */ jsx3("span", { className: "lb-bundle-variant-badge", children: displayVariant.title }),
|
|
970
|
+
/* @__PURE__ */ jsxs3("span", { className: "lb-bundle-product-prices", children: [
|
|
971
|
+
compareAt && /* @__PURE__ */ jsx3(
|
|
925
972
|
"span",
|
|
926
973
|
{
|
|
927
974
|
className: "lb-bundle-product-compare-price",
|
|
@@ -929,9 +976,9 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
|
|
|
929
976
|
children: compareAt
|
|
930
977
|
}
|
|
931
978
|
),
|
|
932
|
-
/* @__PURE__ */
|
|
979
|
+
/* @__PURE__ */ jsx3("span", { className: "lb-bundle__product-price", "data-product-price": true, children: priceText })
|
|
933
980
|
] }),
|
|
934
|
-
unitPriceText && /* @__PURE__ */
|
|
981
|
+
unitPriceText && /* @__PURE__ */ jsx3(
|
|
935
982
|
"span",
|
|
936
983
|
{
|
|
937
984
|
className: "lb-bundle__product-unit-price",
|
|
@@ -939,18 +986,18 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
|
|
|
939
986
|
children: unitPriceText
|
|
940
987
|
}
|
|
941
988
|
),
|
|
942
|
-
showLowStock && /* @__PURE__ */
|
|
989
|
+
showLowStock && /* @__PURE__ */ jsxs3("span", { className: "lb-bundle-low-stock-badge", children: [
|
|
943
990
|
"Only ",
|
|
944
991
|
displayVariant.quantityAvailable,
|
|
945
992
|
" left"
|
|
946
993
|
] }),
|
|
947
|
-
showPicker && /* @__PURE__ */
|
|
994
|
+
showPicker && /* @__PURE__ */ jsx3("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
|
|
948
995
|
const dropdownOptions = optionsFor(optionIndex).map((o) => ({
|
|
949
996
|
value: o.value,
|
|
950
997
|
label: o.value,
|
|
951
998
|
disabled: o.disabled
|
|
952
999
|
}));
|
|
953
|
-
return /* @__PURE__ */
|
|
1000
|
+
return /* @__PURE__ */ jsx3(
|
|
954
1001
|
VariantDropdown,
|
|
955
1002
|
{
|
|
956
1003
|
options: dropdownOptions,
|
|
@@ -962,7 +1009,7 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
|
|
|
962
1009
|
);
|
|
963
1010
|
}) })
|
|
964
1011
|
] }),
|
|
965
|
-
displayVariant && /* @__PURE__ */
|
|
1012
|
+
displayVariant && /* @__PURE__ */ jsxs3("span", { className: "lb-bundle-qty-chip", "data-qty-inline": true, children: [
|
|
966
1013
|
"\xD7",
|
|
967
1014
|
displayQty
|
|
968
1015
|
] })
|
|
@@ -972,7 +1019,7 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
|
|
|
972
1019
|
}
|
|
973
1020
|
|
|
974
1021
|
// src/components/MixMatchBundle.tsx
|
|
975
|
-
import { useCallback as useCallback6, useEffect as
|
|
1022
|
+
import { useCallback as useCallback6, useEffect as useEffect12, useMemo as useMemo6, useState as useState9 } from "react";
|
|
976
1023
|
import {
|
|
977
1024
|
formatMoney as formatMoney3,
|
|
978
1025
|
formatUnitPrice as formatUnitPrice3,
|
|
@@ -982,14 +1029,14 @@ import {
|
|
|
982
1029
|
} from "@lime-bundles/core";
|
|
983
1030
|
|
|
984
1031
|
// src/hooks/useShopSettings.ts
|
|
985
|
-
import { useEffect as
|
|
1032
|
+
import { useEffect as useEffect8, useState as useState7 } from "react";
|
|
986
1033
|
import {
|
|
987
1034
|
DEFAULT_OUT_OF_STOCK_BEHAVIOR as DEFAULT_OUT_OF_STOCK_BEHAVIOR2
|
|
988
1035
|
} from "@lime-bundles/core";
|
|
989
1036
|
function useShopSettings(options) {
|
|
990
|
-
const [outOfStockBehavior, setOutOfStockBehavior] =
|
|
1037
|
+
const [outOfStockBehavior, setOutOfStockBehavior] = useState7(DEFAULT_OUT_OF_STOCK_BEHAVIOR2);
|
|
991
1038
|
const { shopDomain, storefrontAccessToken } = options;
|
|
992
|
-
|
|
1039
|
+
useEffect8(() => {
|
|
993
1040
|
const controller = new AbortController();
|
|
994
1041
|
let active = true;
|
|
995
1042
|
fetchShopSettingsOrDefault({
|
|
@@ -1010,10 +1057,10 @@ function useShopSettings(options) {
|
|
|
1010
1057
|
|
|
1011
1058
|
// src/components/MixMatchPicker.tsx
|
|
1012
1059
|
import {
|
|
1013
|
-
useEffect as
|
|
1060
|
+
useEffect as useEffect11,
|
|
1014
1061
|
useMemo as useMemo5,
|
|
1015
1062
|
useRef as useRef6,
|
|
1016
|
-
useState as
|
|
1063
|
+
useState as useState8
|
|
1017
1064
|
} from "react";
|
|
1018
1065
|
import { createPortal } from "react-dom";
|
|
1019
1066
|
import {
|
|
@@ -1025,7 +1072,7 @@ import {
|
|
|
1025
1072
|
} from "@lime-bundles/core";
|
|
1026
1073
|
|
|
1027
1074
|
// src/hooks/useScrollLock.ts
|
|
1028
|
-
import { useEffect as
|
|
1075
|
+
import { useEffect as useEffect9 } from "react";
|
|
1029
1076
|
var lockCount = 0;
|
|
1030
1077
|
var savedY = 0;
|
|
1031
1078
|
function lock() {
|
|
@@ -1054,7 +1101,7 @@ function unlock() {
|
|
|
1054
1101
|
window.scrollTo(0, savedY);
|
|
1055
1102
|
}
|
|
1056
1103
|
function useScrollLock(active) {
|
|
1057
|
-
|
|
1104
|
+
useEffect9(() => {
|
|
1058
1105
|
if (!active) return;
|
|
1059
1106
|
lock();
|
|
1060
1107
|
return unlock;
|
|
@@ -1062,7 +1109,7 @@ function useScrollLock(active) {
|
|
|
1062
1109
|
}
|
|
1063
1110
|
|
|
1064
1111
|
// src/hooks/useFocusTrap.ts
|
|
1065
|
-
import { useEffect as
|
|
1112
|
+
import { useEffect as useEffect10, useRef as useRef5 } from "react";
|
|
1066
1113
|
var FOCUSABLE_SELECTOR = [
|
|
1067
1114
|
"a[href]",
|
|
1068
1115
|
"button:not([disabled])",
|
|
@@ -1088,7 +1135,7 @@ function useFocusTrap({
|
|
|
1088
1135
|
returnFocusRef
|
|
1089
1136
|
}) {
|
|
1090
1137
|
const previouslyFocused = useRef5(null);
|
|
1091
|
-
|
|
1138
|
+
useEffect10(() => {
|
|
1092
1139
|
if (!active) return;
|
|
1093
1140
|
const container = containerRef.current;
|
|
1094
1141
|
previouslyFocused.current = document.activeElement ?? null;
|
|
@@ -1130,7 +1177,7 @@ function useFocusTrap({
|
|
|
1130
1177
|
}
|
|
1131
1178
|
|
|
1132
1179
|
// src/components/MixMatchPicker.tsx
|
|
1133
|
-
import { jsx as
|
|
1180
|
+
import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
1134
1181
|
function ruleFor(bundle, productId, variantId) {
|
|
1135
1182
|
if (variantId) {
|
|
1136
1183
|
const vRule = bundle.variantRules[variantId];
|
|
@@ -1189,9 +1236,9 @@ function MixMatchPicker({
|
|
|
1189
1236
|
const overlayRef = useRef6(null);
|
|
1190
1237
|
const dialogRef = useRef6(null);
|
|
1191
1238
|
const mouseDownTarget = useRef6(null);
|
|
1192
|
-
const [open, setOpen] =
|
|
1193
|
-
const [query, setQuery] =
|
|
1194
|
-
const [activeType, setActiveType] =
|
|
1239
|
+
const [open, setOpen] = useState8(false);
|
|
1240
|
+
const [query, setQuery] = useState8("");
|
|
1241
|
+
const [activeType, setActiveType] = useState8(FILTERS_ALL);
|
|
1195
1242
|
const eligible = useMemo5(
|
|
1196
1243
|
() => buildEligibleProducts(bundle, outOfStockBehavior),
|
|
1197
1244
|
[bundle, outOfStockBehavior]
|
|
@@ -1212,7 +1259,7 @@ function MixMatchPicker({
|
|
|
1212
1259
|
const totalUnits = selections.reduce((sum, s) => sum + s.quantity, 0);
|
|
1213
1260
|
const atCapacity = totalUnits >= requiredQty;
|
|
1214
1261
|
const shownUnits = Math.min(totalUnits, requiredQty);
|
|
1215
|
-
|
|
1262
|
+
useEffect11(() => {
|
|
1216
1263
|
const id = requestAnimationFrame(() => setOpen(true));
|
|
1217
1264
|
return () => cancelAnimationFrame(id);
|
|
1218
1265
|
}, []);
|
|
@@ -1253,7 +1300,7 @@ function MixMatchPicker({
|
|
|
1253
1300
|
// inside carries the interactive role + focus trap. So the static-element
|
|
1254
1301
|
// interaction lint does not apply to this backdrop.
|
|
1255
1302
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
1256
|
-
/* @__PURE__ */
|
|
1303
|
+
/* @__PURE__ */ jsx4(
|
|
1257
1304
|
"div",
|
|
1258
1305
|
{
|
|
1259
1306
|
ref: (el) => {
|
|
@@ -1265,7 +1312,7 @@ function MixMatchPicker({
|
|
|
1265
1312
|
"data-bundle-gid": bundle.id,
|
|
1266
1313
|
onMouseDown: onOverlayMouseDown,
|
|
1267
1314
|
onMouseUp: onOverlayMouseUp,
|
|
1268
|
-
children: /* @__PURE__ */
|
|
1315
|
+
children: /* @__PURE__ */ jsxs4(
|
|
1269
1316
|
"div",
|
|
1270
1317
|
{
|
|
1271
1318
|
ref: dialogRef,
|
|
@@ -1275,13 +1322,13 @@ function MixMatchPicker({
|
|
|
1275
1322
|
"aria-labelledby": titleId,
|
|
1276
1323
|
tabIndex: -1,
|
|
1277
1324
|
children: [
|
|
1278
|
-
/* @__PURE__ */
|
|
1279
|
-
/* @__PURE__ */
|
|
1280
|
-
/* @__PURE__ */
|
|
1281
|
-
/* @__PURE__ */
|
|
1282
|
-
/* @__PURE__ */
|
|
1325
|
+
/* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__modal-header", children: [
|
|
1326
|
+
/* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__modal-header-top", children: [
|
|
1327
|
+
/* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__modal-heading", children: [
|
|
1328
|
+
/* @__PURE__ */ jsx4("h4", { className: "lb-mix-match__modal-title", id: titleId, children: "Add to your bundle" }),
|
|
1329
|
+
/* @__PURE__ */ jsx4("p", { className: "lb-mix-match__modal-subtitle", "data-modal-subtitle": true, children: subtitle })
|
|
1283
1330
|
] }),
|
|
1284
|
-
/* @__PURE__ */
|
|
1331
|
+
/* @__PURE__ */ jsx4(
|
|
1285
1332
|
"button",
|
|
1286
1333
|
{
|
|
1287
1334
|
type: "button",
|
|
@@ -1289,16 +1336,16 @@ function MixMatchPicker({
|
|
|
1289
1336
|
"data-modal-close": true,
|
|
1290
1337
|
"aria-label": "Close",
|
|
1291
1338
|
onClick: onClose,
|
|
1292
|
-
children: /* @__PURE__ */
|
|
1339
|
+
children: /* @__PURE__ */ jsx4(CloseIcon, {})
|
|
1293
1340
|
}
|
|
1294
1341
|
)
|
|
1295
1342
|
] }),
|
|
1296
|
-
/* @__PURE__ */
|
|
1343
|
+
/* @__PURE__ */ jsx4(
|
|
1297
1344
|
"div",
|
|
1298
1345
|
{
|
|
1299
1346
|
className: "lb-mix-match__progress lb-mix-match__modal-progress",
|
|
1300
1347
|
"data-progress": true,
|
|
1301
|
-
children: /* @__PURE__ */
|
|
1348
|
+
children: /* @__PURE__ */ jsx4(
|
|
1302
1349
|
"div",
|
|
1303
1350
|
{
|
|
1304
1351
|
className: "lb-mix-match__progress-segments",
|
|
@@ -1306,7 +1353,7 @@ function MixMatchPicker({
|
|
|
1306
1353
|
"aria-valuenow": shownUnits,
|
|
1307
1354
|
"aria-valuemin": 0,
|
|
1308
1355
|
"aria-valuemax": requiredQty,
|
|
1309
|
-
children: Array.from({ length: requiredQty }).map((_, i) => /* @__PURE__ */
|
|
1356
|
+
children: Array.from({ length: requiredQty }).map((_, i) => /* @__PURE__ */ jsx4(
|
|
1310
1357
|
"span",
|
|
1311
1358
|
{
|
|
1312
1359
|
className: `lb-mix-match__progress-segment${i < shownUnits ? " lb-mix-match__progress-segment--filled" : ""}`,
|
|
@@ -1319,8 +1366,8 @@ function MixMatchPicker({
|
|
|
1319
1366
|
}
|
|
1320
1367
|
)
|
|
1321
1368
|
] }),
|
|
1322
|
-
wc.showSearch && /* @__PURE__ */
|
|
1323
|
-
/* @__PURE__ */
|
|
1369
|
+
wc.showSearch && /* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__modal-search", children: [
|
|
1370
|
+
/* @__PURE__ */ jsx4(
|
|
1324
1371
|
"input",
|
|
1325
1372
|
{
|
|
1326
1373
|
type: "text",
|
|
@@ -1334,7 +1381,7 @@ function MixMatchPicker({
|
|
|
1334
1381
|
onChange: (e) => setQuery(e.target.value)
|
|
1335
1382
|
}
|
|
1336
1383
|
),
|
|
1337
|
-
query.length > 0 && /* @__PURE__ */
|
|
1384
|
+
query.length > 0 && /* @__PURE__ */ jsx4(
|
|
1338
1385
|
"button",
|
|
1339
1386
|
{
|
|
1340
1387
|
type: "button",
|
|
@@ -1342,11 +1389,11 @@ function MixMatchPicker({
|
|
|
1342
1389
|
"data-modal-search-clear": true,
|
|
1343
1390
|
"aria-label": "Clear search",
|
|
1344
1391
|
onClick: () => setQuery(""),
|
|
1345
|
-
children: /* @__PURE__ */
|
|
1392
|
+
children: /* @__PURE__ */ jsx4(SearchClearIcon, {})
|
|
1346
1393
|
}
|
|
1347
1394
|
)
|
|
1348
1395
|
] }),
|
|
1349
|
-
showFilters && /* @__PURE__ */
|
|
1396
|
+
showFilters && /* @__PURE__ */ jsx4(
|
|
1350
1397
|
"div",
|
|
1351
1398
|
{
|
|
1352
1399
|
className: "lb-mix-match__filters",
|
|
@@ -1355,7 +1402,7 @@ function MixMatchPicker({
|
|
|
1355
1402
|
"aria-label": "Filter by product type",
|
|
1356
1403
|
children: [FILTERS_ALL, ...productTypes].map((value) => {
|
|
1357
1404
|
const isActive = value === activeType;
|
|
1358
|
-
return /* @__PURE__ */
|
|
1405
|
+
return /* @__PURE__ */ jsx4(
|
|
1359
1406
|
"button",
|
|
1360
1407
|
{
|
|
1361
1408
|
type: "button",
|
|
@@ -1370,7 +1417,7 @@ function MixMatchPicker({
|
|
|
1370
1417
|
})
|
|
1371
1418
|
}
|
|
1372
1419
|
),
|
|
1373
|
-
/* @__PURE__ */
|
|
1420
|
+
/* @__PURE__ */ jsx4("div", { className: "lb-mix-match__modal-list", "data-modal-list": true, children: filtered.map((ep) => /* @__PURE__ */ jsx4(
|
|
1374
1421
|
MixMatchPickerRow,
|
|
1375
1422
|
{
|
|
1376
1423
|
bundle,
|
|
@@ -1389,10 +1436,10 @@ function MixMatchPicker({
|
|
|
1389
1436
|
},
|
|
1390
1437
|
ep.product.id
|
|
1391
1438
|
)) }),
|
|
1392
|
-
showEmpty && /* @__PURE__ */
|
|
1393
|
-
/* @__PURE__ */
|
|
1394
|
-
/* @__PURE__ */
|
|
1395
|
-
/* @__PURE__ */
|
|
1439
|
+
showEmpty && /* @__PURE__ */ jsx4("div", { className: "lb-mix-match__modal-empty", "data-modal-empty": true, children: /* @__PURE__ */ jsx4("p", { children: "No products match your search" }) }),
|
|
1440
|
+
/* @__PURE__ */ jsx4("span", { "data-modal-live": true, "aria-live": "polite", className: "lb-visually-hidden", children: `${filtered.length} products shown` }),
|
|
1441
|
+
/* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__modal-footer", children: [
|
|
1442
|
+
/* @__PURE__ */ jsx4(
|
|
1396
1443
|
"span",
|
|
1397
1444
|
{
|
|
1398
1445
|
className: "lb-mix-match__modal-footer-count",
|
|
@@ -1401,7 +1448,7 @@ function MixMatchPicker({
|
|
|
1401
1448
|
children: `${shownUnits} of ${requiredQty} added`
|
|
1402
1449
|
}
|
|
1403
1450
|
),
|
|
1404
|
-
/* @__PURE__ */
|
|
1451
|
+
/* @__PURE__ */ jsx4(
|
|
1405
1452
|
"button",
|
|
1406
1453
|
{
|
|
1407
1454
|
type: "button",
|
|
@@ -1486,12 +1533,12 @@ function MixMatchPickerRow({
|
|
|
1486
1533
|
Math.max(0, alreadyInBundle - committedQty)
|
|
1487
1534
|
) : 0;
|
|
1488
1535
|
const stepperMax = Math.max(vRule.min, cap);
|
|
1489
|
-
const [qty, setQty] =
|
|
1490
|
-
|
|
1536
|
+
const [qty, setQty] = useState8(vRule.min);
|
|
1537
|
+
useEffect11(() => {
|
|
1491
1538
|
setQty((prev) => Math.max(vRule.min, Math.min(prev, stepperMax)));
|
|
1492
1539
|
}, [stepperMax, vRule.min]);
|
|
1493
1540
|
const currentVariantId = currentVariant?.id ?? null;
|
|
1494
|
-
|
|
1541
|
+
useEffect11(() => {
|
|
1495
1542
|
if (!variantInBundle) setQty(vRule.min);
|
|
1496
1543
|
}, [variantInBundle, currentVariantId, vRule.min]);
|
|
1497
1544
|
if (!currentVariant) return null;
|
|
@@ -1535,7 +1582,7 @@ function MixMatchPickerRow({
|
|
|
1535
1582
|
}
|
|
1536
1583
|
const priceCents = parseFloat(currentVariant.price.amount);
|
|
1537
1584
|
const compareCents = currentVariant.compareAtPrice ? parseFloat(currentVariant.compareAtPrice.amount) : null;
|
|
1538
|
-
return /* @__PURE__ */
|
|
1585
|
+
return /* @__PURE__ */ jsxs4(
|
|
1539
1586
|
"div",
|
|
1540
1587
|
{
|
|
1541
1588
|
className: `lb-mix-match__modal-product${isOos ? " lb-mix-match__modal-product--sold-out" : ""}${variantInBundle ? " lb-mix-match__modal-product--in-bundle" : ""}`,
|
|
@@ -1544,8 +1591,8 @@ function MixMatchPickerRow({
|
|
|
1544
1591
|
"data-type": product.productType ?? "",
|
|
1545
1592
|
"aria-disabled": isOos || void 0,
|
|
1546
1593
|
children: [
|
|
1547
|
-
/* @__PURE__ */
|
|
1548
|
-
thumbImage && /* @__PURE__ */
|
|
1594
|
+
/* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__modal-product-thumb", children: [
|
|
1595
|
+
thumbImage && /* @__PURE__ */ jsx4(
|
|
1549
1596
|
"img",
|
|
1550
1597
|
{
|
|
1551
1598
|
src: thumbImage.url,
|
|
@@ -1553,10 +1600,10 @@ function MixMatchPickerRow({
|
|
|
1553
1600
|
loading: "lazy"
|
|
1554
1601
|
}
|
|
1555
1602
|
),
|
|
1556
|
-
variantInBundle && /* @__PURE__ */
|
|
1603
|
+
variantInBundle && /* @__PURE__ */ jsx4("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
|
|
1557
1604
|
] }),
|
|
1558
|
-
/* @__PURE__ */
|
|
1559
|
-
/* @__PURE__ */
|
|
1605
|
+
/* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__modal-product-info", children: [
|
|
1606
|
+
/* @__PURE__ */ jsx4("p", { className: "lb-mix-match__modal-product-title", children: /* @__PURE__ */ jsx4(
|
|
1560
1607
|
"a",
|
|
1561
1608
|
{
|
|
1562
1609
|
href: `/products/${product.handle}`,
|
|
@@ -1565,24 +1612,24 @@ function MixMatchPickerRow({
|
|
|
1565
1612
|
children: product.title
|
|
1566
1613
|
}
|
|
1567
1614
|
) }),
|
|
1568
|
-
/* @__PURE__ */
|
|
1569
|
-
/* @__PURE__ */
|
|
1570
|
-
compareCents !== null && compareCents > priceCents && /* @__PURE__ */
|
|
1615
|
+
/* @__PURE__ */ jsxs4("p", { className: "lb-mix-match__modal-product-price", children: [
|
|
1616
|
+
/* @__PURE__ */ jsx4("span", { "data-row-price-sale": true, children: formatMoney2(priceCents, currency) }),
|
|
1617
|
+
compareCents !== null && compareCents > priceCents && /* @__PURE__ */ jsx4("s", { className: "lb-mix-match__modal-product-compare", "data-row-compare": true, children: formatMoney2(compareCents, currency) })
|
|
1571
1618
|
] }),
|
|
1572
|
-
unitPriceText && /* @__PURE__ */
|
|
1573
|
-
showPicker && /* @__PURE__ */
|
|
1619
|
+
unitPriceText && /* @__PURE__ */ jsx4("p", { className: "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price", children: unitPriceText }),
|
|
1620
|
+
showPicker && /* @__PURE__ */ jsx4("div", { className: "lb-bundle-variant-option-groups", children: optionNames.map((optionName, optionIndex) => {
|
|
1574
1621
|
const dropdownOptions = optionsFor(optionIndex).map((o) => ({
|
|
1575
1622
|
value: o.value,
|
|
1576
1623
|
label: o.value,
|
|
1577
1624
|
disabled: o.disabled
|
|
1578
1625
|
}));
|
|
1579
|
-
return /* @__PURE__ */
|
|
1626
|
+
return /* @__PURE__ */ jsxs4(
|
|
1580
1627
|
"div",
|
|
1581
1628
|
{
|
|
1582
1629
|
className: "lb-bundle-variant-option-group",
|
|
1583
1630
|
children: [
|
|
1584
|
-
/* @__PURE__ */
|
|
1585
|
-
/* @__PURE__ */
|
|
1631
|
+
/* @__PURE__ */ jsx4("span", { className: "lb-bundle-variant-option-label", children: optionName }),
|
|
1632
|
+
/* @__PURE__ */ jsx4(
|
|
1586
1633
|
VariantDropdown,
|
|
1587
1634
|
{
|
|
1588
1635
|
className: "lb-mix-match__variant-select-dropdown",
|
|
@@ -1597,17 +1644,17 @@ function MixMatchPickerRow({
|
|
|
1597
1644
|
optionName
|
|
1598
1645
|
);
|
|
1599
1646
|
}) }),
|
|
1600
|
-
!showPicker && variants.length === 1 && currentVariant.title !== "Default Title" && /* @__PURE__ */
|
|
1601
|
-
!isOos && needsMoreSpots && remainingUnits > 0 && /* @__PURE__ */
|
|
1602
|
-
isOos ? /* @__PURE__ */
|
|
1603
|
-
showStepper && /* @__PURE__ */
|
|
1647
|
+
!showPicker && variants.length === 1 && currentVariant.title !== "Default Title" && /* @__PURE__ */ jsx4("span", { className: "lb-mix-match__filled-variant", children: currentVariant.title }),
|
|
1648
|
+
!isOos && needsMoreSpots && remainingUnits > 0 && /* @__PURE__ */ jsx4("span", { className: "lb-mix-match__modal-needs-spots", children: rule.min === 1 ? "Needs 1 spot" : `Needs ${rule.min} spots` }),
|
|
1649
|
+
isOos ? /* @__PURE__ */ jsx4("span", { className: "lb-mix-match__modal-sold-out-label", children: "Sold out" }) : /* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__modal-product-actions", children: [
|
|
1650
|
+
showStepper && /* @__PURE__ */ jsx4("div", { className: "lb-bundle-variant-option-group lb-mix-match__qty-stepper-group", children: /* @__PURE__ */ jsxs4(
|
|
1604
1651
|
"div",
|
|
1605
1652
|
{
|
|
1606
1653
|
className: "lb-mix-match__qty-stepper",
|
|
1607
1654
|
role: "group",
|
|
1608
1655
|
"aria-label": "Quantity",
|
|
1609
1656
|
children: [
|
|
1610
|
-
/* @__PURE__ */
|
|
1657
|
+
/* @__PURE__ */ jsx4(
|
|
1611
1658
|
"button",
|
|
1612
1659
|
{
|
|
1613
1660
|
type: "button",
|
|
@@ -1628,7 +1675,7 @@ function MixMatchPickerRow({
|
|
|
1628
1675
|
children: "\u2212"
|
|
1629
1676
|
}
|
|
1630
1677
|
),
|
|
1631
|
-
/* @__PURE__ */
|
|
1678
|
+
/* @__PURE__ */ jsx4(
|
|
1632
1679
|
"span",
|
|
1633
1680
|
{
|
|
1634
1681
|
className: "lb-mix-match__qty-stepper-value",
|
|
@@ -1637,7 +1684,7 @@ function MixMatchPickerRow({
|
|
|
1637
1684
|
children: shownQty
|
|
1638
1685
|
}
|
|
1639
1686
|
),
|
|
1640
|
-
/* @__PURE__ */
|
|
1687
|
+
/* @__PURE__ */ jsx4(
|
|
1641
1688
|
"button",
|
|
1642
1689
|
{
|
|
1643
1690
|
type: "button",
|
|
@@ -1661,7 +1708,7 @@ function MixMatchPickerRow({
|
|
|
1661
1708
|
]
|
|
1662
1709
|
}
|
|
1663
1710
|
) }),
|
|
1664
|
-
/* @__PURE__ */
|
|
1711
|
+
/* @__PURE__ */ jsx4(
|
|
1665
1712
|
"button",
|
|
1666
1713
|
{
|
|
1667
1714
|
type: "button",
|
|
@@ -1680,7 +1727,7 @@ function MixMatchPickerRow({
|
|
|
1680
1727
|
);
|
|
1681
1728
|
}
|
|
1682
1729
|
function CloseIcon() {
|
|
1683
|
-
return /* @__PURE__ */
|
|
1730
|
+
return /* @__PURE__ */ jsxs4(
|
|
1684
1731
|
"svg",
|
|
1685
1732
|
{
|
|
1686
1733
|
width: "20",
|
|
@@ -1690,14 +1737,14 @@ function CloseIcon() {
|
|
|
1690
1737
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1691
1738
|
"aria-hidden": "true",
|
|
1692
1739
|
children: [
|
|
1693
|
-
/* @__PURE__ */
|
|
1694
|
-
/* @__PURE__ */
|
|
1740
|
+
/* @__PURE__ */ jsx4("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
|
|
1741
|
+
/* @__PURE__ */ jsx4("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
|
|
1695
1742
|
]
|
|
1696
1743
|
}
|
|
1697
1744
|
);
|
|
1698
1745
|
}
|
|
1699
1746
|
function SearchClearIcon() {
|
|
1700
|
-
return /* @__PURE__ */
|
|
1747
|
+
return /* @__PURE__ */ jsx4(
|
|
1701
1748
|
"svg",
|
|
1702
1749
|
{
|
|
1703
1750
|
width: "16",
|
|
@@ -1706,13 +1753,13 @@ function SearchClearIcon() {
|
|
|
1706
1753
|
fill: "currentColor",
|
|
1707
1754
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1708
1755
|
"aria-hidden": "true",
|
|
1709
|
-
children: /* @__PURE__ */
|
|
1756
|
+
children: /* @__PURE__ */ jsx4("path", { d: "M14.348 5.652a.5.5 0 0 0-.707 0L10 9.293 6.36 5.652a.5.5 0 1 0-.708.707L9.293 10l-3.641 3.641a.5.5 0 0 0 .708.707L10 10.707l3.641 3.641a.5.5 0 0 0 .707-.707L10.707 10l3.641-3.641a.5.5 0 0 0 0-.707z" })
|
|
1710
1757
|
}
|
|
1711
1758
|
);
|
|
1712
1759
|
}
|
|
1713
1760
|
|
|
1714
1761
|
// src/components/MixMatchBundle.tsx
|
|
1715
|
-
import { jsx as
|
|
1762
|
+
import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
1716
1763
|
function ruleFor2(bundle, productId, variantId) {
|
|
1717
1764
|
if (variantId) {
|
|
1718
1765
|
const vRule = bundle.variantRules[variantId];
|
|
@@ -1745,7 +1792,8 @@ function MixMatchBundle(props) {
|
|
|
1745
1792
|
analyticsEnabled,
|
|
1746
1793
|
onAddToCart,
|
|
1747
1794
|
onError,
|
|
1748
|
-
className
|
|
1795
|
+
className,
|
|
1796
|
+
productHandle
|
|
1749
1797
|
} = props;
|
|
1750
1798
|
const result = useBundleData({
|
|
1751
1799
|
shopDomain,
|
|
@@ -1763,16 +1811,16 @@ function MixMatchBundle(props) {
|
|
|
1763
1811
|
bundleType: "mix_match",
|
|
1764
1812
|
enabled: analyticsEnabled !== false
|
|
1765
1813
|
});
|
|
1766
|
-
const [selections, setSelections] =
|
|
1767
|
-
const [seededFor, setSeededFor] =
|
|
1768
|
-
const [pickerOpen, setPickerOpen] =
|
|
1769
|
-
const [addingToCart, setAddingToCart] =
|
|
1770
|
-
const [cartError, setCartError] =
|
|
1814
|
+
const [selections, setSelections] = useState9([]);
|
|
1815
|
+
const [seededFor, setSeededFor] = useState9(null);
|
|
1816
|
+
const [pickerOpen, setPickerOpen] = useState9(false);
|
|
1817
|
+
const [addingToCart, setAddingToCart] = useState9(false);
|
|
1818
|
+
const [cartError, setCartError] = useState9(null);
|
|
1771
1819
|
const bundle = result.status === "success" && result.bundle.bundleType === "mix_match" ? result.bundle : null;
|
|
1772
1820
|
const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
|
|
1773
1821
|
const setModalConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
|
|
1774
1822
|
const slotsEdgeFadeRef = useEdgeFade();
|
|
1775
|
-
|
|
1823
|
+
useEffect12(() => {
|
|
1776
1824
|
if (result.status === "error") {
|
|
1777
1825
|
onError?.(result.error);
|
|
1778
1826
|
return;
|
|
@@ -1785,37 +1833,64 @@ function MixMatchBundle(props) {
|
|
|
1785
1833
|
);
|
|
1786
1834
|
}
|
|
1787
1835
|
}, [result, onError]);
|
|
1788
|
-
|
|
1836
|
+
useEffect12(() => {
|
|
1789
1837
|
if (!bundle || seededFor === bundle.id) return;
|
|
1790
1838
|
setSeededFor(bundle.id);
|
|
1791
1839
|
const seedCurrency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
|
|
1840
|
+
const pick = (product, variant, quantity) => ({
|
|
1841
|
+
productId: product.id,
|
|
1842
|
+
variantId: variant.id,
|
|
1843
|
+
title: product.title,
|
|
1844
|
+
url: `/products/${product.handle}`,
|
|
1845
|
+
variantTitle: variant.title,
|
|
1846
|
+
featuredImage: variant.image?.url ?? product.featuredImage?.url ?? null,
|
|
1847
|
+
price: parseFloat(variant.price.amount),
|
|
1848
|
+
compareAtPrice: variant.compareAtPrice ? parseFloat(variant.compareAtPrice.amount) : null,
|
|
1849
|
+
unitPrice: formatUnitPrice3(
|
|
1850
|
+
variant.unitPrice,
|
|
1851
|
+
variant.unitPriceMeasurement,
|
|
1852
|
+
seedCurrency
|
|
1853
|
+
),
|
|
1854
|
+
quantity
|
|
1855
|
+
});
|
|
1792
1856
|
const seeds = [];
|
|
1793
|
-
for (const
|
|
1794
|
-
|
|
1795
|
-
const
|
|
1796
|
-
|
|
1857
|
+
for (const product of bundle.products) {
|
|
1858
|
+
let seededVariant = false;
|
|
1859
|
+
for (const variant2 of product.variants.nodes) {
|
|
1860
|
+
const vRule = bundle.variantRules[variant2.id];
|
|
1861
|
+
if (!vRule?.required) continue;
|
|
1862
|
+
if (!isVariantFulfillable3(variant2, Math.max(1, vRule.min))) continue;
|
|
1863
|
+
seeds.push(pick(product, variant2, Math.max(1, vRule.min)));
|
|
1864
|
+
seededVariant = true;
|
|
1865
|
+
}
|
|
1866
|
+
if (seededVariant) continue;
|
|
1867
|
+
const rule = bundle.productRules[product.id];
|
|
1868
|
+
if (!rule?.required) continue;
|
|
1869
|
+
const variant = product.variants.nodes.find(
|
|
1797
1870
|
(v) => isVariantFulfillable3(v, rule.min)
|
|
1798
1871
|
);
|
|
1799
|
-
if (!
|
|
1800
|
-
seeds.push(
|
|
1801
|
-
|
|
1802
|
-
|
|
1803
|
-
|
|
1804
|
-
|
|
1805
|
-
|
|
1806
|
-
|
|
1807
|
-
|
|
1808
|
-
|
|
1809
|
-
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
|
|
1872
|
+
if (!variant) continue;
|
|
1873
|
+
seeds.push(pick(product, variant, rule.min));
|
|
1874
|
+
}
|
|
1875
|
+
if (seeds.length === 0 && productHandle) {
|
|
1876
|
+
const requiredUnits2 = bundle.minQuantity ?? 0;
|
|
1877
|
+
const qualifies = (p) => {
|
|
1878
|
+
const min = bundle.productRules[p.id]?.min ?? 1;
|
|
1879
|
+
return min <= requiredUnits2 && p.variants.nodes.some((v) => isVariantFulfillable3(v, min));
|
|
1880
|
+
};
|
|
1881
|
+
const seed = bundle.products.find(
|
|
1882
|
+
(p) => p.handle === productHandle && qualifies(p)
|
|
1883
|
+
) ?? bundle.products.find(qualifies);
|
|
1884
|
+
if (seed) {
|
|
1885
|
+
const min = bundle.productRules[seed.id]?.min ?? 1;
|
|
1886
|
+
const variant = seed.variants.nodes.find(
|
|
1887
|
+
(v) => isVariantFulfillable3(v, min)
|
|
1888
|
+
);
|
|
1889
|
+
if (variant) seeds.push(pick(seed, variant, min));
|
|
1890
|
+
}
|
|
1816
1891
|
}
|
|
1817
1892
|
if (seeds.length > 0) setSelections(seeds);
|
|
1818
|
-
}, [bundle, seededFor]);
|
|
1893
|
+
}, [bundle, seededFor, productHandle]);
|
|
1819
1894
|
const showStepper = bundle?.widgetConfig.mixMatchShowQuantitySelector !== false;
|
|
1820
1895
|
const requiredUnits = bundle?.minQuantity ?? 0;
|
|
1821
1896
|
const totalQuantity = useMemo6(
|
|
@@ -1975,9 +2050,9 @@ function MixMatchBundle(props) {
|
|
|
1975
2050
|
}
|
|
1976
2051
|
}, [bundle, selections, valid, onAddToCart, onError, trackAddToCart, totalQuantity]);
|
|
1977
2052
|
if (result.status === "loading") {
|
|
1978
|
-
return /* @__PURE__ */
|
|
1979
|
-
/* @__PURE__ */
|
|
1980
|
-
/* @__PURE__ */
|
|
2053
|
+
return /* @__PURE__ */ jsxs5("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
|
|
2054
|
+
/* @__PURE__ */ jsx5("div", { className: "lb-skeleton lb-skeleton--title" }),
|
|
2055
|
+
/* @__PURE__ */ jsx5("div", { className: "lb-skeleton lb-skeleton--products" })
|
|
1981
2056
|
] });
|
|
1982
2057
|
}
|
|
1983
2058
|
if (result.status === "error") return null;
|
|
@@ -1996,7 +2071,7 @@ function MixMatchBundle(props) {
|
|
|
1996
2071
|
if (requiredBlocked) return null;
|
|
1997
2072
|
const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
|
|
1998
2073
|
const ctaLabel = addingToCart ? "Adding..." : bundle.widgetConfig.cta.ctaText || "Add to cart";
|
|
1999
|
-
return /* @__PURE__ */
|
|
2074
|
+
return /* @__PURE__ */ jsxs5(
|
|
2000
2075
|
"div",
|
|
2001
2076
|
{
|
|
2002
2077
|
ref: (el) => {
|
|
@@ -2008,12 +2083,19 @@ function MixMatchBundle(props) {
|
|
|
2008
2083
|
"aria-label": bundle.title,
|
|
2009
2084
|
"data-required-quantity": requiredUnits,
|
|
2010
2085
|
children: [
|
|
2011
|
-
/* @__PURE__ */
|
|
2012
|
-
/* @__PURE__ */
|
|
2013
|
-
bundle.description && /* @__PURE__ */
|
|
2086
|
+
/* @__PURE__ */ jsx5("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs5("div", { className: "lb-bundle-header__content", children: [
|
|
2087
|
+
/* @__PURE__ */ jsx5("h3", { className: "lb-bundle-title", children: bundle.title }),
|
|
2088
|
+
bundle.description && /* @__PURE__ */ jsx5("p", { className: "lb-bundle-subtitle", children: bundle.description })
|
|
2014
2089
|
] }) }),
|
|
2015
|
-
/* @__PURE__ */
|
|
2016
|
-
|
|
2090
|
+
/* @__PURE__ */ jsx5(
|
|
2091
|
+
BundleCountdown,
|
|
2092
|
+
{
|
|
2093
|
+
endsAt: bundle.endsAt,
|
|
2094
|
+
widgetConfig: bundle.widgetConfig
|
|
2095
|
+
}
|
|
2096
|
+
),
|
|
2097
|
+
/* @__PURE__ */ jsxs5("div", { className: "lb-mix-match__progress", "data-progress": true, children: [
|
|
2098
|
+
/* @__PURE__ */ jsx5(
|
|
2017
2099
|
"div",
|
|
2018
2100
|
{
|
|
2019
2101
|
className: "lb-mix-match__progress-segments",
|
|
@@ -2021,7 +2103,7 @@ function MixMatchBundle(props) {
|
|
|
2021
2103
|
"aria-valuenow": shownUnits,
|
|
2022
2104
|
"aria-valuemin": 0,
|
|
2023
2105
|
"aria-valuemax": requiredUnits,
|
|
2024
|
-
children: Array.from({ length: requiredUnits }).map((_, i) => /* @__PURE__ */
|
|
2106
|
+
children: Array.from({ length: requiredUnits }).map((_, i) => /* @__PURE__ */ jsx5(
|
|
2025
2107
|
"span",
|
|
2026
2108
|
{
|
|
2027
2109
|
className: `lb-mix-match__progress-segment${i < shownUnits ? " lb-mix-match__progress-segment--filled" : ""}`,
|
|
@@ -2031,8 +2113,8 @@ function MixMatchBundle(props) {
|
|
|
2031
2113
|
))
|
|
2032
2114
|
}
|
|
2033
2115
|
),
|
|
2034
|
-
/* @__PURE__ */
|
|
2035
|
-
/* @__PURE__ */
|
|
2116
|
+
/* @__PURE__ */ jsxs5("div", { className: "lb-mix-match__progress-labels", children: [
|
|
2117
|
+
/* @__PURE__ */ jsx5(
|
|
2036
2118
|
"span",
|
|
2037
2119
|
{
|
|
2038
2120
|
className: "lb-mix-match__progress-count",
|
|
@@ -2041,7 +2123,7 @@ function MixMatchBundle(props) {
|
|
|
2041
2123
|
children: `${shownUnits} of ${requiredUnits} added`
|
|
2042
2124
|
}
|
|
2043
2125
|
),
|
|
2044
|
-
/* @__PURE__ */
|
|
2126
|
+
/* @__PURE__ */ jsx5(
|
|
2045
2127
|
"span",
|
|
2046
2128
|
{
|
|
2047
2129
|
className: "lb-mix-match__progress-remaining",
|
|
@@ -2052,7 +2134,7 @@ function MixMatchBundle(props) {
|
|
|
2052
2134
|
)
|
|
2053
2135
|
] })
|
|
2054
2136
|
] }),
|
|
2055
|
-
/* @__PURE__ */
|
|
2137
|
+
/* @__PURE__ */ jsx5(
|
|
2056
2138
|
"div",
|
|
2057
2139
|
{
|
|
2058
2140
|
className: "lb-mix-match__slots lb-edge-fade",
|
|
@@ -2063,15 +2145,15 @@ function MixMatchBundle(props) {
|
|
|
2063
2145
|
button provides the keyboard/AT path (its activation bubbles
|
|
2064
2146
|
here); × stops propagation. */
|
|
2065
2147
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- keyboard path is the inner "Edit selection" title button whose activation bubbles to this handler
|
|
2066
|
-
/* @__PURE__ */
|
|
2148
|
+
/* @__PURE__ */ jsxs5(
|
|
2067
2149
|
"div",
|
|
2068
2150
|
{
|
|
2069
2151
|
className: "lb-mix-match__slot lb-mix-match__slot--filled",
|
|
2070
2152
|
onClick: () => setPickerOpen(true),
|
|
2071
2153
|
children: [
|
|
2072
|
-
item.featuredImage && /* @__PURE__ */
|
|
2073
|
-
/* @__PURE__ */
|
|
2074
|
-
/* @__PURE__ */
|
|
2154
|
+
item.featuredImage && /* @__PURE__ */ jsx5("div", { className: "lb-bundle-thumbnail", children: /* @__PURE__ */ jsx5("img", { src: item.featuredImage, alt: item.title, loading: "lazy" }) }),
|
|
2155
|
+
/* @__PURE__ */ jsxs5("div", { className: "lb-mix-match__filled-info", children: [
|
|
2156
|
+
/* @__PURE__ */ jsx5(
|
|
2075
2157
|
"button",
|
|
2076
2158
|
{
|
|
2077
2159
|
type: "button",
|
|
@@ -2080,15 +2162,15 @@ function MixMatchBundle(props) {
|
|
|
2080
2162
|
children: item.title
|
|
2081
2163
|
}
|
|
2082
2164
|
),
|
|
2083
|
-
item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */
|
|
2084
|
-
/* @__PURE__ */
|
|
2085
|
-
item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */
|
|
2086
|
-
/* @__PURE__ */
|
|
2087
|
-
/* @__PURE__ */
|
|
2165
|
+
item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ jsx5("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
|
|
2166
|
+
/* @__PURE__ */ jsxs5("span", { className: "lb-mix-match__filled-price", children: [
|
|
2167
|
+
item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ jsx5("s", { className: "lb-mix-match__filled-compare", children: formatMoney3(item.compareAtPrice, currency) }),
|
|
2168
|
+
/* @__PURE__ */ jsx5("span", { className: "lb-bundle-product-price", children: formatMoney3(item.price, currency) }),
|
|
2169
|
+
/* @__PURE__ */ jsx5("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
|
|
2088
2170
|
] }),
|
|
2089
|
-
item.unitPrice && /* @__PURE__ */
|
|
2171
|
+
item.unitPrice && /* @__PURE__ */ jsx5("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
|
|
2090
2172
|
] }),
|
|
2091
|
-
canRemoveItem(bundle, selections, item) ? /* @__PURE__ */
|
|
2173
|
+
canRemoveItem(bundle, selections, item) ? /* @__PURE__ */ jsx5(
|
|
2092
2174
|
"button",
|
|
2093
2175
|
{
|
|
2094
2176
|
type: "button",
|
|
@@ -2098,13 +2180,13 @@ function MixMatchBundle(props) {
|
|
|
2098
2180
|
e.stopPropagation();
|
|
2099
2181
|
removeSlot(index);
|
|
2100
2182
|
},
|
|
2101
|
-
children: /* @__PURE__ */
|
|
2183
|
+
children: /* @__PURE__ */ jsx5(CloseIcon2, {})
|
|
2102
2184
|
}
|
|
2103
2185
|
) : (
|
|
2104
2186
|
/* Required pick at its floor — quiet state chip instead of
|
|
2105
2187
|
the ×; removal returns once another slot covers the
|
|
2106
2188
|
product's minimum (variant swap flow). */
|
|
2107
|
-
/* @__PURE__ */
|
|
2189
|
+
/* @__PURE__ */ jsx5("span", { className: "lb-mix-match__slot-required", children: "Required" })
|
|
2108
2190
|
)
|
|
2109
2191
|
]
|
|
2110
2192
|
},
|
|
@@ -2113,7 +2195,7 @@ function MixMatchBundle(props) {
|
|
|
2113
2195
|
))
|
|
2114
2196
|
}
|
|
2115
2197
|
),
|
|
2116
|
-
totalQuantity < requiredUnits && /* @__PURE__ */
|
|
2198
|
+
totalQuantity < requiredUnits && /* @__PURE__ */ jsxs5(
|
|
2117
2199
|
"button",
|
|
2118
2200
|
{
|
|
2119
2201
|
type: "button",
|
|
@@ -2121,34 +2203,34 @@ function MixMatchBundle(props) {
|
|
|
2121
2203
|
"data-add-product-trigger": true,
|
|
2122
2204
|
onClick: () => setPickerOpen(true),
|
|
2123
2205
|
children: [
|
|
2124
|
-
/* @__PURE__ */
|
|
2125
|
-
/* @__PURE__ */
|
|
2206
|
+
/* @__PURE__ */ jsx5("span", { className: "lb-mix-match__add-product-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx5(PlusIcon, {}) }),
|
|
2207
|
+
/* @__PURE__ */ jsx5("span", { className: "lb-mix-match__add-product-label", children: "Add a product" })
|
|
2126
2208
|
]
|
|
2127
2209
|
}
|
|
2128
2210
|
),
|
|
2129
|
-
/* @__PURE__ */
|
|
2130
|
-
selections.length > 0 && /* @__PURE__ */
|
|
2131
|
-
/* @__PURE__ */
|
|
2132
|
-
/* @__PURE__ */
|
|
2133
|
-
bundle.widgetConfig.savingsBar.visible && summary.savings > 0 && /* @__PURE__ */
|
|
2211
|
+
/* @__PURE__ */ jsx5("div", { className: "lb-bundle-divider" }),
|
|
2212
|
+
selections.length > 0 && /* @__PURE__ */ jsxs5("div", { className: "lb-bundle-summary", "data-pricing-section": true, children: [
|
|
2213
|
+
/* @__PURE__ */ jsxs5("div", { className: "lb-bundle-summary__text", children: [
|
|
2214
|
+
/* @__PURE__ */ jsx5("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
|
|
2215
|
+
bundle.widgetConfig.savingsBar.visible && summary.savings > 0 && /* @__PURE__ */ jsxs5("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
|
|
2134
2216
|
"You save",
|
|
2135
2217
|
" ",
|
|
2136
|
-
/* @__PURE__ */
|
|
2218
|
+
/* @__PURE__ */ jsx5("span", { "data-savings-amount": true, children: formatMoney3(summary.savings, currency) }),
|
|
2137
2219
|
" ",
|
|
2138
|
-
/* @__PURE__ */
|
|
2220
|
+
/* @__PURE__ */ jsxs5("span", { "data-savings-percent": true, children: [
|
|
2139
2221
|
"(",
|
|
2140
2222
|
summary.savingsPercent,
|
|
2141
2223
|
"%)"
|
|
2142
2224
|
] })
|
|
2143
2225
|
] })
|
|
2144
2226
|
] }),
|
|
2145
|
-
/* @__PURE__ */
|
|
2146
|
-
bundle.widgetConfig.pricing.showComparePrice && summary.savings > 0 && /* @__PURE__ */
|
|
2147
|
-
/* @__PURE__ */
|
|
2227
|
+
/* @__PURE__ */ jsxs5("span", { className: "lb-bundle-summary__prices", children: [
|
|
2228
|
+
bundle.widgetConfig.pricing.showComparePrice && summary.savings > 0 && /* @__PURE__ */ jsx5("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney3(summary.comparePrice, currency) }),
|
|
2229
|
+
/* @__PURE__ */ jsx5("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: formatMoney3(summary.salePrice, currency) })
|
|
2148
2230
|
] })
|
|
2149
2231
|
] }),
|
|
2150
|
-
cartError && /* @__PURE__ */
|
|
2151
|
-
/* @__PURE__ */
|
|
2232
|
+
cartError && /* @__PURE__ */ jsx5("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
|
|
2233
|
+
/* @__PURE__ */ jsx5(
|
|
2152
2234
|
"button",
|
|
2153
2235
|
{
|
|
2154
2236
|
className: "lb-bundle__cta",
|
|
@@ -2158,7 +2240,7 @@ function MixMatchBundle(props) {
|
|
|
2158
2240
|
children: ctaLabel
|
|
2159
2241
|
}
|
|
2160
2242
|
),
|
|
2161
|
-
pickerOpen && /* @__PURE__ */
|
|
2243
|
+
pickerOpen && /* @__PURE__ */ jsx5(
|
|
2162
2244
|
MixMatchPicker,
|
|
2163
2245
|
{
|
|
2164
2246
|
outOfStockBehavior,
|
|
@@ -2199,7 +2281,7 @@ function countInStockProducts(bundle) {
|
|
|
2199
2281
|
return count;
|
|
2200
2282
|
}
|
|
2201
2283
|
function PlusIcon() {
|
|
2202
|
-
return /* @__PURE__ */
|
|
2284
|
+
return /* @__PURE__ */ jsxs5(
|
|
2203
2285
|
"svg",
|
|
2204
2286
|
{
|
|
2205
2287
|
width: "18",
|
|
@@ -2209,14 +2291,14 @@ function PlusIcon() {
|
|
|
2209
2291
|
xmlns: "http://www.w3.org/2000/svg",
|
|
2210
2292
|
"aria-hidden": "true",
|
|
2211
2293
|
children: [
|
|
2212
|
-
/* @__PURE__ */
|
|
2213
|
-
/* @__PURE__ */
|
|
2294
|
+
/* @__PURE__ */ jsx5("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
|
|
2295
|
+
/* @__PURE__ */ jsx5("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
|
|
2214
2296
|
]
|
|
2215
2297
|
}
|
|
2216
2298
|
);
|
|
2217
2299
|
}
|
|
2218
2300
|
function CloseIcon2() {
|
|
2219
|
-
return /* @__PURE__ */
|
|
2301
|
+
return /* @__PURE__ */ jsxs5(
|
|
2220
2302
|
"svg",
|
|
2221
2303
|
{
|
|
2222
2304
|
width: "16",
|
|
@@ -2226,25 +2308,28 @@ function CloseIcon2() {
|
|
|
2226
2308
|
xmlns: "http://www.w3.org/2000/svg",
|
|
2227
2309
|
"aria-hidden": "true",
|
|
2228
2310
|
children: [
|
|
2229
|
-
/* @__PURE__ */
|
|
2230
|
-
/* @__PURE__ */
|
|
2311
|
+
/* @__PURE__ */ jsx5("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
|
|
2312
|
+
/* @__PURE__ */ jsx5("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
|
|
2231
2313
|
]
|
|
2232
2314
|
}
|
|
2233
2315
|
);
|
|
2234
2316
|
}
|
|
2235
2317
|
|
|
2236
2318
|
// src/components/VolumeBundle.tsx
|
|
2237
|
-
import { useCallback as useCallback7, useEffect as
|
|
2319
|
+
import { useCallback as useCallback7, useEffect as useEffect13, useMemo as useMemo7, useState as useState10 } from "react";
|
|
2238
2320
|
import {
|
|
2239
2321
|
formatMoney as formatMoney4,
|
|
2240
2322
|
formatUnitPrice as formatUnitPrice4,
|
|
2241
2323
|
calculateTierSavings,
|
|
2242
2324
|
getActiveTier,
|
|
2243
2325
|
getMinTierQuantity,
|
|
2326
|
+
bestValueTierIndex,
|
|
2327
|
+
resolveDefaultTierIndex,
|
|
2328
|
+
resolvePopularTierIndex,
|
|
2244
2329
|
isVariantFulfillable as isVariantFulfillable4,
|
|
2245
2330
|
shouldShowLowStockBadge as shouldShowLowStockBadge2
|
|
2246
2331
|
} from "@lime-bundles/core";
|
|
2247
|
-
import { jsx as
|
|
2332
|
+
import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
2248
2333
|
function VolumeBundle(props) {
|
|
2249
2334
|
const {
|
|
2250
2335
|
shopDomain,
|
|
@@ -2268,13 +2353,30 @@ function VolumeBundle(props) {
|
|
|
2268
2353
|
bundleType: "volume",
|
|
2269
2354
|
enabled: analyticsEnabled !== false
|
|
2270
2355
|
});
|
|
2271
|
-
const [quantity, setQuantity] =
|
|
2272
|
-
const [addingToCart, setAddingToCart] =
|
|
2273
|
-
const [cartError, setCartError] =
|
|
2356
|
+
const [quantity, setQuantity] = useState10(1);
|
|
2357
|
+
const [addingToCart, setAddingToCart] = useState10(false);
|
|
2358
|
+
const [cartError, setCartError] = useState10(null);
|
|
2359
|
+
const [seededFor, setSeededFor] = useState10(null);
|
|
2274
2360
|
const bundle = result.status === "success" && result.bundle.bundleType === "volume" ? result.bundle : null;
|
|
2361
|
+
useEffect13(() => {
|
|
2362
|
+
if (!bundle || seededFor === bundle.id) return;
|
|
2363
|
+
setSeededFor(bundle.id);
|
|
2364
|
+
const tiers = bundle.volumeTiers;
|
|
2365
|
+
if (tiers.length === 0) return;
|
|
2366
|
+
const best = bestValueTierIndex(
|
|
2367
|
+
tiers,
|
|
2368
|
+
bundle.discountConfig.discountType
|
|
2369
|
+
);
|
|
2370
|
+
const idx = resolveDefaultTierIndex(
|
|
2371
|
+
bundle.widgetConfig.defaultTier,
|
|
2372
|
+
tiers.length,
|
|
2373
|
+
best
|
|
2374
|
+
);
|
|
2375
|
+
setQuantity(tiers[idx].minQuantity);
|
|
2376
|
+
}, [bundle, seededFor]);
|
|
2275
2377
|
const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
|
|
2276
2378
|
const tiersEdgeFadeRef = useEdgeFade();
|
|
2277
|
-
|
|
2379
|
+
useEffect13(() => {
|
|
2278
2380
|
if (result.status === "error") {
|
|
2279
2381
|
onError?.(result.error);
|
|
2280
2382
|
return;
|
|
@@ -2317,19 +2419,16 @@ function VolumeBundle(props) {
|
|
|
2317
2419
|
);
|
|
2318
2420
|
const activeTier = bundle ? getActiveTier(bundle.volumeTiers, quantity) : null;
|
|
2319
2421
|
const popularTierIndex = useMemo7(() => {
|
|
2320
|
-
if (!bundle
|
|
2321
|
-
|
|
2322
|
-
|
|
2323
|
-
|
|
2324
|
-
|
|
2325
|
-
|
|
2326
|
-
|
|
2327
|
-
|
|
2328
|
-
|
|
2329
|
-
|
|
2330
|
-
}
|
|
2331
|
-
return best;
|
|
2332
|
-
}, [bundle, tierSavings]);
|
|
2422
|
+
if (!bundle || bundle.volumeTiers.length === 0) return -1;
|
|
2423
|
+
return resolvePopularTierIndex(
|
|
2424
|
+
bundle.widgetConfig.popularBadge.tierIndex,
|
|
2425
|
+
bundle.widgetConfig.popularBadge.visible !== false,
|
|
2426
|
+
bestValueTierIndex(
|
|
2427
|
+
bundle.volumeTiers,
|
|
2428
|
+
bundle.discountConfig.discountType
|
|
2429
|
+
)
|
|
2430
|
+
);
|
|
2431
|
+
}, [bundle]);
|
|
2333
2432
|
const activeUnitPrice = tierSavings.find((ts) => ts.tier === activeTier)?.unitPrice ?? basePrice;
|
|
2334
2433
|
const undiscountedTotal = basePrice * quantity;
|
|
2335
2434
|
const volumeTotal = activeUnitPrice * quantity;
|
|
@@ -2381,15 +2480,15 @@ function VolumeBundle(props) {
|
|
|
2381
2480
|
tierSavings
|
|
2382
2481
|
]);
|
|
2383
2482
|
if (result.status === "loading") {
|
|
2384
|
-
return /* @__PURE__ */
|
|
2385
|
-
/* @__PURE__ */
|
|
2386
|
-
/* @__PURE__ */
|
|
2483
|
+
return /* @__PURE__ */ jsxs6("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
|
|
2484
|
+
/* @__PURE__ */ jsx6("div", { className: "lb-skeleton lb-skeleton--title" }),
|
|
2485
|
+
/* @__PURE__ */ jsx6("div", { className: "lb-skeleton lb-skeleton--tiers" })
|
|
2387
2486
|
] });
|
|
2388
2487
|
}
|
|
2389
2488
|
if (result.status === "error") return null;
|
|
2390
2489
|
if (!bundle) return null;
|
|
2391
2490
|
if (!product) return null;
|
|
2392
|
-
return /* @__PURE__ */
|
|
2491
|
+
return /* @__PURE__ */ jsxs6(
|
|
2393
2492
|
"div",
|
|
2394
2493
|
{
|
|
2395
2494
|
ref: (el) => {
|
|
@@ -2400,12 +2499,19 @@ function VolumeBundle(props) {
|
|
|
2400
2499
|
role: "region",
|
|
2401
2500
|
"aria-label": bundle.title,
|
|
2402
2501
|
children: [
|
|
2403
|
-
/* @__PURE__ */
|
|
2404
|
-
/* @__PURE__ */
|
|
2405
|
-
bundle.description && /* @__PURE__ */
|
|
2502
|
+
/* @__PURE__ */ jsx6("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs6("div", { className: "lb-bundle-header__content", children: [
|
|
2503
|
+
/* @__PURE__ */ jsx6("h3", { className: "lb-bundle-title", children: bundle.title }),
|
|
2504
|
+
bundle.description && /* @__PURE__ */ jsx6("p", { className: "lb-bundle-subtitle", children: bundle.description })
|
|
2406
2505
|
] }) }),
|
|
2407
|
-
/* @__PURE__ */
|
|
2408
|
-
|
|
2506
|
+
/* @__PURE__ */ jsx6(
|
|
2507
|
+
BundleCountdown,
|
|
2508
|
+
{
|
|
2509
|
+
endsAt: bundle.endsAt,
|
|
2510
|
+
widgetConfig: bundle.widgetConfig
|
|
2511
|
+
}
|
|
2512
|
+
),
|
|
2513
|
+
/* @__PURE__ */ jsxs6("div", { className: "lb-bundle-product-row lb-bundle-product-row--volume", children: [
|
|
2514
|
+
thumbImage && /* @__PURE__ */ jsx6(
|
|
2409
2515
|
"img",
|
|
2410
2516
|
{
|
|
2411
2517
|
src: thumbImage.url,
|
|
@@ -2414,20 +2520,20 @@ function VolumeBundle(props) {
|
|
|
2414
2520
|
loading: "lazy"
|
|
2415
2521
|
}
|
|
2416
2522
|
),
|
|
2417
|
-
/* @__PURE__ */
|
|
2418
|
-
/* @__PURE__ */
|
|
2419
|
-
/* @__PURE__ */
|
|
2523
|
+
/* @__PURE__ */ jsxs6("div", { className: "lb-bundle__product-info", children: [
|
|
2524
|
+
/* @__PURE__ */ jsx6("p", { className: "lb-bundle__product-title", children: product.title }),
|
|
2525
|
+
/* @__PURE__ */ jsxs6("p", { className: "lb-bundle__product-price", children: [
|
|
2420
2526
|
formatMoney4(basePrice, currency),
|
|
2421
2527
|
" each"
|
|
2422
2528
|
] }),
|
|
2423
|
-
unitPriceText && /* @__PURE__ */
|
|
2424
|
-
showPicker && /* @__PURE__ */
|
|
2529
|
+
unitPriceText && /* @__PURE__ */ jsx6("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }),
|
|
2530
|
+
showPicker && /* @__PURE__ */ jsx6("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
|
|
2425
2531
|
const dropdownOptions = optionsFor(optionIndex).map((o) => ({
|
|
2426
2532
|
value: o.value,
|
|
2427
2533
|
label: o.value,
|
|
2428
2534
|
disabled: o.disabled
|
|
2429
2535
|
}));
|
|
2430
|
-
return /* @__PURE__ */
|
|
2536
|
+
return /* @__PURE__ */ jsx6(
|
|
2431
2537
|
VariantDropdown,
|
|
2432
2538
|
{
|
|
2433
2539
|
options: dropdownOptions,
|
|
@@ -2440,37 +2546,47 @@ function VolumeBundle(props) {
|
|
|
2440
2546
|
}) })
|
|
2441
2547
|
] })
|
|
2442
2548
|
] }),
|
|
2443
|
-
/* @__PURE__ */
|
|
2549
|
+
/* @__PURE__ */ jsx6(
|
|
2444
2550
|
"div",
|
|
2445
2551
|
{
|
|
2446
2552
|
className: "lb-bundle__tiers lb-edge-fade",
|
|
2447
|
-
role: "
|
|
2448
|
-
"aria-label": "
|
|
2553
|
+
role: "radiogroup",
|
|
2554
|
+
"aria-label": "Select quantity",
|
|
2449
2555
|
ref: tiersEdgeFadeRef,
|
|
2450
2556
|
children: tierSavings.map((ts, tierIndex) => {
|
|
2451
2557
|
const savingsPercent = Math.round(ts.savingsPercent);
|
|
2452
2558
|
const showCompare = bundle.widgetConfig.pricing.showComparePrice && ts.savings > 0;
|
|
2453
|
-
|
|
2559
|
+
const isChecked = activeTier === ts.tier;
|
|
2560
|
+
return /* @__PURE__ */ jsxs6(
|
|
2454
2561
|
"div",
|
|
2455
2562
|
{
|
|
2456
2563
|
className: `lb-bundle__tier ${ts.isActive ? "lb-bundle__tier--active" : ""}`,
|
|
2457
|
-
role: "
|
|
2564
|
+
role: "radio",
|
|
2565
|
+
"aria-checked": isChecked,
|
|
2566
|
+
tabIndex: isChecked ? 0 : -1,
|
|
2567
|
+
onClick: () => setQuantity(ts.tier.minQuantity),
|
|
2568
|
+
onKeyDown: (e) => {
|
|
2569
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
2570
|
+
e.preventDefault();
|
|
2571
|
+
setQuantity(ts.tier.minQuantity);
|
|
2572
|
+
}
|
|
2573
|
+
},
|
|
2458
2574
|
children: [
|
|
2459
|
-
/* @__PURE__ */
|
|
2460
|
-
/* @__PURE__ */
|
|
2461
|
-
/* @__PURE__ */
|
|
2575
|
+
/* @__PURE__ */ jsx6("span", { className: "lb-bundle__tier-radio", "aria-hidden": "true", children: /* @__PURE__ */ jsx6("span", { className: "lb-bundle__tier-radio-dot" }) }),
|
|
2576
|
+
/* @__PURE__ */ jsxs6("span", { className: "lb-bundle__tier-info", children: [
|
|
2577
|
+
/* @__PURE__ */ jsxs6("span", { className: "lb-bundle__tier-label", children: [
|
|
2462
2578
|
"Buy ",
|
|
2463
2579
|
ts.tier.minQuantity
|
|
2464
2580
|
] }),
|
|
2465
|
-
/* @__PURE__ */
|
|
2466
|
-
showCompare && /* @__PURE__ */
|
|
2467
|
-
/* @__PURE__ */
|
|
2468
|
-
/* @__PURE__ */
|
|
2581
|
+
/* @__PURE__ */ jsxs6("span", { className: "lb-bundle__tier-price", children: [
|
|
2582
|
+
showCompare && /* @__PURE__ */ jsx6("span", { className: "lb-bundle__tier-compare", children: formatMoney4(basePrice, currency) }),
|
|
2583
|
+
/* @__PURE__ */ jsx6("span", { children: formatMoney4(ts.unitPrice, currency) }),
|
|
2584
|
+
/* @__PURE__ */ jsx6("span", { className: "lb-bundle__tier-unit", children: "each" })
|
|
2469
2585
|
] })
|
|
2470
2586
|
] }),
|
|
2471
|
-
(tierIndex === popularTierIndex || savingsPercent > 0) && /* @__PURE__ */
|
|
2472
|
-
tierIndex === popularTierIndex && /* @__PURE__ */
|
|
2473
|
-
savingsPercent > 0 && /* @__PURE__ */
|
|
2587
|
+
(tierIndex === popularTierIndex || savingsPercent > 0) && /* @__PURE__ */ jsxs6("span", { className: "lb-bundle__tier-right", children: [
|
|
2588
|
+
tierIndex === popularTierIndex && /* @__PURE__ */ jsx6("span", { className: "lb-bundle__tier-badge", children: bundle.widgetConfig.popularBadge.text }),
|
|
2589
|
+
savingsPercent > 0 && /* @__PURE__ */ jsxs6("span", { className: "lb-bundle__tier-savings", children: [
|
|
2474
2590
|
"Save ",
|
|
2475
2591
|
savingsPercent,
|
|
2476
2592
|
"%"
|
|
@@ -2483,10 +2599,10 @@ function VolumeBundle(props) {
|
|
|
2483
2599
|
})
|
|
2484
2600
|
}
|
|
2485
2601
|
),
|
|
2486
|
-
/* @__PURE__ */
|
|
2487
|
-
/* @__PURE__ */
|
|
2488
|
-
/* @__PURE__ */
|
|
2489
|
-
/* @__PURE__ */
|
|
2602
|
+
/* @__PURE__ */ jsxs6("div", { className: "lb-bundle__quantity-selector", children: [
|
|
2603
|
+
/* @__PURE__ */ jsx6("label", { htmlFor: `lb-qty-${bundle.id}`, children: "Quantity" }),
|
|
2604
|
+
/* @__PURE__ */ jsxs6("div", { className: "lb-bundle__quantity-control", children: [
|
|
2605
|
+
/* @__PURE__ */ jsx6(
|
|
2490
2606
|
"button",
|
|
2491
2607
|
{
|
|
2492
2608
|
"aria-label": "Decrease quantity",
|
|
@@ -2494,7 +2610,7 @@ function VolumeBundle(props) {
|
|
|
2494
2610
|
children: "\u2212"
|
|
2495
2611
|
}
|
|
2496
2612
|
),
|
|
2497
|
-
/* @__PURE__ */
|
|
2613
|
+
/* @__PURE__ */ jsx6(
|
|
2498
2614
|
"input",
|
|
2499
2615
|
{
|
|
2500
2616
|
id: `lb-qty-${bundle.id}`,
|
|
@@ -2508,7 +2624,7 @@ function VolumeBundle(props) {
|
|
|
2508
2624
|
className: "lb-bundle__quantity-input"
|
|
2509
2625
|
}
|
|
2510
2626
|
),
|
|
2511
|
-
/* @__PURE__ */
|
|
2627
|
+
/* @__PURE__ */ jsx6(
|
|
2512
2628
|
"button",
|
|
2513
2629
|
{
|
|
2514
2630
|
"aria-label": "Increase quantity",
|
|
@@ -2518,23 +2634,23 @@ function VolumeBundle(props) {
|
|
|
2518
2634
|
)
|
|
2519
2635
|
] })
|
|
2520
2636
|
] }),
|
|
2521
|
-
cartError && /* @__PURE__ */
|
|
2637
|
+
cartError && /* @__PURE__ */ jsx6("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
|
|
2522
2638
|
bundle && displayVariant && shouldShowLowStockBadge2(
|
|
2523
2639
|
displayVariant,
|
|
2524
2640
|
minTierQty,
|
|
2525
2641
|
bundle.widgetConfig.lowStockThreshold,
|
|
2526
2642
|
bundle.widgetConfig.showLowStockBadge
|
|
2527
|
-
) && /* @__PURE__ */
|
|
2643
|
+
) && /* @__PURE__ */ jsxs6("span", { className: "lb-bundle-low-stock-badge", children: [
|
|
2528
2644
|
"Only ",
|
|
2529
2645
|
displayVariant.quantityAvailable,
|
|
2530
2646
|
" left"
|
|
2531
2647
|
] }),
|
|
2532
|
-
/* @__PURE__ */
|
|
2533
|
-
/* @__PURE__ */
|
|
2534
|
-
/* @__PURE__ */
|
|
2535
|
-
/* @__PURE__ */
|
|
2648
|
+
/* @__PURE__ */ jsx6("div", { className: "lb-bundle-divider" }),
|
|
2649
|
+
/* @__PURE__ */ jsxs6("div", { className: "lb-bundle-summary", children: [
|
|
2650
|
+
/* @__PURE__ */ jsxs6("div", { className: "lb-bundle-summary__text", children: [
|
|
2651
|
+
/* @__PURE__ */ jsxs6("span", { className: "lb-bundle-summary__label", "data-total-label": true, children: [
|
|
2536
2652
|
"Total",
|
|
2537
|
-
bundle.widgetConfig.pricing.showItemCount && /* @__PURE__ */
|
|
2653
|
+
bundle.widgetConfig.pricing.showItemCount && /* @__PURE__ */ jsxs6("span", { "data-item-count": true, children: [
|
|
2538
2654
|
" ",
|
|
2539
2655
|
"(",
|
|
2540
2656
|
quantity,
|
|
@@ -2543,24 +2659,24 @@ function VolumeBundle(props) {
|
|
|
2543
2659
|
")"
|
|
2544
2660
|
] })
|
|
2545
2661
|
] }),
|
|
2546
|
-
bundle.widgetConfig.savingsBar.visible && volumeSavings > 0 && /* @__PURE__ */
|
|
2662
|
+
bundle.widgetConfig.savingsBar.visible && volumeSavings > 0 && /* @__PURE__ */ jsxs6("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
|
|
2547
2663
|
"You save",
|
|
2548
2664
|
" ",
|
|
2549
|
-
/* @__PURE__ */
|
|
2665
|
+
/* @__PURE__ */ jsx6("span", { "data-savings-amount": true, children: formatMoney4(volumeSavings, currency) }),
|
|
2550
2666
|
" ",
|
|
2551
|
-
/* @__PURE__ */
|
|
2667
|
+
/* @__PURE__ */ jsxs6("span", { "data-savings-percent": true, children: [
|
|
2552
2668
|
"(",
|
|
2553
2669
|
volumeSavingsPercent,
|
|
2554
2670
|
"%)"
|
|
2555
2671
|
] })
|
|
2556
2672
|
] })
|
|
2557
2673
|
] }),
|
|
2558
|
-
/* @__PURE__ */
|
|
2559
|
-
bundle.widgetConfig.pricing.showComparePrice && volumeSavings > 0 && /* @__PURE__ */
|
|
2560
|
-
/* @__PURE__ */
|
|
2674
|
+
/* @__PURE__ */ jsxs6("span", { className: "lb-bundle-summary__prices", children: [
|
|
2675
|
+
bundle.widgetConfig.pricing.showComparePrice && volumeSavings > 0 && /* @__PURE__ */ jsx6("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney4(undiscountedTotal, currency) }),
|
|
2676
|
+
/* @__PURE__ */ jsx6("span", { className: "lb-bundle-sale-price", "data-total-price": true, children: formatMoney4(volumeTotal, currency) })
|
|
2561
2677
|
] })
|
|
2562
2678
|
] }),
|
|
2563
|
-
/* @__PURE__ */
|
|
2679
|
+
/* @__PURE__ */ jsx6(
|
|
2564
2680
|
"button",
|
|
2565
2681
|
{
|
|
2566
2682
|
className: "lb-bundle__cta",
|
|
@@ -2576,13 +2692,13 @@ function VolumeBundle(props) {
|
|
|
2576
2692
|
}
|
|
2577
2693
|
|
|
2578
2694
|
// src/components/BogoBundle.tsx
|
|
2579
|
-
import { useCallback as useCallback8, useEffect as
|
|
2695
|
+
import { useCallback as useCallback8, useEffect as useEffect14, useMemo as useMemo8, useState as useState11 } from "react";
|
|
2580
2696
|
import {
|
|
2581
2697
|
formatMoney as formatMoney5,
|
|
2582
2698
|
formatUnitPrice as formatUnitPrice5,
|
|
2583
2699
|
isVariantFulfillable as isVariantFulfillable5
|
|
2584
2700
|
} from "@lime-bundles/core";
|
|
2585
|
-
import { jsx as
|
|
2701
|
+
import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
2586
2702
|
function discountedUnit(price, percent) {
|
|
2587
2703
|
const cents = Math.round(price * 100);
|
|
2588
2704
|
const discounted = cents - Math.floor(cents * percent / 100);
|
|
@@ -2611,9 +2727,9 @@ function BogoBundle(props) {
|
|
|
2611
2727
|
bundleType: "bogo",
|
|
2612
2728
|
enabled: analyticsEnabled !== false
|
|
2613
2729
|
});
|
|
2614
|
-
const [addingToCart, setAddingToCart] =
|
|
2615
|
-
const [cartError, setCartError] =
|
|
2616
|
-
const [selectedVariants, setSelectedVariants] =
|
|
2730
|
+
const [addingToCart, setAddingToCart] = useState11(false);
|
|
2731
|
+
const [cartError, setCartError] = useState11(null);
|
|
2732
|
+
const [selectedVariants, setSelectedVariants] = useState11({ buy: null, get: null });
|
|
2617
2733
|
const handleVariantChange = useCallback8(
|
|
2618
2734
|
(role, variant) => {
|
|
2619
2735
|
setSelectedVariants((prev) => {
|
|
@@ -2625,7 +2741,7 @@ function BogoBundle(props) {
|
|
|
2625
2741
|
);
|
|
2626
2742
|
const bundle = result.status === "success" && result.bundle.bundleType === "bogo" ? result.bundle : null;
|
|
2627
2743
|
const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
|
|
2628
|
-
|
|
2744
|
+
useEffect14(() => {
|
|
2629
2745
|
if (result.status === "error") {
|
|
2630
2746
|
onError?.(result.error);
|
|
2631
2747
|
return;
|
|
@@ -2706,9 +2822,9 @@ function BogoBundle(props) {
|
|
|
2706
2822
|
}
|
|
2707
2823
|
}, [bundle, buyProduct, getProduct, selectedVariants, resolveVariant, onAddToCart, onError, trackAddToCart, percent]);
|
|
2708
2824
|
if (result.status === "loading") {
|
|
2709
|
-
return /* @__PURE__ */
|
|
2710
|
-
/* @__PURE__ */
|
|
2711
|
-
/* @__PURE__ */
|
|
2825
|
+
return /* @__PURE__ */ jsxs7("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
|
|
2826
|
+
/* @__PURE__ */ jsx7("div", { className: "lb-skeleton lb-skeleton--title" }),
|
|
2827
|
+
/* @__PURE__ */ jsx7("div", { className: "lb-skeleton lb-skeleton--products" })
|
|
2712
2828
|
] });
|
|
2713
2829
|
}
|
|
2714
2830
|
if (result.status === "error") return null;
|
|
@@ -2725,7 +2841,7 @@ function BogoBundle(props) {
|
|
|
2725
2841
|
const showCompare = bundle.widgetConfig.pricing.showComparePrice && savings > 0;
|
|
2726
2842
|
const showSavings = bundle.widgetConfig.savingsBar.visible && savings > 0;
|
|
2727
2843
|
const badge = percent === 100 ? "Free" : `${percent}% off`;
|
|
2728
|
-
return /* @__PURE__ */
|
|
2844
|
+
return /* @__PURE__ */ jsxs7(
|
|
2729
2845
|
"div",
|
|
2730
2846
|
{
|
|
2731
2847
|
ref: (el) => {
|
|
@@ -2736,12 +2852,19 @@ function BogoBundle(props) {
|
|
|
2736
2852
|
role: "region",
|
|
2737
2853
|
"aria-label": bundle.title,
|
|
2738
2854
|
children: [
|
|
2739
|
-
/* @__PURE__ */
|
|
2740
|
-
/* @__PURE__ */
|
|
2741
|
-
bundle.description && /* @__PURE__ */
|
|
2855
|
+
/* @__PURE__ */ jsx7("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs7("div", { className: "lb-bundle-header__content", children: [
|
|
2856
|
+
/* @__PURE__ */ jsx7("h3", { className: "lb-bundle-title", children: bundle.title }),
|
|
2857
|
+
bundle.description && /* @__PURE__ */ jsx7("p", { className: "lb-bundle-subtitle", children: bundle.description })
|
|
2742
2858
|
] }) }),
|
|
2743
|
-
/* @__PURE__ */
|
|
2744
|
-
|
|
2859
|
+
/* @__PURE__ */ jsx7(
|
|
2860
|
+
BundleCountdown,
|
|
2861
|
+
{
|
|
2862
|
+
endsAt: bundle.endsAt,
|
|
2863
|
+
widgetConfig: bundle.widgetConfig
|
|
2864
|
+
}
|
|
2865
|
+
),
|
|
2866
|
+
/* @__PURE__ */ jsxs7("div", { className: "lb-bundle__products", children: [
|
|
2867
|
+
/* @__PURE__ */ jsx7(
|
|
2745
2868
|
BogoProductRow,
|
|
2746
2869
|
{
|
|
2747
2870
|
side: "buy",
|
|
@@ -2753,11 +2876,11 @@ function BogoBundle(props) {
|
|
|
2753
2876
|
onVariantChange: handleVariantChange
|
|
2754
2877
|
}
|
|
2755
2878
|
),
|
|
2756
|
-
/* @__PURE__ */
|
|
2757
|
-
/* @__PURE__ */
|
|
2758
|
-
/* @__PURE__ */
|
|
2879
|
+
/* @__PURE__ */ jsx7("div", { className: "lb-bogo__plus", "aria-hidden": "true", children: /* @__PURE__ */ jsxs7("svg", { width: "12", height: "12", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
2880
|
+
/* @__PURE__ */ jsx7("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
|
|
2881
|
+
/* @__PURE__ */ jsx7("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
|
|
2759
2882
|
] }) }),
|
|
2760
|
-
/* @__PURE__ */
|
|
2883
|
+
/* @__PURE__ */ jsx7(
|
|
2761
2884
|
BogoProductRow,
|
|
2762
2885
|
{
|
|
2763
2886
|
side: "get",
|
|
@@ -2770,29 +2893,29 @@ function BogoBundle(props) {
|
|
|
2770
2893
|
}
|
|
2771
2894
|
)
|
|
2772
2895
|
] }),
|
|
2773
|
-
/* @__PURE__ */
|
|
2774
|
-
/* @__PURE__ */
|
|
2775
|
-
/* @__PURE__ */
|
|
2776
|
-
/* @__PURE__ */
|
|
2777
|
-
showSavings && /* @__PURE__ */
|
|
2896
|
+
/* @__PURE__ */ jsx7("div", { className: "lb-bundle-divider" }),
|
|
2897
|
+
/* @__PURE__ */ jsxs7("div", { className: "lb-bundle-summary", children: [
|
|
2898
|
+
/* @__PURE__ */ jsxs7("div", { className: "lb-bundle-summary__text", children: [
|
|
2899
|
+
/* @__PURE__ */ jsx7("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
|
|
2900
|
+
showSavings && /* @__PURE__ */ jsxs7("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
|
|
2778
2901
|
"You save",
|
|
2779
2902
|
" ",
|
|
2780
|
-
/* @__PURE__ */
|
|
2903
|
+
/* @__PURE__ */ jsx7("span", { "data-savings-amount": true, children: formatMoney5(savings, currency) }),
|
|
2781
2904
|
" ",
|
|
2782
|
-
/* @__PURE__ */
|
|
2905
|
+
/* @__PURE__ */ jsxs7("span", { "data-savings-percent": true, children: [
|
|
2783
2906
|
"(",
|
|
2784
2907
|
savingsPercent,
|
|
2785
2908
|
"%)"
|
|
2786
2909
|
] })
|
|
2787
2910
|
] })
|
|
2788
2911
|
] }),
|
|
2789
|
-
/* @__PURE__ */
|
|
2790
|
-
showCompare && /* @__PURE__ */
|
|
2791
|
-
/* @__PURE__ */
|
|
2912
|
+
/* @__PURE__ */ jsxs7("span", { className: "lb-bundle-summary__prices", children: [
|
|
2913
|
+
showCompare && /* @__PURE__ */ jsx7("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney5(comparePrice, currency) }),
|
|
2914
|
+
/* @__PURE__ */ jsx7("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: formatMoney5(salePrice, currency) })
|
|
2792
2915
|
] })
|
|
2793
2916
|
] }),
|
|
2794
|
-
cartError && /* @__PURE__ */
|
|
2795
|
-
/* @__PURE__ */
|
|
2917
|
+
cartError && /* @__PURE__ */ jsx7("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
|
|
2918
|
+
/* @__PURE__ */ jsx7(
|
|
2796
2919
|
"button",
|
|
2797
2920
|
{
|
|
2798
2921
|
className: "lb-bundle__cta",
|
|
@@ -2817,7 +2940,7 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
|
|
|
2817
2940
|
variants,
|
|
2818
2941
|
optionNames
|
|
2819
2942
|
});
|
|
2820
|
-
|
|
2943
|
+
useEffect14(() => {
|
|
2821
2944
|
onVariantChange(side, selectedVariant ?? null);
|
|
2822
2945
|
}, [selectedVariant, side, onVariantChange]);
|
|
2823
2946
|
const displayVariant = selectedVariant ?? variants.find((v) => isVariantFulfillable5(v, quantity)) ?? variants[0];
|
|
@@ -2831,8 +2954,8 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
|
|
|
2831
2954
|
currency
|
|
2832
2955
|
) : null;
|
|
2833
2956
|
const thumbImage = displayVariant?.image ?? product.featuredImage;
|
|
2834
|
-
return /* @__PURE__ */
|
|
2835
|
-
thumbImage && /* @__PURE__ */
|
|
2957
|
+
return /* @__PURE__ */ jsxs7("div", { className: "lb-bundle-product-row", part: "product", "data-bogo-role": side, children: [
|
|
2958
|
+
thumbImage && /* @__PURE__ */ jsx7(
|
|
2836
2959
|
"img",
|
|
2837
2960
|
{
|
|
2838
2961
|
src: thumbImage.url,
|
|
@@ -2841,11 +2964,11 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
|
|
|
2841
2964
|
loading: "lazy"
|
|
2842
2965
|
}
|
|
2843
2966
|
),
|
|
2844
|
-
/* @__PURE__ */
|
|
2845
|
-
/* @__PURE__ */
|
|
2846
|
-
!showPicker && displayVariant && variants.length > 1 && /* @__PURE__ */
|
|
2847
|
-
/* @__PURE__ */
|
|
2848
|
-
compareAt && /* @__PURE__ */
|
|
2967
|
+
/* @__PURE__ */ jsxs7("div", { className: "lb-bundle__product-info", children: [
|
|
2968
|
+
/* @__PURE__ */ jsx7("p", { className: "lb-bundle__product-title", children: product.title }),
|
|
2969
|
+
!showPicker && displayVariant && variants.length > 1 && /* @__PURE__ */ jsx7("span", { className: "lb-bundle-variant-badge", children: displayVariant.title }),
|
|
2970
|
+
/* @__PURE__ */ jsxs7("span", { className: "lb-bundle-product-prices", children: [
|
|
2971
|
+
compareAt && /* @__PURE__ */ jsx7(
|
|
2849
2972
|
"span",
|
|
2850
2973
|
{
|
|
2851
2974
|
className: "lb-bundle-product-compare-price",
|
|
@@ -2853,13 +2976,13 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
|
|
|
2853
2976
|
children: compareAt
|
|
2854
2977
|
}
|
|
2855
2978
|
),
|
|
2856
|
-
/* @__PURE__ */
|
|
2857
|
-
/* @__PURE__ */
|
|
2979
|
+
/* @__PURE__ */ jsx7("span", { className: "lb-bundle__product-price", "data-product-price": true, children: priceText }),
|
|
2980
|
+
/* @__PURE__ */ jsxs7("span", { className: "lb-bundle-qty-inline", "data-qty-inline": true, children: [
|
|
2858
2981
|
"\xD7",
|
|
2859
2982
|
quantity
|
|
2860
2983
|
] })
|
|
2861
2984
|
] }),
|
|
2862
|
-
unitPriceText && /* @__PURE__ */
|
|
2985
|
+
unitPriceText && /* @__PURE__ */ jsx7(
|
|
2863
2986
|
"span",
|
|
2864
2987
|
{
|
|
2865
2988
|
className: "lb-bundle__product-unit-price",
|
|
@@ -2867,13 +2990,13 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
|
|
|
2867
2990
|
children: unitPriceText
|
|
2868
2991
|
}
|
|
2869
2992
|
),
|
|
2870
|
-
showPicker && /* @__PURE__ */
|
|
2993
|
+
showPicker && /* @__PURE__ */ jsx7("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
|
|
2871
2994
|
const dropdownOptions = optionsFor(optionIndex).map((o) => ({
|
|
2872
2995
|
value: o.value,
|
|
2873
2996
|
label: o.value,
|
|
2874
2997
|
disabled: o.disabled
|
|
2875
2998
|
}));
|
|
2876
|
-
return /* @__PURE__ */
|
|
2999
|
+
return /* @__PURE__ */ jsx7(
|
|
2877
3000
|
VariantDropdown,
|
|
2878
3001
|
{
|
|
2879
3002
|
options: dropdownOptions,
|
|
@@ -2885,12 +3008,12 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
|
|
|
2885
3008
|
);
|
|
2886
3009
|
}) })
|
|
2887
3010
|
] }),
|
|
2888
|
-
badge && /* @__PURE__ */
|
|
3011
|
+
badge && /* @__PURE__ */ jsx7("span", { className: "lb-bogo__badge", children: badge })
|
|
2889
3012
|
] });
|
|
2890
3013
|
}
|
|
2891
3014
|
|
|
2892
3015
|
// src/components/MultiStepBundle.tsx
|
|
2893
|
-
import { useCallback as useCallback9, useEffect as
|
|
3016
|
+
import { useCallback as useCallback9, useEffect as useEffect16, useMemo as useMemo10, useState as useState13 } from "react";
|
|
2894
3017
|
import {
|
|
2895
3018
|
formatMoney as formatMoney7,
|
|
2896
3019
|
formatUnitPrice as formatUnitPrice7,
|
|
@@ -2903,10 +3026,10 @@ import {
|
|
|
2903
3026
|
|
|
2904
3027
|
// src/components/MultiStepPicker.tsx
|
|
2905
3028
|
import {
|
|
2906
|
-
useEffect as
|
|
3029
|
+
useEffect as useEffect15,
|
|
2907
3030
|
useMemo as useMemo9,
|
|
2908
3031
|
useRef as useRef7,
|
|
2909
|
-
useState as
|
|
3032
|
+
useState as useState12
|
|
2910
3033
|
} from "react";
|
|
2911
3034
|
import { createPortal as createPortal2 } from "react-dom";
|
|
2912
3035
|
import {
|
|
@@ -2918,7 +3041,7 @@ import {
|
|
|
2918
3041
|
stepHeadroom,
|
|
2919
3042
|
DEFAULT_PRODUCT_RULE as DEFAULT_PRODUCT_RULE3
|
|
2920
3043
|
} from "@lime-bundles/core";
|
|
2921
|
-
import { jsx as
|
|
3044
|
+
import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
2922
3045
|
function ruleFor3(bundle, productId, variantId) {
|
|
2923
3046
|
if (variantId) {
|
|
2924
3047
|
const vRule = bundle.variantRules[variantId];
|
|
@@ -2976,13 +3099,13 @@ function MultiStepPicker({
|
|
|
2976
3099
|
const dialogRef = useRef7(null);
|
|
2977
3100
|
const titleRef = useRef7(null);
|
|
2978
3101
|
const mouseDownTarget = useRef7(null);
|
|
2979
|
-
const [open, setOpen] =
|
|
2980
|
-
const [stepIndex, setStepIndex] =
|
|
3102
|
+
const [open, setOpen] = useState12(false);
|
|
3103
|
+
const [stepIndex, setStepIndex] = useState12(
|
|
2981
3104
|
() => Math.max(0, Math.min(steps.length - 1, initialStep))
|
|
2982
3105
|
);
|
|
2983
|
-
const [query, setQuery] =
|
|
2984
|
-
const [activeType, setActiveType] =
|
|
2985
|
-
const [announcement, setAnnouncement] =
|
|
3106
|
+
const [query, setQuery] = useState12("");
|
|
3107
|
+
const [activeType, setActiveType] = useState12(FILTERS_ALL2);
|
|
3108
|
+
const [announcement, setAnnouncement] = useState12("");
|
|
2986
3109
|
const step = steps[stepIndex];
|
|
2987
3110
|
const stepMin = step?.minQuantity ?? 1;
|
|
2988
3111
|
const stepPicks = selections[stepIndex] ?? [];
|
|
@@ -3007,7 +3130,7 @@ function MultiStepPicker({
|
|
|
3007
3130
|
return types;
|
|
3008
3131
|
}, [eligible]);
|
|
3009
3132
|
const showFilters = wc.mixMatchShowTypeFilters && productTypes.length >= 2;
|
|
3010
|
-
|
|
3133
|
+
useEffect15(() => {
|
|
3011
3134
|
const id = requestAnimationFrame(() => setOpen(true));
|
|
3012
3135
|
return () => cancelAnimationFrame(id);
|
|
3013
3136
|
}, []);
|
|
@@ -3056,7 +3179,7 @@ function MultiStepPicker({
|
|
|
3056
3179
|
// inside carries the interactive role + focus trap. So the static-element
|
|
3057
3180
|
// interaction lint does not apply to this backdrop.
|
|
3058
3181
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
3059
|
-
/* @__PURE__ */
|
|
3182
|
+
/* @__PURE__ */ jsx8(
|
|
3060
3183
|
"div",
|
|
3061
3184
|
{
|
|
3062
3185
|
ref: (el) => {
|
|
@@ -3068,7 +3191,7 @@ function MultiStepPicker({
|
|
|
3068
3191
|
"data-bundle-gid": bundle.id,
|
|
3069
3192
|
onMouseDown: onOverlayMouseDown,
|
|
3070
3193
|
onMouseUp: onOverlayMouseUp,
|
|
3071
|
-
children: /* @__PURE__ */
|
|
3194
|
+
children: /* @__PURE__ */ jsxs8(
|
|
3072
3195
|
"div",
|
|
3073
3196
|
{
|
|
3074
3197
|
ref: dialogRef,
|
|
@@ -3078,10 +3201,10 @@ function MultiStepPicker({
|
|
|
3078
3201
|
"aria-labelledby": titleId,
|
|
3079
3202
|
tabIndex: -1,
|
|
3080
3203
|
children: [
|
|
3081
|
-
/* @__PURE__ */
|
|
3082
|
-
/* @__PURE__ */
|
|
3083
|
-
/* @__PURE__ */
|
|
3084
|
-
/* @__PURE__ */
|
|
3204
|
+
/* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__modal-header", children: [
|
|
3205
|
+
/* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__modal-header-top", children: [
|
|
3206
|
+
/* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__modal-heading", children: [
|
|
3207
|
+
/* @__PURE__ */ jsx8(
|
|
3085
3208
|
"h4",
|
|
3086
3209
|
{
|
|
3087
3210
|
className: "lb-mix-match__modal-title",
|
|
@@ -3091,9 +3214,9 @@ function MultiStepPicker({
|
|
|
3091
3214
|
children: "Add to your bundle"
|
|
3092
3215
|
}
|
|
3093
3216
|
),
|
|
3094
|
-
/* @__PURE__ */
|
|
3217
|
+
/* @__PURE__ */ jsx8("p", { className: "lb-mix-match__modal-subtitle", "data-modal-subtitle": true, children: subtitle })
|
|
3095
3218
|
] }),
|
|
3096
|
-
/* @__PURE__ */
|
|
3219
|
+
/* @__PURE__ */ jsx8(
|
|
3097
3220
|
"button",
|
|
3098
3221
|
{
|
|
3099
3222
|
type: "button",
|
|
@@ -3101,16 +3224,16 @@ function MultiStepPicker({
|
|
|
3101
3224
|
"data-modal-close": true,
|
|
3102
3225
|
"aria-label": "Close",
|
|
3103
3226
|
onClick: onClose,
|
|
3104
|
-
children: /* @__PURE__ */
|
|
3227
|
+
children: /* @__PURE__ */ jsx8(CloseIcon3, {})
|
|
3105
3228
|
}
|
|
3106
3229
|
)
|
|
3107
3230
|
] }),
|
|
3108
|
-
/* @__PURE__ */
|
|
3231
|
+
/* @__PURE__ */ jsx8(
|
|
3109
3232
|
"div",
|
|
3110
3233
|
{
|
|
3111
3234
|
className: "lb-mix-match__progress lb-mix-match__modal-progress",
|
|
3112
3235
|
"data-progress": true,
|
|
3113
|
-
children: /* @__PURE__ */
|
|
3236
|
+
children: /* @__PURE__ */ jsx8(
|
|
3114
3237
|
"div",
|
|
3115
3238
|
{
|
|
3116
3239
|
className: "lb-mix-match__progress-segments",
|
|
@@ -3119,7 +3242,7 @@ function MultiStepPicker({
|
|
|
3119
3242
|
"aria-valuenow": shownUnits,
|
|
3120
3243
|
"aria-valuemin": 0,
|
|
3121
3244
|
"aria-valuemax": stepMin,
|
|
3122
|
-
children: Array.from({ length: stepMin }).map((_, i) => /* @__PURE__ */
|
|
3245
|
+
children: Array.from({ length: stepMin }).map((_, i) => /* @__PURE__ */ jsx8(
|
|
3123
3246
|
"span",
|
|
3124
3247
|
{
|
|
3125
3248
|
className: `lb-mix-match__progress-segment${i < shownUnits ? " lb-mix-match__progress-segment--filled" : ""}`,
|
|
@@ -3132,8 +3255,8 @@ function MultiStepPicker({
|
|
|
3132
3255
|
}
|
|
3133
3256
|
)
|
|
3134
3257
|
] }),
|
|
3135
|
-
wc.showSearch && /* @__PURE__ */
|
|
3136
|
-
/* @__PURE__ */
|
|
3258
|
+
wc.showSearch && /* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__modal-search", children: [
|
|
3259
|
+
/* @__PURE__ */ jsx8(
|
|
3137
3260
|
"input",
|
|
3138
3261
|
{
|
|
3139
3262
|
type: "text",
|
|
@@ -3147,7 +3270,7 @@ function MultiStepPicker({
|
|
|
3147
3270
|
onChange: (e) => setQuery(e.target.value)
|
|
3148
3271
|
}
|
|
3149
3272
|
),
|
|
3150
|
-
query.length > 0 && /* @__PURE__ */
|
|
3273
|
+
query.length > 0 && /* @__PURE__ */ jsx8(
|
|
3151
3274
|
"button",
|
|
3152
3275
|
{
|
|
3153
3276
|
type: "button",
|
|
@@ -3155,11 +3278,11 @@ function MultiStepPicker({
|
|
|
3155
3278
|
"data-modal-search-clear": true,
|
|
3156
3279
|
"aria-label": "Clear search",
|
|
3157
3280
|
onClick: () => setQuery(""),
|
|
3158
|
-
children: /* @__PURE__ */
|
|
3281
|
+
children: /* @__PURE__ */ jsx8(SearchClearIcon2, {})
|
|
3159
3282
|
}
|
|
3160
3283
|
)
|
|
3161
3284
|
] }),
|
|
3162
|
-
showFilters && /* @__PURE__ */
|
|
3285
|
+
showFilters && /* @__PURE__ */ jsx8(
|
|
3163
3286
|
"div",
|
|
3164
3287
|
{
|
|
3165
3288
|
className: "lb-mix-match__filters",
|
|
@@ -3168,7 +3291,7 @@ function MultiStepPicker({
|
|
|
3168
3291
|
"aria-label": "Filter by product type",
|
|
3169
3292
|
children: [FILTERS_ALL2, ...productTypes].map((value) => {
|
|
3170
3293
|
const isActive = value === activeType;
|
|
3171
|
-
return /* @__PURE__ */
|
|
3294
|
+
return /* @__PURE__ */ jsx8(
|
|
3172
3295
|
"button",
|
|
3173
3296
|
{
|
|
3174
3297
|
type: "button",
|
|
@@ -3183,7 +3306,7 @@ function MultiStepPicker({
|
|
|
3183
3306
|
})
|
|
3184
3307
|
}
|
|
3185
3308
|
),
|
|
3186
|
-
/* @__PURE__ */
|
|
3309
|
+
/* @__PURE__ */ jsx8("div", { className: "lb-mix-match__modal-list", "data-modal-list": true, children: filtered.map((ep) => /* @__PURE__ */ jsx8(
|
|
3187
3310
|
MultiStepPickerRow,
|
|
3188
3311
|
{
|
|
3189
3312
|
bundle,
|
|
@@ -3201,10 +3324,10 @@ function MultiStepPicker({
|
|
|
3201
3324
|
},
|
|
3202
3325
|
`${stepIndex}:${ep.product.id}`
|
|
3203
3326
|
)) }),
|
|
3204
|
-
showEmpty && /* @__PURE__ */
|
|
3205
|
-
/* @__PURE__ */
|
|
3206
|
-
/* @__PURE__ */
|
|
3207
|
-
stepIndex > 0 && /* @__PURE__ */
|
|
3327
|
+
showEmpty && /* @__PURE__ */ jsx8("div", { className: "lb-mix-match__modal-empty", "data-modal-empty": true, children: /* @__PURE__ */ jsx8("p", { children: "No products match your search" }) }),
|
|
3328
|
+
/* @__PURE__ */ jsx8("span", { "data-modal-live": true, "aria-live": "polite", className: "lb-visually-hidden", children: announcement || (query.trim() ? `${filtered.length} products shown` : "") }),
|
|
3329
|
+
/* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__modal-footer lb-multi-step__modal-footer", children: [
|
|
3330
|
+
stepIndex > 0 && /* @__PURE__ */ jsx8(
|
|
3208
3331
|
"button",
|
|
3209
3332
|
{
|
|
3210
3333
|
type: "button",
|
|
@@ -3214,7 +3337,7 @@ function MultiStepPicker({
|
|
|
3214
3337
|
children: "Back"
|
|
3215
3338
|
}
|
|
3216
3339
|
),
|
|
3217
|
-
/* @__PURE__ */
|
|
3340
|
+
/* @__PURE__ */ jsx8(
|
|
3218
3341
|
"span",
|
|
3219
3342
|
{
|
|
3220
3343
|
className: "lb-mix-match__modal-footer-count",
|
|
@@ -3223,7 +3346,7 @@ function MultiStepPicker({
|
|
|
3223
3346
|
children: `${shownUnits} of ${stepMin} added`
|
|
3224
3347
|
}
|
|
3225
3348
|
),
|
|
3226
|
-
!isLastStep && /* @__PURE__ */
|
|
3349
|
+
!isLastStep && /* @__PURE__ */ jsx8(
|
|
3227
3350
|
"button",
|
|
3228
3351
|
{
|
|
3229
3352
|
type: "button",
|
|
@@ -3236,7 +3359,7 @@ function MultiStepPicker({
|
|
|
3236
3359
|
children: "Next"
|
|
3237
3360
|
}
|
|
3238
3361
|
),
|
|
3239
|
-
isLastStep && /* @__PURE__ */
|
|
3362
|
+
isLastStep && /* @__PURE__ */ jsx8(
|
|
3240
3363
|
"button",
|
|
3241
3364
|
{
|
|
3242
3365
|
type: "button",
|
|
@@ -3330,12 +3453,12 @@ function MultiStepPickerRow({
|
|
|
3330
3453
|
const stockRemaining = currentVariant ? maxAddableQuantity2(currentVariant, Number.MAX_SAFE_INTEGER, variantOtherUnits) : 0;
|
|
3331
3454
|
const cap = Math.max(0, Math.min(spotCeiling, stockRemaining));
|
|
3332
3455
|
const stepperMax = Math.max(vRule.min, cap);
|
|
3333
|
-
const [qty, setQty] =
|
|
3334
|
-
|
|
3456
|
+
const [qty, setQty] = useState12(vRule.min);
|
|
3457
|
+
useEffect15(() => {
|
|
3335
3458
|
setQty((prev) => Math.max(vRule.min, Math.min(prev, stepperMax)));
|
|
3336
3459
|
}, [stepperMax, vRule.min]);
|
|
3337
3460
|
const currentVariantId = currentVariant?.id ?? null;
|
|
3338
|
-
|
|
3461
|
+
useEffect15(() => {
|
|
3339
3462
|
if (!variantInStep) setQty(vRule.min);
|
|
3340
3463
|
}, [variantInStep, currentVariantId, vRule.min]);
|
|
3341
3464
|
if (!currentVariant || !step) return null;
|
|
@@ -3379,7 +3502,7 @@ function MultiStepPickerRow({
|
|
|
3379
3502
|
}
|
|
3380
3503
|
const priceCents = parseFloat(currentVariant.price.amount);
|
|
3381
3504
|
const compareCents = currentVariant.compareAtPrice ? parseFloat(currentVariant.compareAtPrice.amount) : null;
|
|
3382
|
-
return /* @__PURE__ */
|
|
3505
|
+
return /* @__PURE__ */ jsxs8(
|
|
3383
3506
|
"div",
|
|
3384
3507
|
{
|
|
3385
3508
|
className: `lb-mix-match__modal-product${isOos ? " lb-mix-match__modal-product--sold-out" : ""}${variantInStep ? " lb-mix-match__modal-product--in-bundle" : ""}`,
|
|
@@ -3388,8 +3511,8 @@ function MultiStepPickerRow({
|
|
|
3388
3511
|
"data-type": product.productType ?? "",
|
|
3389
3512
|
"aria-disabled": isOos || void 0,
|
|
3390
3513
|
children: [
|
|
3391
|
-
/* @__PURE__ */
|
|
3392
|
-
thumbImage && /* @__PURE__ */
|
|
3514
|
+
/* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__modal-product-thumb", children: [
|
|
3515
|
+
thumbImage && /* @__PURE__ */ jsx8(
|
|
3393
3516
|
"img",
|
|
3394
3517
|
{
|
|
3395
3518
|
src: thumbImage.url,
|
|
@@ -3397,10 +3520,10 @@ function MultiStepPickerRow({
|
|
|
3397
3520
|
loading: "lazy"
|
|
3398
3521
|
}
|
|
3399
3522
|
),
|
|
3400
|
-
variantInStep && /* @__PURE__ */
|
|
3523
|
+
variantInStep && /* @__PURE__ */ jsx8("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
|
|
3401
3524
|
] }),
|
|
3402
|
-
/* @__PURE__ */
|
|
3403
|
-
/* @__PURE__ */
|
|
3525
|
+
/* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__modal-product-info", children: [
|
|
3526
|
+
/* @__PURE__ */ jsx8("p", { className: "lb-mix-match__modal-product-title", children: /* @__PURE__ */ jsx8(
|
|
3404
3527
|
"a",
|
|
3405
3528
|
{
|
|
3406
3529
|
href: `/products/${product.handle}`,
|
|
@@ -3409,24 +3532,24 @@ function MultiStepPickerRow({
|
|
|
3409
3532
|
children: product.title
|
|
3410
3533
|
}
|
|
3411
3534
|
) }),
|
|
3412
|
-
/* @__PURE__ */
|
|
3413
|
-
/* @__PURE__ */
|
|
3414
|
-
compareCents !== null && compareCents > priceCents && /* @__PURE__ */
|
|
3535
|
+
/* @__PURE__ */ jsxs8("p", { className: "lb-mix-match__modal-product-price", children: [
|
|
3536
|
+
/* @__PURE__ */ jsx8("span", { "data-row-price-sale": true, children: formatMoney6(priceCents, currency) }),
|
|
3537
|
+
compareCents !== null && compareCents > priceCents && /* @__PURE__ */ jsx8("s", { className: "lb-mix-match__modal-product-compare", "data-row-compare": true, children: formatMoney6(compareCents, currency) })
|
|
3415
3538
|
] }),
|
|
3416
|
-
unitPriceText && /* @__PURE__ */
|
|
3417
|
-
showPicker && /* @__PURE__ */
|
|
3539
|
+
unitPriceText && /* @__PURE__ */ jsx8("p", { className: "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price", children: unitPriceText }),
|
|
3540
|
+
showPicker && /* @__PURE__ */ jsx8("div", { className: "lb-bundle-variant-option-groups", children: optionNames.map((optionName, optionIndex) => {
|
|
3418
3541
|
const dropdownOptions = optionsFor(optionIndex).map((o) => ({
|
|
3419
3542
|
value: o.value,
|
|
3420
3543
|
label: o.value,
|
|
3421
3544
|
disabled: o.disabled
|
|
3422
3545
|
}));
|
|
3423
|
-
return /* @__PURE__ */
|
|
3546
|
+
return /* @__PURE__ */ jsxs8(
|
|
3424
3547
|
"div",
|
|
3425
3548
|
{
|
|
3426
3549
|
className: "lb-bundle-variant-option-group",
|
|
3427
3550
|
children: [
|
|
3428
|
-
/* @__PURE__ */
|
|
3429
|
-
/* @__PURE__ */
|
|
3551
|
+
/* @__PURE__ */ jsx8("span", { className: "lb-bundle-variant-option-label", children: optionName }),
|
|
3552
|
+
/* @__PURE__ */ jsx8(
|
|
3430
3553
|
VariantDropdown,
|
|
3431
3554
|
{
|
|
3432
3555
|
className: "lb-mix-match__variant-select-dropdown",
|
|
@@ -3441,17 +3564,17 @@ function MultiStepPickerRow({
|
|
|
3441
3564
|
optionName
|
|
3442
3565
|
);
|
|
3443
3566
|
}) }),
|
|
3444
|
-
!showPicker && variants.length === 1 && currentVariant.title !== "Default Title" && /* @__PURE__ */
|
|
3445
|
-
!isOos && needsMoreSpots && room > 0 && /* @__PURE__ */
|
|
3446
|
-
isOos ? /* @__PURE__ */
|
|
3447
|
-
showStepper && /* @__PURE__ */
|
|
3567
|
+
!showPicker && variants.length === 1 && currentVariant.title !== "Default Title" && /* @__PURE__ */ jsx8("span", { className: "lb-mix-match__filled-variant", children: currentVariant.title }),
|
|
3568
|
+
!isOos && needsMoreSpots && room > 0 && /* @__PURE__ */ jsx8("span", { className: "lb-mix-match__modal-needs-spots", children: vRule.min === 1 ? "Needs 1 spot" : `Needs ${vRule.min} spots` }),
|
|
3569
|
+
isOos ? /* @__PURE__ */ jsx8("span", { className: "lb-mix-match__modal-sold-out-label", children: "Sold out" }) : /* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__modal-product-actions", children: [
|
|
3570
|
+
showStepper && /* @__PURE__ */ jsx8("div", { className: "lb-bundle-variant-option-group lb-mix-match__qty-stepper-group", children: /* @__PURE__ */ jsxs8(
|
|
3448
3571
|
"div",
|
|
3449
3572
|
{
|
|
3450
3573
|
className: "lb-mix-match__qty-stepper",
|
|
3451
3574
|
role: "group",
|
|
3452
3575
|
"aria-label": "Quantity",
|
|
3453
3576
|
children: [
|
|
3454
|
-
/* @__PURE__ */
|
|
3577
|
+
/* @__PURE__ */ jsx8(
|
|
3455
3578
|
"button",
|
|
3456
3579
|
{
|
|
3457
3580
|
type: "button",
|
|
@@ -3473,7 +3596,7 @@ function MultiStepPickerRow({
|
|
|
3473
3596
|
children: "\u2212"
|
|
3474
3597
|
}
|
|
3475
3598
|
),
|
|
3476
|
-
/* @__PURE__ */
|
|
3599
|
+
/* @__PURE__ */ jsx8(
|
|
3477
3600
|
"span",
|
|
3478
3601
|
{
|
|
3479
3602
|
className: "lb-mix-match__qty-stepper-value",
|
|
@@ -3482,7 +3605,7 @@ function MultiStepPickerRow({
|
|
|
3482
3605
|
children: shownQty
|
|
3483
3606
|
}
|
|
3484
3607
|
),
|
|
3485
|
-
/* @__PURE__ */
|
|
3608
|
+
/* @__PURE__ */ jsx8(
|
|
3486
3609
|
"button",
|
|
3487
3610
|
{
|
|
3488
3611
|
type: "button",
|
|
@@ -3507,7 +3630,7 @@ function MultiStepPickerRow({
|
|
|
3507
3630
|
]
|
|
3508
3631
|
}
|
|
3509
3632
|
) }),
|
|
3510
|
-
/* @__PURE__ */
|
|
3633
|
+
/* @__PURE__ */ jsx8(
|
|
3511
3634
|
"button",
|
|
3512
3635
|
{
|
|
3513
3636
|
type: "button",
|
|
@@ -3526,7 +3649,7 @@ function MultiStepPickerRow({
|
|
|
3526
3649
|
);
|
|
3527
3650
|
}
|
|
3528
3651
|
function CloseIcon3() {
|
|
3529
|
-
return /* @__PURE__ */
|
|
3652
|
+
return /* @__PURE__ */ jsxs8(
|
|
3530
3653
|
"svg",
|
|
3531
3654
|
{
|
|
3532
3655
|
width: "20",
|
|
@@ -3536,14 +3659,14 @@ function CloseIcon3() {
|
|
|
3536
3659
|
xmlns: "http://www.w3.org/2000/svg",
|
|
3537
3660
|
"aria-hidden": "true",
|
|
3538
3661
|
children: [
|
|
3539
|
-
/* @__PURE__ */
|
|
3540
|
-
/* @__PURE__ */
|
|
3662
|
+
/* @__PURE__ */ jsx8("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
|
|
3663
|
+
/* @__PURE__ */ jsx8("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
|
|
3541
3664
|
]
|
|
3542
3665
|
}
|
|
3543
3666
|
);
|
|
3544
3667
|
}
|
|
3545
3668
|
function SearchClearIcon2() {
|
|
3546
|
-
return /* @__PURE__ */
|
|
3669
|
+
return /* @__PURE__ */ jsx8(
|
|
3547
3670
|
"svg",
|
|
3548
3671
|
{
|
|
3549
3672
|
width: "16",
|
|
@@ -3552,13 +3675,13 @@ function SearchClearIcon2() {
|
|
|
3552
3675
|
fill: "currentColor",
|
|
3553
3676
|
xmlns: "http://www.w3.org/2000/svg",
|
|
3554
3677
|
"aria-hidden": "true",
|
|
3555
|
-
children: /* @__PURE__ */
|
|
3678
|
+
children: /* @__PURE__ */ jsx8("path", { d: "M14.348 5.652a.5.5 0 0 0-.707 0L10 9.293 6.36 5.652a.5.5 0 1 0-.708.707L9.293 10l-3.641 3.641a.5.5 0 0 0 .708.707L10 10.707l3.641 3.641a.5.5 0 0 0 .707-.707L10.707 10l3.641-3.641a.5.5 0 0 0 0-.707z" })
|
|
3556
3679
|
}
|
|
3557
3680
|
);
|
|
3558
3681
|
}
|
|
3559
3682
|
|
|
3560
3683
|
// src/components/MultiStepBundle.tsx
|
|
3561
|
-
import { jsx as
|
|
3684
|
+
import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
3562
3685
|
function ruleFor4(bundle, productId, variantId) {
|
|
3563
3686
|
if (variantId) {
|
|
3564
3687
|
const vRule = bundle.variantRules[variantId];
|
|
@@ -3617,14 +3740,14 @@ function MultiStepBundle(props) {
|
|
|
3617
3740
|
bundleType: "multi_step",
|
|
3618
3741
|
enabled: analyticsEnabled !== false
|
|
3619
3742
|
});
|
|
3620
|
-
const [selections, setSelections] =
|
|
3621
|
-
const [pickerOpenAt, setPickerOpenAt] =
|
|
3622
|
-
const [addingToCart, setAddingToCart] =
|
|
3623
|
-
const [cartError, setCartError] =
|
|
3743
|
+
const [selections, setSelections] = useState13([]);
|
|
3744
|
+
const [pickerOpenAt, setPickerOpenAt] = useState13(null);
|
|
3745
|
+
const [addingToCart, setAddingToCart] = useState13(false);
|
|
3746
|
+
const [cartError, setCartError] = useState13(null);
|
|
3624
3747
|
const bundle = result.status === "success" && result.bundle.bundleType === "multi_step" ? result.bundle : null;
|
|
3625
3748
|
const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
|
|
3626
3749
|
const setModalConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
|
|
3627
|
-
|
|
3750
|
+
useEffect16(() => {
|
|
3628
3751
|
if (result.status === "error") {
|
|
3629
3752
|
onError?.(result.error);
|
|
3630
3753
|
return;
|
|
@@ -3638,7 +3761,7 @@ function MultiStepBundle(props) {
|
|
|
3638
3761
|
}
|
|
3639
3762
|
}, [result, onError]);
|
|
3640
3763
|
const steps = useMemo10(() => bundle?.steps ?? [], [bundle]);
|
|
3641
|
-
|
|
3764
|
+
useEffect16(() => {
|
|
3642
3765
|
const seeded = steps.map(() => []);
|
|
3643
3766
|
if (bundle) {
|
|
3644
3767
|
const seedCurrency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
|
|
@@ -3848,9 +3971,9 @@ function MultiStepBundle(props) {
|
|
|
3848
3971
|
}
|
|
3849
3972
|
}, [bundle, selections, valid, onAddToCart, onError, trackAddToCart, totalQuantity, steps]);
|
|
3850
3973
|
if (result.status === "loading") {
|
|
3851
|
-
return /* @__PURE__ */
|
|
3852
|
-
/* @__PURE__ */
|
|
3853
|
-
/* @__PURE__ */
|
|
3974
|
+
return /* @__PURE__ */ jsxs9("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
|
|
3975
|
+
/* @__PURE__ */ jsx9("div", { className: "lb-skeleton lb-skeleton--title" }),
|
|
3976
|
+
/* @__PURE__ */ jsx9("div", { className: "lb-skeleton lb-skeleton--products" })
|
|
3854
3977
|
] });
|
|
3855
3978
|
}
|
|
3856
3979
|
if (result.status === "error") return null;
|
|
@@ -3871,7 +3994,7 @@ function MultiStepBundle(props) {
|
|
|
3871
3994
|
if (requiredBlocked) return null;
|
|
3872
3995
|
const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
|
|
3873
3996
|
const ctaLabel = addingToCart ? "Adding..." : bundle.widgetConfig.cta.ctaText || "Add to cart";
|
|
3874
|
-
return /* @__PURE__ */
|
|
3997
|
+
return /* @__PURE__ */ jsxs9(
|
|
3875
3998
|
"div",
|
|
3876
3999
|
{
|
|
3877
4000
|
ref: (el) => {
|
|
@@ -3883,12 +4006,19 @@ function MultiStepBundle(props) {
|
|
|
3883
4006
|
"aria-label": bundle.title,
|
|
3884
4007
|
"data-required-quantity": totalMin,
|
|
3885
4008
|
children: [
|
|
3886
|
-
/* @__PURE__ */
|
|
3887
|
-
/* @__PURE__ */
|
|
3888
|
-
bundle.description && /* @__PURE__ */
|
|
4009
|
+
/* @__PURE__ */ jsx9("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs9("div", { className: "lb-bundle-header__content", children: [
|
|
4010
|
+
/* @__PURE__ */ jsx9("h3", { className: "lb-bundle-title", children: bundle.title }),
|
|
4011
|
+
bundle.description && /* @__PURE__ */ jsx9("p", { className: "lb-bundle-subtitle", children: bundle.description })
|
|
3889
4012
|
] }) }),
|
|
3890
|
-
/* @__PURE__ */
|
|
3891
|
-
|
|
4013
|
+
/* @__PURE__ */ jsx9(
|
|
4014
|
+
BundleCountdown,
|
|
4015
|
+
{
|
|
4016
|
+
endsAt: bundle.endsAt,
|
|
4017
|
+
widgetConfig: bundle.widgetConfig
|
|
4018
|
+
}
|
|
4019
|
+
),
|
|
4020
|
+
/* @__PURE__ */ jsxs9("div", { className: "lb-mix-match__progress", "data-progress": true, children: [
|
|
4021
|
+
/* @__PURE__ */ jsx9(
|
|
3892
4022
|
"div",
|
|
3893
4023
|
{
|
|
3894
4024
|
className: "lb-mix-match__progress-segments",
|
|
@@ -3896,7 +4026,7 @@ function MultiStepBundle(props) {
|
|
|
3896
4026
|
"aria-valuenow": completedSteps,
|
|
3897
4027
|
"aria-valuemin": 0,
|
|
3898
4028
|
"aria-valuemax": steps.length,
|
|
3899
|
-
children: Array.from({ length: steps.length }).map((_, i) => /* @__PURE__ */
|
|
4029
|
+
children: Array.from({ length: steps.length }).map((_, i) => /* @__PURE__ */ jsx9(
|
|
3900
4030
|
"span",
|
|
3901
4031
|
{
|
|
3902
4032
|
className: `lb-mix-match__progress-segment${i < completedSteps ? " lb-mix-match__progress-segment--filled" : ""}`,
|
|
@@ -3906,8 +4036,8 @@ function MultiStepBundle(props) {
|
|
|
3906
4036
|
))
|
|
3907
4037
|
}
|
|
3908
4038
|
),
|
|
3909
|
-
/* @__PURE__ */
|
|
3910
|
-
/* @__PURE__ */
|
|
4039
|
+
/* @__PURE__ */ jsxs9("div", { className: "lb-mix-match__progress-labels", children: [
|
|
4040
|
+
/* @__PURE__ */ jsx9(
|
|
3911
4041
|
"span",
|
|
3912
4042
|
{
|
|
3913
4043
|
className: "lb-mix-match__progress-count",
|
|
@@ -3916,7 +4046,7 @@ function MultiStepBundle(props) {
|
|
|
3916
4046
|
children: `${completedSteps} of ${steps.length} steps completed`
|
|
3917
4047
|
}
|
|
3918
4048
|
),
|
|
3919
|
-
/* @__PURE__ */
|
|
4049
|
+
/* @__PURE__ */ jsx9(
|
|
3920
4050
|
"span",
|
|
3921
4051
|
{
|
|
3922
4052
|
className: "lb-mix-match__progress-remaining",
|
|
@@ -3927,15 +4057,15 @@ function MultiStepBundle(props) {
|
|
|
3927
4057
|
)
|
|
3928
4058
|
] })
|
|
3929
4059
|
] }),
|
|
3930
|
-
/* @__PURE__ */
|
|
4060
|
+
/* @__PURE__ */ jsx9("div", { className: "lb-multi-step__groups", "data-step-groups": true, children: steps.map((step, i) => /* @__PURE__ */ jsxs9(
|
|
3931
4061
|
"section",
|
|
3932
4062
|
{
|
|
3933
4063
|
className: "lb-multi-step__group",
|
|
3934
4064
|
"data-step-group": i,
|
|
3935
4065
|
children: [
|
|
3936
|
-
/* @__PURE__ */
|
|
3937
|
-
/* @__PURE__ */
|
|
3938
|
-
/* @__PURE__ */
|
|
4066
|
+
/* @__PURE__ */ jsxs9("div", { className: "lb-multi-step__group-heading", children: [
|
|
4067
|
+
/* @__PURE__ */ jsx9("span", { className: "lb-multi-step__group-name", children: step.name }),
|
|
4068
|
+
/* @__PURE__ */ jsx9(
|
|
3939
4069
|
"span",
|
|
3940
4070
|
{
|
|
3941
4071
|
className: `lb-multi-step__group-count${stepSatisfied(i) ? " lb-multi-step__group-count--met" : ""}`,
|
|
@@ -3944,7 +4074,7 @@ function MultiStepBundle(props) {
|
|
|
3944
4074
|
}
|
|
3945
4075
|
)
|
|
3946
4076
|
] }),
|
|
3947
|
-
/* @__PURE__ */
|
|
4077
|
+
/* @__PURE__ */ jsx9(
|
|
3948
4078
|
"div",
|
|
3949
4079
|
{
|
|
3950
4080
|
className: "lb-mix-match__slots lb-edge-fade lb-multi-step__group-slots",
|
|
@@ -3954,13 +4084,13 @@ function MultiStepBundle(props) {
|
|
|
3954
4084
|
title button provides the keyboard/AT path (its
|
|
3955
4085
|
activation bubbles here); × stops propagation. */
|
|
3956
4086
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- keyboard path is the inner "Edit selection" title button whose activation bubbles to this handler
|
|
3957
|
-
/* @__PURE__ */
|
|
4087
|
+
/* @__PURE__ */ jsxs9(
|
|
3958
4088
|
"div",
|
|
3959
4089
|
{
|
|
3960
4090
|
className: "lb-mix-match__slot lb-mix-match__slot--filled",
|
|
3961
4091
|
onClick: () => setPickerOpenAt(i),
|
|
3962
4092
|
children: [
|
|
3963
|
-
item.featuredImage && /* @__PURE__ */
|
|
4093
|
+
item.featuredImage && /* @__PURE__ */ jsx9("div", { className: "lb-bundle-thumbnail", children: /* @__PURE__ */ jsx9(
|
|
3964
4094
|
"img",
|
|
3965
4095
|
{
|
|
3966
4096
|
src: item.featuredImage,
|
|
@@ -3968,8 +4098,8 @@ function MultiStepBundle(props) {
|
|
|
3968
4098
|
loading: "lazy"
|
|
3969
4099
|
}
|
|
3970
4100
|
) }),
|
|
3971
|
-
/* @__PURE__ */
|
|
3972
|
-
/* @__PURE__ */
|
|
4101
|
+
/* @__PURE__ */ jsxs9("div", { className: "lb-mix-match__filled-info", children: [
|
|
4102
|
+
/* @__PURE__ */ jsx9(
|
|
3973
4103
|
"button",
|
|
3974
4104
|
{
|
|
3975
4105
|
type: "button",
|
|
@@ -3978,15 +4108,15 @@ function MultiStepBundle(props) {
|
|
|
3978
4108
|
children: item.title
|
|
3979
4109
|
}
|
|
3980
4110
|
),
|
|
3981
|
-
item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */
|
|
3982
|
-
/* @__PURE__ */
|
|
3983
|
-
item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */
|
|
3984
|
-
/* @__PURE__ */
|
|
3985
|
-
/* @__PURE__ */
|
|
4111
|
+
item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ jsx9("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
|
|
4112
|
+
/* @__PURE__ */ jsxs9("span", { className: "lb-mix-match__filled-price", children: [
|
|
4113
|
+
item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ jsx9("s", { className: "lb-mix-match__filled-compare", children: formatMoney7(item.compareAtPrice, currency) }),
|
|
4114
|
+
/* @__PURE__ */ jsx9("span", { className: "lb-bundle-product-price", children: formatMoney7(item.price, currency) }),
|
|
4115
|
+
/* @__PURE__ */ jsx9("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
|
|
3986
4116
|
] }),
|
|
3987
|
-
item.unitPrice && /* @__PURE__ */
|
|
4117
|
+
item.unitPrice && /* @__PURE__ */ jsx9("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
|
|
3988
4118
|
] }),
|
|
3989
|
-
canRemoveItem2(bundle, selections, item) ? /* @__PURE__ */
|
|
4119
|
+
canRemoveItem2(bundle, selections, item) ? /* @__PURE__ */ jsx9(
|
|
3990
4120
|
"button",
|
|
3991
4121
|
{
|
|
3992
4122
|
type: "button",
|
|
@@ -3996,13 +4126,13 @@ function MultiStepBundle(props) {
|
|
|
3996
4126
|
e.stopPropagation();
|
|
3997
4127
|
removeSlot(i, index);
|
|
3998
4128
|
},
|
|
3999
|
-
children: /* @__PURE__ */
|
|
4129
|
+
children: /* @__PURE__ */ jsx9(CloseIcon4, {})
|
|
4000
4130
|
}
|
|
4001
4131
|
) : (
|
|
4002
4132
|
/* Required pick at its floor — quiet state chip instead
|
|
4003
4133
|
of the ×; removal returns once another slot covers
|
|
4004
4134
|
the product's minimum (variant swap flow). */
|
|
4005
|
-
/* @__PURE__ */
|
|
4135
|
+
/* @__PURE__ */ jsx9("span", { className: "lb-mix-match__slot-required", children: "Required" })
|
|
4006
4136
|
)
|
|
4007
4137
|
]
|
|
4008
4138
|
},
|
|
@@ -4011,7 +4141,7 @@ function MultiStepBundle(props) {
|
|
|
4011
4141
|
))
|
|
4012
4142
|
}
|
|
4013
4143
|
),
|
|
4014
|
-
stepHeadroom2(step.maxQuantity, unitsByStep[i] ?? 0) !== 0 && /* @__PURE__ */
|
|
4144
|
+
stepHeadroom2(step.maxQuantity, unitsByStep[i] ?? 0) !== 0 && /* @__PURE__ */ jsxs9(
|
|
4015
4145
|
"button",
|
|
4016
4146
|
{
|
|
4017
4147
|
type: "button",
|
|
@@ -4020,15 +4150,15 @@ function MultiStepBundle(props) {
|
|
|
4020
4150
|
"aria-label": `${step.minQuantity === 1 && step.maxQuantity === 1 ? "Choose a product" : "Choose products"}: ${step.name}`,
|
|
4021
4151
|
onClick: () => setPickerOpenAt(i),
|
|
4022
4152
|
children: [
|
|
4023
|
-
/* @__PURE__ */
|
|
4153
|
+
/* @__PURE__ */ jsx9(
|
|
4024
4154
|
"span",
|
|
4025
4155
|
{
|
|
4026
4156
|
className: "lb-mix-match__add-product-icon",
|
|
4027
4157
|
"aria-hidden": "true",
|
|
4028
|
-
children: /* @__PURE__ */
|
|
4158
|
+
children: /* @__PURE__ */ jsx9(PlusIcon2, {})
|
|
4029
4159
|
}
|
|
4030
4160
|
),
|
|
4031
|
-
/* @__PURE__ */
|
|
4161
|
+
/* @__PURE__ */ jsx9("span", { className: "lb-mix-match__add-product-label", children: step.minQuantity === 1 && step.maxQuantity === 1 ? "Choose a product" : "Choose products" })
|
|
4032
4162
|
]
|
|
4033
4163
|
}
|
|
4034
4164
|
)
|
|
@@ -4036,29 +4166,29 @@ function MultiStepBundle(props) {
|
|
|
4036
4166
|
},
|
|
4037
4167
|
i
|
|
4038
4168
|
)) }),
|
|
4039
|
-
/* @__PURE__ */
|
|
4040
|
-
allSatisfied && /* @__PURE__ */
|
|
4041
|
-
/* @__PURE__ */
|
|
4042
|
-
/* @__PURE__ */
|
|
4043
|
-
bundle.widgetConfig.savingsBar.visible && summary.savings > 0 && /* @__PURE__ */
|
|
4169
|
+
/* @__PURE__ */ jsx9("div", { className: "lb-bundle-divider" }),
|
|
4170
|
+
allSatisfied && /* @__PURE__ */ jsxs9("div", { className: "lb-bundle-summary", "data-pricing-section": true, children: [
|
|
4171
|
+
/* @__PURE__ */ jsxs9("div", { className: "lb-bundle-summary__text", children: [
|
|
4172
|
+
/* @__PURE__ */ jsx9("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
|
|
4173
|
+
bundle.widgetConfig.savingsBar.visible && summary.savings > 0 && /* @__PURE__ */ jsxs9("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
|
|
4044
4174
|
"You save",
|
|
4045
4175
|
" ",
|
|
4046
|
-
/* @__PURE__ */
|
|
4176
|
+
/* @__PURE__ */ jsx9("span", { "data-savings-amount": true, children: formatMoney7(summary.savings, currency) }),
|
|
4047
4177
|
" ",
|
|
4048
|
-
/* @__PURE__ */
|
|
4178
|
+
/* @__PURE__ */ jsxs9("span", { "data-savings-percent": true, children: [
|
|
4049
4179
|
"(",
|
|
4050
4180
|
summary.savingsPercent,
|
|
4051
4181
|
"%)"
|
|
4052
4182
|
] })
|
|
4053
4183
|
] })
|
|
4054
4184
|
] }),
|
|
4055
|
-
/* @__PURE__ */
|
|
4056
|
-
bundle.widgetConfig.pricing.showComparePrice && summary.savings > 0 && /* @__PURE__ */
|
|
4057
|
-
/* @__PURE__ */
|
|
4185
|
+
/* @__PURE__ */ jsxs9("span", { className: "lb-bundle-summary__prices", children: [
|
|
4186
|
+
bundle.widgetConfig.pricing.showComparePrice && summary.savings > 0 && /* @__PURE__ */ jsx9("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney7(summary.comparePrice, currency) }),
|
|
4187
|
+
/* @__PURE__ */ jsx9("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: formatMoney7(summary.salePrice, currency) })
|
|
4058
4188
|
] })
|
|
4059
4189
|
] }),
|
|
4060
|
-
cartError && /* @__PURE__ */
|
|
4061
|
-
/* @__PURE__ */
|
|
4190
|
+
cartError && /* @__PURE__ */ jsx9("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
|
|
4191
|
+
/* @__PURE__ */ jsx9(
|
|
4062
4192
|
"button",
|
|
4063
4193
|
{
|
|
4064
4194
|
className: "lb-bundle__cta",
|
|
@@ -4068,7 +4198,7 @@ function MultiStepBundle(props) {
|
|
|
4068
4198
|
children: ctaLabel
|
|
4069
4199
|
}
|
|
4070
4200
|
),
|
|
4071
|
-
pickerOpenAt !== null && /* @__PURE__ */
|
|
4201
|
+
pickerOpenAt !== null && /* @__PURE__ */ jsx9(
|
|
4072
4202
|
MultiStepPicker,
|
|
4073
4203
|
{
|
|
4074
4204
|
outOfStockBehavior,
|
|
@@ -4104,7 +4234,7 @@ function stepHasInStockProduct(bundle, stepIndex) {
|
|
|
4104
4234
|
});
|
|
4105
4235
|
}
|
|
4106
4236
|
function PlusIcon2() {
|
|
4107
|
-
return /* @__PURE__ */
|
|
4237
|
+
return /* @__PURE__ */ jsxs9(
|
|
4108
4238
|
"svg",
|
|
4109
4239
|
{
|
|
4110
4240
|
width: "18",
|
|
@@ -4114,14 +4244,14 @@ function PlusIcon2() {
|
|
|
4114
4244
|
xmlns: "http://www.w3.org/2000/svg",
|
|
4115
4245
|
"aria-hidden": "true",
|
|
4116
4246
|
children: [
|
|
4117
|
-
/* @__PURE__ */
|
|
4118
|
-
/* @__PURE__ */
|
|
4247
|
+
/* @__PURE__ */ jsx9("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
|
|
4248
|
+
/* @__PURE__ */ jsx9("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
|
|
4119
4249
|
]
|
|
4120
4250
|
}
|
|
4121
4251
|
);
|
|
4122
4252
|
}
|
|
4123
4253
|
function CloseIcon4() {
|
|
4124
|
-
return /* @__PURE__ */
|
|
4254
|
+
return /* @__PURE__ */ jsxs9(
|
|
4125
4255
|
"svg",
|
|
4126
4256
|
{
|
|
4127
4257
|
width: "16",
|
|
@@ -4131,8 +4261,8 @@ function CloseIcon4() {
|
|
|
4131
4261
|
xmlns: "http://www.w3.org/2000/svg",
|
|
4132
4262
|
"aria-hidden": "true",
|
|
4133
4263
|
children: [
|
|
4134
|
-
/* @__PURE__ */
|
|
4135
|
-
/* @__PURE__ */
|
|
4264
|
+
/* @__PURE__ */ jsx9("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
|
|
4265
|
+
/* @__PURE__ */ jsx9("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
|
|
4136
4266
|
]
|
|
4137
4267
|
}
|
|
4138
4268
|
);
|
|
@@ -4145,7 +4275,7 @@ async function fetchShopCustomCss(options) {
|
|
|
4145
4275
|
}
|
|
4146
4276
|
|
|
4147
4277
|
// src/hooks/useBundlesForProduct.ts
|
|
4148
|
-
import { useState as
|
|
4278
|
+
import { useState as useState14, useEffect as useEffect17 } from "react";
|
|
4149
4279
|
import {
|
|
4150
4280
|
fetchBundlesForProduct,
|
|
4151
4281
|
injectCustomCss as injectCustomCss2
|
|
@@ -4156,10 +4286,10 @@ var INITIAL_STATE2 = {
|
|
|
4156
4286
|
error: null
|
|
4157
4287
|
};
|
|
4158
4288
|
function useBundlesForProduct(options) {
|
|
4159
|
-
const [state, setState] =
|
|
4289
|
+
const [state, setState] = useState14(
|
|
4160
4290
|
INITIAL_STATE2
|
|
4161
4291
|
);
|
|
4162
|
-
|
|
4292
|
+
useEffect17(() => {
|
|
4163
4293
|
const controller = new AbortController();
|
|
4164
4294
|
setState(INITIAL_STATE2);
|
|
4165
4295
|
fetchBundlesForProduct({
|
|
@@ -4241,6 +4371,7 @@ export {
|
|
|
4241
4371
|
BUNDLES_FOR_PRODUCT_QUERY,
|
|
4242
4372
|
BUNDLE_METAOBJECT_QUERY2 as BUNDLE_METAOBJECT_QUERY,
|
|
4243
4373
|
BogoBundle,
|
|
4374
|
+
BundleCountdown,
|
|
4244
4375
|
BundleParseError2 as BundleParseError,
|
|
4245
4376
|
DEFAULT_OUT_OF_STOCK_BEHAVIOR3 as DEFAULT_OUT_OF_STOCK_BEHAVIOR,
|
|
4246
4377
|
FixedBundle,
|