@tapcart/mobile-components 0.7.7 → 0.7.8

package/dist/components/ui/video-enhanced.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+type VideoAttributes = {
+    enabled: boolean;
+    aspectRatio: string;
+    videoFit: "fill" | "fit";
+    overlayOpacity: number;
+    autoplay: boolean;
+    videoSound: boolean;
+};
+interface VideoProps extends React.VideoHTMLAttributes<HTMLVideoElement> {
+    src: string;
+    videoAttributes: VideoAttributes;
+    naturalAspectRatio?: string;
+    className?: string;
+}
+declare const Video: React.ForwardRefExoticComponent<VideoProps & React.RefAttributes<HTMLVideoElement>>;
+export { Video as VideoEnhanced };
+//# sourceMappingURL=video-enhanced.d.ts.map

package/dist/components/ui/video-enhanced.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-enhanced.d.ts","sourceRoot":"","sources":["../../../components/ui/video-enhanced.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAW9B,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,OAAO,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,GAAG,KAAK,CAAA;IACxB,cAAc,EAAE,MAAM,CAAA;IACtB,QAAQ,EAAE,OAAO,CAAA;IACjB,UAAU,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,UAAU,UAAW,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IACtE,GAAG,EAAE,MAAM,CAAA;IACX,eAAe,EAAE,eAAe,CAAA;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,KAAK,qFAkOV,CAAA;AAID,OAAO,EAAE,KAAK,IAAI,aAAa,EAAE,CAAA"}

package/dist/components/ui/video-enhanced.js

