@tapcart/mobile-components 0.8.20 → 0.8.24

package/dist/components/hooks/use-block-conditional-rendering.d.ts

@@ -2,6 +2,8 @@ import { PhoenixBlock } from "app-studio-types";
 export declare const useBlockConditionalRendering: (_props: {
     appId: string;
     apiUrl: string;
+    deviceVariables: any;
+    customerVariables: any;
 }, _block: PhoenixBlock) => {
     shouldShow: boolean;
     isLoading: boolean;

package/dist/components/hooks/use-block-conditional-rendering.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-block-conditional-rendering.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-block-conditional-rendering.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,YAAY,EAGb,MAAM,kBAAkB,CAAA;AAgBzB,eAAO,MAAM,4BAA4B,WAC/B;IACN,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,UACO,YAAY;;;CA8KrB,CAAA"}
+{"version":3,"file":"use-block-conditional-rendering.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-block-conditional-rendering.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,YAAY,EAGb,MAAM,kBAAkB,CAAA;AAczB,eAAO,MAAM,4BAA4B,WAC/B;IACN,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,eAAe,EAAE,GAAG,CAAA;IACpB,iBAAiB,EAAE,GAAG,CAAA;CACvB,UACO,YAAY;;;CA+KrB,CAAA"}

package/dist/components/hooks/use-block-conditional-rendering.js

@@ -14,19 +14,17 @@ import { useMemo } from "react";
 import { useProducts } from "./use-products";
 import { useCollection } from "./use-collection";
 import { useSearchParams } from "next/navigation";
-//@ts-expect-error
-import { useVariables } from "@tapcart/webbridge-react";
 import { gidFromId, countNumberOfTagsInState, getEnvState, shouldShowBlock, evaluateConditions, } from "../../lib/utils";
 export const useBlockConditionalRendering = (_props, _block) => {
     var _a, _b, _c, _d, _e;
     const _f = ((_a = _block === null || _block === void 0 ? void 0 : _block.visibilityConditions) === null || _a === void 0 ? void 0 : _a.conditions) || {}, { enabled: conditionalsV1IsEnabled = false, exclude: isInverse = false } = _f, restOfProps = __rest(_f, ["enabled", "exclude"]);
     const { _version = 1, conditions, enabled: conditionalsV2IsEnabled = false, } = (_block === null || _block === void 0 ? void 0 : _block.visibilityConditions) || {};
+    if (!conditionalsV1IsEnabled && !conditionalsV2IsEnabled) {
+        return { shouldShow: true, isLoading: false };
+    }
     const blockState = restOfProps;
-    const { appId = "", apiUrl = "" } = _props;
+    const { appId = "", apiUrl = "", deviceVariables, customerVariables } = _props;
     const searchParams = useSearchParams();
-    const variables = useVariables();
-    const deviceVariables = variables === null || variables === void 0 ? void 0 : variables.device;
-    const customerVariables = variables === null || variables === void 0 ? void 0 : variables.customer;
     // locale is provided in this form en_US
     const [language, country] = ((_b = deviceVariables === null || deviceVariables === void 0 ? void 0 : deviceVariables.locale) === null || _b === void 0 ? void 0 : _b.split("_")) || [];
     const productId = (_c = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get("productId")) !== null && _c !== void 0 ? _c : undefined;

package/dist/components/hooks/use-recommendations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-recommendations.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-recommendations.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAKtD,UAAU,sBAAsB;IAC9B,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACnC,MAAM,EAAE,MAAM,CAAA;CACf;AAED,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,WAAW,EAAE,UAAU,EAAE,CAAA;IACzB,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,GAAG,CAAA;CACX;AAOD,QAAA,MAAM,kBAAkB,gCAGrB,sBAAsB,KAAG,uBAmC3B,CAAA;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"use-recommendations.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-recommendations.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAOtD,UAAU,sBAAsB;IAC9B,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACnC,MAAM,EAAE,MAAM,CAAA;CACf;AASD,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,WAAW,EAAE,UAAU,EAAE,CAAA;IACzB,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,GAAG,CAAA;CACX;AAiBD,QAAA,MAAM,kBAAkB,gCAGrB,sBAAsB,KAAG,uBA6D3B,CAAA;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/components/hooks/use-recommendations.js

@@ -1,18 +1,43 @@
 "use client";
+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());
+    });
+};
 import { useSearchParams } from "next/navigation";
+import RecommendationsLocalStorage from "../libs/cache/RecommendationsLocalStorage";
+import React from "react";
 import useSWR from "swr";
 const constructURL = (apiURL) => {
     const url = new URL(apiURL);
     return url.toString();
 };
