@wix/headless-stores 0.0.104 → 0.0.106

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { AsChildChildren } from '@wix/headless-utils/react';
 export interface Option {
     name: string;
+    key?: string;
     choices?: any[];
     hasChoices?: boolean;
     type?: string;

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

@@ -1,6 +1,6 @@
-import type { V3Product } from '@wix/auto_sdk_stores_products-v-3';
-import React from 'react';
+import { productsV3 } from '@wix/stores';
 import { AsChildChildren } from '@wix/headless-utils/react';
+import React from 'react';
 import { AsContent } from './types.js';
 /**
  * Context for sharing variant options state between components
@@ -37,7 +37,7 @@ export type StockStatus = BasicStockStatus | 'can-pre-order';
  */
 export interface ProductRootProps {
     children: React.ReactNode;
-    product: V3Product;
+    product: productsV3.V3Product;
     selectedVariant?: any;
 }
 /**
@@ -268,7 +268,7 @@ export interface RawProps {
     asChild?: boolean;
     /** Custom render function when using asChild */
     children?: AsChildChildren<{
-        product: V3Product;
+        product: productsV3.V3Product;
     }>;
     /** CSS classes to apply to the default element */
     className?: string;
@@ -885,6 +885,53 @@ export declare const Action: {
     /** Pre-order action button */
     readonly PreOrder: React.ForwardRefExoticComponent<ProductActionProps & React.RefAttributes<HTMLButtonElement>>;
 };
+/**
+ * Props for Product Link component
+ */
+export interface ProductLinkProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: React.ReactNode;
+    /** CSS classes to apply to the link */
+    className?: string;
+    /** List or collection the product is part of (e.g., "Category: T-Shirts") */
+    list?: string;
+    /** Position of the product within a list or collection */
+    position?: string;
+    /** Event origin (e.g., "Search Results", "Related Products") */
+    origin?: string;
+}
+/**
+ * Product link component that automatically tracks ClickProduct events.
+ * Wraps a link to the product page and fires analytics when clicked.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Simple usage
+ * <Product.Link className="btn-secondary">
+ *   View Product
+ * </Product.Link>
+ *
+ * // With tracking parameters
+ * <Product.Link
+ *   list="Category: T-Shirts"
+ *   position="3"
+ *   className="btn-secondary"
+ * >
+ *   View Product
+ * </Product.Link>
+ *
+ * // asChild with custom link
+ * <Product.Link asChild list="Search Results" position="5">
+ *   <a href="/custom-url" className="custom-link">
+ *     <Product.Name />
+ *   </a>
+ * </Product.Link>
+ * ```
+ */
+export declare const Link: React.ForwardRefExoticComponent<ProductLinkProps & React.RefAttributes<HTMLAnchorElement>>;
 /**
  * Props for ProductVariantStock component
  */

package/cjs/dist/react/Product.js

@@ -1,17 +1,19 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { InventoryAvailabilityStatus } from '@wix/auto_sdk_stores_products-v-3';
-import React from 'react';
+import { productsV3 } from '@wix/stores';
+import { Quantity as QuantityComponent } from '@wix/headless-components/react';
 import { Commerce } from '@wix/headless-ecom/react';
-import { AsChildSlot } from '@wix/headless-utils/react';
 import { MediaGallery } from '@wix/headless-media/react';
-import { Quantity as QuantityComponent } from '@wix/headless-components/react';
+import { AsChildSlot } from '@wix/headless-utils/react';
+import { useService } from '@wix/services-manager-react';
+import React from 'react';
+import { DataComponentTags } from '../data-component-tags.js';
+import { ProductServiceDefinition, SelectedVariantServiceDefinition, } from '../services/index.js';
 import * as CoreProduct from './core/Product.js';
-import * as CoreProductVariantSelector from './core/ProductVariantSelector.js';
 import * as CoreProductModifiers from './core/ProductModifiers.js';
+import * as CoreProductVariantSelector from './core/ProductVariantSelector.js';
 import * as CoreSelectedVariant from './core/SelectedVariant.js';
 import * as Option from './Option.js';
 import { AsContent } from './types.js';