@@ -0,0 +1,197 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const videoVariants = {
+    base: "w-full",
+    fit: {
+        cover: "object-cover",
+        contain: "object-contain",
+    },
+};
+const Video = React.forwardRef((_a, ref) => {
+    var _b;
+    var { src, videoAttributes, naturalAspectRatio = "1/1", className } = _a, props = __rest(_a, ["src", "videoAttributes", "naturalAspectRatio", "className"]);
+    const internalRef = React.useRef(null);
+    const videoRef = ref || internalRef;
+    const playAttemptRef = React.useRef(false);
+    const observerRef = React.useRef(null);
+    const lastPositionRef = React.useRef(0);
+    const [isLoaded, setIsLoaded] = React.useState(false);
+    const [isVisible, setIsVisible] = React.useState(false);
+    const [isPlaying, setIsPlaying] = React.useState(false);
+    const setupVideo = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        try {
+            video.currentTime = lastPositionRef.current;
+            if (!videoAttributes.videoSound) {
+                video.muted = true;
+            }
+            yield video.play();
+            setIsPlaying(true);
+            playAttemptRef.current = true;
+            // If sound is enabled and autoplay was successful, unmute
+            if (videoAttributes.videoSound && videoAttributes.autoplay) {
+                video.muted = false;
+            }
+        }
+        catch (error) {
+            console.error("Error playing video:", error);
+            setIsPlaying(false);
+        }
+    }), [videoAttributes.autoplay, videoAttributes.videoSound, videoRef]);
+    const handlePlayPause = () => __awaiter(void 0, void 0, void 0, function* () {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        if (video.paused) {
+            try {
+                yield setupVideo();
+            }
+            catch (error) {
+                console.error("Error playing video:", error);
+            }
+        }
+        else {
+            video.pause();
+            setIsPlaying(false);
+        }
+    });
+    React.useEffect(() => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        // Create intersection observer
+        observerRef.current = new IntersectionObserver((entries) => {
+            const [entry] = entries;
+            setIsVisible(entry.isIntersecting);
+            // Handle visibility change
+            if (!entry.isIntersecting && !video.paused) {
+                lastPositionRef.current = video.currentTime;
+                video.pause();
+                setIsPlaying(false);
+            }
+            else if (entry.isIntersecting &&
+                videoAttributes.autoplay &&
+                video.paused) {
+                video.currentTime = lastPositionRef.current;
+                setupVideo();
+            }
+        }, {
+            threshold: 0.1, // 10% of the video needs to be visible
+        });
+        // Start observing
+        observerRef.current.observe(video);
+        // Track play state
+        const handlePlay = () => setIsPlaying(true);
+        const handlePause = () => setIsPlaying(false);
+        video.addEventListener("play", handlePlay);
+        video.addEventListener("pause", handlePause);
+        return () => {
+            if (video && !video.paused) {
+                lastPositionRef.current = video.currentTime;
+            }
+            if (observerRef.current) {
+                observerRef.current.disconnect();
+            }
+            video.removeEventListener("play", handlePlay);
+            video.removeEventListener("pause", handlePause);
+            playAttemptRef.current = false;
+        };
+    }, [setupVideo, videoAttributes.autoplay, videoRef]);
+    // Handle attribute changes
+    React.useEffect(() => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        if (isVisible && videoAttributes.autoplay) {
+            setupVideo();
+        }
+        else if (!isVisible && !video.paused) {
+            lastPositionRef.current = video.currentTime;
+            video.pause();
+            setIsPlaying(false);
+        }
+        return () => {
+            if (video && !video.paused) {
+                lastPositionRef.current = video.currentTime;
+            }
+        };
+    }, [
+        videoAttributes.autoplay,
+        videoAttributes.videoSound,
+        isVisible,
+        videoRef,
+        setupVideo,
+    ]);
+    React.useEffect(() => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        const handleTimeUpdate = () => {
+            lastPositionRef.current = video.currentTime;
+        };
+        video.addEventListener("timeupdate", handleTimeUpdate);
+        return () => {
+            video.removeEventListener("timeupdate", handleTimeUpdate);
+        };
+    }, [videoRef]);
+    // Initial load and metadata setup - only needs to run when src changes
+    React.useEffect(() => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        const handleLoadedMetadata = () => {
+            setIsLoaded(true);
+            if (videoAttributes.autoplay && isVisible) {
+                const currentTime = lastPositionRef.current;
+                video.currentTime = currentTime;
+                video.play().catch((error) => {
+                    console.error("Error playing video:", error);
+                });
+            }
+        };
+        video.addEventListener("loadedmetadata", handleLoadedMetadata);
+        video.load();
+        return () => {
+            video.removeEventListener("loadedmetadata", handleLoadedMetadata);
+        };
+    }, [src]);
+    React.useEffect(() => {
+        lastPositionRef.current = 0;
+        setIsLoaded(false);
+    }, [src]);
+    const videoStyle = {
+        aspectRatio: videoAttributes.enabled && videoAttributes.aspectRatio !== "auto"
+            ? videoAttributes.aspectRatio.replace(":", "/")
+            : naturalAspectRatio.replace(":", "/"),
+    };
+    return (_jsxs("div", Object.assign({ className: "relative w-full" }, { children: [_jsx("video", Object.assign({ ref: videoRef, className: cn(videoVariants.base, videoAttributes.videoFit === "fill"
+                    ? videoVariants.fit.cover
+                    : videoVariants.fit.contain, className), style: videoStyle, preload: "metadata", playsInline: true, loop: videoAttributes.enabled, controls: false, src: src }, props)), ((isLoaded && !isPlaying) ||
+                (videoAttributes.videoSound && ((_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.muted))) &&
+                videoAttributes.enabled && (_jsx("button", Object.assign({ onClick: handlePlayPause, className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50\n                     w-16 h-16 rounded-full bg-black/75 hover:bg-black/90 \n                     flex items-center justify-center transition-all duration-300\n                     hover:scale-110 focus:outline-none focus:ring-2 focus:ring-white", "aria-label": "Play video" }, { children: _jsx("div", { className: "w-0 h-0 border-y-8 border-y-transparent \n                          border-l-[16px] border-l-white \n                          translate-x-[2px]" }) })))] })));
+});
+Video.displayName = "Video";
+export { Video as VideoEnhanced };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { cn, cva, getColor, getBackgroundAndPaddingStyle, getBorderSidesStyle, getTextStyle, getVerticalAlignmentStyle, getBackgroundAndSpacingStyle, getIdFromGid, productGidFromId, variantGidFromId, getPaddingStyle, getVerticalAlignment, mapFlexToAlignment, formatRelativeTime, stringRatioToInt, getOverlayStyle, getDestinationHandler, createCollectionImageMap, } from "./lib/utils";
+export { cn, cva, getColor, getBackgroundAndPaddingStyle, getBorderSidesStyle, getTextStyle, getVerticalAlignmentStyle, getBackgroundAndSpacingStyle, getIdFromGid, productGidFromId, variantGidFromId, getPaddingStyle, getVerticalAlignment, mapFlexToAlignment, formatRelativeTime, stringRatioToInt, getOverlayStyle, throttleFunction, getDestinationHandler, getProductGidsFromIds, createCollectionImageMap, } from "./lib/utils";
 export * from "./components/hooks/use-collection";
 export * from "./components/hooks/use-infinite-scroll";
 export * from "./components/hooks/use-recommendations";
@@ -7,7 +7,6 @@ export * from "./components/hooks/use-scroll-direction";
 export * from "./components/hooks/use-sort-filter";
 export * from "./components/hooks/use-product-options";
 export * from "./components/hooks/use-shop";
-export * from "./components/hooks/use-tap";
 export * from "./components/ui/accordion";
 export * from "./components/ui/aspect-ratio";
 export * from "./components/ui/badge";
@@ -48,11 +47,16 @@ export * from "./components/ui/toggle-group";
 export * from "./components/ui/toggle";
 export * from "./components/ui/use-toast";
 export * from "./components/ui/video";
+export * from "./components/ui/video-enhanced";
 export * from "./components/ui/wishlist";
 export * from "./components/ui/wishlist-select";
 export * from "./components/hooks/use-shop";
 export * from "./components/libs/sort-filter/search-integration";
 export * from "./components/hooks/use-reviews";
 export * from "./components/ui/subcollection-tabs";
+export * from "./components/ui/ProductCard/utils";
+export * from "./lib/price";
+export * from "./components/hooks/use-nosto-recommendation";
 export * from "./components/libs/sort-filter/search-integration";
+export * from "./components/ui/tap";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,EAAE,EACF,GAAG,EACH,QAAQ,EACR,4BAA4B,EAC5B,mBAAmB,EACnB,YAAY,EACZ,yBAAyB,EACzB,4BAA4B,EAC5B,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,eAAe,EACf,qBAAqB,EACrB,wBAAwB,GACzB,MAAM,aAAa,CAAA;AACpB,cAAc,mCAAmC,CAAA;AACjD,cAAc,wCAAwC,CAAA;AACtD,cAAc,wCAAwC,CAAA;AACtD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yCAAyC,CAAA;AACvD,cAAc,oCAAoC,CAAA;AAClD,cAAc,wCAAwC,CAAA;AACtD,cAAc,6BAA6B,CAAA;AAC3C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,uBAAuB,CAAA;AACrC,cAAc,sCAAsC,CAAA;AACpD,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wBAAwB,CAAA;AACtC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,0BAA0B,CAAA;AACxC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,kDAAkD,CAAA;AAChE,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oCAAoC,CAAA;AAClD,cAAc,kDAAkD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,EAAE,EACF,GAAG,EACH,QAAQ,EACR,4BAA4B,EAC5B,mBAAmB,EACnB,YAAY,EACZ,yBAAyB,EACzB,4BAA4B,EAC5B,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,wBAAwB,GACzB,MAAM,aAAa,CAAA;AACpB,cAAc,mCAAmC,CAAA;AACjD,cAAc,wCAAwC,CAAA;AACtD,cAAc,wCAAwC,CAAA;AACtD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yCAAyC,CAAA;AACvD,cAAc,oCAAoC,CAAA;AAClD,cAAc,wCAAwC,CAAA;AACtD,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,uBAAuB,CAAA;AACrC,cAAc,sCAAsC,CAAA;AACpD,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wBAAwB,CAAA;AACtC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,0BAA0B,CAAA;AACxC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,kDAAkD,CAAA;AAChE,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oCAAoC,CAAA;AAClD,cAAc,mCAAmC,CAAA;AACjD,cAAc,aAAa,CAAA;AAC3B,cAAc,6CAA6C,CAAA;AAC3D,cAAc,kDAAkD,CAAA;AAChE,cAAc,qBAAqB,CAAA"}

package/dist/index.js

@@ -1,5 +1,5 @@
 // component exports
-export { cn, cva, getColor, getBackgroundAndPaddingStyle, getBorderSidesStyle, getTextStyle, getVerticalAlignmentStyle, getBackgroundAndSpacingStyle, getIdFromGid, productGidFromId, variantGidFromId, getPaddingStyle, getVerticalAlignment, mapFlexToAlignment, formatRelativeTime, stringRatioToInt, getOverlayStyle, getDestinationHandler, createCollectionImageMap, } from "./lib/utils";
+export { cn, cva, getColor, getBackgroundAndPaddingStyle, getBorderSidesStyle, getTextStyle, getVerticalAlignmentStyle, getBackgroundAndSpacingStyle, getIdFromGid, productGidFromId, variantGidFromId, getPaddingStyle, getVerticalAlignment, mapFlexToAlignment, formatRelativeTime, stringRatioToInt, getOverlayStyle, throttleFunction, getDestinationHandler, getProductGidsFromIds, createCollectionImageMap, } from "./lib/utils";
 export * from "./components/hooks/use-collection";
 export * from "./components/hooks/use-infinite-scroll";
 export * from "./components/hooks/use-recommendations";
@@ -8,7 +8,6 @@ export * from "./components/hooks/use-scroll-direction";
 export * from "./components/hooks/use-sort-filter";
 export * from "./components/hooks/use-product-options";
 export * from "./components/hooks/use-shop";
-export * from "./components/hooks/use-tap";
 export * from "./components/ui/accordion";
 export * from "./components/ui/aspect-ratio";
 export * from "./components/ui/badge";
@@ -49,10 +48,15 @@ export * from "./components/ui/toggle-group";
 export * from "./components/ui/toggle";
 export * from "./components/ui/use-toast";
 export * from "./components/ui/video";
+export * from "./components/ui/video-enhanced";
 export * from "./components/ui/wishlist";
 export * from "./components/ui/wishlist-select";
 export * from "./components/hooks/use-shop";
 export * from "./components/libs/sort-filter/search-integration";
 export * from "./components/hooks/use-reviews";
 export * from "./components/ui/subcollection-tabs";
+export * from "./components/ui/ProductCard/utils";
+export * from "./lib/price";
+export * from "./components/hooks/use-nosto-recommendation";
 export * from "./components/libs/sort-filter/search-integration";
+export * from "./components/ui/tap";

package/dist/lib/price.d.ts

@@ -0,0 +1,29 @@
+import { ProductVariant, Product } from "app-studio-types";
+type Badge = {
+    verticalPosition: "below" | "bottom" | "top";
+    priority: number;
+    tags: string[];
+    excludeTags: string[];
+    text?: string;
+    color?: string;
+    backgroundColor?: string;
+};
+type BadgeConfig = {
+    [key in "below" | "bottom" | "top"]?: Badge[];
+};
+export declare const getCheapestProductFromVariantsFn: (productVariants: ProductVariant[]) => ProductVariant;
+export declare const getBadgeForProductFn: (badgeConfig?: BadgeConfig, productTags?: string[]) => Badge | undefined;
+export declare function getPriceRangesFn(product: Product): {
+    price: number;
+    isSale: boolean;
+    priceHigh?: number | undefined;
+    compareAtPrice?: number | undefined;
+    compareAtPriceHigh?: number | undefined;
+};
+export declare function getPriceFn(product: Product): {
+    price: number;
+    compareAtPrice: number;
+    isSale: boolean;
+};
+export {};
+//# sourceMappingURL=price.d.ts.map

package/dist/lib/price.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"price.d.ts","sourceRoot":"","sources":["../../lib/price.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAG1D,KAAK,KAAK,GAAG;IACX,gBAAgB,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAC5C,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,WAAW,EAAE,MAAM,EAAE,CAAA;IAErB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAGD,KAAK,WAAW,GAAG;KAChB,GAAG,IAAI,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE;CAC9C,CAAA;AAGD,eAAO,MAAM,gCAAgC,oBAC1B,cAAc,EAAE,mBAelC,CAAA;AAED,eAAO,MAAM,oBAAoB,iBAClB,WAAW,gBACX,MAAM,EAAE,KACpB,KAAK,GAAG,SAqBV,CAAA;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,OAAO;WAsBtC,MAAM;YACL,OAAO;;;;EAclB;AAED,wBAAgB,UAAU,CAAC,OAAO,EAAE,OAAO;;;;EAQ1C"}

package/dist/lib/price.js

@@ -0,0 +1,66 @@
+// Return the cheapest available variant for pricing details
+export const getCheapestProductFromVariantsFn = (productVariants) => {
+    const availableVariants = productVariants.filter((variant) => variant.availableForSale);
+    // Use pricing from in-stock variants only. If all are out of stock use all variants.
+    const activeVariants = availableVariants.length
+        ? availableVariants
+        : productVariants;
+    return activeVariants.reduce((lowest, current) => {
+        return parseFloat(current.price.amount) < parseFloat(lowest.price.amount)
+            ? current
+            : lowest;
+    });
+};
+export const getBadgeForProductFn = (badgeConfig = {}, productTags = []) => {
+    const badgePositions = ["below", "bottom", "top"];
+    const badgesCombined = [];
+    const addBadgesToCombined = (badgePosition) => {
+        var _a;
+        return (_a = badgeConfig[badgePosition]) === null || _a === void 0 ? void 0 : _a.forEach((badge) => badgesCombined.push(Object.assign(Object.assign({}, badge), { verticalPosition: badgePosition })));
+    };
+    badgePositions.forEach(addBadgesToCombined);
+    badgesCombined.sort((a, b) => a.priority - b.priority);
+    let productBadge = badgesCombined.find((badge) => {
+        if (productTags.includes(badge.tags[0])) {
+            if (productTags.includes(badge.excludeTags[0]))
+                return false;
+            return true;
+        }
+        return false;
+    });
+    return productBadge;
+};
+export function getPriceRangesFn(product) {
+    const { minVariantPrice: minPrice, maxVariantPrice: maxPrice } = product.priceRange;
+    const { minVariantPrice: minCompareAt, maxVariantPrice: maxCompareAt } = product.compareAtPriceRange;
+    const floatMinPrice = parseFloat(minPrice.amount);
+    const floatMaxPrice = minPrice.amount !== maxPrice.amount && parseFloat(maxPrice.amount);
+    const floatMinCompareAt = minCompareAt && parseFloat(minCompareAt.amount);
+    const floatMaxCompareAt = minCompareAt.amount !== maxCompareAt.amount &&
+        parseFloat(maxCompareAt.amount);
+    const isSale = product.variants.some((variant) => {
+        return (variant.compareAtPrice &&
+            parseFloat(variant.price.amount) <
+                parseFloat(variant.compareAtPrice.amount));
+    });
+    const formattedPrice = {
+        price: floatMinPrice,
+        isSale,
+    };
+    if (floatMaxPrice)
+        formattedPrice.priceHigh = floatMaxPrice;
+    if (floatMinCompareAt)
+        formattedPrice.compareAtPrice = floatMinCompareAt;
+    if (floatMaxCompareAt)
+        formattedPrice.compareAtPriceHigh = floatMaxCompareAt;
+    return formattedPrice;
+}
+export function getPriceFn(product) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    return {
+        price: parseFloat((_b = (_a = product.variants[0]) === null || _a === void 0 ? void 0 : _a.price) === null || _b === void 0 ? void 0 : _b.amount),
+        compareAtPrice: parseFloat((_d = (_c = product.variants[0]) === null || _c === void 0 ? void 0 : _c.compareAtPrice) === null || _d === void 0 ? void 0 : _d.amount),
+        isSale: parseFloat((_f = (_e = product.variants[0]) === null || _e === void 0 ? void 0 : _e.price) === null || _f === void 0 ? void 0 : _f.amount) <
+            parseFloat((_h = (_g = product.variants[0]) === null || _g === void 0 ? void 0 : _g.compareAtPrice) === null || _h === void 0 ? void 0 : _h.amount),
+    };
+}

package/dist/lib/utils.d.ts

@@ -146,6 +146,7 @@ export declare const mapFlexToAlignment: (flexClass: string) => string;
 export declare function getIdFromGid(gid: string | undefined): string;
 export declare function productGidFromId(id: string | null | undefined): string | null;
 export declare function variantGidFromId(id: string | null | undefined): string | null;
+export declare function throttleFunction(fn: Function, wait: number): ((...args: any[]) => void)[];
 export declare function formatRelativeTime(inputDate: Date | string): string;
 export declare const stringRatioToInt: (string: string) => number;
 export declare const getOverlayStyle: (opacity: number) => {
@@ -171,6 +172,7 @@ type DestinationActions = {
     }) => void;
 };
 export declare const getDestinationHandler: (type: "app-screen" | "url" | "product" | "collection" | "none") => ((location: string, actions: DestinationActions) => void) | ((location: string, actions: DestinationActions) => void) | ((location: string, actions: DestinationActions) => void) | ((location: string, actions: DestinationActions) => void) | (() => void);
+export declare function getProductGidsFromIds(ids: string[]): string[];
 export declare const createCollectionImageMap: (collections: {
     id: string;
     customImage: boolean;

package/dist/lib/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../lib/utils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../lib/utils.ts"],"names":[],"mappings":"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"}

package/dist/lib/utils.js

@@ -37,13 +37,13 @@ export const getColor = (colorOption) => {
         : undefined;
 };
 export const getBorderSidesStyle = (borderSides) => {
-    const style = borderSides.includes("all")
+    const style = (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("all"))
         ? { borderWidth: "1px" }
         : {
-            borderTopWidth: borderSides.includes("top") ? "1px" : 0,
-            borderBottomWidth: borderSides.includes("bottom") ? "1px" : 0,
-            borderLeftWidth: borderSides.includes("left") ? "1px" : 0,
-            borderRightWidth: borderSides.includes("right") ? "1px" : 0,
+            borderTopWidth: (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("top")) ? "1px" : 0,
+            borderBottomWidth: (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("bottom")) ? "1px" : 0,
+            borderLeftWidth: (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("left")) ? "1px" : 0,
+            borderRightWidth: (borderSides === null || borderSides === void 0 ? void 0 : borderSides.includes("right")) ? "1px" : 0,
         };
     return style;
 };
@@ -149,6 +149,24 @@ export function variantGidFromId(id) {
         return id;
     return `gid://shopify/ProductVariant/${id}`;
 }
+// Use to prevent multiple clicks in quick succession
+export function throttleFunction(fn, wait) {
+    let throttle = false;
+    return [
+        function () {
+            return throttle;
+        },
+        function (...args) {
+            if (!throttle) {
+                fn(...args);
+                throttle = true;
+                setInterval(() => {
+                    throttle = false;
+                }, wait);
+            }
+        },
+    ];
+}
 export function formatRelativeTime(inputDate) {
     dayjs.extend(relativeTime);
     return dayjs(inputDate).fromNow();
@@ -184,6 +202,14 @@ const DESTINATION_HANDLERS = {
 export const getDestinationHandler = (type) => {
     return DESTINATION_HANDLERS[type];
 };
+export function getProductGidsFromIds(ids) {
+    return ids.map((id) => {
+        if (id.startsWith("gid://shopify/Product/")) {
+            return id;
+        }
+        return `gid://shopify/Product/${id}`;
+    });
+}
 export const createCollectionImageMap = (collections) => {
     return collections.reduce((imageMap, collection) => {
         if (collection.customImage && collection.image) {

package/dist/styles.css

@@ -664,6 +664,9 @@ video {
 .pointer-events-auto {
   pointer-events: auto;
 }
+.visible {
+  visibility: visible;
+}
 .fixed {
   position: fixed;
 }
@@ -922,6 +925,9 @@ video {
 .h-14 {
   height: 3.5rem;
 }
+.h-16 {
+  height: 4rem;
+}
 .h-2 {
   height: 0.5rem;
 }
@@ -991,6 +997,9 @@ video {
 .min-h-\[24px\] {
   min-height: 24px;
 }
+.w-0 {
+  width: 0px;
+}
 .w-1 {
   width: 0.25rem;
 }
@@ -1123,6 +1132,10 @@ video {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.translate-x-\[2px\] {
+  --tw-translate-x: 2px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .translate-y-0 {
   --tw-translate-y: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1319,9 +1332,6 @@ video {
 .self-center {
   align-self: center;
 }
-.self-stretch {
-  align-self: stretch;
-}
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1416,12 +1426,19 @@ video {
 .border-2 {
   border-width: 2px;
 }
+.border-y-8 {
+  border-top-width: 8px;
+  border-bottom-width: 8px;
+}
 .border-b {
   border-bottom-width: 1px;
 }
 .border-l {
   border-left-width: 1px;
 }
+.border-l-\[16px\] {
+  border-left-width: 16px;
+}
 .border-t {
   border-top-width: 1px;
 }
@@ -1470,9 +1487,17 @@ video {
 .border-transparent {
   border-color: transparent;
 }
+.border-y-transparent {
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+}
 .border-l-transparent {
   border-left-color: transparent;
 }
+.border-l-white {
+  --tw-border-opacity: 1;
+  border-left-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
 .border-t-transparent {
   border-top-color: transparent;
 }
@@ -1487,6 +1512,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
+.bg-black\/75 {
+  background-color: rgb(0 0 0 / 0.75);
+}
 .bg-black\/80 {
   background-color: rgb(0 0 0 / 0.8);
 }
@@ -1514,10 +1542,6 @@ video {
 .bg-coreColors-pageColor {
   background-color: var(--coreColors-pageColor);
 }
-.bg-gray-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
-}
 .bg-productBadging-fill {
   background-color: var(--productBadging-fill);
 }
@@ -1707,10 +1731,6 @@ video {
 .font-fontRegular {
   font-family: var(--fontRegular);
 }
-.text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
 .text-5xl {
   font-size: 3rem;
   line-height: 1;
@@ -2098,6 +2118,9 @@ video {
 .ease-in-out {
   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
+.paused {
+  animation-play-state: paused;
+}
 .container {
     padding-right: 16px;
     padding-left: 16px;
@@ -2249,10 +2272,20 @@ body::-webkit-scrollbar {
   width: 18px;
 }
 
+.hover\:scale-110:hover {
+  --tw-scale-x: 1.1;
+  --tw-scale-y: 1.1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .hover\:bg-accent:hover {
   background-color: hsl(var(--accent));
 }
 
+.hover\:bg-black\/90:hover {
+  background-color: rgb(0 0 0 / 0.9);
+}
+
 .hover\:bg-muted:hover {
   background-color: hsl(var(--muted));
 }
@@ -2320,6 +2353,11 @@ body::-webkit-scrollbar {
   --tw-ring-color: hsl(var(--ring));
 }
 
+.focus\:ring-white:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-offset-2:focus {
   --tw-ring-offset-width: 2px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.7.7",
+  "version": "0.7.8",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",
@@ -73,6 +73,6 @@
     "swr": "^2.2.5",
     "tailwind-merge": "^1.13.2",
     "tailwindcss-animate": "^1.0.6",
-    "vaul": "^1.1.0"
+    "vaul": "0.9.1"
   }
 }