@tapcart/mobile-components 0.8.48 → 0.8.50

package/dist/lib/variablesCart.util.test.js

@@ -0,0 +1,387 @@
+import { getVariablesCalculatedCartData } from "./variablesCart.util";
+import { DiscountApplicationTargetType, } from "app-studio-types";
+const baseCartData = {
+    id: "cart123",
+    subtotal: 100.0,
+    currency: "USD",
+    discounts: [],
+    attributes: [],
+    note: "",
+    items: [],
+    cost: {
+        subtotalAmount: {
+            amount: 0,
+            currencyCode: "",
+        },
+        totalAmount: {
+            amount: 0,
+            currencyCode: "",
+        },
+    },
+};
+describe("cart-provider.util", () => {
+    describe("getData", () => {
+        it("should calculate order level discounts correctly", () => {
+            const mockCart = Object.assign(Object.assign({}, baseCartData), { discounts: ["DISCOUNT10"], items: [], discountAllocations: [
+                    {
+                        targetType: DiscountApplicationTargetType.LineItem,
+                        discountedAmount: { amount: "10.00", currencyCode: "USD" },
+                        code: "DISCOUNT10",
+                    },
+                ] });
+            const result = getVariablesCalculatedCartData(mockCart);
+            expect(result.orderAndLineItemDiscounts).toHaveLength(1);
+            expect(result.orderAndLineItemDiscounts[0]).toEqual({
+                id: "DISCOUNT10",
+                amount: 10,
+                name: "Discount - DISCOUNT10",
+                type: "ORDER_LEVEL",
+            });
+        });
+        it("should calculate gift cards correctly", () => {
+            const mockCart = Object.assign(Object.assign({}, baseCartData), { discounts: [], items: [], appliedGiftCards: [
+                    {
+                        id: "gid://shopify/AppliedGiftCard/abcd1234",
+                        lastCharacters: "1234",
+                        amountUsed: { amount: "25.00", currencyCode: "USD" },
+                        presentmentAmountUsed: { amount: "25.00", currencyCode: "USD" },
+                    },
+                ] });
+            const result = getVariablesCalculatedCartData(mockCart);
+            expect(result.appliedGiftCards).toHaveLength(1);
+            expect(result.appliedGiftCards[0]).toEqual({
+                id: "gid://shopify/AppliedGiftCard/abcd1234",
+                amount: 25,
+                name: "Gift Card - 1234",
+            });
+        });
+        it("should calculate sales amount correctly", () => {
+            const mockCart = Object.assign(Object.assign({}, baseCartData), { discounts: [], items: [
+                    {
+                        id: "line1",
+                        quantity: 2,
+                        productId: "prod1",
+                        variantId: "var1",
+                        price: 15.0,
+                        compareAtPrice: 20.0,
+                        currencyCode: "USD",
+                        discounts: [],
+                        cost: { totalAmount: { amount: "30.00", currencyCode: "USD" } },
+                    },
+                ] });
+            const result = getVariablesCalculatedCartData(mockCart);
+            expect(result.salesAmount).toBe(10); // (20-15) * 2
+        });
+        it("should detect free shipping", () => {
+            const mockCart = Object.assign(Object.assign({}, baseCartData), { discounts: [], items: [], discountAllocations: [
+                    {
+                        targetType: DiscountApplicationTargetType.ShippingLine,
+                        discountedAmount: { amount: "5.00", currencyCode: "USD" },
+                        code: "FREESHIP",
+                    },
+                ] });
+            const result = getVariablesCalculatedCartData(mockCart);
+            expect(result.isFreeShipping).toBe(true);
+        });
+        it("should calculate total discounted price correctly", () => {
+            const mockCart = Object.assign(Object.assign({}, baseCartData), { discounts: ["Discount10"], items: [
+                    {
+                        id: "line1",
+                        quantity: 1,
+                        productId: "prod1",
+                        variantId: "var1",
+                        price: 80.0,
+                        compareAtPrice: 100.0,
+                        currencyCode: "USD",
+                        discounts: [
+                            {
+                                amount: 10,
+                                type: "LINE_ITEM",
+                                code: "DISCOUNT10",
+                            },
+                        ],
+                        cost: { totalAmount: { amount: "80.00", currencyCode: "USD" } },
+                    },
+                    {
+                        id: "line2",
+                        quantity: 1,
+                        productId: "prod2",
+                        variantId: "var2",
+                        price: 80.0,
+                        compareAtPrice: 100.0,
+                        currencyCode: "USD",
+                        discounts: [
+                            {
+                                amount: 10,
+                                type: "LINE_ITEM",
+                                code: "DISCOUNT10",
+                            },
+                        ],
+                        cost: { totalAmount: { amount: "80.00", currencyCode: "USD" } },
+                    },
+                ], discountAllocations: [
+                    {
+                        targetType: DiscountApplicationTargetType.LineItem,
+                        discountedAmount: { amount: "10.00", currencyCode: "USD" },
+                        code: "DiScOUnT10",
+                    },
+                ], appliedGiftCards: [
+                    {
+                        id: "gid://shopify/AppliedGiftCard/5678efgh",
+                        lastCharacters: "1234",
+                        amountUsed: { amount: "5.00", currencyCode: "USD" },
+                        presentmentAmountUsed: { amount: "5.00", currencyCode: "USD" },
+                    },
+                ] });
+            const result = getVariablesCalculatedCartData(mockCart);
+            // 100 (compare) - 10 (discount) - 20 (sale) - 5 (gift card) = 65
+            expect(result.totalDiscountedPrice).toBe(125);
+        });
+        it("should never return negative or NaN values for totalDiscountedPrice", () => {
+            // Test case 1: Normal case with valid data
+            const normalCart = Object.assign(Object.assign({}, baseCartData), { items: [
+                    {
+                        id: "line1",
+                        quantity: 1,
+                        productId: "prod1",
+                        variantId: "var1",
+                        price: 80.0,
+                        compareAtPrice: 100.0,
+                        currencyCode: "USD",
+                        discounts: [],
+                        cost: { totalAmount: { amount: "80.00", currencyCode: "USD" } },
+                    },
+                ] });
+            let result = getVariablesCalculatedCartData(normalCart);
+            expect(result.totalDiscountedPrice).not.toBeLessThan(0);
+            expect(isNaN(result.totalDiscountedPrice)).toBe(false);
+            // Test case 2: Edge case with extreme discounts that exceed item price
+            const extremeDiscountCart = Object.assign(Object.assign({}, baseCartData), { items: [
+                    {
+                        id: "line1",
+                        quantity: 1,
+                        productId: "prod1",
+                        variantId: "var1",
+                        price: 20.0,
+                        compareAtPrice: 50.0,
+                        currencyCode: "USD",
+                        discounts: [
+                            {
+                                amount: 100,
+                                type: "LINE_ITEM",
+                                code: "HUGE_DISCOUNT",
+                            },
+                        ],
+                        cost: { totalAmount: { amount: "20.00", currencyCode: "USD" } },
+                    },
+                ], discountAllocations: [
+                    {
+                        targetType: DiscountApplicationTargetType.LineItem,
+                        discountedAmount: { amount: "100.00", currencyCode: "USD" },
+                        code: "HUGE_DISCOUNT",
+                    },
+                ] });
+            result = getVariablesCalculatedCartData(extremeDiscountCart);
+            expect(result.totalDiscountedPrice).not.toBeLessThan(0);
+            expect(isNaN(result.totalDiscountedPrice)).toBe(false);
+            // Test case 3: Edge case with missing price data
+            const missingDataCart = Object.assign(Object.assign({}, baseCartData), { items: [
+                    {
+                        id: "line1",
+                        quantity: 1,
+                        productId: "prod1",
+                        variantId: "var1",
+                        price: null,
+                        compareAtPrice: null,
+                        currencyCode: "USD",
+                        discounts: [],
+                        cost: {
+                            totalAmount: { amount: undefined, currencyCode: "USD" },
+                        },
+                    },
+                ] });
+            result = getVariablesCalculatedCartData(missingDataCart);
+            expect(result.totalDiscountedPrice).not.toBeLessThan(0);
+            expect(isNaN(result.totalDiscountedPrice)).toBe(false);
+        });
+        it("should handle real-world CartState data correctly", () => {
+            // Real-world CartState object based on user data with type fixing
+            const realWorldCart = {
+                attributes: [
+                    {
+                        key: "discount",
+                        value: "discount",
+                    },
+                    {
+                        value: "20AA9E6F-A53F-4F81-85BC-62A1054CF1A2",
+                        key: "tapcart_id",
+                    },
+                ],
+                currency: "USD",
+                cost: {
+                    totalAmount: {
+                        currencyCode: "USD",
+                        amount: 657.96,
+                    },
+                    subtotalAmount: {
+                        currencyCode: "USD",
+                        amount: 679.96,
+                    },
+                },
+                id: "gid://shopify/Cart/Z2NwLXVzLXdlc3QxOjAxSlJYUDZRUk1CS1pSRllDSlNTNUgxWFQz?key=28d946aea201ce67bc7ed41d11419247",
+                note: "",
+                items: [
+                    {
+                        selectedOptions: [
+                            {
+                                name: "Size",
+                                value: "S",
+                            },
+                        ],
+                        id: "gid://shopify/CartLine/ba89bf02-1880-469e-9d2b-0408516eef03?cart=Z2NwLXVzLXdlc3QxOjAxSlJYUDZRUk1CS1pSRllDSlNTNUgxWFQz",
+                        image: "https://cdn.shopify.com/s/files/1/0656/7939/2959/files/IMG_4797_x500.jpg?v=1720669849",
+                        variantId: "43528195834047",
+                        currencyCode: "USD",
+                        totalAmount: 239.96,
+                        title: "Tan Legend Faux Shearing Jacket",
+                        featuredImage: "https://cdn.shopify.com/s/files/1/0656/7939/2959/files/IMG_4797.jpg?v=1720669849",
+                        productId: "7907453993151",
+                        compareAtPrice: 99.99,
+                        productVendor: "Emmys Tapcart Boutique",
+                        quantityAvailable: 11,
+                        variantSku: "",
+                        price: 59.989999999999995,
+                        cost: {
+                            totalAmount: {
+                                amount: "239.96",
+                                currencyCode: "USD",
+                            },
+                        },
+                        discounts: [],
+                        attributes: [],
+                        quantity: 4,
+                    },
+                    {
+                        discounts: [
+                            {
+                                code: "FALLRUG10",
+                                amount: 0,
+                                type: "manual",
+                            },
+                        ],
+                        variantId: "43668884029631",
+                        image: "https://cdn.shopify.com/s/files/1/0656/7939/2959/files/Screenshot2024-08-22at9.43.44AM_x500.png?v=1726022527",
+                        title: "Fall Fancy Rug",
+                        cost: {
+                            totalAmount: {
+                                amount: "220",
+                                currencyCode: "USD",
+                            },
+                        },
+                        id: "gid://shopify/CartLine/34775a95-d7c7-4b11-9f36-6ae923acfd9f?cart=Z2NwLXVzLXdlc3QxOjAxSlJYUDZRUk1CS1pSRllDSlNTNUgxWFQz",
+                        productId: "7954296832191",
+                        productVendor: "Emmys Tapcart Boutique",
+                        selectedOptions: [
+                            {
+                                name: "Rug Padding",
+                                value: "With Padding",
+                            },
+                            {
+                                value: "2 x 3",
+                                name: "Size",
+                            },
+                        ],
+                        attributes: [],
+                        featuredImage: "https://cdn.shopify.com/s/files/1/0656/7939/2959/files/Screenshot2024-08-22at9.44.04AM.png?v=1726022527",
+                        compareAtPrice: 0,
+                        quantity: 1,
+                        totalAmount: 220,
+                        currencyCode: "USD",
+                        price: 220,
+                        quantityAvailable: 99,
+                        variantSku: "",
+                    },
+                    {
+                        featuredImage: "https://cdn.shopify.com/s/files/1/0656/7939/2959/files/Screenshot2024-08-22at9.44.04AM.png?v=1726022527",
+                        quantityAvailable: 99,
+                        variantSku: "",
+                        title: "Fall Fancy Rug",
+                        productId: "7954296832191",
+                        compareAtPrice: 0,
+                        discounts: [
+                            {
+                                type: "manual",
+                                code: "FALLRUG10",
+                                amount: 22,
+                            },
+                        ],
+                        id: "gid://shopify/CartLine/b642de72-78c4-4998-92da-5d4c4146057b?cart=Z2NwLXVzLXdlc3QxOjAxSlJYUDZRUk1CS1pSRllDSlNTNUgxWFQz",
+                        attributes: [],
+                        productVendor: "Emmys Tapcart Boutique",
+                        image: "https://cdn.shopify.com/s/files/1/0656/7939/2959/files/Screenshot2024-08-22at9.43.44AM_x500.png?v=1726022527",
+                        quantity: 1,
+                        totalAmount: 198,
+                        currencyCode: "USD",
+                        selectedOptions: [
+                            {
+                                name: "Rug Padding",
+                                value: "With Padding",
+                            },
+                            {
+                                value: "2 x 3",
+                                name: "Size",
+                            },
+                        ],
+                        price: 220,
+                        variantId: "43668884029631",
+                        cost: {
+                            totalAmount: {
+                                amount: "198",
+                                currencyCode: "USD",
+                            },
+                        },
+                    },
+                ],
+                subtotal: 679.96,
+                discounts: ["Order10", "Fallrug10"],
+                // Added discountAllocations for testing
+                discountAllocations: [
+                    {
+                        targetType: DiscountApplicationTargetType.LineItem,
+                        discountedAmount: { amount: "10.00", currencyCode: "USD" },
+                        code: "ORDER10",
+                    },
+                ],
+                // Added appliedGiftCards using the provided format
+                appliedGiftCards: [
+                    {
+                        id: "gid://shopify/AppliedGiftCard/3c208423-e985-46c7-bb34-656c59dc29b1",
+                        lastCharacters: "oney",
+                        amountUsed: { amount: "10.00", currencyCode: "USD" },
+                        presentmentAmountUsed: { amount: "10.00", currencyCode: "USD" },
+                    },
+                ],
+            };
+            const result = getVariablesCalculatedCartData(realWorldCart);
+            console.log(result);
+            // Test that the calculated data is correct
+            expect(result.orderAndLineItemDiscounts).toHaveLength(2);
+            expect(result.orderAndLineItemDiscounts[0].id).toBe("ORDER10");
+            expect(result.orderAndLineItemDiscounts[0].amount).toBe(10);
+            // Test applied gift cards
+            expect(result.appliedGiftCards).toHaveLength(1);
+            expect(result.appliedGiftCards[0].id).toBe("gid://shopify/AppliedGiftCard/3c208423-e985-46c7-bb34-656c59dc29b1");
+            expect(result.appliedGiftCards[0].amount).toBe(10);
+            expect(result.appliedGiftCards[0].name).toBe("Gift Card - oney");
+            // Test other calculated values
+            expect(result.discountsTotalAmount).toBe(32); // 22 + 10
+            expect(result.giftCardsTotalAmount).toBe(10);
+            // Test sales amount calculation - should be 4 * (99.99 - 59.99) = 4 * 40 = 160
+            expect(result.salesAmount).toBe(160);
+            // Total compare at price should include all items pricing
+            expect(result.totalCompareAtPrice).toBeGreaterThan(0);
+            // Free shipping isn't in the test data
+            expect(result.isFreeShipping).toBe(false);
+        });
+    });
+});

package/dist/styles.css

@@ -1065,6 +1065,9 @@ video {
 .h-full {
   height: 100%;
 }
+.h-screen {
+  height: 100vh;
+}
 .max-h-\[200px\] {
   max-height: 200px;
 }
@@ -1991,6 +1994,9 @@ video {
   font-size: 0.75rem;
   line-height: 1rem;
 }
+.font-bold {
+  font-weight: 700;
+}
 .font-medium {
   font-weight: 500;
 }
@@ -2183,6 +2189,10 @@ video {
 .text-textColors-strikethroughPriceText {
   color: var(--textColors-strikethroughPriceText);
 }
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
 .underline {
   text-decoration-line: underline;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.8.48",
+  "version": "0.8.50",
   "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/app-studio-sdk": "^2.1.1",
+    "@tapcart/app-studio-sdk": "^2.1.2",
     "@tapcart/search-client": "workspace:*",
     "apple-pay-button": "^1.1.7",
     "class-variance-authority": "^0.6.0",