@jay-framework/wix-stores 0.15.0

package/dist/index.client.js

@@ -0,0 +1,649 @@
+import { WIX_CART_CONTEXT, 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";
+var StockStatus = /* @__PURE__ */ ((StockStatus2) => {
+  StockStatus2[StockStatus2["OUT_OF_STOCK"] = 0] = "OUT_OF_STOCK";
+  StockStatus2[StockStatus2["IN_STOCK"] = 1] = "IN_STOCK";
+  return StockStatus2;
+})(StockStatus || {});
+var Selected = /* @__PURE__ */ ((Selected2) => {
+  Selected2[Selected2["selected"] = 0] = "selected";
+  Selected2[Selected2["notSelected"] = 1] = "notSelected";
+  return Selected2;
+})(Selected || {});
+const instances = {
+  productsV3ClientInstance: void 0
+};
+function getProductsV3Client(wixClient) {
+  if (!instances.productsV3ClientInstance) {
+    instances.productsV3ClientInstance = wixClient.use(productsV3);
+  }
+  return instances.productsV3ClientInstance;
+}
+const WIX_STORES_CONTEXT = createJayContext();
+function provideWixStoresContext() {
+  const wixClientContext = useGlobalContext(WIX_CLIENT_CONTEXT);
+  const wixClient = wixClientContext.client;
+  const cartContext = useGlobalContext(WIX_CART_CONTEXT2);
+  const catalogClient = getProductsV3Client(wixClient);
+  const storesContext = registerReactiveGlobalContext(WIX_STORES_CONTEXT, () => {
+    async function addToCart(productId, quantity = 1, selections) {
+      console.log(`[WixStores] Adding to cart: ${productId} x ${quantity}`, selections);
+      const product = await catalogClient.getProduct(productId, {
+        fields: ["VARIANT_OPTION_CHOICE_NAMES"]
+      });
+      let variant = product.variantsInfo?.variants?.find(
+        (v) => v.choices?.every(
+          (choice) => selections?.options?.[choice.optionChoiceIds?.optionId] === choice.optionChoiceIds?.choiceId
+        )
+      );
+      if (!variant && product.variantsInfo?.variants?.length > 0) {
+        variant = product.variantsInfo.variants[0];
+      }
+      if (!variant) {
+        console.warn(`[WixStores] No variant found for product ${productId}`);
+        return { cartState: await cartContext.getEstimatedCart() };
+      }
+      const translatedModifiers = {};
+      const translatedCustomTextFields = {};
+      if (selections?.modifiers || selections?.customTextFields) {
+        for (const modifier of product.modifiers || []) {
+          const modifierId = modifier._id;
+          const modifierKey = modifier["key"];
+          if (!modifierKey) continue;
+          const selectedChoiceId = selections?.modifiers?.[modifierId];
+          if (selectedChoiceId && modifier.choicesSettings?.choices) {
+            const choice = modifier.choicesSettings.choices.find(
+              (c) => c.choiceId === selectedChoiceId
+            );
+            if (choice?.key) {
+              translatedModifiers[modifierKey] = choice.key;
+            }
+          }
+          const customText = selections?.customTextFields?.[modifierId];
+          if (customText) {
+            translatedCustomTextFields[modifierKey] = customText;
+          }
+        }
+      }
+      return cartContext.addToCart(productId, quantity, {
+        variantId: variant._id,
+        modifiers: translatedModifiers,
+        customTextFields: translatedCustomTextFields,
+        productSlug: product.slug
+      });
+    }
+    return {
+      // Delegate cart indicator and operations to WIX_CART_CONTEXT
+      cartIndicator: cartContext.cartIndicator,
+      refreshCartIndicator: () => cartContext.refreshCartIndicator(),
+      getEstimatedCart: () => cartContext.getEstimatedCart(),
+      addToCart,
+      // Custom implementation that resolves V3 variants first
+      removeLineItems: (ids) => cartContext.removeLineItems(ids),
+      updateLineItemQuantity: (id, qty) => cartContext.updateLineItemQuantity(id, qty),
+      clearCart: () => cartContext.clearCart(),
+      applyCoupon: (code) => cartContext.applyCoupon(code),
+      removeCoupon: () => cartContext.removeCoupon()
+    };
+  });
+  console.log("[wix-stores] Client stores context initialized (delegating cart to wix-cart)");
+  return storesContext;
+}
+function buildSelectionsFromViewState(optionsVS, modifiersVS) {
+  const options = {};
+  for (const option of optionsVS) {
+    if (option.textChoiceSelection) {
+      options[option._id] = option.textChoiceSelection;
+    } else {
+      const selectedChoice = option.choices.find((c) => c.isSelected);
+      if (selectedChoice) {
+        options[option._id] = selectedChoice.choiceId;
+      }
+    }
+  }
+  const modifiers = {};
+  const customTextFields = {};
+  for (const modifier of modifiersVS) {
+    const selectedChoice = modifier.choices.find((c) => c.isSelected);
+    if (selectedChoice) {
+      modifiers[modifier._id] = selectedChoice.choiceId;
+    } else if (modifier.textModifierSelection) {
+      if (modifier.choices.length > 0) {
+        modifiers[modifier._id] = modifier.textModifierSelection;
+      } else {
+        customTextFields[modifier._id] = modifier.textModifierSelection;
+      }
+    }
+  }
+  return { options, modifiers, customTextFields };
+}
+function ProductPageInteractive(props, refs, viewStateSignals, fastCarryForward, storesContext) {
+  const [quantity, setQuantity] = createSignal(viewStateSignals.quantity[0]().quantity);
+  const { productId, variants } = fastCarryForward;
+  const {
+    actionsEnabled: [actionsEnabled, setActionsEnabled],
+    options: [options, setOptions],
+    modifiers: [modifiers, setModifiers],
+    mediaGallery: [mediaGallery, setMediaGallery],
+    // sku: [sku, setSKU],
+    // price: [price, setPrice],
+    // stockStatus: [stockStatus, setStockStatus],
+    pricePerUnit: [pricePerUnit, setPricePerUnit]
+  } = viewStateSignals;
+  const [isAddingToCart, setIsAddingToCart] = createSignal(false);
+  const [selectedMediaId, setSelectedMediaId] = createSignal(null);
+  const selectedOptionsRecord = createMemo(() => {
+    const result = {};
+    for (const option of options()) {
+      if (option.textChoiceSelection) {
+        result[option._id] = option.textChoiceSelection;
+      } else {
+        const selectedChoice = option.choices.find((c) => c.isSelected);
+        if (selectedChoice) {
+          result[option._id] = selectedChoice.choiceId;
+        }
+      }
+    }
+    return result;
+  });
+  const selectedVariant = createMemo(() => findVariant(variants, selectedOptionsRecord()));
+  const sku = createMemo(() => selectedVariant().sku);
+  const price = createMemo(() => selectedVariant().price);
+  const strikethroughPrice = createMemo(() => selectedVariant().strikethroughPrice);
+  const stockStatus = createMemo(() => selectedVariant().inventoryStatus);
+  const computedActionsEnabled = createMemo(() => stockStatus() === StockStatus.IN_STOCK);
+  const interactiveMedia = createMemo((prev) => {
+    prev = prev || mediaGallery();
+    const oldSelectedMediaIndex = prev.availableMedia.findIndex((_) => _.selected === Selected.selected);
+    const newSelectedMediaIndex = Math.max(0, prev.availableMedia.findIndex((_) => _.mediaId === selectedMediaId()));
+    if (oldSelectedMediaIndex === newSelectedMediaIndex)
+      return prev;
+    const newSelectedMedia = prev.availableMedia[newSelectedMediaIndex];
+    return patch(prev, [
+      { op: REPLACE, path: ["selectedMedia"], value: newSelectedMedia.media },
+      {
+        op: REPLACE,
+        path: ["availableMedia", oldSelectedMediaIndex, "selected"],
+        value: Selected.notSelected
+      },
+      {
+        op: REPLACE,
+        path: ["availableMedia", newSelectedMediaIndex, "selected"],
+        value: Selected.selected
+      }
+    ]);
+  });
+  refs.quantity.decrementButton.onclick(() => {
+    setQuantity((prev) => Math.max(1, prev - 1));
+  });
+  refs.quantity.incrementButton.onclick(() => {
+    setQuantity((prev) => prev + 1);
+  });
+  refs.quantity.quantity.oninput(({ event }) => {
+    const value = parseInt(event.target.value, 10);
+    if (!isNaN(value) && value > 0) {
+      setQuantity(value);
+    }
+  });
+  function findVariant(variants2, options2) {
+    const foundFullMatch = variants2.find((variant) => variant.choices.every((choice) => options2[choice.optionChoiceIds.optionId] === choice.optionChoiceIds.choiceId));
+    if (foundFullMatch && foundFullMatch.mediaId)
+      setSelectedMediaId(foundFullMatch.mediaId);
+    return foundFullMatch || variants2[0];
+  }
+  refs.mediaGallery.availableMedia.selected.onclick(({ coordinate }) => {
+    const mediaId = coordinate[0];
+    setSelectedMediaId(mediaId);
+  });
+  refs.options.choices.choiceButton.onclick(({ event, viewState, coordinate }) => {
+    const [optionId, choiceId] = coordinate;
+    const optionIndex = options().findIndex((_) => _._id === optionId);
+    const option = options()[optionIndex];
+    const newChoiceIndex = option.choices.findIndex((_) => _.choiceId === choiceId);
+    const oldChoiceIndex = option.choices.findIndex((_) => _.isSelected);
+    const removeSelectedPatch = oldChoiceIndex > -1 && oldChoiceIndex !== newChoiceIndex ? [
+      {
+        op: REPLACE,
+        path: [optionIndex, "choices", oldChoiceIndex, "isSelected"],
+        value: false
+      }
+    ] : [];
+    setOptions(patch(options(), [
+      {
+        op: REPLACE,
+        path: [optionIndex, "choices", newChoiceIndex, "isSelected"],
+        value: true
+      },
+      ...removeSelectedPatch
+    ]));
+  });
+  refs.options.textChoice.oninput(({ event, viewState, coordinate }) => {
+    const [optionId] = coordinate;
+    const optionIndex = options().findIndex((_) => _._id === optionId);
+    const selectedChoiceId = event.target.value;
+    setOptions(patch(options(), [
+      {
+        op: REPLACE,
+        path: [optionIndex, "textChoiceSelection"],
+        value: selectedChoiceId
+      }
+    ]));
+  });
+  refs.modifiers.choices.choiceButton.onclick(({ event, viewState, coordinate }) => {
+    const [modifierId, choiceId] = coordinate;
+    const modifierIndex = modifiers().findIndex((_) => _._id === modifierId);
+    const modifier = modifiers()[modifierIndex];
+    const newChoiceIndex = modifier.choices.findIndex((_) => _.choiceId === choiceId);
+    const oldChoiceIndex = modifier.choices.findIndex((_) => _.isSelected);
+    const removeSelectedPatch = oldChoiceIndex > -1 && oldChoiceIndex !== newChoiceIndex ? [
+      {
+        op: REPLACE,
+        path: [modifierIndex, "choices", oldChoiceIndex, "isSelected"],
+        value: false
+      }
+    ] : [];
+    setModifiers(patch(modifiers(), [
+      {
+        op: REPLACE,
+        path: [modifierIndex, "choices", newChoiceIndex, "isSelected"],
+        value: true
+      },
+      ...removeSelectedPatch
+    ]));
+  });
+  refs.modifiers.textInput.oninput(({ event, viewState, coordinate }) => {
+    const [modifierId] = coordinate;
+    const modifierIndex = modifiers().findIndex((_) => _._id === modifierId);
+    const textValue = event.target.value;
+    setModifiers(patch(modifiers(), [
+      { op: REPLACE, path: [modifierIndex, "textModifierSelection"], value: textValue }
+    ]));
+  });
+  refs.modifiers.textModifier.oninput(({ event, viewState, coordinate }) => {
+    const [modifierId] = coordinate;
+    const modifierIndex = modifiers().findIndex((_) => _._id === modifierId);
+    const selectedChoiceId = event.target.value;
+    setModifiers(patch(modifiers(), [
+      {
+        op: REPLACE,
+        path: [modifierIndex, "textModifierSelection"],
+        value: selectedChoiceId
+      }
+    ]));
+  });
+  refs.addToCartButton.onclick(async () => {
+    if (stockStatus() === StockStatus.OUT_OF_STOCK) {
+      console.warn("Product is out of stock");
+      return;
+    }
+    setIsAddingToCart(true);
+    try {
+      const selections = buildSelectionsFromViewState(options(), modifiers());
+      await storesContext.addToCart(fastCarryForward.productId, quantity(), selections);
+      console.log("Added to cart:", quantity(), "items with selections:", selections);
+    } catch (error) {
+      console.error("Failed to add to cart:", error);
+    } finally {
+      setIsAddingToCart(false);
+    }
+  });
+  return {
+    render: () => ({
+      quantity: {
+        quantity: quantity()
+      },
+      actionsEnabled: computedActionsEnabled,
+      options,
+      modifiers,
+      mediaGallery: interactiveMedia,
+      sku,
+      price,
+      pricePerUnit,
+      stockStatus,
+      strikethroughPrice
+    })
+  };
+}
+const productPage = makeJayStackComponent().withProps().withContexts(WIX_STORES_CONTEXT).withInteractive(ProductPageInteractive);
+var CurrentSort = /* @__PURE__ */ ((CurrentSort2) => {
+  CurrentSort2[CurrentSort2["relevance"] = 0] = "relevance";
+  CurrentSort2[CurrentSort2["priceAsc"] = 1] = "priceAsc";
+  CurrentSort2[CurrentSort2["priceDesc"] = 2] = "priceDesc";
+  CurrentSort2[CurrentSort2["newest"] = 3] = "newest";
+  CurrentSort2[CurrentSort2["nameAsc"] = 4] = "nameAsc";
+  CurrentSort2[CurrentSort2["nameDesc"] = 5] = "nameDesc";
+  return CurrentSort2;
+})(CurrentSort || {});
+const searchProducts = createActionCaller("wixStores.searchProducts", "GET");
+createActionCaller("wixStores.getProductBySlug", "GET");
+createActionCaller("wixStores.getCategories", "GET");
+const PAGE_SIZE = 12;
+function ProductSearchInteractive(props, refs, viewStateSignals, fastCarryForward, storesContext) {
+  const baseCategoryId = fastCarryForward.baseCategoryId;
+  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;
+  let isFirst = true;
+  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);
+    try {
+      const userSelectedCategoryIds = currentFilters.categoryFilter.categories.filter((c) => c.isSelected).map((c) => c.categoryId);
+      const categoryIds = baseCategoryId ? [baseCategoryId, ...userSelectedCategoryIds] : userSelectedCategoryIds;
+      const result = await searchProducts({
+        query: searchTerm || "",
+        filters: {
+          minPrice: currentFilters.priceRange.minPrice || void 0,
+          maxPrice: currentFilters.priceRange.maxPrice || void 0,
+          categoryIds,
+          inStockOnly: currentFilters.inStockOnly
+        },
+        sortBy: mapSortToAction(currentSort),
+        // No cursor = start from beginning
+        pageSize: PAGE_SIZE
+      });
+      if (version !== searchVersion) {
+        return;
+      }
+      setSearchResults(result.products);
+      setResultCount(result.products.length);
+      setTotalCount(result.totalCount);
+      setLoadedCount(result.products.length);
+      setHasMore(result.hasMore);
+      setHasResults(result.products.length > 0);
+      currentCursor = result.nextCursor;
+    } catch (error) {
+      if (version === searchVersion) {
+        console.error("Search failed:", error);
+      }
+    } finally {
+      if (version === searchVersion) {
+        setIsSearching(false);
+      }
+    }
+  };
+  const performLoadMore = async () => {
+    if (isSearching() || !hasMore() || !currentCursor)
+      return;
+    setIsSearching(true);
+    try {
+      const currentFilters = filters();
+      const currentSort = sortBy().currentSort;
+      const searchTerm = submittedSearchTerm();
+      const userSelectedCategoryIds = currentFilters.categoryFilter.categories.filter((c) => c.isSelected).map((c) => c.categoryId);
+      const categoryIds = baseCategoryId ? [baseCategoryId, ...userSelectedCategoryIds] : userSelectedCategoryIds;
+      const result = await searchProducts({
+        query: searchTerm || "",
+        filters: {
+          minPrice: currentFilters.priceRange.minPrice || void 0,
+          maxPrice: currentFilters.priceRange.maxPrice || void 0,
+          categoryIds,
+          inStockOnly: currentFilters.inStockOnly
+        },
+        sortBy: mapSortToAction(currentSort),
+        cursor: currentCursor,
+        pageSize: PAGE_SIZE
+      });
+      const currentResults = searchResults();
+      const newResults = [...currentResults, ...result.products];
+      setSearchResults(newResults);
+      setResultCount(newResults.length);
+      setLoadedCount(newResults.length);
+      setHasMore(result.hasMore);
+      currentCursor = result.nextCursor;
+    } catch (error) {
+      console.error("Load more failed:", error);
+    } finally {
+      setIsSearching(false);
+    }
+  };
+  createEffect(() => {
+    const searchTerm = submittedSearchTerm();
+    const currentFilters = filters();
+    const currentSort = sortBy().currentSort;
+    if (isFirst) {
+      isFirst = false;
+      return;
+    }
+    if (debounceTimeout) {
+      clearTimeout(debounceTimeout);
+    }
+    debounceTimeout = setTimeout(() => {
+      searchVersion++;
+      const version = searchVersion;
+      performSearch(version, searchTerm, currentFilters, currentSort);
+    }, DEBOUNCE_MS);
+  });
+  refs.searchExpression.oninput(({ event }) => {
+    const value = event.target.value;
+    setSearchExpression(value);
+  });
+  refs.searchExpression.onkeydown(({ event }) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      setSubmittedSearchTerm(searchExpression().trim());
+    }
+  });
+  refs.searchButton.onclick(() => {
+    setSubmittedSearchTerm(searchExpression().trim());
+  });
+  refs.clearSearchButton.onclick(() => {
+    setSearchExpression("");
+    setSubmittedSearchTerm(null);
+    setHasSearched(false);
+  });
+  refs.sortBy.sortDropdown.oninput(({ event }) => {
+    const value = event.target.value;
+    const sortMap = {
+      relevance: CurrentSort.relevance,
+      priceAsc: CurrentSort.priceAsc,
+      priceDesc: CurrentSort.priceDesc,
+      newest: CurrentSort.newest,
+      nameAsc: CurrentSort.nameAsc,
+      nameDesc: CurrentSort.nameDesc
+    };
+    const newSort = sortMap[value] ?? CurrentSort.relevance;
+    setSortBy({ currentSort: newSort });
+  });
+  refs.filters.priceRange.minPrice.oninput(({ event }) => {
+    const value = parseFloat(event.target.value);
+    const newValue = isNaN(value) ? 0 : value;
+    setFilters(patch(filters(), [{ op: REPLACE, path: ["priceRange", "minPrice"], value: newValue }]));
+  });
+  refs.filters.priceRange.maxPrice.oninput(({ event }) => {
+    const value = parseFloat(event.target.value);
+    const newValue = isNaN(value) ? 0 : value;
+    setFilters(patch(filters(), [{ op: REPLACE, path: ["priceRange", "maxPrice"], value: newValue }]));
+  });
+  refs.filters.priceRange.ranges.isSelected.oninput(({ event, coordinate }) => {
+    const [rangeId] = coordinate;
+    const currentFilters = filters();
+    const ranges = currentFilters.priceRange.ranges || [];
+    const selectedRange = ranges.find((r) => r.rangeId === rangeId);
+    if (!selectedRange)
+      return;
+    const updatedRanges = ranges.map((r) => ({
+      ...r,
+      isSelected: r.rangeId === rangeId
+    }));
+    const newMinPrice = selectedRange.minValue ?? 0;
+    const newMaxPrice = selectedRange.maxValue ?? 0;
+    setFilters(patch(currentFilters, [
+      { op: REPLACE, path: ["priceRange", "ranges"], value: updatedRanges },
+      { op: REPLACE, path: ["priceRange", "minPrice"], value: newMinPrice },
+      { op: REPLACE, path: ["priceRange", "maxPrice"], value: newMaxPrice }
+    ]));
+  });
+  refs.filters.categoryFilter.categories.isSelected.oninput(({ event, coordinate }) => {
+    const [categoryId] = coordinate;
+    const currentFilters = filters();
+    const categoryIndex = currentFilters.categoryFilter.categories.findIndex((c) => c.categoryId === categoryId);
+    if (categoryIndex !== -1) {
+      const isChecked = event.target.checked;
+      setFilters(patch(currentFilters, [
+        {
+          op: REPLACE,
+          path: ["categoryFilter", "categories", categoryIndex, "isSelected"],
+          value: isChecked
+        }
+      ]));
+    }
+  });
+  refs.filters.inStockOnly.oninput(({ event }) => {
+    const isChecked = event.target.checked;
+    setFilters(patch(filters(), [{ op: REPLACE, path: ["inStockOnly"], value: isChecked }]));
+  });
+  refs.filters.clearFilters.onclick(() => {
+    const currentFilters = filters();
+    const clearedCategories = currentFilters.categoryFilter.categories.map((cat) => ({
+      ...cat,
+      isSelected: false
+    }));
+    const clearedRanges = (currentFilters.priceRange.ranges || []).map((r, i) => ({
+      ...r,
+      isSelected: i === 0
+      // First one is "Show all"
+    }));
+    setFilters({
+      priceRange: {
+        minPrice: 0,
+        maxPrice: 0,
+        minBound: currentFilters.priceRange.minBound,
+        maxBound: currentFilters.priceRange.maxBound,
+        ranges: clearedRanges
+      },
+      categoryFilter: { categories: clearedCategories },
+      inStockOnly: false
+    });
+  });
+  refs.loadMoreButton.onclick(() => {
+    performLoadMore();
+  });
+  refs.suggestions.suggestionButton.onclick(({ coordinate }) => {
+    const [suggestionId] = coordinate;
+    const suggestion = suggestions().find((s) => s.suggestionId === suggestionId);
+    if (suggestion) {
+      setSearchExpression(suggestion.suggestionText);
+      setSubmittedSearchTerm(suggestion.suggestionText);
+    }
+  });
+  refs.searchResults.addToCartButton.onclick(async ({ coordinate }) => {
+    const [productId] = coordinate;
+    const currentResults = searchResults();
+    const productIndex = currentResults.findIndex((p) => p._id === productId);
+    if (productIndex === -1)
+      return;
+    setSearchResults(patch(currentResults, [
+      { op: REPLACE, path: [productIndex, "isAddingToCart"], value: true }
+    ]));
+    try {
+      await storesContext.addToCart(productId, 1);
+    } catch (error) {
+      console.error("Failed to add to cart:", error);
+    } finally {
+      setSearchResults(patch(searchResults(), [
+        { op: REPLACE, path: [productIndex, "isAddingToCart"], value: false }
+      ]));
+    }
+  });
+  refs.searchResults.quickOption.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 choice = product.quickOption?.choices?.find((c) => c.choiceId === choiceId);
+    if (!choice || !choice.inStock) {
+      console.warn("Choice not available or out of stock");
+      return;
+    }
+    setSearchResults(patch(currentResults, [
+      { op: REPLACE, path: [productIndex, "isAddingToCart"], value: true }
+    ]));
+    try {
+      const optionId = product.quickOption._id;
+      await storesContext.addToCart(productId, 1, {
+        options: { [optionId]: choice.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);
+    if (product?.productUrl) {
+      window.location.href = product.productUrl;
+    }
+  });
+  return {
+    render: () => ({
+      searchExpression: searchExpression(),
+      isSearching: isSearching(),
+      hasSearched: hasSearched(),
+      searchResults: searchResults(),
+      resultCount: resultCount(),
+      hasResults: hasResults(),
+      hasSuggestions: hasSuggestions(),
+      suggestions: suggestions(),
+      filters: filters(),
+      sortBy: sortBy(),
+      hasMore: hasMore(),
+      loadedCount: loadedCount(),
+      totalCount: totalCount()
+    })
+  };
+}
+const productSearch = makeJayStackComponent().withProps().withContexts(WIX_STORES_CONTEXT).withInteractive(ProductSearchInteractive);
+const categoryList = makeJayStackComponent().withProps();
+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_STORES_CONTEXT,
+  cartIndicator,
+  cartPage,
+  categoryList,
+  init,
+  productPage,
+  productSearch,
+  provideWixStoresContext
+};