@jay-framework/wix-stores 0.15.1 → 0.15.5

package/dist/index.client.js

@@ -1,10 +1,10 @@
-import { WIX_CART_CONTEXT, cartIndicator, cartPage } from "@jay-framework/wix-cart/client";
+import { WIX_CART_CONTEXT } from "@jay-framework/wix-cart/client";
+import { WIX_CART_CONTEXT as WIX_CART_CONTEXT2, cartIndicator, cartPage } from "@jay-framework/wix-cart/client";
 import { makeJayStackComponent, makeJayInit } from "@jay-framework/fullstack-component";
 import { registerReactiveGlobalContext, createSignal, createMemo, createEffect } from "@jay-framework/component";
 import { patch, REPLACE } from "@jay-framework/json-patch";
 import { createJayContext, useGlobalContext } from "@jay-framework/runtime";
 import { WIX_CLIENT_CONTEXT } from "@jay-framework/wix-server-client/client";
-import { WIX_CART_CONTEXT as WIX_CART_CONTEXT2 } from "@jay-framework/wix-cart";
 import { productsV3 } from "@wix/stores";
 import "@wix/categories";
 import { createActionCaller } from "@jay-framework/stack-client-runtime";
@@ -31,7 +31,7 @@ const WIX_STORES_CONTEXT = createJayContext();
 function provideWixStoresContext() {
   const wixClientContext = useGlobalContext(WIX_CLIENT_CONTEXT);
   const wixClient = wixClientContext.client;
-  const cartContext = useGlobalContext(WIX_CART_CONTEXT2);
+  const cartContext = useGlobalContext(WIX_CART_CONTEXT);
   const catalogClient = getProductsV3Client(wixClient);
   const storesContext = registerReactiveGlobalContext(WIX_STORES_CONTEXT, () => {
     async function addToCart(productId, quantity = 1, selections) {
@@ -313,6 +313,11 @@ function ProductPageInteractive(props, refs, viewStateSignals, fastCarryForward,
   };
 }
 const productPage = makeJayStackComponent().withProps().withContexts(WIX_STORES_CONTEXT).withInteractive(ProductPageInteractive);
+var OptionRenderType = /* @__PURE__ */ ((OptionRenderType2) => {
+  OptionRenderType2[OptionRenderType2["TEXT_CHOICES"] = 0] = "TEXT_CHOICES";
+  OptionRenderType2[OptionRenderType2["SWATCH_CHOICES"] = 1] = "SWATCH_CHOICES";
+  return OptionRenderType2;
+})(OptionRenderType || {});
 var CurrentSort = /* @__PURE__ */ ((CurrentSort2) => {
   CurrentSort2[CurrentSort2["relevance"] = 0] = "relevance";
   CurrentSort2[CurrentSort2["priceAsc"] = 1] = "priceAsc";
@@ -324,10 +329,102 @@ var CurrentSort = /* @__PURE__ */ ((CurrentSort2) => {
 })(CurrentSort || {});
 const searchProducts = createActionCaller("wixStores.searchProducts", "GET");
 createActionCaller("wixStores.getProductBySlug", "GET");
+const getVariantStock = createActionCaller("wixStores.getVariantStock", "GET");
 createActionCaller("wixStores.getCategories", "GET");
+var QuickAddType = /* @__PURE__ */ ((QuickAddType2) => {
+  QuickAddType2[QuickAddType2["SIMPLE"] = 0] = "SIMPLE";
+  QuickAddType2[QuickAddType2["SINGLE_OPTION"] = 1] = "SINGLE_OPTION";
+  QuickAddType2[QuickAddType2["COLOR_AND_TEXT_OPTIONS"] = 2] = "COLOR_AND_TEXT_OPTIONS";
+  QuickAddType2[QuickAddType2["NEEDS_CONFIGURATION"] = 3] = "NEEDS_CONFIGURATION";
+  return QuickAddType2;
+})(QuickAddType || {});
 const PAGE_SIZE = 12;
+function mapSortToAction(sort) {
+  switch (sort) {
+    case CurrentSort.priceAsc:
+      return "price_asc";
+    case CurrentSort.priceDesc:
+      return "price_desc";
+    case CurrentSort.newest:
+      return "newest";
+    case CurrentSort.nameAsc:
+      return "name_asc";
+    case CurrentSort.nameDesc:
+      return "name_desc";
+    default:
+      return "relevance";
+  }
+}
+function updateUrlFilters(searchTerm, filters, sort, categories) {
+  if (typeof window === "undefined")
+    return;
+  const params = new URLSearchParams();
+  if (searchTerm)
+    params.set("q", searchTerm);
+  const selectedSlugs = filters.categoryFilter.categories.filter((c) => c.isSelected).map((c) => {
+    const info = categories.find((cat) => cat.categoryId === c.categoryId);
+    return info?.categorySlug;
+  }).filter(Boolean);
+  if (selectedSlugs.length)
+    params.set("cat", selectedSlugs.join(","));
+  if (filters.priceRange.minPrice > 0)
+    params.set("min", String(filters.priceRange.minPrice));
+  if (filters.priceRange.maxPrice > 0 && filters.priceRange.maxPrice < filters.priceRange.maxBound) {
+    params.set("max", String(filters.priceRange.maxPrice));
+  }
+  if (filters.inStockOnly)
+    params.set("inStock", "1");
+  const optSegments = [];
+  for (const opt of filters.optionFilters || []) {
+    const selected = opt.choices.filter((c) => c.isSelected).map((c) => encodeURIComponent(c.choiceName));
+    if (selected.length > 0) {
+      optSegments.push(`${encodeURIComponent(opt.optionName)}:${selected.join(",")}`);
+    }
+  }
+  if (optSegments.length > 0)
+    params.set("opt", optSegments.join(";"));
+  if (sort !== CurrentSort.relevance) {
+    const sortNames = {
+      [CurrentSort.priceAsc]: "priceAsc",
+      [CurrentSort.priceDesc]: "priceDesc",
+      [CurrentSort.newest]: "newest",
+      [CurrentSort.nameAsc]: "nameAsc",
+      [CurrentSort.nameDesc]: "nameDesc"
+    };
+    const sortName = sortNames[sort];
+    if (sortName)
+      params.set("sort", sortName);
+  }
+  const query = params.toString();
+  window.history.replaceState(null, "", query ? `?${query}` : window.location.pathname);
+}
+function buildOptionFiltersViewState(baseOptionFilters, filteredResult, optionSelections) {
+  const filteredChoiceCounts = /* @__PURE__ */ new Map();
+  for (const opt of filteredResult.optionFilters || []) {
+    for (const ch of opt.choices) {
+      filteredChoiceCounts.set(ch.choiceName.toLowerCase(), ch.productCount);
+    }
+  }
+  return baseOptionFilters.map((opt) => ({
+    optionId: opt.optionId,
+    optionName: opt.optionName,
+    optionRenderType: opt.optionRenderType === "SWATCH_CHOICES" ? OptionRenderType.SWATCH_CHOICES : OptionRenderType.TEXT_CHOICES,
+    choices: opt.choices.map((ch) => {
+      const count = filteredChoiceCounts.get(ch.choiceName.toLowerCase()) ?? 0;
+      return {
+        choiceId: ch.choiceId,
+        choiceName: ch.choiceName,
+        colorCode: ch.colorCode,
+        productCount: count,
+        isSelected: optionSelections.get(opt.optionName)?.has(ch.choiceName) ?? false,
+        isDisabled: count === 0
+      };
+    })
+  }));
+}
 function ProductSearchInteractive(props, refs, viewStateSignals, fastCarryForward, storesContext) {
   const baseCategoryId = fastCarryForward.baseCategoryId;
+  const variantStockCache = {};
   const { searchExpression: [searchExpression, setSearchExpression], isSearching: [isSearching, setIsSearching], hasSearched: [hasSearched, setHasSearched], searchResults: [searchResults, setSearchResults], resultCount: [resultCount, setResultCount], hasResults: [hasResults, setHasResults], hasSuggestions: [hasSuggestions, setHasSuggestions], suggestions: [suggestions, setSuggestions], filters: [filters, setFilters], sortBy: [sortBy, setSortBy], hasMore: [hasMore, setHasMore], loadedCount: [loadedCount, setLoadedCount], totalCount: [totalCount, setTotalCount] } = viewStateSignals;
   const [submittedSearchTerm, setSubmittedSearchTerm] = createSignal(null);
   let currentCursor = null;
@@ -335,35 +432,41 @@ function ProductSearchInteractive(props, refs, viewStateSignals, fastCarryForwar
   let debounceTimeout = null;
   let searchVersion = 0;
   const DEBOUNCE_MS = 300;
-  const mapSortToAction = (sort) => {
-    switch (sort) {
-      case CurrentSort.priceAsc:
-        return "price_asc";
-      case CurrentSort.priceDesc:
-        return "price_desc";
-      case CurrentSort.newest:
-        return "newest";
-      case CurrentSort.nameAsc:
-        return "name_asc";
-      case CurrentSort.nameDesc:
-        return "name_desc";
-      default:
-        return "relevance";
+  const [latestSearchResult, setLatestSearchResult] = createSignal(null);
+  const mergedFilters = createMemo(() => {
+    const f = filters();
+    const result = latestSearchResult();
+    if (!result)
+      return f;
+    const selections = /* @__PURE__ */ new Map();
+    for (const opt of f.optionFilters || []) {
+      const selected = opt.choices.filter((c) => c.isSelected).map((c) => c.choiceName);
+      if (selected.length > 0)
+        selections.set(opt.optionName, new Set(selected));
     }
-  };
+    return {
+      ...f,
+      optionFilters: buildOptionFiltersViewState(fastCarryForward.baseOptionFilters, result, selections)
+    };
+  });
   const performSearch = async (version, searchTerm, currentFilters, currentSort) => {
     setIsSearching(true);
     setHasSearched(true);
     try {
       const userSelectedCategoryIds = currentFilters.categoryFilter.categories.filter((c) => c.isSelected).map((c) => c.categoryId);
       const categoryIds = baseCategoryId ? [baseCategoryId, ...userSelectedCategoryIds] : userSelectedCategoryIds;
+      const activeOptionFilters = (currentFilters.optionFilters || []).map((opt) => ({
+        optionName: opt.optionName,
+        choiceNames: opt.choices.filter((c) => c.isSelected).map((c) => c.choiceName)
+      })).filter((o) => o.choiceNames.length > 0);
       const result = await searchProducts({
         query: searchTerm || "",
         filters: {
           minPrice: currentFilters.priceRange.minPrice || void 0,
           maxPrice: currentFilters.priceRange.maxPrice || void 0,
           categoryIds,
-          inStockOnly: currentFilters.inStockOnly
+          inStockOnly: currentFilters.inStockOnly,
+          optionFilters: activeOptionFilters.length > 0 ? activeOptionFilters : void 0
         },
         sortBy: mapSortToAction(currentSort),
         // No cursor = start from beginning
@@ -378,7 +481,9 @@ function ProductSearchInteractive(props, refs, viewStateSignals, fastCarryForwar
       setLoadedCount(result.products.length);
       setHasMore(result.hasMore);
       setHasResults(result.products.length > 0);
+      setLatestSearchResult(result);
       currentCursor = result.nextCursor;
+      updateUrlFilters(searchTerm, currentFilters, currentSort, fastCarryForward.categories);
     } catch (error) {
       if (version === searchVersion) {
         console.error("Search failed:", error);
@@ -399,13 +504,18 @@ function ProductSearchInteractive(props, refs, viewStateSignals, fastCarryForwar
       const searchTerm = submittedSearchTerm();
       const userSelectedCategoryIds = currentFilters.categoryFilter.categories.filter((c) => c.isSelected).map((c) => c.categoryId);
       const categoryIds = baseCategoryId ? [baseCategoryId, ...userSelectedCategoryIds] : userSelectedCategoryIds;
+      const activeOptionFilters = (currentFilters.optionFilters || []).map((opt) => ({
+        optionName: opt.optionName,
+        choiceNames: opt.choices.filter((c) => c.isSelected).map((c) => c.choiceName)
+      })).filter((o) => o.choiceNames.length > 0);
       const result = await searchProducts({
         query: searchTerm || "",
         filters: {
           minPrice: currentFilters.priceRange.minPrice || void 0,
           maxPrice: currentFilters.priceRange.maxPrice || void 0,
           categoryIds,
-          inStockOnly: currentFilters.inStockOnly
+          inStockOnly: currentFilters.inStockOnly,
+          optionFilters: activeOptionFilters.length > 0 ? activeOptionFilters : void 0
         },
         sortBy: mapSortToAction(currentSort),
         cursor: currentCursor,
@@ -520,6 +630,24 @@ function ProductSearchInteractive(props, refs, viewStateSignals, fastCarryForwar
     const isChecked = event.target.checked;
     setFilters(patch(filters(), [{ op: REPLACE, path: ["inStockOnly"], value: isChecked }]));
   });
+  refs.filters.optionFilters.choices.isSelected.oninput(({ event, coordinate }) => {
+    const [optionId, choiceId] = coordinate;
+    const currentFilters = filters();
+    const optionIndex = currentFilters.optionFilters.findIndex((o) => o.optionId === optionId);
+    if (optionIndex === -1)
+      return;
+    const choiceIndex = currentFilters.optionFilters[optionIndex].choices.findIndex((c) => c.choiceId === choiceId);
+    if (choiceIndex === -1)
+      return;
+    const isChecked = event.target.checked;
+    setFilters(patch(currentFilters, [
+      {
+        op: REPLACE,
+        path: ["optionFilters", optionIndex, "choices", choiceIndex, "isSelected"],
+        value: isChecked
+      }
+    ]));
+  });
   refs.filters.clearFilters.onclick(() => {
     const currentFilters = filters();
     const clearedCategories = currentFilters.categoryFilter.categories.map((cat) => ({
@@ -531,6 +659,10 @@ function ProductSearchInteractive(props, refs, viewStateSignals, fastCarryForwar
       isSelected: i === 0
       // First one is "Show all"
     }));
+    const clearedOptionFilters = (currentFilters.optionFilters || []).map((opt) => ({
+      ...opt,
+      choices: opt.choices.map((ch) => ({ ...ch, isSelected: false }))
+    }));
     setFilters({
       priceRange: {
         minPrice: 0,
@@ -540,7 +672,8 @@ function ProductSearchInteractive(props, refs, viewStateSignals, fastCarryForwar
         ranges: clearedRanges
       },
       categoryFilter: { categories: clearedCategories },
-      inStockOnly: false
+      inStockOnly: false,
+      optionFilters: clearedOptionFilters
     });
   });
   refs.loadMoreButton.onclick(() => {
@@ -573,6 +706,49 @@ function ProductSearchInteractive(props, refs, viewStateSignals, fastCarryForwar
       ]));
     }
   });
+  const variantStockLoading = /* @__PURE__ */ new Set();
+  const loadVariantStock = async (productId) => {
+    if (variantStockCache[productId] || variantStockLoading.has(productId))
+      return;
+    variantStockLoading.add(productId);
+    try {
+      const currentResults = searchResults();
+      const productIndex = currentResults.findIndex((p) => p._id === productId);
+      if (productIndex === -1)
+        return;
+      const product = currentResults[productIndex];
+      if (product?.quickAddType !== QuickAddType.COLOR_AND_TEXT_OPTIONS)
+        return;
+      const stockMap = await getVariantStock({ productId });
+      variantStockCache[productId] = stockMap;
+      const selectedColor = product.quickOption?.choices?.find((c) => c.isSelected);
+      const textChoices = product.secondQuickOption?.choices;
+      if (!selectedColor || !textChoices)
+        return;
+      const colorStock = stockMap[selectedColor.choiceId];
+      const updatedTextChoices = textChoices.map((c) => ({
+        ...c,
+        inStock: colorStock?.[c.choiceId] ?? false
+      }));
+      setSearchResults(patch(searchResults(), [
+        {
+          op: REPLACE,
+          path: [productIndex, "secondQuickOption", "choices"],
+          value: updatedTextChoices
+        }
+      ]));
+    } finally {
+      variantStockLoading.delete(productId);
+    }
+  };
+  refs.searchResults.productLink.onmouseenter(({ coordinate }) => {
+    const [productId] = coordinate;
+    loadVariantStock(productId);
+  });
+  refs.searchResults.quickOption.choices.choiceButton.onmouseenter(({ coordinate }) => {
+    const [productId] = coordinate;
+    loadVariantStock(productId);
+  });
   refs.searchResults.quickOption.choices.choiceButton.onclick(async ({ coordinate }) => {
     const [productId, choiceId] = coordinate;
     const currentResults = searchResults();
@@ -580,6 +756,44 @@ function ProductSearchInteractive(props, refs, viewStateSignals, fastCarryForwar
     if (productIndex === -1)
       return;
     const product = currentResults[productIndex];
+    if (product.quickAddType === QuickAddType.COLOR_AND_TEXT_OPTIONS) {
+      const choices = product.quickOption?.choices;
+      if (!choices)
+        return;
+      const updatedChoices = choices.map((c) => ({
+        ...c,
+        isSelected: c.choiceId === choiceId
+      }));
+      let updated = patch(currentResults, [
+        {
+          op: REPLACE,
+          path: [productIndex, "quickOption", "choices"],
+          value: updatedChoices
+        }
+      ]);
+      const stockMap = variantStockCache[productId];
+      if (stockMap) {
+        const colorStock = stockMap[choiceId];
+        const textChoices = product.secondQuickOption?.choices;
+        if (textChoices) {
+          const updatedTextChoices = textChoices.map((c) => ({
+            ...c,
+            inStock: colorStock?.[c.choiceId] ?? false
+          }));
+          updated = patch(updated, [
+            {
+              op: REPLACE,
+              path: [productIndex, "secondQuickOption", "choices"],
+              value: updatedTextChoices
+            }
+          ]);
+        }
+      } else {
+        loadVariantStock(productId);
+      }
+      setSearchResults(updated);
+      return;
+    }
     const choice = product.quickOption?.choices?.find((c) => c.choiceId === choiceId);
     if (!choice || !choice.inStock) {
       console.warn("Choice not available or out of stock");
@@ -603,6 +817,45 @@ function ProductSearchInteractive(props, refs, viewStateSignals, fastCarryForwar
       ]));
     }
   });
+  refs.searchResults.secondQuickOption.choices.choiceButton.onclick(async ({ coordinate }) => {
+    const [productId, choiceId] = coordinate;
+    const currentResults = searchResults();
+    const productIndex = currentResults.findIndex((p) => p._id === productId);
+    if (productIndex === -1)
+      return;
+    const product = currentResults[productIndex];
+    const textChoice = product.secondQuickOption?.choices?.find((c) => c.choiceId === choiceId);
+    const selectedColor = product.quickOption?.choices?.find((c) => c.isSelected);
+    if (!textChoice || !textChoice.inStock) {
+      console.warn("Text choice not available or out of stock");
+      return;
+    }
+    setSearchResults(patch(currentResults, [
+      { op: REPLACE, path: [productIndex, "isAddingToCart"], value: true }
+    ]));
+    try {
+      const colorOptionId = product.quickOption?._id || "";
+      const textOptionId = product.secondQuickOption?._id || "";
+      await storesContext.addToCart(productId, 1, {
+        options: {
+          [colorOptionId]: selectedColor?.choiceId || "",
+          [textOptionId]: textChoice.choiceId
+        },
+        modifiers: {},
+        customTextFields: {}
+      });
+    } catch (error) {
+      console.error("Failed to add to cart:", error);
+    } finally {
+      setSearchResults(patch(searchResults(), [
+        { op: REPLACE, path: [productIndex, "isAddingToCart"], value: false }
+      ]));
+    }
+  });
+  refs.searchResults.secondQuickOption.choices.choiceButton.onmouseenter(({ coordinate }) => {
+    const [productId] = coordinate;
+    loadVariantStock(productId);
+  });
   refs.searchResults.viewOptionsButton.onclick(({ coordinate }) => {
     const [productId] = coordinate;
     const product = searchResults().find((p) => p._id === productId);
@@ -620,7 +873,7 @@ function ProductSearchInteractive(props, refs, viewStateSignals, fastCarryForwar
       hasResults: hasResults(),
       hasSuggestions: hasSuggestions(),
       suggestions: suggestions(),
-      filters: filters(),
+      filters: mergedFilters(),
       sortBy: sortBy(),
       hasMore: hasMore(),
       loadedCount: loadedCount(),
@@ -634,10 +887,9 @@ const init = makeJayInit().withClient(async (data) => {
   console.log("[wix-stores] Initializing client-side stores context...");
   provideWixStoresContext();
   console.log("[wix-stores] Client initialization complete");
-  console.log(`[wix-stores] Search enabled: ${data.enableClientSearch}`);
 });
 export {
-  WIX_CART_CONTEXT,
+  WIX_CART_CONTEXT2 as WIX_CART_CONTEXT,
   WIX_STORES_CONTEXT,
   cartIndicator,
   cartPage,