@jay-framework/wix-cart 0.15.0

package/dist/index.client.js

@@ -0,0 +1,566 @@
+import { createJayContext, useGlobalContext } from "@jay-framework/runtime";
+import { registerReactiveGlobalContext, createSignal, useReactive, createEffect } from "@jay-framework/component";
+import { WIX_CLIENT_CONTEXT } from "@jay-framework/wix-server-client/client";
+import { currentCart } from "@wix/ecom";
+import { makeJayStackComponent, makeJayInit } from "@jay-framework/fullstack-component";
+import { patch, REPLACE } from "@jay-framework/json-patch";
+let currentCartInstance;
+function getCurrentCartClient(wixClient) {
+  if (!currentCartInstance) {
+    currentCartInstance = wixClient.use(currentCart);
+  }
+  return currentCartInstance;
+}
+function parseWixMediaUrl(url) {
+  if (!url) return null;
+  const match = url.match(
+    /^wix:(image|video|document|audio):\/\/v1\/([^/]+)\/([^#]+)(?:#(.*))?$/
+  );
+  if (!match) return null;
+  const [, type, mediaId, fileName, hashParams] = match;
+  const result = {
+    type,
+    mediaId,
+    fileName: decodeURIComponent(fileName)
+  };
+  if (hashParams) {
+    const params = new URLSearchParams(hashParams);
+    const originWidth = params.get("originWidth");
+    const originHeight = params.get("originHeight");
+    if (originWidth) result.originWidth = parseInt(originWidth, 10);
+    if (originHeight) result.originHeight = parseInt(originHeight, 10);
+    const posterUri = params.get("posterUri");
+    const posterWidth = params.get("posterWidth");
+    const posterHeight = params.get("posterHeight");
+    if (posterUri) result.posterUri = decodeURIComponent(posterUri);
+    if (posterWidth) result.posterWidth = parseInt(posterWidth, 10);
+    if (posterHeight) result.posterHeight = parseInt(posterHeight, 10);
+  }
+  return result;
+}
+function formatWixMediaUrl(_id, url, resize) {
+  const resizeFragment = "";
+  if (url == null ? void 0 : url.startsWith("wix:")) {
+    const parsed = parseWixMediaUrl(url);
+    if (parsed) {
+      return `https://static.wixstatic.com/media/${parsed.mediaId}${resizeFragment}`;
+    }
+  }
+  if ((url == null ? void 0 : url.startsWith("http://")) || (url == null ? void 0 : url.startsWith("https://"))) {
+    return url;
+  }
+  return "";
+}
+function mapLineItem(item) {
+  const catalogRef = item.catalogReference;
+  const physicalProperties = item.physicalProperties;
+  const priceData = item.price;
+  const descriptionLines = item.descriptionLines || [];
+  const variantParts = descriptionLines.filter((line) => line.name?.translated).map(
+    (line) => `${line.name?.translated}: ${line.colorInfo?.translated || line.plainText?.translated || ""}`
+  );
+  const slug = item.url?.split("/").pop() || "";
+  return {
+    lineItemId: item._id || "",
+    productId: catalogRef?.catalogItemId || "",
+    productName: item.productName?.translated || item.productName?.original || "",
+    productUrl: slug ? `/products/${slug}` : "",
+    variantName: variantParts.join(" / "),
+    sku: physicalProperties?.sku || "",
+    image: {
+      url: formatWixMediaUrl("", item.image || ""),
+      altText: item.productName?.translated || ""
+    },
+    quantity: item.quantity || 1,
+    unitPrice: {
+      amount: priceData?.amount || "0",
+      formattedAmount: priceData?.formattedAmount || ""
+    },
+    lineTotal: {
+      amount: item.lineItemPrice?.amount || "0",
+      formattedAmount: item.lineItemPrice?.formattedAmount || ""
+    },
+    lineDiscount: {
+      amount: "0",
+      formattedAmount: ""
+    },
+    hasDiscount: false
+  };
+}
+function calculateTotalDiscount(appliedDiscounts) {
+  if (!appliedDiscounts) return 0;
+  return appliedDiscounts.reduce(
+    (sum, d) => sum + parseFloat(d.merchantDiscount?.amount?.amount || "0"),
+    0
+  );
+}
+function calculateItemCount(lineItems) {
+  if (!lineItems) return 0;
+  return lineItems.reduce((sum, item) => sum + (item.quantity || 0), 0);
+}
+function getEmptySummary() {
+  return {
+    itemCount: 0,
+    subtotal: { amount: "0", formattedAmount: "$0.00" },
+    discount: { amount: "0", formattedAmount: "" },
+    hasDiscount: false,
+    estimatedTax: { amount: "0", formattedAmount: "" },
+    showTax: false,
+    estimatedTotal: { amount: "0", formattedAmount: "$0.00" },
+    currency: "USD"
+  };
+}
+function mapCartSummary(cart) {
+  if (!cart) {
+    return getEmptySummary();
+  }
+  const totalDiscount = calculateTotalDiscount(cart.appliedDiscounts);
+  const itemCount = calculateItemCount(cart.lineItems);
+  return {
+    itemCount,
+    subtotal: {
+      amount: "0",
+      formattedAmount: "$0.00"
+    },
+    discount: {
+      amount: totalDiscount.toString(),
+      formattedAmount: totalDiscount > 0 ? `-$${totalDiscount.toFixed(2)}` : ""
+    },
+    hasDiscount: totalDiscount > 0,
+    estimatedTax: {
+      amount: "0",
+      formattedAmount: ""
+    },
+    showTax: false,
+    estimatedTotal: {
+      amount: "0",
+      formattedAmount: "$0.00"
+    },
+    currency: cart.currency || "USD"
+  };
+}
+function mapCartToState(cart) {
+  if (!cart) {
+    return getEmptyCartState();
+  }
+  const lineItems = (cart.lineItems || []).map(mapLineItem);
+  const appliedCoupon = cart.appliedDiscounts?.find((d) => d.coupon?.code)?.coupon?.code || "";
+  return {
+    cartId: cart._id || "",
+    isEmpty: lineItems.length === 0,
+    lineItems,
+    summary: mapCartSummary(cart),
+    appliedCoupon,
+    hasAppliedCoupon: !!appliedCoupon
+  };
+}
+function getEmptyCartState() {
+  return {
+    cartId: "",
+    isEmpty: true,
+    lineItems: [],
+    summary: getEmptySummary(),
+    appliedCoupon: "",
+    hasAppliedCoupon: false
+  };
+}
+function mapCartToIndicator(cart) {
+  if (!cart || !cart.lineItems?.length) {
+    return {
+      itemCount: 0,
+      hasItems: false
+    };
+  }
+  const itemCount = calculateItemCount(cart.lineItems);
+  return {
+    itemCount,
+    hasItems: itemCount > 0
+  };
+}
+function isCartNotFoundError(error) {
+  const err = error;
+  if (err?.response?.status === 404) return true;
+  if (err?.status === 404) return true;
+  if (err?.code === 404) return true;
+  const message = err?.message?.toLowerCase() || "";
+  if (message.includes("not found") && message.includes("cart")) return true;
+  return false;
+}
+async function getCurrentCartOrNull(cartClient) {
+  try {
+    const response = await cartClient.getCurrentCart();
+    return response ?? null;
+  } catch (error) {
+    if (isCartNotFoundError(error)) {
+      return null;
+    }
+    throw error;
+  }
+}
+async function estimateCurrentCartTotalsOrNull(cartClient) {
+  try {
+    const response = await cartClient.estimateCurrentCartTotals({});
+    return response ?? null;
+  } catch (error) {
+    if (isCartNotFoundError(error)) {
+      return null;
+    }
+    throw error;
+  }
+}
+function mapEstimateTotalsToState(estimate) {
+  if (!estimate?.cart) {
+    return getEmptyCartState();
+  }
+  const cart = estimate.cart;
+  const lineItems = (cart.lineItems || []).map(mapLineItem);
+  const appliedCoupon = cart.appliedDiscounts?.find((d) => d.coupon?.code)?.coupon?.code || "";
+  const itemCount = lineItems.reduce((sum, item) => sum + item.quantity, 0);
+  const priceSummary = estimate.priceSummary;
+  const taxSummary = estimate.taxSummary;
+  const discountAmount = parseFloat(priceSummary?.discount?.amount || "0");
+  const hasTax = parseFloat(taxSummary?.totalTax?.amount || "0") > 0;
+  return {
+    cartId: cart._id || "",
+    isEmpty: lineItems.length === 0,
+    lineItems,
+    summary: {
+      itemCount,
+      subtotal: {
+        amount: priceSummary?.subtotal?.amount || "0",
+        formattedAmount: priceSummary?.subtotal?.formattedAmount || "$0.00"
+      },
+      discount: {
+        amount: discountAmount.toString(),
+        formattedAmount: priceSummary?.discount?.formattedAmount || ""
+      },
+      hasDiscount: discountAmount > 0,
+      estimatedTax: {
+        amount: taxSummary?.totalTax?.amount || "0",
+        formattedAmount: taxSummary?.totalTax?.formattedAmount || ""
+      },
+      showTax: hasTax,
+      estimatedTotal: {
+        amount: priceSummary?.total?.amount || priceSummary?.subtotal?.amount || "0",
+        formattedAmount: priceSummary?.total?.formattedAmount || priceSummary?.subtotal?.formattedAmount || "$0.00"
+      },
+      currency: cart.currency || "USD"
+    },
+    appliedCoupon,
+    hasAppliedCoupon: !!appliedCoupon
+  };
+}
+const WIX_STORES_APP_ID = "215238eb-22a5-4c36-9e7b-e7c08025e04e";
+const WIX_CART_CONTEXT = createJayContext();
+function provideWixCartContext() {
+  const wixClientContext = useGlobalContext(WIX_CLIENT_CONTEXT);
+  const wixClient = wixClientContext.client;
+  const cartClient = getCurrentCartClient(wixClient);
+  const cartContext = registerReactiveGlobalContext(WIX_CART_CONTEXT, () => {
+    const [itemCount, setItemCount] = createSignal(0);
+    const [hasItems, setHasItems] = createSignal(false);
+    const reactive = useReactive();
+    function updateIndicatorFromCart(cart) {
+      const indicator = mapCartToIndicator(cart);
+      reactive.batchReactions(() => {
+        setItemCount(indicator.itemCount);
+        setHasItems(indicator.hasItems);
+      });
+    }
+    async function refreshCartIndicator() {
+      const cart = await getCurrentCartOrNull(cartClient);
+      updateIndicatorFromCart(cart);
+    }
+    async function getEstimatedCart() {
+      const estimate = await estimateCurrentCartTotalsOrNull(cartClient);
+      return mapEstimateTotalsToState(estimate);
+    }
+    async function addToCart(productId, quantity = 1, options) {
+      console.log(`[WixCart] Adding to cart: ${productId} x ${quantity}`, options);
+      const lineItem = {
+        catalogReference: {
+          catalogItemId: productId,
+          appId: WIX_STORES_APP_ID,
+          options: {
+            variantId: options?.variantId,
+            options: options?.modifiers,
+            customTextFields: options?.customTextFields
+          }
+        },
+        quantity
+      };
+      const result = await cartClient.addToCurrentCart({
+        lineItems: [lineItem]
+      });
+      updateIndicatorFromCart(result.cart ?? null);
+      return { cartState: mapCartToState(result.cart ?? null) };
+    }
+    async function removeLineItems(lineItemIds) {
+      const result = await cartClient.removeLineItemsFromCurrentCart(lineItemIds);
+      updateIndicatorFromCart(result.cart ?? null);
+      return { cartState: mapCartToState(result.cart ?? null) };
+    }
+    async function updateLineItemQuantity(lineItemId, quantity) {
+      let result;
+      if (quantity === 0) {
+        result = await cartClient.removeLineItemsFromCurrentCart([lineItemId]);
+      } else {
+        result = await cartClient.updateCurrentCartLineItemQuantity([
+          { _id: lineItemId, quantity }
+        ]);
+      }
+      updateIndicatorFromCart(result.cart ?? null);
+      return { cartState: mapCartToState(result.cart ?? null) };
+    }
+    async function clearCart() {
+      const cart = await getCurrentCartOrNull(cartClient);
+      if (cart?.lineItems?.length) {
+        const lineItemIds = cart.lineItems.map((item) => item._id || "").filter(Boolean);
+        if (lineItemIds.length > 0) {
+          await cartClient.removeLineItemsFromCurrentCart(lineItemIds);
+        }
+      }
+      setItemCount(0);
+      setHasItems(false);
+    }
+    async function applyCoupon(couponCode) {
+      const result = await cartClient.updateCurrentCart({ couponCode });
+      updateIndicatorFromCart(result ?? null);
+      return { cartState: mapCartToState(result ?? null) };
+    }
+    async function removeCoupon() {
+      const result = await cartClient.removeCouponFromCurrentCart();
+      updateIndicatorFromCart(result.cart ?? null);
+      return { cartState: mapCartToState(result.cart ?? null) };
+    }
+    return {
+      cartIndicator: {
+        itemCount,
+        hasItems
+      },
+      refreshCartIndicator,
+      getEstimatedCart,
+      addToCart,
+      removeLineItems,
+      updateLineItemQuantity,
+      clearCart,
+      applyCoupon,
+      removeCoupon
+    };
+  });
+  console.log("[wix-cart] Client cart context initialized (reactive)");
+  return cartContext;
+}
+function CartIndicatorInteractive(_props, refs, viewStateSignals, _carryForward, cartContext) {
+  const { isLoading: [isLoading, setIsLoading], justAdded: [justAdded, setJustAdded] } = viewStateSignals;
+  const [prevItemCount, setPrevItemCount] = createSignal(cartContext.cartIndicator.itemCount());
+  createEffect(() => {
+    const currentCount = cartContext.cartIndicator.itemCount();
+    if (currentCount > prevItemCount()) {
+      setJustAdded(true);
+      setTimeout(() => setJustAdded(false), 1500);
+    }
+    setPrevItemCount(currentCount);
+  });
+  refs.cartLink?.onclick(() => {
+  });
+  return {
+    render: () => ({
+      // Read directly from reactive global context signals
+      itemCount: cartContext.cartIndicator.itemCount(),
+      hasItems: cartContext.cartIndicator.hasItems(),
+      isLoading: isLoading(),
+      justAdded: justAdded()
+    })
+  };
+}
+const cartIndicator = makeJayStackComponent().withProps().withContexts(WIX_CART_CONTEXT).withInteractive(CartIndicatorInteractive);
+function mapLineItemToViewState(item) {
+  return {
+    lineItemId: item.lineItemId,
+    productId: item.productId,
+    productName: item.productName,
+    productUrl: item.productUrl,
+    variantName: item.variantName,
+    sku: item.sku,
+    image: item.image,
+    quantity: item.quantity,
+    isUpdatingQuantity: false,
+    unitPrice: item.unitPrice,
+    lineTotal: item.lineTotal,
+    lineDiscount: item.lineDiscount,
+    hasDiscount: item.hasDiscount,
+    isRemoving: false
+  };
+}
+function mapCartStateToViewState(cart) {
+  return {
+    isEmpty: cart.isEmpty,
+    isLoading: false,
+    isCheckingOut: false,
+    lineItems: cart.lineItems.map(mapLineItemToViewState),
+    summary: {
+      itemCount: cart.summary.itemCount,
+      subtotal: cart.summary.subtotal,
+      discount: cart.summary.discount,
+      hasDiscount: cart.summary.hasDiscount,
+      estimatedTax: cart.summary.estimatedTax,
+      showTax: cart.summary.showTax,
+      estimatedTotal: cart.summary.estimatedTotal,
+      currency: cart.summary.currency
+    },
+    coupon: {
+      code: "",
+      isApplying: false,
+      appliedCode: cart.appliedCoupon,
+      hasAppliedCoupon: cart.hasAppliedCoupon,
+      errorMessage: "",
+      hasError: false
+    }
+  };
+}
+function CartPageInteractive(_props, refs, viewStateSignals, _carryForward, cartContext) {
+  const { isEmpty: [isEmpty, setIsEmpty], isLoading: [isLoading, setIsLoading], isCheckingOut: [isCheckingOut, setIsCheckingOut], lineItems: [lineItems, setLineItems], summary: [summary, setSummary], coupon: [coupon, setCoupon] } = viewStateSignals;
+  async function loadCart() {
+    try {
+      setIsLoading(true);
+      const cartState = await cartContext.getEstimatedCart();
+      const viewState = mapCartStateToViewState(cartState);
+      setIsEmpty(viewState.isEmpty);
+      setLineItems(viewState.lineItems);
+      setSummary(viewState.summary);
+      setCoupon(viewState.coupon);
+    } catch (error) {
+      console.error("[CartPage] Failed to load cart:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+  async function handleQuantityChange(lineItemId, newQuantity) {
+    const itemIndex = lineItems().findIndex((item) => item.lineItemId === lineItemId);
+    if (itemIndex === -1)
+      return;
+    setLineItems(patch(lineItems(), [
+      { op: REPLACE, path: [itemIndex, "isUpdatingQuantity"], value: true }
+    ]));
+    try {
+      await cartContext.updateLineItemQuantity(lineItemId, newQuantity);
+      await loadCart();
+    } catch (error) {
+      console.error("[CartPage] Failed to update quantity:", error);
+      setLineItems(patch(lineItems(), [
+        { op: REPLACE, path: [itemIndex, "isUpdatingQuantity"], value: false }
+      ]));
+    }
+  }
+  async function handleRemoveItem(lineItemId) {
+    const itemIndex = lineItems().findIndex((item) => item.lineItemId === lineItemId);
+    if (itemIndex === -1)
+      return;
+    setLineItems(patch(lineItems(), [{ op: REPLACE, path: [itemIndex, "isRemoving"], value: true }]));
+    try {
+      await cartContext.removeLineItems([lineItemId]);
+      await loadCart();
+    } catch (error) {
+      console.error("[CartPage] Failed to remove item:", error);
+      setLineItems(patch(lineItems(), [
+        { op: REPLACE, path: [itemIndex, "isRemoving"], value: false }
+      ]));
+    }
+  }
+  async function handleClearCart() {
+    try {
+      setIsLoading(true);
+      await cartContext.clearCart();
+      await loadCart();
+    } catch (error) {
+      console.error("[CartPage] Failed to clear cart:", error);
+      setIsLoading(false);
+    }
+  }
+  async function handleApplyCoupon() {
+    const code = coupon().code.trim();
+    if (!code)
+      return;
+    setCoupon(patch(coupon(), [
+      { op: REPLACE, path: ["isApplying"], value: true },
+      { op: REPLACE, path: ["hasError"], value: false },
+      { op: REPLACE, path: ["errorMessage"], value: "" }
+    ]));
+    try {
+      await cartContext.applyCoupon(code);
+      await loadCart();
+    } catch (error) {
+      console.error("[CartPage] Failed to apply coupon:", error);
+      setCoupon(patch(coupon(), [
+        { op: REPLACE, path: ["isApplying"], value: false },
+        { op: REPLACE, path: ["hasError"], value: true },
+        { op: REPLACE, path: ["errorMessage"], value: "Invalid coupon code" }
+      ]));
+    }
+  }
+  async function handleRemoveCoupon() {
+    try {
+      await cartContext.removeCoupon();
+      await loadCart();
+    } catch (error) {
+      console.error("[CartPage] Failed to remove coupon:", error);
+    }
+  }
+  async function handleCheckout() {
+    setIsCheckingOut(true);
+    window.location.href = "/checkout";
+  }
+  refs.clearCartButton?.onclick(handleClearCart);
+  refs.checkoutButton?.onclick(handleCheckout);
+  refs.coupon?.code?.oninput(({ event }) => {
+    const code = event.target.value;
+    setCoupon(patch(coupon(), [{ op: REPLACE, path: ["code"], value: code }]));
+  });
+  refs.coupon?.applyButton?.onclick(handleApplyCoupon);
+  refs.coupon?.removeButton?.onclick(handleRemoveCoupon);
+  refs.lineItems?.quantity.oninput(({ event, coordinate }) => {
+    const lineItemId = coordinate[0];
+    const newQty = parseInt(event.target.value) || 1;
+    handleQuantityChange(lineItemId, newQty);
+  });
+  refs.lineItems?.decrementButton.onclick(({ viewState }) => {
+    if (viewState.quantity > 1) {
+      handleQuantityChange(viewState.lineItemId, viewState.quantity - 1);
+    }
+  });
+  refs.lineItems?.incrementButton.onclick(({ viewState }) => {
+    handleQuantityChange(viewState.lineItemId, viewState.quantity + 1);
+  });
+  refs.lineItems?.removeButton.onclick(({ viewState }) => {
+    handleRemoveItem(viewState.lineItemId);
+  });
+  loadCart();
+  return {
+    render: () => ({
+      isEmpty: isEmpty(),
+      isLoading: isLoading(),
+      isCheckingOut: isCheckingOut(),
+      lineItems: lineItems(),
+      summary: summary(),
+      coupon: coupon()
+    })
+  };
+}
+const cartPage = makeJayStackComponent().withProps().withContexts(WIX_CART_CONTEXT).withInteractive(CartPageInteractive);
+const init = makeJayInit().withClient(async (data) => {
+  console.log("[wix-cart] Initializing client-side cart context...");
+  const { enableClientCart } = data;
+  const cartContext = provideWixCartContext();
+  if (enableClientCart) {
+    await cartContext.refreshCartIndicator();
+  }
+  console.log("[wix-cart] Client initialization complete");
+  console.log(`[wix-cart] Cart enabled: ${enableClientCart}`);
+});
+export {
+  WIX_CART_CONTEXT,
+  cartIndicator,
+  cartPage,
+  init
+};

package/dist/index.d.ts

@@ -0,0 +1,42 @@
+import { WixClient } from '@wix/sdk';
+import { W as WixCartService } from './index.client-VoD54p4E.js';
+export { A as AddToCartOptions, q as CartIndicatorState, n as CartLineItem, C as CartOperationResult, l as CartState, o as CartSummary, R as ReactiveCartIndicator, b as WIX_CART_CONTEXT, a as WIX_CART_SERVICE, c as WixCartContext, d as WixCartInitData, r as cartIndicator, s as cartPage, j as estimateCurrentCartTotalsOrNull, i as getCurrentCartOrNull, h as getEmptyCartState, t as init, e as mapCartSummary, g as mapCartToIndicator, f as mapCartToState, k as mapEstimateTotalsToState, m as mapLineItem, p as provideWixCartContext } from './index.client-VoD54p4E.js';
+import { currentCart } from '@wix/ecom';
+import { BuildDescriptors } from '@wix/sdk-types';
+import '@jay-framework/runtime';
+import '@jay-framework/reactive';
+import '@wix/auto_sdk_ecom_current-cart';
+import '@jay-framework/fullstack-component';
+import '@jay-framework/component';
+
+/**
+ * Wix Cart Client Factory
+ *
+ * Creates a singleton instance of the Wix Cart client.
+ * Used by both server service and client context.
+ */
+
+/**
+ * Get a configured Wix eCommerce Current Cart client (singleton)
+ *
+ * The Current Cart API allows you to manage the visitor's shopping cart.
+ *
+ * @returns Current Cart client instance from @wix/ecom
+ * @see https://dev.wix.com/docs/sdk/backend-modules/ecom/current-cart/introduction
+ */
+declare function getCurrentCartClient(wixClient: WixClient): BuildDescriptors<typeof currentCart, {}>;
+
+/**
+ * Server-side Wix Cart Service
+ *
+ * Provides access to Wix Cart APIs on the server using API Key authentication.
+ * This file contains server-only code (registerService).
+ */
+
+/**
+ * Creates, registers, and returns a Wix Cart service instance.
+ * Called during server initialization.
+ */
+declare function provideWixCartService(wixClient: WixClient): WixCartService;
+
+export { WixCartService, getCurrentCartClient, provideWixCartService };