@tapcart/mobile-components 0.13.0 → 0.13.1

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

@@ -4,6 +4,8 @@ export declare const useBlockConditionalRendering: (_props: {
     apiUrl: string;
     deviceVariables: any;
     customerVariables: any;
+    sessionVariables?: any;
+    storageVariables?: any;
 }, _block: PhoenixBlock, mobileComponentOverrides?: any) => {
     shouldShow: boolean;
     isLoading: any;

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;AAezB,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,6BACO,GAAG;;;CAoT/B,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;AAezB,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;IACtB,gBAAgB,CAAC,EAAE,GAAG,CAAA;IACtB,gBAAgB,CAAC,EAAE,GAAG,CAAA;CACvB,UACO,YAAY,6BACO,GAAG;;;CAwT/B,CAAA"}

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

@@ -16,12 +16,12 @@ import { useCollection as mclUseCollection } from "./use-collection";
 import { useSearchParams } from "next/navigation";
 import { gidFromId, countNumberOfTagsInState, getEnvState, shouldShowBlock, evaluateConditions, parseBCP47Locale, } from "../../lib/utils";
 export const useBlockConditionalRendering = (_props, _block, mobileComponentOverrides) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const _l = ((_a = _block === null || _block === void 0 ? void 0 : _block.visibilityConditions) === null || _a === void 0 ? void 0 : _a.conditions) || {}, { enabled: conditionalsV1IsEnabled = false, exclude: isInverse = false } = _l, restOfProps = __rest(_l, ["enabled", "exclude"]);
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const _k = ((_a = _block === null || _block === void 0 ? void 0 : _block.visibilityConditions) === null || _a === void 0 ? void 0 : _a.conditions) || {}, { enabled: conditionalsV1IsEnabled = false, exclude: isInverse = false } = _k, restOfProps = __rest(_k, ["enabled", "exclude"]);
     const { _version = 1, conditions, enabled: conditionalsV2IsEnabled = false, } = (_block === null || _block === void 0 ? void 0 : _block.visibilityConditions) || {};
     const isConditionalsEnabled = conditionalsV1IsEnabled || conditionalsV2IsEnabled;
     const blockState = restOfProps;
-    const { appId = "", apiUrl = "", deviceVariables, customerVariables } = _props;
+    const { appId = "", apiUrl = "", deviceVariables, customerVariables, sessionVariables, storageVariables, } = _props;
     const searchParams = useSearchParams();
     const [deviceLanguage = "en", deviceCountry = "US"] = parseBCP47Locale(deviceVariables === null || deviceVariables === void 0 ? void 0 : deviceVariables.locale);
     const country = (_c = (_b = deviceVariables === null || deviceVariables === void 0 ? void 0 : deviceVariables.countryCode) !== null && _b !== void 0 ? _b : searchParams === null || searchParams === void 0 ? void 0 : searchParams.get("country")) !== null && _c !== void 0 ? _c : deviceCountry;
@@ -87,9 +87,7 @@ export const useBlockConditionalRendering = (_props, _block, mobileComponentOver
         country,
         productMetafieldsQuery,
     ]);
