@jay-framework/wix-stores 0.15.0 → 0.15.4

package/dist/contracts/product-search.jay-contract.d.ts

@@ -22,7 +22,8 @@ export interface CategoryOfCategoryFilterOfFilterOfProductSearchViewState {
   categoryId: string,
   categoryName: string,
   categorySlug: string,
-  isSelected: boolean
+  isSelected: boolean,
+  categoryUrl: string
 }
 
 export interface CategoryFilterOfFilterOfProductSearchViewState {
@@ -53,6 +54,57 @@ export interface SuggestionOfProductSearchViewState {
   suggestionText: string
 }
 
+export interface BreadcrumbOfCategoryHeaderOfProductSearchViewState {
+  categoryId: string,
+  name: string,
+  slug: string,
+  url: string
+}
+
+export interface PropOfTagOfSeoDatumOfCategoryHeaderOfProductSearchViewState {
+  key: string,
+  value: string
+}
+
+export interface MetaOfTagOfSeoDatumOfCategoryHeaderOfProductSearchViewState {
+  key: string,
+  value: string
+}
+
+export interface TagOfSeoDatumOfCategoryHeaderOfProductSearchViewState {
+  position: string,
+  type: string,
+  props: Array<PropOfTagOfSeoDatumOfCategoryHeaderOfProductSearchViewState>,
+  meta: Array<MetaOfTagOfSeoDatumOfCategoryHeaderOfProductSearchViewState>,
+  children: string
+}
+
+export interface KeywordOfSettingOfSeoDatumOfCategoryHeaderOfProductSearchViewState {
+  term: string,
+  isMain: boolean,
+  origin: string
+}
+
+export interface SettingOfSeoDatumOfCategoryHeaderOfProductSearchViewState {
+  preventAutoRedirect: boolean,
+  keywords: Array<KeywordOfSettingOfSeoDatumOfCategoryHeaderOfProductSearchViewState>
+}
+
+export interface SeoDatumOfCategoryHeaderOfProductSearchViewState {
+  tags: Array<TagOfSeoDatumOfCategoryHeaderOfProductSearchViewState>,
+  settings: SettingOfSeoDatumOfCategoryHeaderOfProductSearchViewState
+}
+
+export interface CategoryHeaderOfProductSearchViewState {
+  name: string,
+  description: string,
+  imageUrl: string,
+  hasImage: boolean,
+  productCount: number,
+  breadcrumbs: Array<BreadcrumbOfCategoryHeaderOfProductSearchViewState>,
+  seoData: SeoDatumOfCategoryHeaderOfProductSearchViewState
+}
+
 export interface ProductSearchViewState {
   searchExpression: string,
   searchFields: string,
@@ -69,15 +121,17 @@ export interface ProductSearchViewState {
   loadedCount: number,
   totalCount: number,
   hasSuggestions: boolean,
-  suggestions: Array<SuggestionOfProductSearchViewState>
+  suggestions: Array<SuggestionOfProductSearchViewState>,
+  categoryHeader: CategoryHeaderOfProductSearchViewState
 }
 
 export type ProductSearchSlowViewState = Pick<ProductSearchViewState, 'searchFields' | 'fuzzySearch' | 'emptyStateMessage'> & {
     filters: {
     categoryFilter: {
-    categories: Array<Pick<ProductSearchViewState['filters']['categoryFilter']['categories'][number], 'categoryId' | 'categoryName' | 'categorySlug'>>;
+    categories: Array<Pick<ProductSearchViewState['filters']['categoryFilter']['categories'][number], 'categoryId' | 'categoryName' | 'categorySlug' | 'categoryUrl'>>;
 };
 };
+    categoryHeader: ProductSearchViewState['categoryHeader'];
 };
 
 export type ProductSearchFastViewState = Pick<ProductSearchViewState, 'searchExpression' | 'isSearching' | 'hasSearched' | 'resultCount' | 'hasResults' | 'hasMore' | 'loadedCount' | 'totalCount' | 'hasSuggestions'> & {

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) {
@@ -324,10 +324,69 @@ 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");
+  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 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,22 +394,6 @@ 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 performSearch = async (version, searchTerm, currentFilters, currentSort) => {
     setIsSearching(true);
     setHasSearched(true);
@@ -379,6 +422,7 @@ function ProductSearchInteractive(props, refs, viewStateSignals, fastCarryForwar
       setHasMore(result.hasMore);
       setHasResults(result.products.length > 0);
       currentCursor = result.nextCursor;
+      updateUrlFilters(searchTerm, currentFilters, currentSort, fastCarryForward.categories);
     } catch (error) {
       if (version === searchVersion) {
         console.error("Search failed:", error);
@@ -573,6 +617,49 @@ function ProductSearchInteractive(props, refs, viewStateSignals, fastCarryForwar
       ]));
     }
   });
+  const loadVariantStock = async (productId) => {
+    if (variantStockCache[productId])
+      return;
+    const stockMap = await getVariantStock({ productId });
+    variantStockCache[productId] = stockMap;
+    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 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
+      }
+    ]));
+  };
+  refs.searchResults.productLink.onmouseenter(({ coordinate }) => {
+    const [productId] = coordinate;
+    const product = searchResults().find((p) => p._id === productId);
+    if (product?.quickAddType === QuickAddType.COLOR_AND_TEXT_OPTIONS) {
+      loadVariantStock(productId);
+    }
+  });
+  refs.searchResults.quickOption.choices.choiceButton.onmouseenter(({ coordinate }) => {
+    const [productId] = coordinate;
+    const product = searchResults().find((p) => p._id === productId);
+    if (product?.quickAddType === QuickAddType.COLOR_AND_TEXT_OPTIONS) {
+      loadVariantStock(productId);
+    }
+  });
   refs.searchResults.quickOption.choices.choiceButton.onclick(async ({ coordinate }) => {
     const [productId, choiceId] = coordinate;
     const currentResults = searchResults();
@@ -580,6 +667,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 +728,41 @@ 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.viewOptionsButton.onclick(({ coordinate }) => {
     const [productId] = coordinate;
     const product = searchResults().find((p) => p._id === productId);
@@ -634,10 +794,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,