@tapcart/mobile-components 0.8.48 → 0.8.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/hooks/use-mock-cart.d.ts +3 -0
- package/dist/components/hooks/use-mock-cart.d.ts.map +1 -1
- package/dist/components/hooks/use-mock-cart.js +19 -2
- package/dist/components/ui/Input/useInput.d.ts +1 -10
- package/dist/components/ui/Input/useInput.d.ts.map +1 -1
- package/dist/components/ui/button.d.ts +825 -8
- package/dist/components/ui/button.d.ts.map +1 -1
- package/dist/components/ui/chip.d.ts +2 -2
- package/dist/components/ui/favorite.d.ts +1 -1
- package/dist/components/ui/progress-bar.d.ts.map +1 -1
- package/dist/components/ui/progress-bar.js +68 -59
- package/dist/components/ui/quantity-picker.d.ts +3 -1
- package/dist/components/ui/quantity-picker.d.ts.map +1 -1
- package/dist/components/ui/quantity-picker.js +49 -12
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/dist/lib/cart.util.d.ts +8 -15
- package/dist/lib/cart.util.d.ts.map +1 -1
- package/dist/lib/cart.util.js +21 -12
- package/dist/lib/utils.d.ts +826 -17
- package/dist/lib/utils.d.ts.map +1 -1
- package/dist/lib/variablesCart.util.d.ts +35 -0
- package/dist/lib/variablesCart.util.d.ts.map +1 -0
- package/dist/lib/variablesCart.util.js +236 -0
- package/dist/lib/variablesCart.util.test.d.ts +2 -0
- package/dist/lib/variablesCart.util.test.d.ts.map +1 -0
- package/dist/lib/variablesCart.util.test.js +387 -0
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAGL,KAAK,EAEL,SAAS,EAET,oBAAoB,EACrB,MAAM,iBAAiB,CAAA;AAMxB,QAAA,MAAM,cAAc;;;mFAgCnB,CAAA;AAwCD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;IACvD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;CAC9D;AAED,QAAA,MAAM,MAAM,uFA0GX,CAAA;AAGD,QAAA,MAAM,cAAc,iBACJ,SAAS,GACrB,oBAAoB,GAAG;IACrB,SAAS,EAAE,KAAK,CAAA;IAChB,WAAW,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IAC5B,gBAAgB,EAAE,OAAO,CAAA;CAC1B
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAGL,KAAK,EAEL,SAAS,EAET,oBAAoB,EACrB,MAAM,iBAAiB,CAAA;AAMxB,QAAA,MAAM,cAAc;;;mFAgCnB,CAAA;AAwCD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;IACvD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;CAC9D;AAED,QAAA,MAAM,MAAM,uFA0GX,CAAA;AAGD,QAAA,MAAM,cAAc,iBACJ,SAAS,GACrB,oBAAoB,GAAG;IACrB,SAAS,EAAE,KAAK,CAAA;IAChB,WAAW,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IAC5B,gBAAgB,EAAE,OAAO,CAAA;CAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBJ,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,CAAA"}
|
|
@@ -2,7 +2,7 @@ import { type VariantProps } from "class-variance-authority";
|
|
|
2
2
|
import React from "react";
|
|
3
3
|
declare const chipVariants: (props?: ({
|
|
4
4
|
variant?: "secondary" | "primary" | null | undefined;
|
|
5
|
-
direction?: "
|
|
5
|
+
direction?: "horizontal" | "vertical" | null | undefined;
|
|
6
6
|
iconPosition?: "left" | "right" | "default" | null | undefined;
|
|
7
7
|
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
8
8
|
type ChipProps = React.ComponentPropsWithoutRef<"div"> & VariantProps<typeof chipVariants> & {
|
|
@@ -16,7 +16,7 @@ type ChipProps = React.ComponentPropsWithoutRef<"div"> & VariantProps<typeof chi
|
|
|
16
16
|
};
|
|
17
17
|
declare const Chip: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & VariantProps<(props?: ({
|
|
18
18
|
variant?: "secondary" | "primary" | null | undefined;
|
|
19
|
-
direction?: "
|
|
19
|
+
direction?: "horizontal" | "vertical" | null | undefined;
|
|
20
20
|
iconPosition?: "left" | "right" | "default" | null | undefined;
|
|
21
21
|
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & {
|
|
22
22
|
icon?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
@@ -3,7 +3,7 @@ import { type VariantProps } from "class-variance-authority";
|
|
|
3
3
|
import { Spacing } from "../../lib/utils";
|
|
4
4
|
import { BorderSides } from "./Input/types";
|
|
5
5
|
declare const favoriteVariants: (props?: ({
|
|
6
|
-
size?: "
|
|
6
|
+
size?: "large" | "small" | null | undefined;
|
|
7
7
|
showBackgroundShadow?: boolean | null | undefined;
|
|
8
8
|
layoutType?: "below-image-on-right" | "top-right" | "top-left" | "bottom-left" | "bottom-right" | null | undefined;
|
|
9
9
|
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../../components/ui/progress-bar.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../../components/ui/progress-bar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoD,MAAM,OAAO,CAAA;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAGhD,UAAU,gBAAgB;IACxB,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,eAAe,CAAC,EAAE,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAA;IACpD;;;;;;;;OAQG;IACH,gBAAgB,CAAC,EAAE;QACjB,KAAK,EAAE,MAAM,CAAA;QACb,GAAG,EAAE,MAAM,CAAA;QAEX,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,SAAS,CAAC,EAAE;YACV,KAAK,CAAC,EAAE,MAAM,CAAA;YACd,QAAQ,CAAC,EAAE,MAAM,CAAA;YACjB,UAAU,CAAC,EAAE,MAAM,CAAA;SACpB,CAAA;QACD,WAAW,CAAC,EAAE;YACZ,eAAe,CAAC,EAAE,MAAM,CAAA;YACxB,IAAI,CAAC,EAAE,MAAM,CAAA;SACd,CAAA;QACD,cAAc,CAAC,EAAE,OAAO,CAAA;KACzB,CAAA;CACF;AAID,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAiO3C,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import
|
|
3
|
+
import { useEffect, useState, useMemo, useCallback } from "react";
|
|
4
4
|
const NUM_MARKERS = 5;
|
|
5
5
|
const ProgressBar = ({ progress, borderStyle, emptyColor, corners, fillColor, animationDuration = 300, animationEasing = "easeInOut", height = 8, milestoneMarkers, }) => {
|
|
6
6
|
const [clampedProgress, setClampedProgress] = useState(0);
|
|
7
7
|
const [animatedMarkers, setAnimatedMarkers] = useState([]);
|
|
8
8
|
const [previousProgress, setPreviousProgress] = useState(0);
|
|
9
9
|
// Determine the number of markers to use
|
|
10
|
-
const markersCount =
|
|
10
|
+
const markersCount = useMemo(() => {
|
|
11
11
|
if (milestoneMarkers &&
|
|
12
12
|
"start" in milestoneMarkers &&
|
|
13
13
|
"end" in milestoneMarkers &&
|
|
@@ -16,10 +16,39 @@ const ProgressBar = ({ progress, borderStyle, emptyColor, corners, fillColor, an
|
|
|
16
16
|
}
|
|
17
17
|
return NUM_MARKERS;
|
|
18
18
|
}, [milestoneMarkers]);
|
|
19
|
-
// Calculate the spacing between markers
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
// Calculate the spacing between markers - memoized to prevent unnecessary re-renders
|
|
20
|
+
const beginningEndMarkerPadding = useMemo(() => {
|
|
21
|
+
const markerSpacing = 100 / markersCount;
|
|
22
|
+
return markerSpacing / 4;
|
|
23
|
+
}, [markersCount]);
|
|
24
|
+
// Memoize milestone positions to prevent recalculation on every render
|
|
25
|
+
const milestonePositions = useMemo(() => {
|
|
26
|
+
if (!milestoneMarkers ||
|
|
27
|
+
!("start" in milestoneMarkers) ||
|
|
28
|
+
!milestoneMarkers.end) {
|
|
29
|
+
return [];
|
|
30
|
+
}
|
|
31
|
+
const { start, end } = milestoneMarkers;
|
|
32
|
+
const positions = [];
|
|
33
|
+
const valueStep = (end - start) / markersCount;
|
|
34
|
+
for (let i = 0; i <= markersCount; i++) {
|
|
35
|
+
let position;
|
|
36
|
+
if (i === 0) {
|
|
37
|
+
position = beginningEndMarkerPadding;
|
|
38
|
+
}
|
|
39
|
+
else if (i === markersCount) {
|
|
40
|
+
position = 100 - beginningEndMarkerPadding;
|
|
41
|
+
}
|
|
42
|
+
else {
|
|
43
|
+
position =
|
|
44
|
+
beginningEndMarkerPadding +
|
|
45
|
+
((100 - 2 * beginningEndMarkerPadding) * i) / markersCount;
|
|
46
|
+
}
|
|
47
|
+
const value = start + valueStep * i;
|
|
48
|
+
positions.push({ value, position });
|
|
49
|
+
}
|
|
50
|
+
return positions;
|
|
51
|
+
}, [milestoneMarkers, markersCount, beginningEndMarkerPadding]);
|
|
23
52
|
useEffect(() => {
|
|
24
53
|
setPreviousProgress(clampedProgress);
|
|
25
54
|
setTimeout(() => {
|
|
@@ -47,7 +76,6 @@ const ProgressBar = ({ progress, borderStyle, emptyColor, corners, fillColor, an
|
|
|
47
76
|
(100 - 2 * beginningEndMarkerPadding);
|
|
48
77
|
setClampedProgress(normalizedProgress);
|
|
49
78
|
}
|
|
50
|
-
console.log("progressInUnits", progressInUnits, "normalizedProgress", clampedProgress);
|
|
51
79
|
}
|
|
52
80
|
else {
|
|
53
81
|
// If no milestoneMarkers, just clamp between 0 and 100
|
|
@@ -55,62 +83,43 @@ const ProgressBar = ({ progress, borderStyle, emptyColor, corners, fillColor, an
|
|
|
55
83
|
}
|
|
56
84
|
}, 100);
|
|
57
85
|
}, [progress, milestoneMarkers, beginningEndMarkerPadding]);
|
|
86
|
+
// Handle marker animations - moved outside of render function
|
|
87
|
+
useEffect(() => {
|
|
88
|
+
if ((milestoneMarkers === null || milestoneMarkers === void 0 ? void 0 : milestoneMarkers.animateMarkers) && milestonePositions.length > 0) {
|
|
89
|
+
const newAnimatedMarkers = [];
|
|
90
|
+
milestonePositions.forEach(({ position }) => {
|
|
91
|
+
// Only animate markers that are newly crossed by the progress bar
|
|
92
|
+
if (previousProgress < position &&
|
|
93
|
+
clampedProgress >= position &&
|
|
94
|
+
!animatedMarkers.includes(position)) {
|
|
95
|
+
newAnimatedMarkers.push(position);
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
if (newAnimatedMarkers.length > 0) {
|
|
99
|
+
setAnimatedMarkers((prev) => [...prev, ...newAnimatedMarkers]);
|
|
100
|
+
// Reset animation after a delay
|
|
101
|
+
setTimeout(() => {
|
|
102
|
+
setAnimatedMarkers((prev) => prev.filter((pos) => !newAnimatedMarkers.includes(pos)));
|
|
103
|
+
}, 1000);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}, [
|
|
107
|
+
clampedProgress,
|
|
108
|
+
previousProgress,
|
|
109
|
+
milestoneMarkers === null || milestoneMarkers === void 0 ? void 0 : milestoneMarkers.animateMarkers,
|
|
110
|
+
milestonePositions,
|
|
111
|
+
animatedMarkers,
|
|
112
|
+
]);
|
|
58
113
|
// Generate milestone markers if provided
|
|
59
|
-
const renderMilestoneMarkers = () => {
|
|
114
|
+
const renderMilestoneMarkers = useCallback(() => {
|
|
60
115
|
var _a;
|
|
61
|
-
if (
|
|
62
|
-
!("start" in milestoneMarkers) ||
|
|
63
|
-
!milestoneMarkers.end)
|
|
116
|
+
if (milestonePositions.length === 0)
|
|
64
117
|
return null;
|
|
65
|
-
const {
|
|
118
|
+
const { animateMarkers } = milestoneMarkers;
|
|
66
119
|
const markers = [];
|
|
67
120
|
// Calculate the marker size for positioning adjustments
|
|
68
|
-
const markerSize = ((_a = milestoneMarkers === null || milestoneMarkers === void 0 ? void 0 : milestoneMarkers.markerStyle) === null || _a === void 0 ? void 0 : _a.size) || 4;
|
|
69
|
-
|
|
70
|
-
const positions = [];
|
|
71
|
-
// Calculate the step between each marker value
|
|
72
|
-
const valueStep = (end - start) / markersCount;
|
|
73
|
-
// Generate markers (including start and end)
|
|
74
|
-
for (let i = 0; i <= markersCount; i++) {
|
|
75
|
-
// Apply padding of half the marker spacing to the first and last markers
|
|
76
|
-
let position;
|
|
77
|
-
if (i === 0) {
|
|
78
|
-
position = beginningEndMarkerPadding; // Half spacing padding from the start
|
|
79
|
-
}
|
|
80
|
-
else if (i === markersCount) {
|
|
81
|
-
position = 100 - beginningEndMarkerPadding; // Half spacing padding from the end
|
|
82
|
-
}
|
|
83
|
-
else {
|
|
84
|
-
// Distribute the remaining markers evenly between the padded start and end
|
|
85
|
-
position =
|
|
86
|
-
beginningEndMarkerPadding +
|
|
87
|
-
((100 - 2 * beginningEndMarkerPadding) * i) / markersCount;
|
|
88
|
-
}
|
|
89
|
-
const value = start + valueStep * i;
|
|
90
|
-
positions.push({ value, position });
|
|
91
|
-
}
|
|
92
|
-
// Check if any markers should be animated based on progress
|
|
93
|
-
useEffect(() => {
|
|
94
|
-
if (animateMarkers) {
|
|
95
|
-
const newAnimatedMarkers = [];
|
|
96
|
-
positions.forEach(({ position }) => {
|
|
97
|
-
// Only animate markers that are newly crossed by the progress bar
|
|
98
|
-
if (previousProgress < position &&
|
|
99
|
-
clampedProgress >= position &&
|
|
100
|
-
!animatedMarkers.includes(position)) {
|
|
101
|
-
newAnimatedMarkers.push(position);
|
|
102
|
-
}
|
|
103
|
-
});
|
|
104
|
-
if (newAnimatedMarkers.length > 0) {
|
|
105
|
-
setAnimatedMarkers((prev) => [...prev, ...newAnimatedMarkers]);
|
|
106
|
-
// Reset animation after a delay
|
|
107
|
-
setTimeout(() => {
|
|
108
|
-
setAnimatedMarkers((prev) => prev.filter((pos) => !newAnimatedMarkers.includes(pos)));
|
|
109
|
-
}, 1000);
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
}, [clampedProgress, previousProgress]);
|
|
113
|
-
positions.forEach(({ value, position }) => {
|
|
121
|
+
const markerSize = ((_a = milestoneMarkers === null || milestoneMarkers === void 0 ? void 0 : milestoneMarkers.markerStyle) === null || _a === void 0 ? void 0 : _a.size) || 4;
|
|
122
|
+
milestonePositions.forEach(({ value, position }) => {
|
|
114
123
|
const isAnimating = animateMarkers && animatedMarkers.includes(position);
|
|
115
124
|
markers.push(_jsxs("div", Object.assign({ className: "absolute", style: {
|
|
116
125
|
left: `${position}%`,
|
|
@@ -121,7 +130,7 @@ const ProgressBar = ({ progress, borderStyle, emptyColor, corners, fillColor, an
|
|
|
121
130
|
: "translateX(-50%)", fontWeight: isAnimating ? "bold" : undefined, transition: "transform 0.3s ease, font-weight 0.3s ease" }, milestoneMarkers === null || milestoneMarkers === void 0 ? void 0 : milestoneMarkers.textStyle) }, { children: Math.round(value) }))] }), `milestone-${value}`));
|
|
122
131
|
});
|
|
123
132
|
return markers;
|
|
124
|
-
};
|
|
133
|
+
}, [milestonePositions, milestoneMarkers, animatedMarkers, height]);
|
|
125
134
|
return (_jsxs("div", Object.assign({ className: "w-full flex-grow relative", style: Object.assign({ height: `${height}px`, backgroundColor: emptyColor, borderRadius: `${corners !== null && corners !== void 0 ? corners : 0}px`, marginBottom: milestoneMarkers && "start" in milestoneMarkers ? "24px" : "0" }, borderStyle), "aria-valuenow": clampedProgress, "aria-valuemin": 0, "aria-valuemax": 100, role: "progressbar" }, { children: [_jsx("div", { className: "h-full transition-all", style: {
|
|
126
135
|
width: `${clampedProgress}%`,
|
|
127
136
|
backgroundColor: fillColor,
|
|
@@ -11,11 +11,13 @@ export interface QuantityPickerProps extends React.HTMLAttributes<HTMLDivElement
|
|
|
11
11
|
isIncreaseDisabled?: boolean;
|
|
12
12
|
loading?: boolean;
|
|
13
13
|
value: number;
|
|
14
|
-
|
|
14
|
+
onValueSet: (_: number) => void;
|
|
15
|
+
onAdjustQuantity: (_: number) => void;
|
|
15
16
|
className?: string;
|
|
16
17
|
inputStyle?: React.CSSProperties;
|
|
17
18
|
buttonStyle?: React.CSSProperties;
|
|
18
19
|
buttonCornerRadius?: number;
|
|
20
|
+
debounceTime?: number;
|
|
19
21
|
max?: number;
|
|
20
22
|
}
|
|
21
23
|
declare const QuantityPicker: React.ForwardRefExoticComponent<QuantityPickerProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"quantity-picker.d.ts","sourceRoot":"","sources":["../../../components/ui/quantity-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"quantity-picker.d.ts","sourceRoot":"","sources":["../../../components/ui/quantity-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,MAAM,CAAA;IACvB,aAAa,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,OAAO,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,gBAAgB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAChC,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AA0ED,QAAA,MAAM,cAAc,4FAiLnB,CAAA;AAID,OAAO,EAAE,cAAc,EAAE,CAAA"}
|
|
@@ -16,6 +16,7 @@ import { cn } from "../../lib/utils";
|
|
|
16
16
|
import { Icon } from "./icon";
|
|
17
17
|
import { useTap } from "./tap";
|
|
18
18
|
import { LoadingDots } from "./loading-dots";
|
|
19
|
+
import debounce from "lodash/debounce";
|
|
19
20
|
const IconButton = ({ iconUrl, iconColor, handler, className, style, disabled }) => {
|
|
20
21
|
const { onTap, isPressed, ref: tapRef } = useTap();
|
|
21
22
|
const [isButtonPressed, setIsButtonPressed] = React.useState(false);
|
|
@@ -41,14 +42,23 @@ const IconButton = ({ iconUrl, iconColor, handler, className, style, disabled })
|
|
|
41
42
|
}, disabled: disabled, "aria-label": "Quantity button" })] })));
|
|
42
43
|
};
|
|
43
44
|
const QuantityPicker = React.forwardRef((_a, ref) => {
|
|
44
|
-
var { className, decreaseIconUrl, increaseIconUrl, deleteIconUrl, isDeleteOnly = false, iconColor, onDecreaseClick, onIncreaseClick, isDecreaseDisabled, isIncreaseDisabled, value,
|
|
45
|
+
var { className, decreaseIconUrl, increaseIconUrl, deleteIconUrl, isDeleteOnly = false, iconColor, onDecreaseClick, onIncreaseClick, isDecreaseDisabled, isIncreaseDisabled, value, onValueSet, onAdjustQuantity, inputStyle, buttonStyle, buttonCornerRadius = 4, max = 99, loading = false, debounceTime = 300 } = _a, props = __rest(_a, ["className", "decreaseIconUrl", "increaseIconUrl", "deleteIconUrl", "isDeleteOnly", "iconColor", "onDecreaseClick", "onIncreaseClick", "isDecreaseDisabled", "isIncreaseDisabled", "value", "onValueSet", "onAdjustQuantity", "inputStyle", "buttonStyle", "buttonCornerRadius", "max", "loading", "debounceTime"]);
|
|
45
46
|
const [isFocused, setIsFocused] = React.useState(false);
|
|
46
|
-
const
|
|
47
|
+
const pendingQuantityAdjustment = React.useRef(0);
|
|
48
|
+
const [localInputValue, setLocalInputValue] = React.useState(value);
|
|
49
|
+
// Update local state when external value changes
|
|
47
50
|
React.useEffect(() => {
|
|
48
|
-
if (
|
|
49
|
-
|
|
51
|
+
if (pendingQuantityAdjustment.current === 0) {
|
|
52
|
+
setLocalInputValue(value);
|
|
50
53
|
}
|
|
51
|
-
}, [value
|
|
54
|
+
}, [value]);
|
|
55
|
+
// Create debounced function for applying changes
|
|
56
|
+
const debouncedApplyChanges = React.useMemo(() => debounce(() => {
|
|
57
|
+
if (pendingQuantityAdjustment.current !== 0) {
|
|
58
|
+
onAdjustQuantity(pendingQuantityAdjustment.current);
|
|
59
|
+
pendingQuantityAdjustment.current = 0;
|
|
60
|
+
}
|
|
61
|
+
}, debounceTime), [debounceTime, onAdjustQuantity]);
|
|
52
62
|
const leftButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderTopLeftRadius: buttonCornerRadius
|
|
53
63
|
? `${buttonCornerRadius}px`
|
|
54
64
|
: undefined, borderBottomLeftRadius: buttonCornerRadius
|
|
@@ -60,29 +70,56 @@ const QuantityPicker = React.forwardRef((_a, ref) => {
|
|
|
60
70
|
? `${buttonCornerRadius}px`
|
|
61
71
|
: undefined });
|
|
62
72
|
const singleButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderRadius: buttonCornerRadius ? `${buttonCornerRadius}px` : undefined });
|
|
63
|
-
|
|
73
|
+
const adjustQuantity = (amount) => {
|
|
74
|
+
const newAmount = localInputValue + amount;
|
|
75
|
+
const clampedNewAmount = Math.min(Math.max(newAmount, 0), max);
|
|
76
|
+
// Update local value immediately
|
|
77
|
+
setLocalInputValue(clampedNewAmount);
|
|
78
|
+
// Track pending change for batched update
|
|
79
|
+
pendingQuantityAdjustment.current += amount;
|
|
80
|
+
// Trigger debounced API update
|
|
81
|
+
debouncedApplyChanges();
|
|
82
|
+
};
|
|
83
|
+
const handleDecreaseClick = (e) => {
|
|
84
|
+
e.preventDefault();
|
|
85
|
+
e.stopPropagation();
|
|
86
|
+
adjustQuantity(-1);
|
|
87
|
+
onDecreaseClick(e);
|
|
88
|
+
};
|
|
89
|
+
const handleIncreaseClick = (e) => {
|
|
90
|
+
e.preventDefault();
|
|
91
|
+
e.stopPropagation();
|
|
92
|
+
adjustQuantity(1);
|
|
93
|
+
onIncreaseClick(e);
|
|
94
|
+
};
|
|
95
|
+
return (_jsxs("div", Object.assign({ className: cn("flex relative", className), ref: ref }, props, { children: [isDeleteOnly ? (_jsx(IconButton, { handler: handleDecreaseClick, iconUrl: deleteIconUrl, iconColor: iconColor, style: singleButtonStyle })) : (_jsxs(_Fragment, { children: [_jsx(IconButton, { handler: handleDecreaseClick, iconUrl: localInputValue === 1 ? deleteIconUrl : decreaseIconUrl, iconColor: iconColor, style: leftButtonStyle, disabled: isDecreaseDisabled || loading }), _jsx("input", { type: "number", pattern: "[0-9]*", disabled: loading, max: max, value: localInputValue, onBlur: (e) => {
|
|
64
96
|
setIsFocused(false);
|
|
65
97
|
const parsedValue = parseInt(e.target.value) || 0;
|
|
66
98
|
const clampedValue = Math.min(parsedValue, max);
|
|
67
|
-
|
|
68
|
-
|
|
99
|
+
// Cancel any pending debounced operations
|
|
100
|
+
debouncedApplyChanges.cancel();
|
|
101
|
+
// Update and apply changes
|
|
102
|
+
const delta = clampedValue - value;
|
|
103
|
+
pendingQuantityAdjustment.current = delta;
|
|
104
|
+
setLocalInputValue(clampedValue);
|
|
105
|
+
onValueSet(clampedValue);
|
|
69
106
|
}, onFocus: () => {
|
|
70
107
|
setIsFocused(true);
|
|
71
108
|
}, onChange: (e) => {
|
|
72
109
|
const inputValue = e.target.value;
|
|
73
110
|
if (inputValue === "") {
|
|
74
|
-
|
|
111
|
+
setLocalInputValue(0);
|
|
75
112
|
}
|
|
76
113
|
else {
|
|
77
114
|
const parsedValue = parseInt(inputValue);
|
|
78
115
|
if (!isNaN(parsedValue)) {
|
|
79
116
|
const clampedValue = Math.min(parsedValue, max);
|
|
80
|
-
|
|
117
|
+
setLocalInputValue(clampedValue);
|
|
81
118
|
}
|
|
82
119
|
}
|
|
83
|
-
}, className: "w-8 h-7 focus-visible:outline-
|
|
120
|
+
}, className: "w-8 h-7 focus-visible:outline-no ne text-center bg-coreColors-inputBackground text-textColors-primaryColor border-t border-b border-coreColors-dividingLines", style: Object.assign(Object.assign({}, inputStyle), { borderRadius: (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.borderRadius)
|
|
84
121
|
? `${inputStyle.borderRadius}px`
|
|
85
|
-
: 0 }), inputMode: "numeric" }), _jsx(IconButton, { handler:
|
|
122
|
+
: 0 }), inputMode: "numeric" }), _jsx(IconButton, { handler: handleIncreaseClick, iconUrl: increaseIconUrl, iconColor: iconColor, style: rightButtonStyle, disabled: isIncreaseDisabled || loading || localInputValue >= max })] })), _jsx(LoadingDots, { show: loading, size: 1, iconColor: iconColor })] })));
|
|
86
123
|
});
|
|
87
124
|
QuantityPicker.displayName = "QuantityPicker";
|
|
88
125
|
export { QuantityPicker };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { cn, cva, getColor, getBackgroundAndPaddingStyle, getBorderStyle, getBorderSidesStyle, getTextStyle, getVerticalAlignmentStyle, getBackgroundAndSpacingStyle, getIdFromGid, productGidFromId, variantGidFromId, getPaddingStyle, getMarginStyle, getVerticalAlignment, mapFlexToAlignment, formatRelativeTime, stringRatioToInt, getOverlayStyle, throttleFunction, getDestinationHandler, getProductGidsFromIds, getVariantGidsFromIds, getBadgesForProductFn, createCollectionImageMap, isFavoriteIntegrationEnabled, getLoyaltyButtonProps, getSpaceBetween, getGridSpacing, pluralize, getInputPlaceholderTextProps, parsePhoneNumber, } from "./lib/utils";
|
|
2
2
|
export * from "./lib/cart.util";
|
|
3
|
+
export * from "./lib/variablesCart.util";
|
|
3
4
|
export * from "./components/contexts/translation-context";
|
|
4
5
|
export * from "./components/hooks/use-collection";
|
|
5
6
|
export * from "./components/hooks/use-infinite-scroll";
|
|
@@ -29,6 +30,7 @@ export * from "./components/ui/container";
|
|
|
29
30
|
export * from "./components/ui/drawer";
|
|
30
31
|
export * from "./components/ui/dropdown";
|
|
31
32
|
export * from "./components/ui/empty-message";
|
|
33
|
+
export * from "./components/ui/fallback-on-condition";
|
|
32
34
|
export * from "./components/ui/favorite";
|
|
33
35
|
export * from "./components/ui/fallback-on-condition";
|
|
34
36
|
export * from "./components/ui/grid";
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
// component exports
|
|
2
2
|
export { cn, cva, getColor, getBackgroundAndPaddingStyle, getBorderStyle, getBorderSidesStyle, getTextStyle, getVerticalAlignmentStyle, getBackgroundAndSpacingStyle, getIdFromGid, productGidFromId, variantGidFromId, getPaddingStyle, getMarginStyle, getVerticalAlignment, mapFlexToAlignment, formatRelativeTime, stringRatioToInt, getOverlayStyle, throttleFunction, getDestinationHandler, getProductGidsFromIds, getVariantGidsFromIds, getBadgesForProductFn, createCollectionImageMap, isFavoriteIntegrationEnabled, getLoyaltyButtonProps, getSpaceBetween, getGridSpacing, pluralize, getInputPlaceholderTextProps, parsePhoneNumber, } from "./lib/utils";
|
|
3
3
|
export * from "./lib/cart.util";
|
|
4
|
+
export * from "./lib/variablesCart.util";
|
|
4
5
|
export * from "./components/contexts/translation-context";
|
|
5
6
|
export * from "./components/hooks/use-collection";
|
|
6
7
|
export * from "./components/hooks/use-infinite-scroll";
|
|
@@ -30,6 +31,7 @@ export * from "./components/ui/container";
|
|
|
30
31
|
export * from "./components/ui/drawer";
|
|
31
32
|
export * from "./components/ui/dropdown";
|
|
32
33
|
export * from "./components/ui/empty-message";
|
|
34
|
+
export * from "./components/ui/fallback-on-condition";
|
|
33
35
|
export * from "./components/ui/favorite";
|
|
34
36
|
export * from "./components/ui/fallback-on-condition";
|
|
35
37
|
export * from "./components/ui/grid";
|
package/dist/lib/cart.util.d.ts
CHANGED
|
@@ -1,21 +1,14 @@
|
|
|
1
|
-
import { EnrichedCart, CartCalculatedDiscount, CartCalculatedAppliedGiftCard
|
|
2
|
-
export declare const getVariantPrice: ({ quantity,
|
|
1
|
+
import { EnrichedCart, CartCalculatedDiscount, CartCalculatedAppliedGiftCard } from "app-studio-types";
|
|
2
|
+
export declare const getVariantPrice: ({ variantPrice, variantCompareAtPrice, quantity, currencyCode, sellingPlanAllocation, }: {
|
|
3
|
+
variantPrice: number;
|
|
4
|
+
variantCompareAtPrice: number;
|
|
3
5
|
quantity: number;
|
|
4
|
-
|
|
6
|
+
currencyCode: string;
|
|
5
7
|
sellingPlanAllocation?: {
|
|
6
8
|
priceAdjustments: {
|
|
7
|
-
perDeliveryPrice?:
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
};
|
|
11
|
-
price: {
|
|
12
|
-
amount: string;
|
|
13
|
-
currencyCode: string;
|
|
14
|
-
};
|
|
15
|
-
compareAtPrice?: {
|
|
16
|
-
amount: string;
|
|
17
|
-
currencyCode: string;
|
|
18
|
-
};
|
|
9
|
+
perDeliveryPrice?: number;
|
|
10
|
+
price: number;
|
|
11
|
+
compareAtPrice?: number;
|
|
19
12
|
}[];
|
|
20
13
|
} | undefined;
|
|
21
14
|
}) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cart.util.d.ts","sourceRoot":"","sources":["../../lib/cart.util.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,sBAAsB,EACtB,6BAA6B,
|
|
1
|
+
{"version":3,"file":"cart.util.d.ts","sourceRoot":"","sources":["../../lib/cart.util.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,sBAAsB,EACtB,6BAA6B,EAG9B,MAAM,kBAAkB,CAAA;AAGzB,eAAO,MAAM,eAAe;kBAOZ,MAAM;2BACG,MAAM;cACnB,MAAM;kBACF,MAAM;;0BAEA;YAChB,gBAAgB,CAAC,EAAE,MAAM,CAAA;YACzB,KAAK,EAAE,MAAM,CAAA;YACb,cAAc,CAAC,EAAE,MAAM,CAAA;SACxB,EAAE;;;;;;;CA4BN,CAAA;AA2CD,eAAO,MAAM,oBAAoB,SAAU,MAAM,QAAQ,YAAY,YAMpE,CAAA;AAED,eAAO,MAAM,kBAAkB,SAAU,MAAM,QAAQ,YAAY,YAMlE,CAAA;AAoID,MAAM,MAAM,cAAc,GAAG;IAC3B,yBAAyB,EAAE,sBAAsB,EAAE,CAAA;IACnD,gBAAgB,EAAE,6BAA6B,EAAE,CAAA;IACjD,cAAc,EAAE,OAAO,CAAA;IACvB,oBAAoB,EAAE,MAAM,CAAA;IAC5B,oBAAoB,EAAE,MAAM,CAAA;IAC5B,WAAW,EAAE,MAAM,CAAA;IACnB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,oBAAoB,EAAE,MAAM,CAAA;IAC5B,gBAAgB,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,eAAO,MAAM,uBAAuB,EAAE,cAUrC,CAAA;AAED,eAAO,MAAM,qBAAqB,SAAU,YAAY,KAAG,cA8B1D,CAAA;AAGD,eAAO,MAAM,mBAAmB;eACnB,MAAM;;;;;aAEG,MAAM;eAAS,MAAM;;;;oBAIN,MAAM;0BAAgB,MAAM;;;eAElD,MAAM;;;;;gBAML,MAAM;cACR,MAAM;;cAEN,MAAM;;;0BAIM;YAAE,MAAM,EAAE,MAAM,CAAC;YAAC,YAAY,EAAE,MAAM,CAAA;SAAE;oBAC9C,MAAM;;;;YAsCzB,CAAA"}
|
package/dist/lib/cart.util.js
CHANGED
|
@@ -1,27 +1,25 @@
|
|
|
1
1
|
import { getIdFromGid } from "./utils";
|
|
2
|
-
export const getVariantPrice = ({ quantity,
|
|
3
|
-
var _a
|
|
2
|
+
export const getVariantPrice = ({ variantPrice, variantCompareAtPrice, quantity, currencyCode, sellingPlanAllocation = { priceAdjustments: [] }, }) => {
|
|
3
|
+
var _a;
|
|
4
4
|
const isSubscription = ((_a = sellingPlanAllocation === null || sellingPlanAllocation === void 0 ? void 0 : sellingPlanAllocation.priceAdjustments) === null || _a === void 0 ? void 0 : _a.length) > 0;
|
|
5
5
|
if (isSubscription) {
|
|
6
6
|
const { perDeliveryPrice, price, compareAtPrice } = sellingPlanAllocation.priceAdjustments[0];
|
|
7
7
|
const effectivePrice = perDeliveryPrice || price;
|
|
8
|
-
const subscriptionUnitPrice =
|
|
9
|
-
const effectiveCompareAtPrice =
|
|
10
|
-
parseFloat((price === null || price === void 0 ? void 0 : price.amount) || "0") ||
|
|
11
|
-
0;
|
|
8
|
+
const subscriptionUnitPrice = perDeliveryPrice || 0;
|
|
9
|
+
const effectiveCompareAtPrice = compareAtPrice || price || 0;
|
|
12
10
|
return {
|
|
13
11
|
price: subscriptionUnitPrice * quantity,
|
|
14
12
|
compareAtPrice: effectiveCompareAtPrice * quantity,
|
|
15
|
-
currency:
|
|
13
|
+
currency: currencyCode,
|
|
16
14
|
isSale: subscriptionUnitPrice < effectiveCompareAtPrice,
|
|
17
15
|
};
|
|
18
16
|
}
|
|
19
|
-
const variantUnitPrice =
|
|
20
|
-
const variantComparePrice =
|
|
17
|
+
const variantUnitPrice = variantPrice || 0;
|
|
18
|
+
const variantComparePrice = variantCompareAtPrice || 0;
|
|
21
19
|
return {
|
|
22
20
|
price: variantUnitPrice * quantity,
|
|
23
21
|
compareAtPrice: variantComparePrice * quantity,
|
|
24
|
-
currency:
|
|
22
|
+
currency: currencyCode,
|
|
25
23
|
isSale: variantUnitPrice < variantComparePrice,
|
|
26
24
|
};
|
|
27
25
|
};
|
|
@@ -81,10 +79,21 @@ const getAppliedGiftCards = (cart) => {
|
|
|
81
79
|
const getSalesAmount = (cart) => {
|
|
82
80
|
var _a;
|
|
83
81
|
return (_a = cart.items) === null || _a === void 0 ? void 0 : _a.reduce((acc, item) => {
|
|
82
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
84
83
|
const { compareAtPrice, price } = getVariantPrice({
|
|
85
84
|
quantity: item.quantity || 1,
|
|
86
|
-
|
|
87
|
-
|
|
85
|
+
variantPrice: parseFloat(((_b = (_a = item.variantDetails) === null || _a === void 0 ? void 0 : _a.price) === null || _b === void 0 ? void 0 : _b.amount) || "0"),
|
|
86
|
+
variantCompareAtPrice: parseFloat(((_d = (_c = item.variantDetails) === null || _c === void 0 ? void 0 : _c.compareAtPrice) === null || _d === void 0 ? void 0 : _d.amount) || "0"),
|
|
87
|
+
currencyCode: ((_f = (_e = item.variantDetails) === null || _e === void 0 ? void 0 : _e.price) === null || _f === void 0 ? void 0 : _f.currencyCode) || "USD",
|
|
88
|
+
sellingPlanAllocation: {
|
|
89
|
+
priceAdjustments: [
|
|
90
|
+
{
|
|
91
|
+
price: parseFloat(((_h = (_g = item.variantDetails) === null || _g === void 0 ? void 0 : _g.price) === null || _h === void 0 ? void 0 : _h.amount) || "0"),
|
|
92
|
+
compareAtPrice: parseFloat(((_k = (_j = item.variantDetails) === null || _j === void 0 ? void 0 : _j.compareAtPrice) === null || _k === void 0 ? void 0 : _k.amount) || "0"),
|
|
93
|
+
perDeliveryPrice: parseFloat(((_m = (_l = item.variantDetails) === null || _l === void 0 ? void 0 : _l.price) === null || _m === void 0 ? void 0 : _m.amount) || "0"),
|
|
94
|
+
},
|
|
95
|
+
],
|
|
96
|
+
},
|
|
88
97
|
});
|
|
89
98
|
if (compareAtPrice && compareAtPrice > price) {
|
|
90
99
|
return acc + (compareAtPrice - price);
|