@wix/headless-stores 0.0.12 → 0.0.15

package/cjs/dist/react/PayNow.js

@@ -1,10 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PayNow = PayNow;
-const services_manager_react_1 = require("@wix/services-manager-react");
-const pay_now_service_1 = require("../services/pay-now-service");
-;
-;
+import { useService } from "@wix/services-manager-react";
+import { PayNowServiceDefinition } from "../services/pay-now-service.js";
 /**
  * A headless component that provides pay now functionality using the render props pattern.
  *
@@ -28,8 +23,8 @@ const pay_now_service_1 = require("../services/pay-now-service");
  * ```
  * @component
  */
-function PayNow(props) {
-    const { redirectToCheckout, loadingSignal, errorSignal, } = (0, services_manager_react_1.useService)(pay_now_service_1.PayNowServiceDefinition);
+export function PayNow(props) {
+    const { redirectToCheckout, loadingSignal, errorSignal } = useService(PayNowServiceDefinition);
     return props.children({
         isLoading: loadingSignal.get(),
         error: errorSignal.get(),

package/cjs/dist/react/Product.d.ts

@@ -1,4 +1,4 @@
-import type { V3Product } from '@wix/auto_sdk_stores_products-v-3';
+import type { V3Product } from "@wix/auto_sdk_stores_products-v-3";
 /**
  * Props for ProductName headless component
  */
@@ -31,9 +31,9 @@ export interface ProductDescriptionProps {
  */
 export interface ProductDescriptionRenderProps {
     /** Product description (may contain HTML) */
-    description: NonNullable<V3Product['description']>;
+    description: NonNullable<V3Product["description"]>;
     /** Product plain description */
-    plainDescription: NonNullable<V3Product['plainDescription']>;
+    plainDescription: NonNullable<V3Product["plainDescription"]>;
 }
 /**
  * Headless component for product description display

package/cjs/dist/react/Product.js

@@ -1,29 +1,25 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Description = exports.Name = void 0;
-const services_manager_react_1 = require("@wix/services-manager-react");
-const product_service_1 = require("../services/product-service");
+import { useService } from "@wix/services-manager-react";
+import { ProductServiceDefinition } from "../services/product-service.js";
 /**
  * Headless component for product name display
  *
  * @component
  */
-const Name = (props) => {
-    const service = (0, services_manager_react_1.useService)(product_service_1.ProductServiceDefinition);
+export const Name = (props) => {
+    const service = useService(ProductServiceDefinition);
     const product = service.product.get();
     const name = product.name;
     return props.children({
         name,
     });
 };
-exports.Name = Name;
 /**
  * Headless component for product description display
  *
  * @component
  */
-const Description = (props) => {
-    const service = (0, services_manager_react_1.useService)(product_service_1.ProductServiceDefinition);
+export const Description = (props) => {
+    const service = useService(ProductServiceDefinition);
     const product = service.product.get();
     const descriptionRichContent = product.description;
     const plainDescription = product.plainDescription;
@@ -32,4 +28,3 @@ const Description = (props) => {
         plainDescription: plainDescription,
     });
 };
-exports.Description = Description;

package/cjs/dist/react/ProductActions.js

@@ -1,23 +1,19 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Actions = void 0;
-const services_manager_react_1 = require("@wix/services-manager-react");
-const selected_variant_service_1 = require("../services/selected-variant-service");
-const product_modifiers_service_1 = require("../services/product-modifiers-service");
+import { useService } from "@wix/services-manager-react";
+import { SelectedVariantServiceDefinition } from "../services/selected-variant-service.js";
+import { ProductModifiersServiceDefinition } from "../services/product-modifiers-service.js";
+import { CurrentCartServiceDefinition } from "@wix/headless-ecom/services";
 /**
  * Headless component for product actions (add to cart, buy now)
  *
  * @component
  */
-const Actions = (props) => {
-    const variantService = (0, services_manager_react_1.useService)(selected_variant_service_1.SelectedVariantServiceDefinition);
-    // const cartService = useService(CurrentCartServiceDefinition) as ServiceAPI<
-    //   typeof CurrentCartServiceDefinition
-    // >;
+export const Actions = (props) => {
+    const variantService = useService(SelectedVariantServiceDefinition);
+    const cartService = useService(CurrentCartServiceDefinition);
     // Try to get modifiers service - it may not exist for all products
     let modifiersService = null;
     try {
-        modifiersService = (0, services_manager_react_1.useService)(product_modifiers_service_1.ProductModifiersServiceDefinition);
+        modifiersService = useService(ProductModifiersServiceDefinition);
     }
     catch {
         // Modifiers service not available for this product
@@ -52,19 +48,19 @@ const Actions = (props) => {
     const onBuyNow = async () => {
         try {
             // Clear the cart first
-            // await cartService.clearCart();
+            await cartService.clearCart();
             // Add the product to cart
             await onAddToCart();
             // Proceed to checkout
-            // await cartService.proceedToCheckout();
+            await cartService.proceedToCheckout();
         }
         catch (error) {
-            console.error('Buy now failed:', error);
+            console.error("Buy now failed:", error);
             throw error;
         }
     };
     const onOpenCart = () => {
-        // cartService.openCart();
+        cartService.openCart();
     };
     return props.children({
         onAddToCart,
@@ -80,4 +76,3 @@ const Actions = (props) => {
         availableQuantity,
     });
 };
-exports.Actions = Actions;

package/cjs/dist/react/ProductModifiers.d.ts

@@ -1,4 +1,4 @@
-import { type ConnectedModifier, type ConnectedModifierChoice } from '@wix/auto_sdk_stores_products-v-3';
+import { type ConnectedModifier, type ConnectedModifierChoice } from "@wix/auto_sdk_stores_products-v-3";
 /**
  * Props for Modifiers headless component
  */
@@ -21,6 +21,8 @@ export interface ModifiersRenderProps {
 }
 /**
  * Headless component for all product modifiers
+ *
+ * @component
  */
 export declare const Modifiers: (props: ModifiersProps) => import("react").ReactNode;
 /**

package/cjs/dist/react/ProductModifiers.js

@@ -1,16 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToggleFreeText = exports.FreeText = exports.Choice = exports.Modifier = exports.Modifiers = void 0;
-const react_1 = require("react");
-const services_manager_react_1 = require("@wix/services-manager-react");
-const product_modifiers_service_1 = require("../services/product-modifiers-service");
-const auto_sdk_stores_products_v_3_1 = require("@wix/auto_sdk_stores_products-v-3");
+import { useState } from "react";
+import { useService } from "@wix/services-manager-react";
+import { ProductModifiersServiceDefinition } from "../services/product-modifiers-service.js";
+import { ModifierRenderType, } from "@wix/auto_sdk_stores_products-v-3";
 /**
  * Custom hook to safely get the modifiers service
  */
 function useModifiersService() {
     try {
-        return (0, services_manager_react_1.useService)(product_modifiers_service_1.ProductModifiersServiceDefinition);
+        return useService(ProductModifiersServiceDefinition);
     }
     catch {
         return null;
@@ -18,8 +15,10 @@ function useModifiersService() {
 }
 /**
  * Headless component for all product modifiers
+ *
+ * @component
  */
-const Modifiers = (props) => {
+export const Modifiers = (props) => {
     const modifiersService = useModifiersService();
     if (!modifiersService) {
         return props.children({
@@ -40,21 +39,20 @@ const Modifiers = (props) => {
         areAllRequiredModifiersFilled,
     });
 };
-exports.Modifiers = Modifiers;
 /**
  * Headless component for a specific product modifier
  *
  * @component
  */
-const Modifier = (props) => {
+export const Modifier = (props) => {
     const modifiersService = useModifiersService();
     const { modifier } = props;
-    const name = modifier.name || '';
+    const name = modifier.name || "";
     const type = modifier.modifierRenderType;
     const mandatory = modifier.mandatory || false;
     const choices = modifier.choicesSettings?.choices || [];
     const hasChoices = choices.length > 0;
-    const isFreeText = type === auto_sdk_stores_products_v_3_1.ModifierRenderType.FREE_TEXT;
+    const isFreeText = type === ModifierRenderType.FREE_TEXT;
     const freeTextSettings = modifier.freeTextSettings;
     const maxChars = freeTextSettings?.maxLength;
     const placeholder = freeTextSettings?.placeholder;
@@ -71,22 +69,21 @@ const Modifier = (props) => {
         placeholder,
     });
 };
-exports.Modifier = Modifier;
 /**
  * Headless component for individual modifier choice selection
  *
  * @component
  */
-const Choice = (props) => {
+export const Choice = (props) => {
     const modifiersService = useModifiersService();
     const { modifier, choice } = props;
-    const modifierName = modifier.name || '';
+    const modifierName = modifier.name || "";
     const renderType = modifier.modifierRenderType;
     // For TEXT_CHOICES, use choice.key; for SWATCH_CHOICES, use choice.name
-    const choiceValue = renderType === auto_sdk_stores_products_v_3_1.ModifierRenderType.TEXT_CHOICES
-        ? choice.key || choice.name || ''
-        : choice.name || '';
-    const value = choice.name || ''; // Display name is always choice.name
+    const choiceValue = renderType === ModifierRenderType.TEXT_CHOICES
+        ? choice.key || choice.name || ""
+        : choice.name || "";
+    const value = choice.name || ""; // Display name is always choice.name
     const description = choice.description;
     const colorCode = choice.colorCode;
     const selectedValue = modifiersService?.getModifierValue(modifierName);
@@ -104,22 +101,21 @@ const Choice = (props) => {
         colorCode,
     });
 };
-exports.Choice = Choice;
 /**
  * Headless component for free text modifier input
  *
  * @component
  */
-const FreeText = (props) => {
+export const FreeText = (props) => {
     const modifiersService = useModifiersService();
     const { modifier } = props;
-    const modifierName = modifier.name || '';
+    const modifierName = modifier.name || "";
     const mandatory = modifier.mandatory || false;
     const freeTextSettings = modifier.freeTextSettings;
     const maxChars = freeTextSettings?.maxLength;
     const placeholder = freeTextSettings?.placeholder;
     const selectedValue = modifiersService?.getModifierValue(modifierName);
-    const value = selectedValue?.freeTextValue || '';
+    const value = selectedValue?.freeTextValue || "";
     const charCount = value.length;
     const isOverLimit = maxChars ? charCount > maxChars : false;
     const onChange = (newValue) => {
@@ -138,19 +134,18 @@ const FreeText = (props) => {
         modifierName,
     });
 };
-exports.FreeText = FreeText;
 /**
  * Headless component for toggling free text modifier input
  * Used for optional free text modifiers where a checkbox shows/hides the input
  *
  * @component
  */
-const ToggleFreeText = (props) => {
+export const ToggleFreeText = (props) => {
     const modifiersService = useModifiersService();
     const { modifier } = props;
-    const modifierName = modifier.name || '';
+    const modifierName = modifier.name || "";
     const mandatory = modifier.mandatory || false;
-    const [isTextInputShown, setIsTextInputShown] = (0, react_1.useState)(mandatory);
+    const [isTextInputShown, setIsTextInputShown] = useState(mandatory);
     const onToggle = () => {
         const newState = !isTextInputShown;
         setIsTextInputShown(newState);
@@ -165,4 +160,3 @@ const ToggleFreeText = (props) => {
         modifierName,
     });
 };
-exports.ToggleFreeText = ToggleFreeText;

package/cjs/dist/react/ProductVariantSelector.d.ts

@@ -1,4 +1,4 @@
-import { type ConnectedOption, type ConnectedOptionChoice, InventoryAvailabilityStatus } from '@wix/auto_sdk_stores_products-v-3';
+import { type ConnectedOption, type ConnectedOptionChoice, InventoryAvailabilityStatus } from "@wix/auto_sdk_stores_products-v-3";
 /**
  * Props for Options headless component
  */

package/cjs/dist/react/ProductVariantSelector.js

@@ -1,16 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Reset = exports.Stock = exports.Choice = exports.Option = exports.Options = void 0;
-const services_manager_react_1 = require("@wix/services-manager-react");
-const selected_variant_service_1 = require("../services/selected-variant-service");
-const auto_sdk_stores_products_v_3_1 = require("@wix/auto_sdk_stores_products-v-3");
+import { useService } from "@wix/services-manager-react";
+import { SelectedVariantServiceDefinition } from "../services/selected-variant-service.js";
+import { InventoryAvailabilityStatus, } from "@wix/auto_sdk_stores_products-v-3";
 /**
  * Headless component for all product options
  *
  * @component
  */
-const Options = (props) => {
-    const variantService = (0, services_manager_react_1.useService)(selected_variant_service_1.SelectedVariantServiceDefinition);
+export const Options = (props) => {
+    const variantService = useService(SelectedVariantServiceDefinition);
     const selectedChoices = variantService.selectedChoices.get();
     const options = variantService.productOptions.get();
     return props.children({
@@ -19,17 +16,16 @@ const Options = (props) => {
         selectedChoices,
     });
 };
-exports.Options = Options;
 /**
  * Headless component for choices within a specific product option
  *
  * @component
  */
-const Option = (props) => {
-    const variantService = (0, services_manager_react_1.useService)(selected_variant_service_1.SelectedVariantServiceDefinition);
+export const Option = (props) => {
+    const variantService = useService(SelectedVariantServiceDefinition);
     const selectedChoices = variantService.selectedChoices.get();
     const { option } = props;
-    const name = option.name || '';
+    const name = option.name || "";
     const choices = option.choicesSettings?.choices || [];
     const selectedValue = selectedChoices[name] || null;
     return props.children({
@@ -40,18 +36,17 @@ const Option = (props) => {
         hasChoices: choices.length > 0,
     });
 };
-exports.Option = Option;
 /**
  * Headless component for individual choice selection
  *
  * @component
  */
-const Choice = (props) => {
-    const variantService = (0, services_manager_react_1.useService)(selected_variant_service_1.SelectedVariantServiceDefinition);
+export const Choice = (props) => {
+    const variantService = useService(SelectedVariantServiceDefinition);
     const selectedChoices = variantService.selectedChoices.get();
     const { option, choice } = props;
-    const optionName = option.name || '';
-    const choiceValue = choice.name || '';
+    const optionName = option.name || "";
+    const choiceValue = choice.name || "";
     const isSelected = selectedChoices[optionName] === choiceValue;
     // Check if this choice is available based on current selections
     const isVisible = variantService.isChoiceAvailable(optionName, choiceValue);
@@ -79,26 +74,23 @@ const Choice = (props) => {
         choiceValue,
     });
 };
-exports.Choice = Choice;
 /**
  * Headless component for product stock status
  *
  * @component
  */
-const Stock = (props) => {
-    const variantService = (0, services_manager_react_1.useService)(selected_variant_service_1.SelectedVariantServiceDefinition);
+export const Stock = (props) => {
+    const variantService = useService(SelectedVariantServiceDefinition);
     const inStock = variantService.isInStock.get();
     const isPreOrderEnabled = variantService.isPreOrderEnabled.get();
     const trackInventory = variantService.trackQuantity.get();
     const currentVariantId = variantService.selectedVariantId.get();
     const availableQuantity = variantService.quantityAvailable.get();
     const selectedQuantity = variantService.selectedQuantity.get();
-    // const currentVariant = variantService.currentVariant.get();
-    // const allVariantsAreOutOfStock = variantService.IsAllVariantsAreOutOfStock();
     // Return raw availability status - UI components will handle display conversion
     const availabilityStatus = inStock
-        ? auto_sdk_stores_products_v_3_1.InventoryAvailabilityStatus.IN_STOCK
-        : auto_sdk_stores_products_v_3_1.InventoryAvailabilityStatus.OUT_OF_STOCK;
+        ? InventoryAvailabilityStatus.IN_STOCK
+        : InventoryAvailabilityStatus.OUT_OF_STOCK;
     const incrementQuantity = () => {
         variantService.incrementQuantity();
     };
@@ -117,14 +109,13 @@ const Stock = (props) => {
         decrementQuantity,
     });
 };
-exports.Stock = Stock;
 /**
  * Headless component for resetting variant selections
  *
  * @component
  */
-const Reset = (props) => {
-    const variantService = (0, services_manager_react_1.useService)(selected_variant_service_1.SelectedVariantServiceDefinition);
+export const Reset = (props) => {
+    const variantService = useService(SelectedVariantServiceDefinition);
     const selectedChoices = variantService.selectedChoices.get();
     const hasSelections = Object.keys(selectedChoices).length > 0;
     const onReset = () => {
@@ -135,4 +126,3 @@ const Reset = (props) => {
         hasSelections,
     });
 };
-exports.Reset = Reset;

package/cjs/dist/react/RelatedProducts.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { type V3Product } from '@wix/auto_sdk_stores_products-v-3';
+import React from "react";
+import { type V3Product } from "@wix/auto_sdk_stores_products-v-3";
 /**
  * Props for List headless component
  */

package/cjs/dist/react/RelatedProducts.js

@@ -1,33 +1,37 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Item = exports.List = void 0;
-const react_1 = __importDefault(require("react"));
-const services_manager_react_1 = require("@wix/services-manager-react");
-const related_products_service_1 = require("../services/related-products-service");
-const auto_sdk_stores_products_v_3_1 = require("@wix/auto_sdk_stores_products-v-3");
+import React from "react";
+import { useService } from "@wix/services-manager-react";
+import { RelatedProductsServiceDefinition } from "../services/related-products-service.js";
+import { SignalsServiceDefinition } from "@wix/services-definitions/core-services/signals";
+import { InventoryAvailabilityStatus, } from "@wix/auto_sdk_stores_products-v-3";
 /**
  * Headless component for displaying related products list
  *
  * @component
  */
-const List = (props) => {
-    const service = (0, services_manager_react_1.useService)(related_products_service_1.RelatedProductsServiceDefinition);
-    const [products, setProducts] = react_1.default.useState([]);
-    const [isLoading, setIsLoading] = react_1.default.useState(false);
-    const [error, setError] = react_1.default.useState(null);
-    const [hasProducts, setHasProducts] = react_1.default.useState(false);
-    react_1.default.useEffect(() => {
-        const unsubscribes = [
-            service.relatedProducts.subscribe(setProducts),
-            service.isLoading.subscribe(setIsLoading),
-            service.error.subscribe(setError),
-            service.hasRelatedProducts.subscribe(setHasProducts),
+export const List = (props) => {
+    const service = useService(RelatedProductsServiceDefinition);
+    const signalsService = useService(SignalsServiceDefinition);
+    const [products, setProducts] = React.useState([]);
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const [hasProducts, setHasProducts] = React.useState(false);
+    React.useEffect(() => {
+        const effects = [
+            signalsService.effect(() => {
+                setProducts(service.relatedProducts.get());
+            }),
+            signalsService.effect(() => {
+                setIsLoading(service.isLoading.get());
+            }),
+            signalsService.effect(() => {
+                setError(service.error.get());
+            }),
+            signalsService.effect(() => {
+                setHasProducts(service.hasRelatedProducts.get());
+            }),
         ];
-        return () => unsubscribes.forEach(fn => fn());
-    }, [service]);
+        return () => effects.forEach((dispose) => dispose());
+    }, [service, signalsService]);
     return props.children({
         products,
         isLoading,
@@ -36,29 +40,28 @@ const List = (props) => {
         refresh: service.refreshRelatedProducts,
     });
 };
-exports.List = List;
 /**
  * Headless component for individual related product item
  *
  * @component
  */
-const Item = (props) => {
+export const Item = (props) => {
     const { product } = props;
-    const title = product.name || 'Unknown Product';
+    const title = product.name || "Unknown Product";
     // Use actual v3 media structure - image is directly a string URL
     const image = product.media?.main?.image || null;
     // Create formatted price from raw amount since formattedAmount may not be available
     const rawPrice = product.actualPriceRange?.minValue?.amount;
-    const price = rawPrice ? `$${rawPrice}` : 'Price unavailable';
+    const price = rawPrice ? `$${rawPrice}` : "Price unavailable";
     const availabilityStatus = product.inventory?.availabilityStatus;
-    const available = availabilityStatus === auto_sdk_stores_products_v_3_1.InventoryAvailabilityStatus.IN_STOCK ||
-        availabilityStatus === auto_sdk_stores_products_v_3_1.InventoryAvailabilityStatus.PARTIALLY_OUT_OF_STOCK;
+    const available = availabilityStatus === InventoryAvailabilityStatus.IN_STOCK ||
+        availabilityStatus === InventoryAvailabilityStatus.PARTIALLY_OUT_OF_STOCK;
     const href = `/store/example-2/${product.slug}`;
-    const description = typeof product.description === 'string' ? product.description : '';
+    const description = typeof product.description === "string" ? product.description : "";
     const handleQuickAdd = () => {
         // This would typically add the product to cart
         // For now, we'll just log it
-        console.log('Quick add:', product.name);
+        console.log("Quick add:", product.name);
     };
     return props.children({
         title,
@@ -70,4 +73,3 @@ const Item = (props) => {
         onQuickAdd: handleQuickAdd,
     });
 };
-exports.Item = Item;

package/cjs/dist/react/SelectedVariant.js

@@ -1,15 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SKU = exports.Price = exports.Details = void 0;
-const services_manager_react_1 = require("@wix/services-manager-react");
-const selected_variant_service_1 = require("../services/selected-variant-service");
+import { useService } from "@wix/services-manager-react";
+import { SelectedVariantServiceDefinition } from "../services/selected-variant-service.js";
 /**
  * Headless component for selected variant details display
  *
  * @component
  */
-const Details = (props) => {
-    const selectedVariantService = (0, services_manager_react_1.useService)(selected_variant_service_1.SelectedVariantServiceDefinition);
+export const Details = (props) => {
+    const selectedVariantService = useService(SelectedVariantServiceDefinition);
     const selectedVariant = selectedVariantService.currentVariant?.get();
     let sku = selectedVariant?.sku || null;
     let weight = selectedVariant?.physicalProperties?.weight?.toString() || null;
@@ -18,14 +15,13 @@ const Details = (props) => {
         weight,
     });
 };
-exports.Details = Details;
 /**
  * Headless component for product price display
  *
  * @component
  */
-const Price = (props) => {
-    const variantService = (0, services_manager_react_1.useService)(selected_variant_service_1.SelectedVariantServiceDefinition);
+export const Price = (props) => {
+    const variantService = useService(SelectedVariantServiceDefinition);
     const price = variantService.currentPrice.get();
     const compareAtPrice = variantService.currentCompareAtPrice.get();
     const currency = variantService.currency.get();
@@ -35,18 +31,16 @@ const Price = (props) => {
         currency,
     });
 };
-exports.Price = Price;
 /**
  * Headless component for product SKU display
  *
  * @component
  */
-const SKU = (props) => {
-    const selectedVariantService = (0, services_manager_react_1.useService)(selected_variant_service_1.SelectedVariantServiceDefinition);
+export const SKU = (props) => {
+    const selectedVariantService = useService(SelectedVariantServiceDefinition);
     const selectedVariant = selectedVariantService.currentVariant?.get();
     const sku = selectedVariant?.sku || null;
     return props.children({
         sku,
     });
 };
-exports.SKU = SKU;

package/cjs/dist/react/SocialSharing.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
-import { type SharingPlatform } from '../services/social-sharing-service';
-export type { SharingPlatform };
+import React from "react";
+import { type SharingPlatform } from "../services/social-sharing-service.js";
 /**
  * Props for Root headless component
  */