+const getCollections = (collections) => {
+    return collections
+        ? collections === null || collections === void 0 ? void 0 : collections.filter((obj) => obj.handle !== "empty-collection")
+        : [];
+};
+const recommendationsLocalStorage = new RecommendationsLocalStorage();
 const useRecommendations = ({ queryVariables, apiURL, }) => {
-    var _a;
     const searchParams = useSearchParams();
     const recommendation = (searchParams === null || searchParams === void 0 ? void 0 : searchParams.get("recommendation")) || "";
+    const [cachedRecommendation, setCachedRecommendations] = React.useState(recommendationsLocalStorage.getCacheItem({
+        id: `${recommendation}-${queryVariables === null || queryVariables === void 0 ? void 0 : queryVariables.language}`,
+    }));
     const fetcher = (body) => fetch(constructURL(apiURL), {
         method: "POST",
         body: JSON.stringify(body),
-    }).then((res) => res.json());
+    }).then((res) => __awaiter(void 0, void 0, void 0, function* () {
+        const data = yield res.json();
+        if (recommendation === "") {
+            recommendationsLocalStorage.setCacheItem(Object.assign({ id: `${queryVariables === null || queryVariables === void 0 ? void 0 : queryVariables.language}` }, data));
+        }
+        return data;
+    }));
     const { data, error, isLoading } = useSWR({
         appId: queryVariables.appId,
         query: recommendation,
@@ -21,12 +46,22 @@ const useRecommendations = ({ queryVariables, apiURL, }) => {
         revalidateOnFocus: false,
         revalidateOnReconnect: false,
     });
-    const collections = (_a = data === null || data === void 0 ? void 0 : data.collections) === null || _a === void 0 ? void 0 : _a.filter((obj) => obj.handle !== "empty-collection");
+    React.useEffect(() => {
+        if (!data) {
+            return;
+        }
+        setCachedRecommendations({
+            id: `${recommendation}-${queryVariables === null || queryVariables === void 0 ? void 0 : queryVariables.language}`,
+            products: data === null || data === void 0 ? void 0 : data.products,
+            collections: getCollections(data === null || data === void 0 ? void 0 : data.collections),
+            searches: data === null || data === void 0 ? void 0 : data.searches,
+        });
+    }, [data]);
     return {
-        products: data === null || data === void 0 ? void 0 : data.products,
-        collections: recommendation === "*" ? [] : collections,
-        searches: data === null || data === void 0 ? void 0 : data.searches,
-        isLoading: isLoading,
+        products: cachedRecommendation === null || cachedRecommendation === void 0 ? void 0 : cachedRecommendation.products,
+        collections: cachedRecommendation === null || cachedRecommendation === void 0 ? void 0 : cachedRecommendation.collections,
+        searches: cachedRecommendation === null || cachedRecommendation === void 0 ? void 0 : cachedRecommendation.searches,
+        isLoading: !cachedRecommendation && isLoading,
         error: error,
     };
 };

package/dist/components/libs/cache/RecommendationsLocalStorage.d.ts

@@ -0,0 +1,30 @@
+import AppStudioCache from "./AppStudioCache";
+type CachedRecommendation = {
+    id: string;
+    ct: number;
+    [key: string]: any;
+};
+export default class RecommendationsLocalStorage extends AppStudioCache {
+    adapter: string;
+    cachePrefix: string;
+    getQueryCacheKey(id: string): string;
+    constructor();
+    getCache(): CachedRecommendation[];
+    getCacheItem({ id }: {
+        id: string;
+    }): object | null;
+    setCacheItem(recommendation: {
+        id: string;
+    }, cache?: CachedRecommendation[], shouldExpire?: boolean): {
+        id: string;
+    } | undefined;
+    setCacheItems(items: {
+        id: string;
+    }[]): ({
+        id: string;
+    } | undefined)[];
+    expireCacheData(numNewItems?: number): void;
+    clearCache(): void;
+}
+export {};
+//# sourceMappingURL=RecommendationsLocalStorage.d.ts.map

