@wix/headless-stores 0.0.51 → 0.0.53

package/dist/services/selected-variant-service.d.ts

@@ -1,5 +1,5 @@
-import { type Signal, type ReadOnlySignal } from "@wix/services-definitions/core-services/signals";
-import * as productsV3 from "@wix/auto_sdk_stores_products-v-3";
+import { type Signal, type ReadOnlySignal } from '@wix/services-definitions/core-services/signals';
+import * as productsV3 from '@wix/auto_sdk_stores_products-v-3';
 export interface SelectedVariantServiceAPI {
     selectedQuantity: Signal<number>;
     selectedChoices: Signal<Record<string, string>>;
@@ -28,6 +28,10 @@ export interface SelectedVariantServiceAPI {
     finalPrice: () => number;
     isLowStock: () => boolean;
     setSelectedChoices: (choices: Record<string, string>) => void;
+    createLineItems: (quantity?: number, modifiers?: Record<string, any>) => Array<{
+        catalogReference: any;
+        quantity: number;
+    }>;
     addToCart: (quantity?: number, modifiers?: Record<string, any>) => Promise<void>;
     setOption: (group: string, value: string) => void;
     setSelectedQuantity: (quantity: number) => void;

package/dist/services/selected-variant-service.js

@@ -1,11 +1,13 @@
-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 * as inventoryItemsV3 from "@wix/auto_sdk_stores_inventory-items-v-3";
-import { CurrentCartServiceDefinition } from "@wix/headless-ecom/services";
-import { ProductServiceDefinition } from "./product-service.js";
-export const SelectedVariantServiceDefinition = defineService("selectedVariant");
+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 * as inventoryItemsV3 from '@wix/auto_sdk_stores_inventory-items-v-3';
+import { CurrentCartServiceDefinition } from '@wix/headless-ecom/services';
+import { MediaGalleryServiceDefinition } from '@wix/headless-media/services';
+import { ProductServiceDefinition } from './product-service.js';
+export const SelectedVariantServiceDefinition = defineService('selectedVariant');
 export const SelectedVariantService = implementService.withConfig()(SelectedVariantServiceDefinition, ({ getService, config: { fetchInventoryData = true } }) => {
+    const mediaService = getService(MediaGalleryServiceDefinition);
     const signalsService = getService(SignalsServiceDefinition);
     const cartService = getService(CurrentCartServiceDefinition);
     const productService = getService(ProductServiceDefinition);
@@ -15,15 +17,15 @@ export const SelectedVariantService = implementService.withConfig()(SelectedVari
     signalsService.effect(() => {
         const product = productService.product.get();
         const selectedChoicesValue = selectedChoices.get() || {};
-        // let mediaToDisplay: productsV3.ProductMedia[] = [];
+        let mediaToDisplay = [];
         const productItemsImages = product?.media?.itemsInfo?.items
             ?.map((item) => item)
             .filter(Boolean) ?? [];
         if (productItemsImages.length) {
-            // mediaToDisplay = productItemsImages;
+            mediaToDisplay = productItemsImages;
         }
         else if (product?.media?.main) {
-            // mediaToDisplay = [product.media.main];
+            mediaToDisplay = [product.media.main];
         }
         // Get images based on selected choices if available
         let selectedChoicesImages = [];
@@ -36,9 +38,9 @@ export const SelectedVariantService = implementService.withConfig()(SelectedVari
             }
         });
         if (selectedChoicesImages?.length) {
-            // mediaToDisplay = selectedChoicesImages;
+            mediaToDisplay = selectedChoicesImages;
         }
-        // mediaService.setMediaToDisplay(mediaToDisplay ?? []);
+        mediaService.setMediaToDisplay(mediaToDisplay ?? []);
     });
     const parsePrice = (amount) => {
         if (!amount)
@@ -75,7 +77,7 @@ export const SelectedVariantService = implementService.withConfig()(SelectedVari
             // Use the correct Wix inventoryItemsV3.queryInventoryItems() API
             const queryResult = await inventoryItemsV3
                 .queryInventoryItems()
-                .eq("variantId", variantId)
+                .eq('variantId', variantId)
                 .find();
             const inventoryItem = queryResult.items?.[0];
             const isTrackingQuantity = inventoryItem?.trackQuantity ?? false;
@@ -96,7 +98,7 @@ export const SelectedVariantService = implementService.withConfig()(SelectedVari
             }
         }
         catch (error) {
-            console.error("Failed to fetch inventory quantity:", error);
+            console.error('Failed to fetch inventory quantity:', error);
             // Fallback on error
             quantityAvailable.set(null);
             trackQuantity.set(false);
@@ -134,13 +136,13 @@ export const SelectedVariantService = implementService.withConfig()(SelectedVari
     const quantityAvailable = signalsService.signal(null);
     const trackQuantity = signalsService.signal(false);
     const selectedQuantity = signalsService.signal(1);
-    const productId = signalsService.signal("");
+    const productId = signalsService.signal('');
     const ribbonLabel = signalsService.signal(null);
     const v3Product = signalsService.signal(initialProduct);
     const init = (currentProduct) => {
         if (currentProduct) {
             v3Product.set(currentProduct);
-            productId.set(currentProduct._id || "");
+            productId.set(currentProduct._id || '');
             ribbonLabel.set(currentProduct.ribbon?.name || null);
             const actualPrice = currentProduct.actualPriceRange?.minValue?.amount;
             const compareAtPrice = currentProduct.compareAtPriceRange?.minValue?.amount;
@@ -152,7 +154,7 @@ export const SelectedVariantService = implementService.withConfig()(SelectedVari
                 const optionsMap = {};
                 currentProduct.options.forEach((option) => {
                     if (option.name && option.choicesSettings?.choices) {
-                        optionsMap[option.name] = option.choicesSettings.choices.map((choice) => choice.name || "");
+                        optionsMap[option.name] = option.choicesSettings.choices.map((choice) => choice.name || '');
                     }
                 });
                 options.set(optionsMap);
@@ -165,7 +167,7 @@ export const SelectedVariantService = implementService.withConfig()(SelectedVari
             }
             else {
                 const singleVariant = {
-                    _id: "default",
+                    _id: 'default',
                     visible: true,
                     choices: [],
                     price: {
@@ -178,7 +180,7 @@ export const SelectedVariantService = implementService.withConfig()(SelectedVari
                             currentProduct.inventory?.availabilityStatus ===
                                 productsV3.InventoryAvailabilityStatus
                                     .PARTIALLY_OUT_OF_STOCK,
-                        preorderEnabled: currentProduct.inventory?.preorderStatus === "ENABLED",
+                        preorderEnabled: currentProduct.inventory?.preorderStatus === 'ENABLED',
                     },
                 };
                 variants.set([singleVariant]);
@@ -227,7 +229,7 @@ export const SelectedVariantService = implementService.withConfig()(SelectedVari
         else if (prod?.actualPriceRange?.minValue?.amount) {
             rawAmount = prod.actualPriceRange.minValue.amount;
         }
-        return rawAmount ? `$${rawAmount}` : "";
+        return rawAmount ? `$${rawAmount}` : '';
     });
     const currentCompareAtPrice = signalsService.computed(() => {
         const variant = currentVariant.get();
@@ -269,7 +271,7 @@ export const SelectedVariantService = implementService.withConfig()(SelectedVari
     });
     const currency = signalsService.computed(() => {
         const prod = v3Product.get();
-        return prod?.currency || "USD";
+        return prod?.currency || 'USD';
     });
     const selectedVariant = () => {
         const variantId = selectedVariantId.get();
@@ -292,79 +294,81 @@ export const SelectedVariantService = implementService.withConfig()(SelectedVari
         const matchingVariant = findVariantByChoices(variants.get(), choices);
         updateDataFromVariant(matchingVariant);
     };
-    const addToCart = async (quantity = 1, modifiers) => {
-        try {
-            isLoading.set(true);
-            error.set(null);
-            const prod = v3Product.get();
-            const variant = currentVariant.get();
-            if (!prod?._id) {
-                throw new Error("Product not found");
-            }
-            // Build catalog reference with modifiers if provided
-            const catalogReference = {
-                catalogItemId: prod._id,
-                appId: "215238eb-22a5-4c36-9e7b-e7c08025e04e",
-                options: variant?._id && variant._id !== "default"
-                    ? {
-                        variantId: variant._id,
-                        preOrderRequested: !!variant?.inventoryStatus?.preorderEnabled,
-                    }
-                    : undefined,
-            };
-            // Transform and add modifiers to catalog reference if they exist
-            if (modifiers && Object.keys(modifiers).length > 0) {
-                const options = {};
-                const customTextFields = {};
-                // Get product modifiers to determine types and keys
-                const productModifiers = prod.modifiers || [];
-                Object.values(modifiers).forEach((modifierValue) => {
-                    const modifierName = modifierValue.modifierName;
-                    const productModifier = productModifiers.find((m) => m.name === modifierName);
-                    if (!productModifier)
-                        return;
-                    const renderType = productModifier.modifierRenderType;
-                    if (renderType === productsV3.ModifierRenderType.TEXT_CHOICES ||
-                        renderType === productsV3.ModifierRenderType.SWATCH_CHOICES) {
-                        // For choice modifiers, use the modifier key and choice value
-                        const modifierKey = productModifier.key || modifierName;
-                        if (modifierValue.choiceValue) {
-                            options[modifierKey] = modifierValue.choiceValue;
-                        }
-                    }
-                    else if (renderType === productsV3.ModifierRenderType.FREE_TEXT) {
-                        // For free text modifiers, use the freeTextSettings key
-                        const freeTextKey = productModifier.freeTextSettings?.key ||
-                            modifierName;
-                        if (modifierValue.freeTextValue) {
-                            customTextFields[freeTextKey] = modifierValue.freeTextValue;
-                        }
+    const createLineItems = (quantity = 1, modifiers) => {
+        const prod = v3Product.get();
+        const variant = currentVariant.get();
+        if (!prod?._id) {
+            throw new Error('Product not found');
+        }
+        // Build catalog reference with modifiers if provided
+        const catalogReference = {
+            catalogItemId: prod._id,
+            appId: '215238eb-22a5-4c36-9e7b-e7c08025e04e',
+            options: variant?._id && variant._id !== 'default'
+                ? {
+                    variantId: variant._id,
+                    preOrderRequested: !!variant?.inventoryStatus?.preorderEnabled,
+                }
+                : undefined,
+        };
+        // Transform and add modifiers to catalog reference if they exist
+        if (modifiers && Object.keys(modifiers).length > 0) {
+            const options = {};
+            const customTextFields = {};
+            // Get product modifiers to determine types and keys
+            const productModifiers = prod.modifiers || [];
+            Object.values(modifiers).forEach((modifierValue) => {
+                const modifierName = modifierValue.modifierName;
+                const productModifier = productModifiers.find((m) => m.name === modifierName);
+                if (!productModifier)
+                    return;
+                const renderType = productModifier.modifierRenderType;
+                if (renderType === productsV3.ModifierRenderType.TEXT_CHOICES ||
+                    renderType === productsV3.ModifierRenderType.SWATCH_CHOICES) {
+                    // For choice modifiers, use the modifier key and choice value
+                    const modifierKey = productModifier.key || modifierName;
+                    if (modifierValue.choiceValue) {
+                        options[modifierKey] = modifierValue.choiceValue;
                     }
-                });
-                // Add formatted modifiers to catalog reference
-                if (Object.keys(options).length > 0) {
-                    catalogReference.options = {
-                        ...catalogReference.options,
-                        options,
-                    };
                 }
-                if (Object.keys(customTextFields).length > 0) {
-                    catalogReference.options = {
-                        ...catalogReference.options,
-                        customTextFields,
-                    };
+                else if (renderType === productsV3.ModifierRenderType.FREE_TEXT) {
+                    // For free text modifiers, use the freeTextSettings key
+                    const freeTextKey = productModifier.freeTextSettings?.key || modifierName;
+                    if (modifierValue.freeTextValue) {
+                        customTextFields[freeTextKey] = modifierValue.freeTextValue;
+                    }
                 }
+            });
+            // Add formatted modifiers to catalog reference
+            if (Object.keys(options).length > 0) {
+                catalogReference.options = {
+                    ...catalogReference.options,
+                    options,
+                };
+            }
+            if (Object.keys(customTextFields).length > 0) {
+                catalogReference.options = {
+                    ...catalogReference.options,
+                    customTextFields,
+                };
             }
-            const lineItems = [
-                {
-                    catalogReference,
-                    quantity,
-                },
-            ];
+        }
+        return [
+            {
+                catalogReference,
+                quantity,
+            },
+        ];
+    };
+    const addToCart = async (quantity = 1, modifiers) => {
+        try {
+            isLoading.set(true);
+            error.set(null);
+            const lineItems = createLineItems(quantity, modifiers);
             await cartService.addToCart(lineItems);
         }
         catch (err) {
-            error.set(err instanceof Error ? err.message : "Failed to add to cart");
+            error.set(err instanceof Error ? err.message : 'Failed to add to cart');
         }
         finally {
             isLoading.set(false);
@@ -496,6 +500,7 @@ export const SelectedVariantService = implementService.withConfig()(SelectedVari
         productId,
         ribbonLabel,
         setSelectedChoices,
+        createLineItems,
         addToCart,
         setOption,
         selectVariantById,

package/dist/utils/index.d.ts

@@ -1 +1,2 @@
 export declare function getCheckoutUrlForProduct(productId: string, variantId?: string): Promise<string>;
+export * from './renderAsChild.js';

package/dist/utils/index.js

@@ -1,6 +1,6 @@
-import { checkout } from "@wix/ecom";
-import { redirects } from "@wix/redirects";
-const CATLOG_APP_ID_V3 = "215238eb-22a5-4c36-9e7b-e7c08025e04e";
+import { checkout } from '@wix/ecom';
+import { redirects } from '@wix/redirects';
+const CATLOG_APP_ID_V3 = '215238eb-22a5-4c36-9e7b-e7c08025e04e';
 export async function getCheckoutUrlForProduct(productId, variantId) {
     const checkoutResult = await checkout.createCheckout({
         lineItems: [
@@ -18,7 +18,7 @@ export async function getCheckoutUrlForProduct(productId, variantId) {
         channelType: checkout.ChannelType.WEB,
     });
     if (!checkoutResult._id) {
-        throw new Error("Failed to create checkout");
+        throw new Error('Failed to create checkout');
     }
     const { redirectSession } = await redirects.createRedirectSession({
         ecomCheckout: { checkoutId: checkoutResult._id },
@@ -28,3 +28,4 @@ export async function getCheckoutUrlForProduct(productId, variantId) {
     });
     return redirectSession?.fullUrl;
 }
+export * from './renderAsChild.js';

package/dist/utils/renderAsChild.d.ts

@@ -0,0 +1,96 @@
+import React from 'react';
+/**
+ * Function signature for render function pattern
+ */
+export type AsChildRenderFunction<TProps = any> = (props: TProps, ref: React.Ref<HTMLElement>) => React.ReactNode;
+/**
+ * Object with render method pattern
+ */
+export type AsChildRenderObject<TProps = any> = {
+    render: AsChildRenderFunction<TProps>;
+};
+/**
+ * Union type for all supported asChild patterns
+ */
+export type AsChildChildren<TProps = any> = React.ReactElement | AsChildRenderFunction<TProps> | AsChildRenderObject<TProps>;
+/**
+ * Generic interface for components that support asChild pattern.
+ * This interface can be extended by specific components to add their own props.
+ *
+ * @template TData - The shape of the data object passed to asChild render functions
+ * @template TProps - Additional props specific to the component
+ *
+ * @example
+ * ```tsx
+ * // For a component that provides name data
+ * interface NameProps extends AsChildProps<{ name: string }> {
+ *   // className is already included from AsChildProps
+ * }
+ *
+ * // For a component that provides description data
+ * interface DescriptionProps extends AsChildProps<{ description: string }> {
+ *   as?: "plain" | "html";
+ *   // className is already included from AsChildProps
+ * }
+ * ```
+ */
+export interface AsChildProps<TData extends Record<string, any> = Record<string, any>, TProps = {}> {
+    /** When true, renders as a child component instead of default element */
+    asChild?: boolean;
+    /** Custom render function or React element when using asChild */
+    children?: AsChildChildren<TData & TProps>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+}
+/**
+ * Parameters for the renderAsChild utility function
+ */
+export interface RenderAsChildParams<TProps = any> {
+    /** The children to render (React element, function, or render object) */
+    children: AsChildChildren<TProps> | undefined;
+    /** Props to pass to render functions */
+    props: TProps;
+    /** Ref to forward to the rendered element */
+    ref: React.Ref<HTMLElement>;
+    /** Content to pass as children to React elements */
+    content?: React.ReactNode;
+    /** Additional attributes to merge into cloned React elements */
+    attributes?: Record<string, any>;
+}
+/**
+ * Utility function to handle asChild prop with different rendering patterns.
+ *
+ * Supports three rendering patterns:
+ * 1. **React Elements**: Clones the element and forwards the ref and attributes
+ *    ```tsx
+ *    <Component asChild><div>Content</div></Component>
+ *    ```
+ *
+ * 2. **Render Functions**: Calls the function with props and ref
+ *    ```tsx
+ *    <Component asChild>
+ *      {(props, ref) => <div ref={ref}>{props.content}</div>}
+ *    </Component>
+ *    ```
+ *
+ * 3. **Render Objects**: Calls the render method with props and ref
+ *    ```tsx
+ *    <Component asChild>
+ *      {{ render: (props, ref) => <div ref={ref}>{props.content}</div> }}
+ *    </Component>
+ *    ```
+ *
+ * @param params - Configuration object with children, props, ref, content, and attributes
+ * @returns Rendered React node or null if no valid children provided
+ *
+ * @example
+ * ```tsx
+ * const result = renderAsChild({
+ *   children: (props, ref) => <h1 ref={ref}>{props.title}</h1>,
+ *   props: { title: "Hello World" },
+ *   ref: myRef,
+ *   attributes: { "data-testid": "my-component" },
+ * });
+ * ```
+ */
+export declare function renderAsChild<TProps = any>({ children, props, ref, content, attributes, }: RenderAsChildParams<TProps>): React.ReactNode | null;

package/dist/utils/renderAsChild.js

@@ -0,0 +1,66 @@
+import React from 'react';
+/**
+ * Utility function to handle asChild prop with different rendering patterns.
+ *
+ * Supports three rendering patterns:
+ * 1. **React Elements**: Clones the element and forwards the ref and attributes
+ *    ```tsx
+ *    <Component asChild><div>Content</div></Component>
+ *    ```
+ *
+ * 2. **Render Functions**: Calls the function with props and ref
+ *    ```tsx
+ *    <Component asChild>
+ *      {(props, ref) => <div ref={ref}>{props.content}</div>}
+ *    </Component>
+ *    ```
+ *
+ * 3. **Render Objects**: Calls the render method with props and ref
+ *    ```tsx
+ *    <Component asChild>
+ *      {{ render: (props, ref) => <div ref={ref}>{props.content}</div> }}
+ *    </Component>
+ *    ```
+ *
+ * @param params - Configuration object with children, props, ref, content, and attributes
+ * @returns Rendered React node or null if no valid children provided
+ *
+ * @example
+ * ```tsx
+ * const result = renderAsChild({
+ *   children: (props, ref) => <h1 ref={ref}>{props.title}</h1>,
+ *   props: { title: "Hello World" },
+ *   ref: myRef,
+ *   attributes: { "data-testid": "my-component" },
+ * });
+ * ```
+ */
+export function renderAsChild({ children, props, ref, content, attributes, }) {
+    // Early return if no children provided
+    if (!children)
+        return null;
+    // Handle React element pattern
+    if (React.isValidElement(children)) {
+        return React.cloneElement(children, {
+            ref,
+            children: content,
+            ...attributes,
+        });
+    }
+    // Handle render function pattern
+    if (typeof children === 'function') {
+        return children({
+            ...props,
+            ...attributes,
+        }, ref);
+    }
+    // Handle render object pattern
+    if (children && typeof children === 'object' && 'render' in children) {
+        return children.render({
+            ...props,
+            ...attributes,
+        }, ref);
+    }
+    // Fallback for unknown patterns
+    return null;
+}

package/dist/utils/renderChildren.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+/**
+ * Parameters for the renderAsChild utility function
+ */
+export interface RenderChildrenParams<THTMLElement = HTMLElement, TProps = any> {
+    /** The children to render (React element, function, or render object) */
+    children: React.ReactNode | React.ForwardRefRenderFunction<THTMLElement, TProps> | undefined;
+    /** Props to pass to render functions */
+    props: TProps;
+    /** Ref to forward to the rendered element */
+    ref: React.Ref<THTMLElement>;
+}
+/**
+ * Utility function to handle children rendering.
+ *
+ * Supports three rendering patterns:
+ * 1. **React Elements**: Returns the element
+ *    ```tsx
+ *    <Component><div>Content</div></Component>
+ *    ```
+ *
+ * 2. **Render Functions**: Calls the function with props and ref
+ *    ```tsx
+ *    <Component>
+ *      {(props, ref) => <div ref={ref}>{props.content}</div>}
+ *    </Component>
+ *    ```
+ *
+ * @param params - Configuration object with children, props, and ref
+ * @returns Rendered React node or null if no valid children provided
+ *
+ * @example
+ * ```tsx
+ * const result = renderChildren({
+ *   children: (props, ref) => <h1 ref={ref}>{props.title}</h1>,
+ *   props: { title: "Hello World" },
+ *   ref: myRef,
+ * });
+ * ```
+ */
+export declare function renderChildren<THTMLElement = HTMLElement, TProps = any>({ children, props, ref, }: RenderChildrenParams<THTMLElement, TProps>): React.ReactNode | null;

package/dist/utils/renderChildren.js

@@ -0,0 +1,44 @@
+import React from 'react';
+/**
+ * Utility function to handle children rendering.
+ *
+ * Supports three rendering patterns:
+ * 1. **React Elements**: Returns the element
+ *    ```tsx
+ *    <Component><div>Content</div></Component>
+ *    ```
+ *
+ * 2. **Render Functions**: Calls the function with props and ref
+ *    ```tsx
+ *    <Component>
+ *      {(props, ref) => <div ref={ref}>{props.content}</div>}
+ *    </Component>
+ *    ```
+ *
+ * @param params - Configuration object with children, props, and ref
+ * @returns Rendered React node or null if no valid children provided
+ *
+ * @example
+ * ```tsx
+ * const result = renderChildren({
+ *   children: (props, ref) => <h1 ref={ref}>{props.title}</h1>,
+ *   props: { title: "Hello World" },
+ *   ref: myRef,
+ * });
+ * ```
+ */
+export function renderChildren({ children, props, ref, }) {
+    // Early return if no children provided
+    if (!children)
+        return null;
+    // Handle React element pattern
+    if (React.isValidElement(children)) {
+        return children;
+    }
+    // Handle render function pattern
+    if (typeof children === 'function') {
+        return children(props, ref);
+    }
+    // Fallback for unknown patterns
+    return null;
+}

package/dist/utils/url-params.js

@@ -66,7 +66,7 @@ export class URLParamsUtils {
      * ```
      */
     static updateURL(params) {
-        if (typeof window === "undefined")
+        if (typeof window === 'undefined')
             return;
         const url = new URL(window.location.href);
         const urlParams = new URLSearchParams();
@@ -83,7 +83,7 @@ export class URLParamsUtils {
         const newURL = urlParams.toString()
             ? `${url.pathname}?${urlParams.toString()}`
             : url.pathname;
-        window.history.replaceState({}, "", newURL);
+        window.history.replaceState({}, '', newURL);
     }
     /**
      * Gets the current URL parameters parsed into a convenient format.
@@ -107,7 +107,7 @@ export class URLParamsUtils {
      * ```
      */
     static getURLParams() {
-        if (typeof window === "undefined")
+        if (typeof window === 'undefined')
             return {};
         return this.parseSearchParams(new URLSearchParams(window.location.search));
     }

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@wix/headless-stores",
-  "version": "0.0.51",
+  "version": "0.0.53",
   "type": "module",
   "scripts": {
     "prebuild": "cd ../media && yarn build && cd ../ecom && yarn build",
     "build": "npm run build:esm && npm run build:cjs",
     "build:esm": "tsc -p tsconfig.json",
     "build:cjs": "tsc -p tsconfig.cjs.json",
-    "test": "vitest"
+    "test": "vitest",
+    "lint:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md}\"",
+    "lint:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,md}\""
   },
   "files": [
     "dist",
@@ -46,10 +48,12 @@
     "@types/node": "^20.9.0",
     "@vitest/ui": "^3.1.4",
     "jsdom": "^26.1.0",
+    "prettier": "^3.4.2",
     "typescript": "^5.8.3",
     "vitest": "^3.1.4"
   },
   "dependencies": {
+    "@radix-ui/react-slot": "^1.2.3",
     "@wix/auto_sdk_bookings_availability-calendar": "^1.0.155",
     "@wix/auto_sdk_categories_categories": "^1.0.62",
     "@wix/auto_sdk_stores_customizations-v-3": "^1.0.26",
@@ -58,7 +62,7 @@
     "@wix/auto_sdk_stores_read-only-variants-v-3": "^1.0.23",
     "@wix/ecom": "^1.0.1278",
     "@wix/essentials": "^0.1.24",
-    "@wix/headless-ecom": "^0.0.11",
+    "@wix/headless-ecom": "^0.0.14",
     "@wix/headless-media": "^0.0.8",
     "@wix/redirects": "^1.0.83",
     "@wix/services-definitions": "^0.1.4",