-    const useProductsSkipArguments = useMemo(() => (mobileComponentOverrides === null || mobileComponentOverrides === void 0 ? void 0 : mobileComponentOverrides.useProducts)
-        ? { skip: true }
-        : null, [mobileComponentOverrides === null || mobileComponentOverrides === void 0 ? void 0 : mobileComponentOverrides.useProducts]);
+    const useProductsSkipArguments = useMemo(() => ((mobileComponentOverrides === null || mobileComponentOverrides === void 0 ? void 0 : mobileComponentOverrides.useProducts) ? { skip: true } : null), [mobileComponentOverrides === null || mobileComponentOverrides === void 0 ? void 0 : mobileComponentOverrides.useProducts]);
     const useProductsInput = useMemo(() => shouldFetchProduct ? useProductsArguments : useProductsSkipArguments, [shouldFetchProduct, useProductsArguments, useProductsSkipArguments]);
     const { products, error: useProductsError, isLoading: isProductsLoading, } = useProducts(useProductsInput);
     const blockCollectionMetafields = useMemo(() => {
@@ -180,8 +178,11 @@ export const useBlockConditionalRendering = (_props, _block, mobileComponentOver
         product,
         collection: specificCollection,
         customer: customerVariables,
-        userGroup: (_k = deviceVariables === null || deviceVariables === void 0 ? void 0 : deviceVariables.session) === null || _k === void 0 ? void 0 : _k.userGroup,
-        storage: deviceVariables === null || deviceVariables === void 0 ? void 0 : deviceVariables.storage,
+        // userGroup/storage live at the top level of the SDK variables object
+        // (variables.session / variables.storage), as siblings of device and
+        // customer — not nested under device.
+        userGroup: sessionVariables === null || sessionVariables === void 0 ? void 0 : sessionVariables.userGroup,
+        storage: storageVariables,
         searchParams,
     });
     const evaluateV1Conditions = () => {
@@ -216,5 +217,5 @@ export const useBlockConditionalRendering = (_props, _block, mobileComponentOver
         console.error("Error evaluating block visibility conditions:", e);
         shouldShow = true; // Fail-safe to show block
     }
-    return useMemo(() => ({ shouldShow, isLoading }), [shouldShow, isLoading]);
+    return { shouldShow, isLoading };
 };

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=use-block-conditional-rendering.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-block-conditional-rendering.test.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-block-conditional-rendering.test.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,112 @@
+import { renderHook } from "@testing-library/react";
+// Controlled by tests; the next/navigation mock reads it on each call.
+let mockSearchParams = new URLSearchParams();
+jest.mock("next/navigation", () => ({
+    useSearchParams: () => mockSearchParams,
+}));
+// The hook fetches products/collections via SWR-backed hooks; stub them so no
+// network/fetch happens. userGroup/storage/queryParam paths don't need them.
+jest.mock("./use-products", () => ({
+    useProducts: () => ({ products: [], error: undefined, isLoading: false }),
+}));
+jest.mock("./use-collection", () => ({
+    useCollection: () => ({
+        specificCollection: {},
+        error: undefined,
+        loading: false,
+    }),
+}));
+import { useBlockConditionalRendering } from "./use-block-conditional-rendering";
+const v2Block = (conditions, enabled = true) => ({
+    _id: "block-1",
+    visibilityConditions: { _version: 2, enabled, conditions },
+});
+const baseProps = {
+    appId: "app-1",
+    apiUrl: "https://example.test",
+    deviceVariables: { locale: "en-US" },
+    customerVariables: {},
+    sessionVariables: { userGroup: 1 },
+    storageVariables: {},
+};
+const run = (props, block) => renderHook(() => useBlockConditionalRendering(props, block, undefined)).result
+    .current;
+beforeEach(() => {
+    mockSearchParams = new URLSearchParams();
+});
+describe("useBlockConditionalRendering - userGroup", () => {
+    const block = v2Block({
+        logic: "OR",
+        conditions: [{ type: "userGroup", operator: "equals", value: "1" }],
+    });
+    it("shows the block when the top-level session.userGroup matches", () => {
+        // Regression guard: userGroup must be read from sessionVariables
+        // (variables.session.userGroup), NOT variables.device.session.userGroup.
+        const { shouldShow } = run(Object.assign(Object.assign({}, baseProps), { sessionVariables: { userGroup: 1 } }), block);
+        expect(shouldShow).toBe(true);
+    });
+    it("hides the block when the user is in a different group", () => {
+        const { shouldShow } = run(Object.assign(Object.assign({}, baseProps), { sessionVariables: { userGroup: 2 } }), block);
+        expect(shouldShow).toBe(false);
+    });
+    it("hides the block (fails closed) when no session is present", () => {
+        const { shouldShow } = run(Object.assign(Object.assign({}, baseProps), { sessionVariables: undefined }), block);
+        expect(shouldShow).toBe(false);
+    });
+    it("does NOT read userGroup from deviceVariables.session", () => {
+        // If the wiring regresses to deviceVariables.session.userGroup, this
+        // (group on device, not session) would incorrectly show the block.
+        const { shouldShow } = run(Object.assign(Object.assign({}, baseProps), { sessionVariables: undefined, deviceVariables: { locale: "en-US", session: { userGroup: 1 } } }), block);
+        expect(shouldShow).toBe(false);
+    });
+});
+describe("useBlockConditionalRendering - queryParam", () => {
+    const block = v2Block({
+        logic: "OR",
+        conditions: [
+            {
+                type: "queryParam",
+                operator: "equals",
+                value: { key: "utm", value: "spring" },
+            },
+        ],
+    });
+    it("shows when the query param matches", () => {
+        mockSearchParams = new URLSearchParams("utm=spring");
+        expect(run(baseProps, block).shouldShow).toBe(true);
+    });
+    it("hides when the query param does not match", () => {
+        mockSearchParams = new URLSearchParams("utm=fall");
+        expect(run(baseProps, block).shouldShow).toBe(false);
+    });
+});
+describe("useBlockConditionalRendering - storageVariable", () => {
+    const block = v2Block({
+        logic: "OR",
+        conditions: [
+            {
+                type: "storageVariable",
+                operator: "equals",
+                value: { key: "promo", value: "active" },
+            },
+        ],
+    });
+    it("shows when the storage value matches", () => {
+        expect(run(Object.assign(Object.assign({}, baseProps), { storageVariables: { promo: "active" } }), block)
+            .shouldShow).toBe(true);
+    });
+    it("hides when the storage value does not match", () => {
+        expect(run(Object.assign(Object.assign({}, baseProps), { storageVariables: { promo: "inactive" } }), block)
+            .shouldShow).toBe(false);
+    });
+});
+describe("useBlockConditionalRendering - disabled", () => {
+    it("shows the block when visibility conditions are disabled", () => {
+        const block = v2Block({
+            logic: "OR",
+            conditions: [{ type: "userGroup", operator: "equals", value: "999" }],
+        }, false // enabled: false
+        );
+        expect(run(baseProps, block).shouldShow).toBe(true);
+    });
+});

package/dist/lib/conditional-rendering.util.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=conditional-rendering.util.test.d.ts.map

package/dist/lib/conditional-rendering.util.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"conditional-rendering.util.test.d.ts","sourceRoot":"","sources":["../../lib/conditional-rendering.util.test.ts"],"names":[],"mappings":""}