-import { DataComponentTags } from '../data-component-tags.js';
 const VariantsContext = React.createContext(null);
 /**
  * Hook to access variants context
@@ -61,6 +63,7 @@ var TestIds;
     TestIds["productActionAddToCart"] = "product-action-add-to-cart";
     TestIds["productActionBuyNow"] = "product-action-buy-now";
     TestIds["productActionPreOrder"] = "product-action-can-pre-order";
+    TestIds["productLink"] = "product-link";
     TestIds["productQuantity"] = "product-quantity";
     TestIds["productQuantityDecrement"] = "product-quantity-decrement";
     TestIds["productQuantityInput"] = "product-quantity-input";
@@ -403,15 +406,15 @@ export const Stock = React.forwardRef((props, ref) => {
             let status;
             let label;
             switch (availabilityStatus) {
-                case InventoryAvailabilityStatus.IN_STOCK:
+                case productsV3.InventoryAvailabilityStatus.IN_STOCK:
                     status = 'in-stock';
                     label = finalLabels.inStock;
                     break;
-                case InventoryAvailabilityStatus.PARTIALLY_OUT_OF_STOCK:
+                case productsV3.InventoryAvailabilityStatus.PARTIALLY_OUT_OF_STOCK:
                     status = 'limited-stock';
                     label = finalLabels.limitedStock;
                     break;
-                case InventoryAvailabilityStatus.OUT_OF_STOCK:
+                case productsV3.InventoryAvailabilityStatus.OUT_OF_STOCK:
                 default:
                     status = 'out-of-stock';
                     label = finalLabels.outOfStock;
@@ -879,6 +882,19 @@ export const ProductVariantSelectorReset = React.forwardRef((props, ref) => {
  */
 export const ProductActionAddToCart = React.forwardRef((props, ref) => {
     const { asChild, children, className, label, loadingState } = props;
+    // Get services for tracking
+    const productService = useService(ProductServiceDefinition);
+    const variantService = useService(SelectedVariantServiceDefinition);
+    // Track after successful add to cart
+    const handleSuccess = async () => {
+        const choices = variantService.selectedChoices.get();
+        const quantity = variantService.selectedQuantity.get();
+        const variantString = Object.values(choices).join(' ') || undefined;
+        productService.reportAddToCartTrackEvent({
+            quantity,
+            variant: variantString,
+        });
+    };
     return (_jsx(CoreSelectedVariant.Actions, { children: ({ lineItems, canAddToCart, isLoading, addToCart, isPreOrderEnabled, }) => {
             if (isPreOrderEnabled) {
                 return null;
@@ -886,13 +902,13 @@ export const ProductActionAddToCart = React.forwardRef((props, ref) => {
             const onClick = addToCart;
             const disabled = !canAddToCart || isLoading;
             if (asChild && children) {
-                return (_jsx(Commerce.Actions.AddToCart, { lineItems: lineItems, asChild: asChild, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productActionAddToCart, "data-in-progress": isLoading, customElement: children, customElementProps: {
+                return (_jsx(Commerce.Actions.AddToCart, { lineItems: lineItems, asChild: asChild, onSuccess: handleSuccess, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productActionAddToCart, "data-in-progress": isLoading, customElement: children, customElementProps: {
                             disabled,
                             isLoading,
                             onClick,
                         } }) }));
             }
-            return (_jsx(Commerce.Actions.AddToCart, { ref: ref, label: label, lineItems: lineItems, className: className, disabled: disabled, loadingState: loadingState, "data-testid": TestIds.productActionAddToCart, "data-in-progress": isLoading }));
+            return (_jsx(Commerce.Actions.AddToCart, { ref: ref, label: label, lineItems: lineItems, className: className, disabled: disabled, loadingState: loadingState, onSuccess: handleSuccess, "data-testid": TestIds.productActionAddToCart, "data-in-progress": isLoading }));
         } }));
 });
 /**
@@ -923,6 +939,19 @@ export const ProductActionBuyNow = React.forwardRef((props, ref) => {
  */
 export const ProductActionPreOrder = React.forwardRef((props, ref) => {
     const { asChild, children, className, label, loadingState } = props;
+    // Get services for tracking
+    const productService = useService(ProductServiceDefinition);
+    const variantService = useService(SelectedVariantServiceDefinition);
+    // Track after successful pre-order
+    const handleSuccess = async () => {
+        const choices = variantService.selectedChoices.get();
+        const quantity = variantService.selectedQuantity.get();
+        const variantString = Object.values(choices).join(' ') || undefined;
+        productService.reportAddToCartTrackEvent({
+            quantity,
+            variant: variantString,
+        });
+    };
     return (_jsx(CoreSelectedVariant.Actions, { children: ({ lineItems, isLoading, addToCart, isPreOrderEnabled }) => {
             if (!isPreOrderEnabled) {
                 return null;
@@ -931,13 +960,13 @@ export const ProductActionPreOrder = React.forwardRef((props, ref) => {
             const onClick = addToCart;
             const disabled = !canPreOrder;
             if (asChild && children) {
-                return (_jsx(Commerce.Actions.AddToCart, { lineItems: lineItems, asChild: asChild, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productActionPreOrder, "data-in-progress": isLoading, customElement: children, customElementProps: {
+                return (_jsx(Commerce.Actions.AddToCart, { lineItems: lineItems, asChild: asChild, onSuccess: handleSuccess, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productActionPreOrder, "data-in-progress": isLoading, customElement: children, customElementProps: {
                             disabled,
                             isLoading,
                             onClick,
                         } }) }));
             }
-            return (_jsx(Commerce.Actions.AddToCart, { ref: ref, label: label, lineItems: lineItems, className: className, disabled: disabled, loadingState: loadingState, "data-testid": TestIds.productActionPreOrder, "data-in-progress": isLoading }));
+            return (_jsx(Commerce.Actions.AddToCart, { ref: ref, label: label, lineItems: lineItems, className: className, disabled: disabled, loadingState: loadingState, onSuccess: handleSuccess, "data-testid": TestIds.productActionPreOrder, "data-in-progress": isLoading }));
         } }));
 });
 /**
@@ -952,6 +981,57 @@ export const Action = {
     /** Pre-order action button */
     PreOrder: ProductActionPreOrder,
 };
+/**
+ * Product link component that automatically tracks ClickProduct events.
+ * Wraps a link to the product page and fires analytics when clicked.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Simple usage
+ * <Product.Link className="btn-secondary">
+ *   View Product
+ * </Product.Link>
+ *
+ * // With tracking parameters
+ * <Product.Link
+ *   list="Category: T-Shirts"
+ *   position="3"
+ *   className="btn-secondary"
+ * >
+ *   View Product
+ * </Product.Link>
+ *
+ * // asChild with custom link
+ * <Product.Link asChild list="Search Results" position="5">
+ *   <a href="/custom-url" className="custom-link">
+ *     <Product.Name />
+ *   </a>
+ * </Product.Link>
+ * ```
+ */
+export const Link = React.forwardRef((props, ref) => {
+    const { asChild, children, className, list, position, origin } = props;
+    // Get services for tracking
+    const productService = useService(ProductServiceDefinition);
+    const variantService = useService(SelectedVariantServiceDefinition);
+    return (_jsx(CoreProduct.Slug, { children: ({ slug }) => {
+            const handleClick = () => {
+                const choices = variantService.selectedChoices.get();
+                const variantString = Object.values(choices).join(' ') || undefined;
+                productService.reportClickProductTrackEvent({
+                    variant: variantString,
+                    list,
+                    position,
+                    origin,
+                });
+            };
+            if (asChild && children) {
+                return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productLink, customElement: children, customElementProps: { onClick: handleClick } }));
+            }
+            return (_jsx("a", { ref: ref, href: `/${slug}`, onClick: handleClick, className: className, "data-testid": TestIds.productLink, children: children }));
+        } }));
+});
 /**
  * Helper function to determine stock status and label based on availability and can-pre-order settings
  */
@@ -966,12 +1046,12 @@ function getStockStatusMessage(inStock, isPreOrderEnabled, availabilityStatus, l
     // Handle stock status based on availability
     if (inStock) {
         switch (availabilityStatus) {
-            case InventoryAvailabilityStatus.IN_STOCK:
+            case productsV3.InventoryAvailabilityStatus.IN_STOCK:
                 return {
                     status: 'in-stock',
                     label: labels.inStock,
                 };
-            case InventoryAvailabilityStatus.PARTIALLY_OUT_OF_STOCK:
+            case productsV3.InventoryAvailabilityStatus.PARTIALLY_OUT_OF_STOCK:
                 return {
                     status: 'limited-stock',
                     label: labels.limitedStock,

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

@@ -1,4 +1,3 @@
-import type { V3Product } from '@wix/auto_sdk_stores_products-v-3';
 import { Sort as SortPrimitive, GenericListTotalsRenderProps, GenericListLoadMoreRenderProps, ListVariant, GenericListRepeaterRenderProps } from '@wix/headless-components/react';
 import React from 'react';
 import type { ProductsListServiceConfig } from '../services/products-list-service.js';
@@ -9,7 +8,7 @@ import { AsChildChildren } from '@wix/headless-utils/react';
  */
 export interface ProductListRootProps {
     children: React.ReactNode;
-    products?: V3Product[];
+    products?: productsV3.V3Product[];
     productsListConfig?: ProductsListServiceConfig;
     className?: string;
     variant?: ListVariant;
@@ -95,7 +94,7 @@ export declare const Products: React.ForwardRefExoticComponent<ProductsProps & R
 /**
  * Render props for ProductRepeater asChild pattern
  */
-export type ProductRepeaterRenderProps = GenericListRepeaterRenderProps<V3Product>;
+export type ProductRepeaterRenderProps = GenericListRepeaterRenderProps<productsV3.V3Product>;
 /**
  * Props for ProductList ProductRepeater component
  */

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

@@ -1,5 +1,5 @@
 import { ProductServiceConfig } from '../../services/product-service.js';
-import type { V3Product, ProductMedia } from '@wix/auto_sdk_stores_products-v-3';
+import { productsV3 } from '@wix/stores';
 export interface RootProps {
     children: React.ReactNode;
     productServiceConfig: ProductServiceConfig;
@@ -81,18 +81,18 @@ export interface ProductDescriptionProps {
  */
 export interface ProductDescriptionRenderProps {
     /** Product description using the RICOS (Rich Content Object) format. See https://dev.wix.com/docs/ricos/api-reference/ricos-document */
-    description: NonNullable<V3Product['description']>;
+    description: NonNullable<productsV3.V3Product['description']>;
     /** Product description with plain html */
-    plainDescription: NonNullable<V3Product['plainDescription']>;
+    plainDescription: NonNullable<productsV3.V3Product['plainDescription']>;
 }
 /**
  * Render props for ProductDescription component
  */
 export interface ProductDescriptionRenderProps {
     /** Product description using the RICOS (Rich Content Object) format. See https://dev.wix.com/docs/ricos/api-reference/ricos-document */
-    description: NonNullable<V3Product['description']>;
+    description: NonNullable<productsV3.V3Product['description']>;
     /** Product description with plain html */
-    plainDescription: NonNullable<V3Product['plainDescription']>;
+    plainDescription: NonNullable<productsV3.V3Product['plainDescription']>;
 }
 /**
  * Headless component for product description display
@@ -129,15 +129,15 @@ export interface ProductMediaProps {
     children: (props: ProductMediaRenderProps) => React.ReactNode;
 }
 export interface ProductMediaRenderProps {
-    mediaItems: ProductMedia[];
-    mainMedia?: ProductMedia;
+    mediaItems: productsV3.ProductMedia[];
+    mainMedia?: productsV3.ProductMedia;
 }
 export declare function Media(props: ProductMediaProps): import("react").ReactNode;
 export interface ProductProps {
     children: (props: ProductRenderProps) => React.ReactNode;
 }
 export interface ProductRenderProps {
-    product: V3Product;
+    product: productsV3.V3Product;
 }
 export declare function Content(props: ProductProps): import("react").ReactNode;
 export interface LoadingProps {

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

@@ -1,4 +1,4 @@
-import { type ConnectedModifier, type ConnectedModifierChoice } from '@wix/auto_sdk_stores_products-v-3';
+import { productsV3 } from '@wix/stores';
 export interface RootProps {
     children: React.ReactNode;
 }
@@ -89,7 +89,7 @@ export interface ModifiersProps {
  */
 export interface ModifiersRenderProps {
     /** Array of product modifiers */
-    modifiers: ConnectedModifier[];
+    modifiers: productsV3.ConnectedModifier[];
     /** Whether product has modifiers */
     hasModifiers: boolean;
     /** Currently selected modifier values */
@@ -148,7 +148,7 @@ export declare function Modifiers(props: ModifiersProps): import("react").ReactN
  */
 export interface ModifierProps {
     /** Product modifier data */
-    modifier: ConnectedModifier;
+    modifier: productsV3.ConnectedModifier;
     /** Render prop function that receives modifier data */
     children: (props: ModifierRenderProps) => React.ReactNode;
 }
@@ -156,14 +156,16 @@ export interface ModifierProps {
  * Render props for Modifier component
  */
 export interface ModifierRenderProps {
-    /** Modifier name */
+    /** Modifier name (may be translated) */
     name: string;
+    /** Modifier key (unique identifier) */
+    key: string;
     /** Modifier type */
     type: any;
     /** Whether this modifier is mandatory */
     mandatory: boolean;
     /** Array of choices for this modifier (for choice-based modifiers) */
-    choices: ConnectedModifierChoice[];
+    choices: productsV3.ConnectedModifierChoice[];
     /** Currently selected value for this modifier */
     selectedValue: any;
     /** Whether this modifier has choices */
@@ -227,9 +229,9 @@ export declare function Modifier(props: ModifierProps): import("react").ReactNod
  */
 export interface ChoiceProps {
     /** Product modifier data */
-    modifier: ConnectedModifier;
+    modifier: productsV3.ConnectedModifier;
     /** Choice data */
-    choice: ConnectedModifierChoice;
+    choice: productsV3.ConnectedModifierChoice;
     /** Render prop function that receives choice data */
     children: (props: ChoiceRenderProps) => React.ReactNode;
 }
@@ -288,7 +290,7 @@ export declare function Choice(props: ChoiceProps): import("react").ReactNode;
  */
 export interface FreeTextProps {
     /** Product modifier data */
-    modifier: ConnectedModifier;
+    modifier: productsV3.ConnectedModifier;
     /** Render prop function that receives free text data */
     children: (props: FreeTextRenderProps) => React.ReactNode;
 }
@@ -354,7 +356,7 @@ export declare function FreeText(props: FreeTextProps): import("react").ReactNod
  */
 export interface ToggleFreeTextProps {
     /** Product modifier data */
-    modifier: ConnectedModifier;
+    modifier: productsV3.ConnectedModifier;
     /** Render prop function that receives toggle data */
     children: (props: ToggleFreeTextRenderProps) => React.ReactNode;
 }

package/cjs/dist/react/core/ProductModifiers.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useService, WixServices } from '@wix/services-manager-react';
 import { ProductModifiersServiceDefinition, ProductModifiersService, } from '../../services/product-modifiers-service.js';
-import { ModifierRenderType, } from '@wix/auto_sdk_stores_products-v-3';
+import { productsV3 } from '@wix/stores';
 import { createServicesMap } from '@wix/services-manager';
 /**
  * Root component that provides the ProductModifiers service context to its children.
@@ -208,17 +208,20 @@ export function Modifier(props) {
     const modifiersService = useModifiersService();
     const { modifier } = props;
     const name = modifier.name || '';
+    // @ts-expect-error - This field is currently INTERNAL but will be public in the future
+    const key = modifier.key || name;
     const type = modifier.modifierRenderType;
     const mandatory = modifier.mandatory || false;
     const choices = modifier.choicesSettings?.choices || [];
     const hasChoices = choices.length > 0;
-    const isFreeText = type === ModifierRenderType.FREE_TEXT;
+    const isFreeText = type === productsV3.ModifierRenderType.FREE_TEXT;
     const freeTextSettings = modifier.freeTextSettings;
     const maxChars = freeTextSettings?.maxLength;
     const placeholder = freeTextSettings?.placeholder;
     const selectedValue = modifiersService?.selectedModifiers.get()[name] || null;
     return props.children({
         name,
+        key,
         type,
         mandatory,
         choices,
@@ -265,7 +268,7 @@ export function Choice(props) {
     const modifierName = modifier.name || '';
     const renderType = modifier.modifierRenderType;
     // For TEXT_CHOICES, use choice.key; for SWATCH_CHOICES, use choice.name
-    const choiceValue = renderType === ModifierRenderType.TEXT_CHOICES
+    const choiceValue = renderType === productsV3.ModifierRenderType.TEXT_CHOICES
         ? choice.key || choice.name || ''
         : choice.name || '';
     const value = choice.name || ''; // Display name is always choice.name

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

@@ -1,5 +1,5 @@
 import { SelectedVariantServiceConfig } from '../../services/selected-variant-service.js';
-import { type ConnectedOption, type ConnectedOptionChoice, InventoryAvailabilityStatus } from '@wix/auto_sdk_stores_products-v-3';
+import { productsV3 } from '@wix/stores';
 export interface RootProps {
     children: React.ReactNode;
     selectedVariantServiceConfig?: SelectedVariantServiceConfig;
@@ -55,7 +55,7 @@ export interface OptionsProps {
  */
 export interface OptionsRenderProps {
     /** Array of product options */
-    options: ConnectedOption[];
+    options: productsV3.ConnectedOption[];
     /** Whether product has options */
     hasOptions: boolean;
     /** Currently selected choices */
@@ -99,7 +99,7 @@ export declare function Options(props: OptionsProps): import("react").ReactNode;
  */
 export interface OptionProps {
     /** Product option data */
-    option: ConnectedOption;
+    option: productsV3.ConnectedOption;
     /** Render prop function that receives option data */
     children: (props: OptionRenderProps) => React.ReactNode;
 }
@@ -107,10 +107,12 @@ export interface OptionProps {
  * Render props for Option component
  */
 export interface OptionRenderProps {
-    /** Option name */
+    /** Option name (may be translated) */
     name: string;
+    /** Option key (unique identifier) */
+    key: string;
     /** Array of choices for this option */
-    choices: ConnectedOptionChoice[];
+    choices: productsV3.ConnectedOptionChoice[];
     /** Currently selected value for this option */
     selectedValue: string | null;
     /** Whether this option has choices */
@@ -153,9 +155,9 @@ export declare function Option(props: OptionProps): import("react").ReactNode;
  */
 export interface ChoiceProps {
     /** Product option data */
-    option: ConnectedOption;
+    option: productsV3.ConnectedOption;
     /** Choice data */
-    choice: ConnectedOptionChoice;
+    choice: productsV3.ConnectedOptionChoice;
     /** Render prop function that receives choice data */
     children: (props: ChoiceRenderProps) => React.ReactNode;
 }
@@ -175,8 +177,10 @@ export interface ChoiceRenderProps {
     isPreOrderEnabled: boolean;
     /** Function to select this choice */
     select: () => void;
-    /** Option name */
+    /** Option name (may be translated) */
     optionName: string;
+    /** Option key (unique identifier) */
+    optionKey: string;
     /** Choice value */
     choiceValue: string;
 }
@@ -223,7 +227,7 @@ export interface StockRenderProps {
     /** Whether pre-order is enabled */
     isPreOrderEnabled: boolean;
     /** Raw inventory availability status */
-    availabilityStatus: InventoryAvailabilityStatus | string;
+    availabilityStatus: productsV3.InventoryAvailabilityStatus | string;
     /** Whether stock tracking is enabled */
     trackInventory: boolean;
     /** Current variant id */

package/cjs/dist/react/core/ProductVariantSelector.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useService, WixServices } from '@wix/services-manager-react';
 import { SelectedVariantServiceDefinition, SelectedVariantService, } from '../../services/selected-variant-service.js';
 import { createServicesMap } from '@wix/services-manager';
-import { InventoryAvailabilityStatus, } from '@wix/auto_sdk_stores_products-v-3';
+import { productsV3 } from '@wix/stores';
 /**
  * Root component that provides the ProductVariantSelector service context to its children.
  * This component sets up the necessary services for rendering and managing product variant selection.
@@ -122,10 +122,13 @@ export function Option(props) {
     const selectedChoices = variantService.selectedChoices.get();
     const { option } = props;
     const name = option.name || '';
+    // @ts-expect-error - This field is currently INTERNAL but will be public in the future
+    const key = option.key || name;
     const choices = option.choicesSettings?.choices || [];
     const selectedValue = selectedChoices[name] || null;
     return props.children({
         name,
+        key,
         choices,
         selectedValue,
         hasChoices: choices.length > 0,
@@ -162,19 +165,21 @@ export function Choice(props) {
     const selectedChoices = variantService.selectedChoices.get();
     const { option, choice } = props;
     const optionName = option.name || '';
+    // @ts-expect-error - This field is currently INTERNAL but will be public in the future
+    const optionKey = option.key || optionName;
     const choiceValue = choice.name || '';
-    const isSelected = selectedChoices[optionName] === choiceValue;
+    const isSelected = selectedChoices[optionKey] === choiceValue;
     // Check if this choice is available based on current selections
-    const isVisible = variantService.isChoiceAvailable(optionName, choiceValue);
+    const isVisible = variantService.isChoiceAvailable(optionKey, choiceValue);
     // Check if this choice results in an in-stock variant
-    const isInStock = variantService.isChoiceInStock(optionName, choiceValue);
+    const isInStock = variantService.isChoiceInStock(optionKey, choiceValue);
     // Check if this choice is available for pre-order
-    const isPreOrderEnabled = variantService.isChoicePreOrderEnabled(optionName, choiceValue);
+    const isPreOrderEnabled = variantService.isChoicePreOrderEnabled(optionKey, choiceValue);
     const value = choiceValue;
     const select = () => {
         const newChoices = {
             ...selectedChoices,
-            [optionName]: choiceValue,
+            [optionKey]: choiceValue,
         };
         variantService.setSelectedChoices(newChoices);
     };
@@ -186,6 +191,7 @@ export function Choice(props) {
         isPreOrderEnabled,
         select,
         optionName,
+        optionKey,
         choiceValue,
     });
 }
@@ -230,8 +236,8 @@ export function Stock(props) {
     const selectedQuantity = variantService.selectedQuantity.get();
     // Return raw availability status - UI components will handle display conversion
     const availabilityStatus = inStock
-        ? InventoryAvailabilityStatus.IN_STOCK
-        : InventoryAvailabilityStatus.OUT_OF_STOCK;
+        ? productsV3.InventoryAvailabilityStatus.IN_STOCK
+        : productsV3.InventoryAvailabilityStatus.OUT_OF_STOCK;
     const incrementQuantity = () => {
         variantService.incrementQuantity();
     };

package/cjs/dist/services/buy-now-service.js

@@ -1,7 +1,7 @@
 import { defineService, implementService } from '@wix/services-definitions';
 import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
 import { getCheckoutUrlForProduct } from '../utils/index.js';
-import { getProductBySlug } from '@wix/auto_sdk_stores_products-v-3';
+import { productsV3 } from '@wix/stores';
 /**
  * Service definition for the Buy Now service.
  * This defines the reactive API contract for managing buy now functionality.
@@ -136,7 +136,7 @@ export const BuyNowServiceImplementation = implementService.withConfig()(BuyNowS
  * ```
  */
 export const loadBuyNowServiceInitialData = async (productSlug, variantId) => {
-    const res = await getProductBySlug(productSlug, {
+    const res = await productsV3.getProductBySlug(productSlug, {
         fields: ['CURRENCY'],
     });
     const product = res.product;

package/cjs/dist/services/product-modifiers-service.d.ts

@@ -1,6 +1,6 @@
 import { type ServiceFactoryConfig } from '@wix/services-definitions';
 import { type Signal, type ReadOnlySignal } from '@wix/services-definitions/core-services/signals';
-import * as productsV3 from '@wix/auto_sdk_stores_products-v-3';
+import { productsV3 } from '@wix/stores';
 export interface ModifierValue {
     modifierName: string;
     choiceValue?: string;

package/cjs/dist/services/product-modifiers-service.js

@@ -1,6 +1,6 @@
 import { defineService, implementService, } from '@wix/services-definitions';
 import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
-import * as productsV3 from '@wix/auto_sdk_stores_products-v-3';
+import { productsV3 } from '@wix/stores';
 import { ProductServiceDefinition } from './product-service.js';
 export const ProductModifiersServiceDefinition = defineService('productModifiers');
 export const ProductModifiersService = implementService.withConfig()(ProductModifiersServiceDefinition, ({ getService }) => {