@tapcart/mobile-components 0.8.41 → 0.8.42

package/dist/components/ui/icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../components/ui/icon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAEL,eAAe,EAwChB,MAAM,qBAAqB,CAAA;AAI5B,QAAA,MAAM,YAAY;;;mFAiBjB,CAAA;AA8DD,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC/B;AA0HD,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,IAAI,EACJ,IAAW,EACX,KAAK,EACL,GAAG,EACH,SAAS,EACT,kBAAkB,EAClB,WAAW,EACX,WAAW,EACX,cAAc,EACd,GAAG,KAAK,EACT,EAAE,SAAS,2CAoBX;AAED,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../components/ui/icon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAEL,eAAe,EAwChB,MAAM,qBAAqB,CAAA;AAI5B,QAAA,MAAM,YAAY;;;mFAiBjB,CAAA;AA8DD,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC/B;AAyLD,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,IAAI,EACJ,IAAW,EACX,KAAK,EACL,GAAG,EACH,SAAS,EACT,kBAAkB,EAClB,WAAW,EACX,WAAW,EACX,cAAc,EACd,GAAG,KAAK,EACT,EAAE,SAAS,2CAoBX;AAED,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/ui/icon.js

@@ -94,50 +94,87 @@ const TablerIcon = ({ name, size }) => {
 const CustomIcon = ({ url, size, color, strokeColor, strokeWidth, fillColor, fillPercentage, secondaryFillColor, }) => {
     return (_jsx(ReactSVG, { src: url, beforeInjection: (svg) => {
             svg.setAttribute("style", `width: ${sizeMapping[size]}px; height: ${sizeMapping[size]}px`);
+            const uniqueId = crypto.randomUUID();
+            const fillGradientId = `fill-gradient-${uniqueId}`;
+            const strokeGradientId = `stroke-gradient-${uniqueId}`;
+            const percentage = Math.min(Math.max(fillPercentage, 0), 1);
+            let defs = svg.querySelector("defs");
+            if (!defs) {
+                defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+                svg.prepend(defs);
+            }
+            if (percentage > 0 && percentage < 1) {
+                const fillGradient = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
+                fillGradient.setAttribute("id", fillGradientId);
+                fillGradient.setAttribute("x1", "0%");
+                fillGradient.setAttribute("y1", "0%");
+                fillGradient.setAttribute("x2", "100%");
+                fillGradient.setAttribute("y2", "0%");
+                const fillStop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
+                fillStop1.setAttribute("offset", `${percentage * 100}%`);
+                fillStop1.setAttribute("stop-color", color || fillColor || "currentColor");
+                fillGradient.appendChild(fillStop1);
+                const fillStop2 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
+                fillStop2.setAttribute("offset", `${percentage * 100}%`);
+                fillStop2.setAttribute("stop-color", secondaryFillColor || "transparent");
+                fillGradient.appendChild(fillStop2);
+                defs.appendChild(fillGradient);
+                const strokeGradient = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
+                strokeGradient.setAttribute("id", strokeGradientId);
+                strokeGradient.setAttribute("x1", "0%");
+                strokeGradient.setAttribute("y1", "0%");
+                strokeGradient.setAttribute("x2", "100%");
+                strokeGradient.setAttribute("y2", "0%");
+                const strokeStop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
+                strokeStop1.setAttribute("offset", `${percentage * 100}%`);
+                strokeStop1.setAttribute("stop-color", color || strokeColor || fillColor || "currentColor");
+                strokeGradient.appendChild(strokeStop1);
+                const strokeStop2 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
+                strokeStop2.setAttribute("offset", `${percentage * 100}%`);
+                strokeStop2.setAttribute("stop-color", secondaryFillColor || "transparent");
+                strokeGradient.appendChild(strokeStop2);
+                defs.appendChild(strokeGradient);
+            }
             const paths = svg.querySelectorAll("path");
             paths.forEach((path) => {
-                if (color) {
-                    if (path.hasAttribute("fill") && fillPercentage === 1) {
-                        path.setAttribute("fill", color);
+                if (path.hasAttribute("fill") &&
+                    path.getAttribute("fill") !== "none") {
+                    if (percentage === 1) {
+                        path.setAttribute("fill", color ||
+                            fillColor ||
+                            path.getAttribute("fill") ||
+                            "currentColor");
                     }
-                    path.setAttribute("stroke", color);
-                }
-                else {
-                    if (fillColor &&
-                        path.hasAttribute("fill") &&
-                        fillPercentage === 1) {
-                        path.setAttribute("fill", fillColor);
+                    else if (percentage === 0) {
+                        path.setAttribute("fill", secondaryFillColor || "transparent");
                     }
-                    if (strokeColor) {
-                        path.setAttribute("stroke", strokeColor);
+                    else {
+                        path.setAttribute("fill", `url(#${fillGradientId})`);
                     }
                 }
-                if (path.hasAttribute("stroke")) {
-                    path.setAttribute("stroke-width", strokeWidthMapping[size].toString());
-                }
-                if (strokeWidth != null && path.hasAttribute("stroke")) {
-                    path.setAttribute("stroke-width", strokeWidth.toString());
+                if (path.hasAttribute("stroke") &&
+                    path.getAttribute("stroke") !== "none") {
+                    if (percentage === 1) {
+                        path.setAttribute("stroke", color ||
+                            strokeColor ||
+                            path.getAttribute("stroke") ||
+                            "currentColor");
+                    }
+                    else if (percentage === 0) {
+                        path.setAttribute("stroke", secondaryFillColor || "transparent");
+                    }
+                    else {
+                        path.setAttribute("stroke", `url(#${strokeGradientId})`);
+                    }
                 }
-                // Create a gradient fill based on the fillPercentage
-                if (fillPercentage && fillPercentage > 0 && fillPercentage < 1) {
-                    const percentage = Math.min(Math.max(fillPercentage, 0), 1);
-                    const gradientId = `gradient-${Math.random()}`;
-                    const gradient = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
-                    gradient.setAttribute("id", gradientId);
-                    gradient.setAttribute("x1", "0%");
-                    gradient.setAttribute("y1", "0%");
-                    gradient.setAttribute("x2", "100%");
-                    gradient.setAttribute("y2", "0%");
-                    const stop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
-                    stop1.setAttribute("offset", `${percentage * 100}%`);
-                    stop1.setAttribute("stop-color", color || fillColor || "currentColor");
-                    gradient.appendChild(stop1);
-                    const stop2 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
-                    stop2.setAttribute("offset", `${percentage * 100}%`);
-                    stop2.setAttribute("stop-color", secondaryFillColor || "transparent"); // Use secondary fill color
-                    gradient.appendChild(stop2);
-                    svg.appendChild(gradient);
-                    path.setAttribute("fill", `url(#${gradientId})`);
+                if (path.hasAttribute("stroke") &&
+                    path.getAttribute("stroke") !== "none") {
+                    if (strokeWidth != null) {
+                        path.setAttribute("stroke-width", strokeWidth.toString());
+                    }
+                    else {
+                        path.setAttribute("stroke-width", strokeWidthMapping[size].toString());
+                    }
                 }
             });
         } }));

package/dist/components/ui/tap.js

@@ -2,7 +2,7 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import React, { useState, useEffect, useCallback, useRef, } from "react";
 // @ts-ignore -- webbridge-react is not typed (yet)
-import { useActions } from "@tapcart/webbridge-react";
+import { useActions } from "@tapcart/app-studio-sdk";
 // Shared manager for all instances of the hook
 const tapManager = (() => {
     const elements = new Map();

package/dist/lib/cart.util.d.ts

@@ -39,10 +39,39 @@ export type CalculatedData = {
 };
 export declare const DEFAULT_CALCULATED_DATA: CalculatedData;
 export declare const getCalculatedCartData: (cart: EnrichedCart) => CalculatedData;
-export declare const getCartItemKey: (variantId: string, sellingPlanId?: string, attributes?: {
-    [key: string]: string;
-} | {
-    key: string;
-    value: string;
-}[] | undefined) => string;
+export declare const getUniqueCartItemID: (options: {
+    variantId: string;
+    sellingPlanId?: string | undefined;
+    attributes?: {
+        [key: string]: string;
+    } | {
+        key: string;
+        value: string;
+    }[] | undefined;
+    discounts?: string[] | {
+        discountedAmount?: {
+            amount: string;
+            currencyCode: string;
+        } | undefined;
+        amount?: number | undefined;
+        title: string;
+        targetType?: string | undefined;
+        type?: string | undefined;
+        code?: string | undefined;
+    }[] | {
+        amount: number;
+        code: string;
+        title?: string | undefined;
+        type: string;
+        readOnly?: boolean | undefined;
+    }[] | {
+        discountedAmount: {
+            amount: string;
+            currencyCode: string;
+        };
+        targetType: string;
+        code?: string | undefined;
+        title?: string | undefined;
+    }[] | undefined;
+}) => string;
 //# sourceMappingURL=cart.util.d.ts.map

package/dist/lib/cart.util.d.ts.map

@@ -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,EAE7B,cAAc,EACf,MAAM,kBAAkB,CAAA;AAGzB,eAAO,MAAM,eAAe;cAKhB,MAAM;aACP,cAAc;;0BAEH;YAChB,gBAAgB,CAAC,EAAE;gBACjB,MAAM,EAAE,MAAM,CAAA;gBACd,YAAY,EAAE,MAAM,CAAA;aACrB,CAAA;YACD,KAAK,EAAE;gBACL,MAAM,EAAE,MAAM,CAAA;gBACd,YAAY,EAAE,MAAM,CAAA;aACrB,CAAA;YACD,cAAc,CAAC,EAAE;gBACf,MAAM,EAAE,MAAM,CAAA;gBACd,YAAY,EAAE,MAAM,CAAA;aACrB,CAAA;SACF,EAAE;;;;;;;CAgCN,CAAA;AA2CD,eAAO,MAAM,oBAAoB,SAAU,MAAM,QAAQ,YAAY,YAMpE,CAAA;AAED,eAAO,MAAM,kBAAkB,SAAU,MAAM,QAAQ,YAAY,YAMlE,CAAA;AAoHD,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;AAED,eAAO,MAAM,cAAc,cACd,MAAM,kBACD,MAAM;;;SACF,MAAM;WAAS,MAAM;0BAW1C,CAAA"}
+{"version":3,"file":"cart.util.d.ts","sourceRoot":"","sources":["../../lib/cart.util.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,sBAAsB,EACtB,6BAA6B,EAE7B,cAAc,EACf,MAAM,kBAAkB,CAAA;AAGzB,eAAO,MAAM,eAAe;cAKhB,MAAM;aACP,cAAc;;0BAEH;YAChB,gBAAgB,CAAC,EAAE;gBACjB,MAAM,EAAE,MAAM,CAAA;gBACd,YAAY,EAAE,MAAM,CAAA;aACrB,CAAA;YACD,KAAK,EAAE;gBACL,MAAM,EAAE,MAAM,CAAA;gBACd,YAAY,EAAE,MAAM,CAAA;aACrB,CAAA;YACD,cAAc,CAAC,EAAE;gBACf,MAAM,EAAE,MAAM,CAAA;gBACd,YAAY,EAAE,MAAM,CAAA;aACrB,CAAA;SACF,EAAE;;;;;;;CAgCN,CAAA;AA2CD,eAAO,MAAM,oBAAoB,SAAU,MAAM,QAAQ,YAAY,YAMpE,CAAA;AAED,eAAO,MAAM,kBAAkB,SAAU,MAAM,QAAQ,YAAY,YAMlE,CAAA;AAoHD,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

@@ -28,12 +28,12 @@ export const getVariantPrice = ({ quantity, variant, sellingPlanAllocation = { p
 const getOrderLevelDiscounts = (cart) => {
     var _a;
     const discountMap = (_a = cart.discountAllocations) === null || _a === void 0 ? void 0 : _a.filter((discount) => discount.targetType !== "SHIPPING_LINE").reduce((acc, discount) => {
-        var _a;
+        var _a, _b;
         const code = ((_a = discount.code) !== null && _a !== void 0 ? _a : "unknown").toUpperCase();
         if (!acc[code]) {
             acc[code] = 0;
         }
-        acc[code] += parseFloat(discount.discountedAmount.amount);
+        acc[code] += parseFloat(((_b = discount === null || discount === void 0 ? void 0 : discount.discountedAmount) === null || _b === void 0 ? void 0 : _b.amount) || "0");
         return acc;
     }, {});
     if (!discountMap)
@@ -53,11 +53,14 @@ const getShippingDiscounts = (cart) => {
     var _a;
     if (!(cart === null || cart === void 0 ? void 0 : cart.discountAllocations))
         return [];
-    return (_a = cart.discountAllocations) === null || _a === void 0 ? void 0 : _a.filter((discount) => discount.targetType === "SHIPPING_LINE").map((discount) => ({
-        amount: discount.discountedAmount.amount,
-        code: discount.code,
-        type: discount.targetType,
-    }));
+    return (_a = cart.discountAllocations) === null || _a === void 0 ? void 0 : _a.filter((discount) => discount.targetType === "SHIPPING_LINE").map((discount) => {
+        var _a;
+        return ({
+            amount: (_a = discount === null || discount === void 0 ? void 0 : discount.discountedAmount) === null || _a === void 0 ? void 0 : _a.amount,
+            code: discount === null || discount === void 0 ? void 0 : discount.code,
+            type: discount === null || discount === void 0 ? void 0 : discount.targetType,
+        });
+    });
 };
 export const isOrderLevelDiscount = (code, cart) => {
     const orderLevelDiscounts = getOrderLevelDiscounts(cart);
@@ -187,11 +190,29 @@ export const getCalculatedCartData = (cart) => {
         totalSavedAmount,
     };
 };
-export const getCartItemKey = (variantId, sellingPlanId, attributes) => {
-    const key = `${getIdFromGid(variantId)}:${sellingPlanId || "no-plan"}:${Array.isArray(attributes)
-        ? attributes === null || attributes === void 0 ? void 0 : attributes.map((attr) => `${attr.key}-${attr.value}`).join("-")
+// Until the actual CartItem ID is available via webbridge, we use this unique identifier
+export const getUniqueCartItemID = (options) => {
+    const { variantId, sellingPlanId, attributes, discounts } = options;
+    const attributesString = Array.isArray(attributes)
+        ? attributes === null || attributes === void 0 ? void 0 : attributes.map((attr) => `${attr.key}-${attr.value}`).sort().reverse().join("-")
         : Object.entries(attributes || {})
+            .sort()
+            .reverse()
             .map(([key, value]) => `${key}-${value}`)
-            .join("-")}`;
+            .join("-");
+    const discountsString = discounts
+        ? Array.isArray(discounts) && typeof discounts[0] === "string"
+            ? discounts.join("-")
+            : discounts
+                .map((discount) => {
+                var _a;
+                const amount = parseFloat(((_a = discount.discountedAmount) === null || _a === void 0 ? void 0 : _a.amount) || discount.amount || "0");
+                const title = discount.title || "";
+                const code = discount.code || "";
+                return `${amount}-${title || code}`;
+            })
+                .join("-")
+        : "";
+    const key = `${getIdFromGid(variantId)}~~~~${sellingPlanId ? getIdFromGid(sellingPlanId) : "no-plan"}~~~~${attributesString}${discountsString ? "~~~~" + discountsString : ""}`;
     return key;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.8.41",
+  "version": "0.8.42",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",
@@ -72,7 +72,7 @@
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@tabler/icons-react": "^3.2.0",
     "@tanstack/react-virtual": "^3.13.6",
-    "@tapcart/webbridge-react": "^1.15.0",
+    "@tapcart/app-studio-sdk": "^2.0.0",
     "apple-pay-button": "^1.1.7",
     "class-variance-authority": "^0.6.0",
     "clsx": "^1.2.1",