package/dist/lib/conditional-rendering.util.test.js

@@ -0,0 +1,116 @@
+import { evaluateConditions, getEnvState } from "./utils";
+// Pure-function coverage for the v2 block visibility-condition logic:
+// getEnvState (env assembly) and evaluateConditions/evaluateSingleCondition
+// (matching + AND/OR/NOT). evaluateSingleCondition is not exported, so it is
+// exercised through single-condition groups.
+const baseLocation = { country: "US", language: "en", deviceId: "device-1" };
+describe("getEnvState", () => {
+    it("maps a numeric userGroup to a string-valued tag", () => {
+        const env = getEnvState({ location: baseLocation, userGroup: 1 });
+        expect(env.userGroup).toEqual([{ value: "1" }]);
+    });
+    it("maps a string userGroup as-is", () => {
+        const env = getEnvState({ location: baseLocation, userGroup: "7" });
+        expect(env.userGroup).toEqual([{ value: "7" }]);
+    });
+    it("returns an empty userGroup tag list when userGroup is missing", () => {
+        expect(getEnvState({ location: baseLocation }).userGroup).toEqual([]);
+        expect(getEnvState({ location: baseLocation, userGroup: undefined }).userGroup).toEqual([]);
+    });
+    it("exposes storage and searchParams as the underscored context keys", () => {
+        const params = new URLSearchParams("utm=spring");
+        const env = getEnvState({
+            location: baseLocation,
+            storage: { promo: "active" },
+            searchParams: params,
+        });
+        expect(env._storage).toEqual({ promo: "active" });
+        expect(env._searchParams).toBe(params);
+    });
+    it("defaults storage/searchParams to empty/null", () => {
+        const env = getEnvState({ location: baseLocation });
+        expect(env._storage).toEqual({});
+        expect(env._searchParams).toBeNull();
+    });
+});
+describe("evaluateConditions - userGroup", () => {
+    const ctx = { userGroup: [{ value: "1" }] };
+    const group = (operator, value) => ({
+        logic: "OR",
+        conditions: [{ type: "userGroup", operator, value }],
+    });
+    it("matches the user's group with equals", () => {
+        expect(evaluateConditions(group("equals", "1"), ctx)).toBe(true);
+        expect(evaluateConditions(group("equals", "2"), ctx)).toBe(false);
+    });
+    it("handles does not equal", () => {
+        expect(evaluateConditions(group("does not equal", "2"), ctx)).toBe(true);
+        expect(evaluateConditions(group("does not equal", "1"), ctx)).toBe(false);
+    });
+    it("does not match when no group is present (fails closed)", () => {
+        // empty userGroup array (e.g. session.userGroup undefined at runtime)
+        expect(evaluateConditions(group("equals", "1"), { userGroup: [] })).toBe(false);
+    });
+});
+describe("evaluateConditions - storageVariable", () => {
+    const ctx = { _storage: { promo: "active" } };
+    const cond = (operator, key, value) => ({
+        logic: "OR",
+        conditions: [{ type: "storageVariable", operator, value: { key, value } }],
+    });
+    it("compares the stored value", () => {
+        expect(evaluateConditions(cond("equals", "promo", "active"), ctx)).toBe(true);
+        expect(evaluateConditions(cond("equals", "promo", "inactive"), ctx)).toBe(false);
+    });
+    it("treats a missing key as not-equal", () => {
+        expect(evaluateConditions(cond("equals", "missing", "x"), ctx)).toBe(false);
+        expect(evaluateConditions(cond("does not equal", "missing", "x"), ctx)).toBe(true);
+    });
+});
+describe("evaluateConditions - queryParam", () => {
+    const ctx = { _searchParams: new URLSearchParams("utm=spring") };
+    const cond = (operator, key, value) => ({
+        logic: "OR",
+        conditions: [{ type: "queryParam", operator, value: { key, value } }],
+    });
+    it("compares the query param value", () => {
+        expect(evaluateConditions(cond("equals", "utm", "spring"), ctx)).toBe(true);
+        expect(evaluateConditions(cond("equals", "utm", "fall"), ctx)).toBe(false);
+    });
+    it("treats a missing param as not-equal", () => {
+        expect(evaluateConditions(cond("equals", "missing", "x"), ctx)).toBe(false);
+        expect(evaluateConditions(cond("does not equal", "missing", "x"), ctx)).toBe(true);
+    });
+});
+describe("evaluateConditions - logic operators", () => {
+    const ctx = {
+        userGroup: [{ value: "1" }],
+        _storage: { promo: "active" },
+    };
+    const userGroupIs1 = { type: "userGroup", operator: "equals", value: "1" };
+    const userGroupIs2 = { type: "userGroup", operator: "equals", value: "2" };
+    it("AND requires every condition", () => {
+        expect(evaluateConditions({ logic: "AND", conditions: [userGroupIs1, userGroupIs1] }, ctx)).toBe(true);
+        expect(evaluateConditions({ logic: "AND", conditions: [userGroupIs1, userGroupIs2] }, ctx)).toBe(false);
+    });
+    it("OR requires at least one condition", () => {
+        expect(evaluateConditions({ logic: "OR", conditions: [userGroupIs2, userGroupIs1] }, ctx)).toBe(true);
+        expect(evaluateConditions({ logic: "OR", conditions: [userGroupIs2, userGroupIs2] }, ctx)).toBe(false);
+    });
+    it("NOT negates an all-true group", () => {
+        expect(evaluateConditions({ logic: "NOT", conditions: [userGroupIs1] }, ctx)).toBe(false);
+        expect(evaluateConditions({ logic: "NOT", conditions: [userGroupIs2] }, ctx)).toBe(true);
+    });
+    it("evaluates nested groups", () => {
+        expect(evaluateConditions({
+            logic: "AND",
+            conditions: [
+                userGroupIs1,
+                { logic: "OR", conditions: [userGroupIs2, userGroupIs1] },
+            ],
+        }, ctx)).toBe(true);
+    });
+    it("passes when there are no conditions", () => {
+        expect(evaluateConditions({ logic: "AND", conditions: [] }, ctx)).toBe(true);
+    });
+});

package/package.json

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