package/dist/components/libs/cache/RecommendationsLocalStorage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecommendationsLocalStorage.d.ts","sourceRoot":"","sources":["../../../../components/libs/cache/RecommendationsLocalStorage.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAE7C,KAAK,oBAAoB,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,EAAE,EAAE,MAAM,CAAA;IACV,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CACnB,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,2BAA4B,SAAQ,cAAc;IACrE,OAAO,EAAE,MAAM,CAAiC;IAChD,WAAW,EAAE,MAAM,CAAsB;IAEzC,gBAAgB,CAAC,EAAE,EAAE,MAAM;;IAQ3B,QAAQ,IAAI,oBAAoB,EAAE;IAiBlC,YAAY,CAAC,EAAE,EAAE,EAAE,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,MAAM,GAAG,IAAI;IAOnD,YAAY,CACV,cAAc,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,EAC9B,KAAK,CAAC,EAAE,oBAAoB,EAAE,EAC9B,YAAY,GAAE,OAAc;YAFN,MAAM;;IAiB9B,aAAa,CAAC,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE;;;IASrC,eAAe,CAAC,WAAW,GAAE,MAAU;IAUvC,UAAU;CAMX"}

package/dist/components/libs/cache/RecommendationsLocalStorage.js

@@ -0,0 +1,67 @@
+import AppStudioCache from "./AppStudioCache";
+export default class RecommendationsLocalStorage extends AppStudioCache {
+    getQueryCacheKey(id) {
+        return `${this.cachePrefix}-data-${id}`;
+    }
+    constructor() {
+        super();
+        this.adapter = "local-storage-recommendation";
+        this.cachePrefix = "as-recommendation";
+    }
+    getCache() {
+        const items = [];
+        for (let i = 0; i < localStorage.length; i++) {
+            const key = localStorage.key(i);
+            if (key === null || key === void 0 ? void 0 : key.startsWith(this.getQueryCacheKey(""))) {
+                const value = localStorage.getItem(key);
+                if (value) {
+                    const parsedValue = JSON.parse(value);
+                    if (parsedValue === null || parsedValue === void 0 ? void 0 : parsedValue.id) {
+                        items.push(JSON.parse(value));
+                    }
+                }
+            }
+        }
+        return items;
+    }
+    getCacheItem({ id }) {
+        if (!(id === null || id === void 0 ? void 0 : id.length))
+            return null;
+        const item = localStorage.getItem(this.getQueryCacheKey(id));
+        if (!item)
+            return null;
+        return JSON.parse(item);
+    }
+    setCacheItem(recommendation, cache, shouldExpire = true) {
+        var _a;
+        if (!((_a = recommendation.id) === null || _a === void 0 ? void 0 : _a.length))
+            return;
+        if (shouldExpire) {
+            this.expireCacheData();
+        }
+        localStorage.setItem(this.getQueryCacheKey(recommendation.id), JSON.stringify(Object.assign(Object.assign({}, recommendation), { ct: Date.now() })));
+        return recommendation;
+    }
+    setCacheItems(items) {
+        this.expireCacheData(items.length);
+        const cache = this.getCache();
+        const cachedItems = items.map((item) => this.setCacheItem(item, cache, false));
+        return cachedItems;
+    }
+    expireCacheData(numNewItems = 0) {
+        const cacheItems = this.getCache();
+        if (cacheItems.length + numNewItems < 20)
+            return;
+        const numItemsToDelete = Math.max(10, numNewItems);
+        cacheItems.sort((a, b) => a.ct - b.ct);
+        cacheItems.slice(0, numItemsToDelete).forEach((item) => {
+            localStorage.removeItem(this.getQueryCacheKey(item.id));
+        });
+    }
+    clearCache() {
+        const cacheItems = this.getCache();
+        cacheItems.forEach((item) => {
+            localStorage.removeItem(this.getQueryCacheKey(item.id));
+        });
+    }
+}

package/dist/components/ui/loading-dots.d.ts

@@ -4,6 +4,7 @@ export interface LoadingDotsProps {
     spacing?: 0 | 1 | 2 | 4;
     opacity?: number;
     show?: boolean;
+    showBackground?: boolean;
 }
-export declare const LoadingDots: ({ iconColor, size, spacing, opacity, show, }: LoadingDotsProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const LoadingDots: ({ iconColor, size, spacing, opacity, show, showBackground, }: LoadingDotsProps) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=loading-dots.d.ts.map

package/dist/components/ui/loading-dots.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loading-dots.d.ts","sourceRoot":"","sources":["../../../components/ui/loading-dots.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED,eAAO,MAAM,WAAW,iDAMrB,gBAAgB,mDAyClB,CAAA"}
+{"version":3,"file":"loading-dots.d.ts","sourceRoot":"","sources":["../../../components/ui/loading-dots.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,eAAO,MAAM,WAAW,iEAOrB,gBAAgB,mDA6ClB,CAAA"}

package/dist/components/ui/loading-dots.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
 import React from "react";
-export const LoadingDots = ({ iconColor, size = 4, spacing = 1, opacity = 0.8, show = false, }) => {
+export const LoadingDots = ({ iconColor, size = 4, spacing = 1, opacity = 0.8, show = false, showBackground = true, }) => {
     const [showLoadingDots, setShowLoadingDots] = React.useState(show);
     const [isAnimatingOut, setIsAnimatingOut] = React.useState(false);
     React.useEffect(() => {
@@ -18,5 +19,7 @@ export const LoadingDots = ({ iconColor, size = 4, spacing = 1, opacity = 0.8, s
     }, [show]);
     if (!showLoadingDots)
         return null;
-    return (_jsx("div", Object.assign({ className: `absolute inset-0 flex items-center justify-center bg-white bg-opacity-70 ${isAnimatingOut ? "animate-fadeOut" : "animate-fadeIn"}` }, { children: _jsxs("div", Object.assign({ className: `flex space-x-${spacing}` }, { children: [_jsx("div", { style: { backgroundColor: iconColor, opacity: opacity }, className: `h-${size} w-${size} bg-black rounded-full animate-bounce [animation-delay:-0.3s]` }), _jsx("div", { style: { backgroundColor: iconColor, opacity: opacity }, className: `h-${size} w-${size} bg-black rounded-full animate-bounce [animation-delay:-0.15s]` }), _jsx("div", { style: { backgroundColor: iconColor, opacity: opacity }, className: `h-${size} w-${size} bg-black rounded-full animate-bounce` })] })) })));
+    return (_jsx("div", Object.assign({ className: cn("absolute inset-0 flex items-center justify-center", isAnimatingOut ? "animate-fadeOut" : "animate-fadeIn", {
+            "bg-white bg-opacity-70": showBackground,
+        }) }, { children: _jsxs("div", Object.assign({ className: `flex space-x-${spacing}` }, { children: [_jsx("div", { style: { backgroundColor: iconColor, opacity: opacity }, className: `h-${size} w-${size} bg-black rounded-full animate-bounce [animation-delay:-0.3s]` }), _jsx("div", { style: { backgroundColor: iconColor, opacity: opacity }, className: `h-${size} w-${size} bg-black rounded-full animate-bounce [animation-delay:-0.15s]` }), _jsx("div", { style: { backgroundColor: iconColor, opacity: opacity }, className: `h-${size} w-${size} bg-black rounded-full animate-bounce` })] })) })));
 };

package/dist/components/ui/virtual-grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"virtual-grid.d.ts","sourceRoot":"","sources":["../../../components/ui/virtual-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,UAAU,QAAQ;IAChB,SAAS,EAAE,GAAG,CAAA;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,aAAa,EAAE,OAAO,CAAA;IACtB,aAAa,EAAE,OAAO,CAAA;IACtB,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE;QACR,aAAa,EAAE,MAAM,CAAA;QACrB,WAAW,EAAE,MAAM,CAAA;KACpB,CAAA;IACD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B;AAED,QAAA,MAAM,mBAAmB;;mFAYvB,CAAA;AAEF,MAAM,WAAW,gBACf,SAAQ,QAAQ,EACd,YAAY,CAAC,OAAO,mBAAmB,CAAC;CAAG;AAE/C,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,QAAY,EACZ,eAAqB,EACrB,aAAa,EACb,aAAa,EACb,UAAU,EACV,OAGC,EACD,KAAK,GACN,EAAE,gBAAgB,2CAwElB;AAED,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,CAAA"}
+{"version":3,"file":"virtual-grid.d.ts","sourceRoot":"","sources":["../../../components/ui/virtual-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,UAAU,QAAQ;IAChB,SAAS,EAAE,GAAG,CAAA;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,aAAa,EAAE,OAAO,CAAA;IACtB,aAAa,EAAE,OAAO,CAAA;IACtB,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE;QACR,aAAa,EAAE,MAAM,CAAA;QACrB,WAAW,EAAE,MAAM,CAAA;KACpB,CAAA;IACD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B;AAED,QAAA,MAAM,mBAAmB;;mFAYvB,CAAA;AAEF,MAAM,WAAW,gBACf,SAAQ,QAAQ,EACd,YAAY,CAAC,OAAO,mBAAmB,CAAC;CAAG;AAE/C,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,QAAY,EACZ,eAAqB,EACrB,aAAa,EACb,aAAa,EACb,UAAU,EACV,OAGC,EACD,KAAK,GACN,EAAE,gBAAgB,2CAqElB;AAED,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/components/ui/virtual-grid.js

@@ -36,8 +36,7 @@ function VirtualGrid({ className, columns, children, overscan = 4, estimatedHeig
     });
     return (_jsx(Container, Object.assign({ style: style }, { children: _jsx("div", Object.assign({ style: {
                 width: "100%",
-                height: (Math.ceil(childrenArray.length / col) - 1) * spacing.verticalGap +
-                    rowVirtualizer.totalSize,
+                height: rowVirtualizer.totalSize,
                 position: "relative",
             } }, { children: rowVirtualizer.virtualItems.map((virtualRow) => {
                 const rowStartIndex = virtualRow.index * col;
@@ -46,8 +45,9 @@ function VirtualGrid({ className, columns, children, overscan = 4, estimatedHeig
                         top: 0,
                         left: 0,
                         width: "100%",
-                        transform: `translateY(${virtualRow.start + virtualRow.index * spacing.verticalGap}px)`,
+                        transform: `translateY(${virtualRow.start}px)`,
                         columnGap: `${spacing === null || spacing === void 0 ? void 0 : spacing.horizontalGap}px`,
+                        paddingBottom: `${spacing === null || spacing === void 0 ? void 0 : spacing.verticalGap}px`,
                     }, ref: virtualRow.measureRef }, { children: Array.from({ length: col }).map((_, colIndex) => {
                         const index = rowStartIndex + colIndex;
                         if (index >= childrenArray.length && !isReachingEnd)

package/dist/lib/utils.d.ts

@@ -308,7 +308,7 @@ export declare const getLoyaltyButtonProps: (buttonConfig: TextStyle & Backgroun
     };
     style: {
         backgroundColor: string | undefined;
-        color: string | undefined;
+        borderColor: string | undefined;
         boxShadow: string;
         borderRadius: string | undefined;
         width: string;
@@ -323,7 +323,7 @@ export declare const getLoyaltyButtonProps: (buttonConfig: TextStyle & Backgroun
         paddingRight?: undefined;
     } | {
         backgroundColor: string | undefined;
-        color: string | undefined;
+        borderColor: string | undefined;
         boxShadow: string;
         borderRadius: string | undefined;
         width: string;
@@ -338,7 +338,7 @@ export declare const getLoyaltyButtonProps: (buttonConfig: TextStyle & Backgroun
         paddingRight?: undefined;
     } | {
         backgroundColor: string | undefined;
-        color: string | undefined;
+        borderColor: string | undefined;
         boxShadow: string;
         borderRadius: string | undefined;
         width: string;
@@ -353,7 +353,7 @@ export declare const getLoyaltyButtonProps: (buttonConfig: TextStyle & Backgroun
         paddingRight: string | undefined;
     } | {
         backgroundColor: string | undefined;
-        color: string | undefined;
+        borderColor: string | undefined;
         boxShadow: string;
         borderRadius: string | undefined;
         width: string;

package/dist/lib/utils.js

@@ -565,7 +565,7 @@ export const getLoyaltyButtonProps = (buttonConfig, state) => {
     const borderSides = buttonConfig[`${state}BorderSides`];
     return {
         labelStyle: Object.assign(Object.assign({}, getTextStyle(buttonConfig)), { color: getColor(textColor) }),
-        style: Object.assign(Object.assign(Object.assign({}, getPaddingStyle(buttonConfig.padding)), getBorderSidesStyle(borderSides)), { backgroundColor: getColor(backgroundColor), color: getColor(borderColor), boxShadow: buttonConfig.backgroundShadow
+        style: Object.assign(Object.assign(Object.assign({}, getPaddingStyle(buttonConfig.padding)), getBorderSidesStyle(borderSides)), { backgroundColor: getColor(backgroundColor), borderColor: getColor(borderColor), boxShadow: buttonConfig.backgroundShadow
                 ? "0px 4px 6px rgba(0,0,0,0.1)"
                 : "none", borderRadius: buttonConfig.cornerRadius !== undefined
                 ? `${buttonConfig.cornerRadius}px`

package/dist/styles.css

@@ -2115,6 +2115,9 @@ video {
 .text-textColors-strikethroughPriceText {
   color: var(--textColors-strikethroughPriceText);
 }
+.underline {
+  text-decoration-line: underline;
+}
 .line-through {
   text-decoration-line: line-through;
 }
@@ -2279,9 +2282,6 @@ video {
     transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
   }
 }
-.fade-in {
-  --tw-enter-opacity: 0;
-}
 .duration-150 {
   animation-duration: 150ms;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.8.20",
+  "version": "0.8.24",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",