@wix/headless-stores 0.0.8 → 0.0.10

package/dist/react/ProductVariantSelector.d.ts

@@ -0,0 +1,169 @@
+import { productsV3 } from "@wix/stores";
+/**
+ * Props for Options headless component
+ */
+export interface OptionsProps {
+    /** Render prop function that receives options data */
+    children: (props: OptionsRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for Options component
+ */
+export interface OptionsRenderProps {
+    /** Array of product options */
+    options: productsV3.ConnectedOption[];
+    /** Whether product has options */
+    hasOptions: boolean;
+    /** Currently selected choices */
+    selectedChoices: Record<string, string>;
+}
+/**
+ * Headless component for all product options
+ */
+export declare const Options: (props: OptionsProps) => import("react").ReactNode;
+/**
+ * Props for Option headless component
+ */
+export interface OptionProps {
+    /** Product option data */
+    option: productsV3.ConnectedOption;
+    /** Render prop function that receives option data */
+    children: (props: OptionRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for Option component
+ */
+export interface OptionRenderProps {
+    /** Option name */
+    name: string;
+    /** Option type */
+    type: any;
+    /** Array of choices for this option */
+    choices: productsV3.ConnectedOptionChoice[];
+    /** Currently selected value for this option */
+    selectedValue: string | null;
+    /** Whether this option has choices */
+    hasChoices: boolean;
+}
+/**
+ * Headless component for choices within a specific product option
+ */
+export declare const Option: (props: OptionProps) => import("react").ReactNode;
+/**
+ * Props for Choice headless component
+ */
+export interface ChoiceProps {
+    /** Product option data */
+    option: productsV3.ConnectedOption;
+    /** Choice data */
+    choice: productsV3.ConnectedOptionChoice;
+    /** Render prop function that receives choice data */
+    children: (props: ChoiceRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for Choice component
+ */
+export interface ChoiceRenderProps {
+    /** Choice value to display */
+    value: string;
+    /** Choice description (for color options) */
+    description: string | undefined;
+    /** Whether this choice is currently selected */
+    isSelected: boolean;
+    /** Whether this choice is available for selection */
+    isAvailable: boolean;
+    /** Function to select this choice */
+    onSelect: () => void;
+    /** Option name */
+    optionName: string;
+    /** Choice value */
+    choiceValue: string;
+}
+/**
+ * Headless component for individual choice selection
+ */
+export declare const Choice: (props: ChoiceProps) => import("react").ReactNode;
+/**
+ * Props for Trigger headless component
+ */
+export interface TriggerProps {
+    /** Quantity to add (optional) */
+    quantity?: number;
+    /** Render prop function that receives trigger data */
+    children: (props: TriggerRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for Trigger component
+ */
+export interface TriggerRenderProps {
+    /** Function to add product to cart */
+    onAddToCart: () => Promise<void>;
+    /** Whether add to cart is available */
+    canAddToCart: boolean;
+    /** Whether add to cart is currently loading */
+    isLoading: boolean;
+    /** Current product price */
+    price: string;
+    /** Whether product is in stock */
+    inStock: boolean;
+    /** Whether pre-order is enabled */
+    isPreOrderEnabled: boolean;
+    /** Error message if any */
+    error: string | null;
+}
+/**
+ * Headless component for add to cart trigger
+ */
+export declare const Trigger: (props: TriggerProps) => import("react").ReactNode;
+/**
+ * Props for Price headless component
+ */
+export interface PriceProps {
+    /** Render prop function that receives price data */
+    children: (props: PriceRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for Price component
+ */
+export interface PriceRenderProps {
+    /** Current price (formatted) */
+    price: string;
+    /** Compare at price (formatted) - null if no compare price */
+    compareAtPrice: string | null;
+    /** Whether price is for a variant */
+    isVariantPrice: boolean;
+    /** Currency code */
+    currency: string;
+}
+/**
+ * Headless component for product price display
+ */
+export declare const Price: (props: PriceProps) => import("react").ReactNode;
+/**
+ * Props for Stock headless component
+ */
+export interface StockProps {
+    /** Render prop function that receives stock data */
+    children: (props: StockRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for Stock component
+ */
+export interface StockRenderProps {
+    /** Whether product is in stock */
+    inStock: boolean;
+    /** Whether pre-order is enabled */
+    isPreOrderEnabled: boolean;
+    /** Stock status message */
+    status: string;
+    /** Stock quantity (if available) */
+    quantity: number | null;
+    /** Whether stock tracking is enabled */
+    trackInventory: boolean;
+    /** Current variant id */
+    currentVariantId: string | null;
+}
+/**
+ * Headless component for product stock status
+ */
+export declare const Stock: (props: StockProps) => import("react").ReactNode;

package/dist/react/ProductVariantSelector.js

@@ -0,0 +1,157 @@
+import { useService } from "@wix/services-manager-react";
+import { SelectedVariantServiceDefinition } from "../services/selected-variant-service";
+import { ProductModifiersServiceDefinition } from "../services/product-modifiers-service";
+/**
+ * Headless component for all product options
+ */
+export const Options = (props) => {
+    const variantService = useService(SelectedVariantServiceDefinition);
+    const selectedChoices = variantService.selectedChoices.get();
+    const options = variantService.productOptions.get();
+    return props.children({
+        options,
+        hasOptions: options.length > 0,
+        selectedChoices,
+    });
+};
+/**
+ * Headless component for choices within a specific product option
+ */
+export const Option = (props) => {
+    const variantService = useService(SelectedVariantServiceDefinition);
+    const selectedChoices = variantService.selectedChoices.get();
+    const { option } = props;
+    const name = option.name || "";
+    const choices = option.choicesSettings?.choices || [];
+    const selectedValue = selectedChoices[name] || null;
+    return props.children({
+        name,
+        type: option.optionRenderType,
+        choices,
+        selectedValue,
+        hasChoices: choices.length > 0,
+    });
+};
+/**
+ * Headless component for individual choice selection
+ */
+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 isSelected = selectedChoices[optionName] === choiceValue;
+    // Check if this choice is available based on current selections
+    const isAvailable = variantService.isChoiceAvailable(optionName, choiceValue);
+    const value = choiceValue;
+    const onSelect = () => {
+        const newChoices = {
+            ...selectedChoices,
+            [optionName]: choiceValue,
+        };
+        variantService.setSelectedChoices(newChoices);
+    };
+    return props.children({
+        value,
+        description: undefined, // v3 choices don't have separate description field
+        isSelected,
+        isAvailable,
+        onSelect,
+        optionName,
+        choiceValue,
+    });
+};
+/**
+ * Headless component for add to cart trigger
+ */
+export const Trigger = (props) => {
+    const variantService = useService(SelectedVariantServiceDefinition);
+    // Try to get modifiers service - it may not exist for all products
+    let modifiersService = null;
+    try {
+        modifiersService = useService(ProductModifiersServiceDefinition);
+    }
+    catch {
+        // Modifiers service not available for this product
+        modifiersService = null;
+    }
+    const price = variantService.currentPrice.get();
+    const inStock = variantService.isInStock.get();
+    const isPreOrderEnabled = variantService.isPreOrderEnabled.get();
+    const isLoading = variantService.isLoading.get();
+    const error = variantService.error.get();
+    const quantity = props.quantity || 1;
+    // Check if all required modifiers are filled
+    const areAllRequiredModifiersFilled = modifiersService
+        ? modifiersService.areAllRequiredModifiersFilled()
+        : true; // If no modifiers service, assume no required modifiers
+    const canAddToCart = (inStock || isPreOrderEnabled) && !isLoading && areAllRequiredModifiersFilled;
+    const onAddToCart = async () => {
+        // Get modifiers data if available
+        let modifiersData;
+        if (modifiersService) {
+            const selectedModifiers = modifiersService.selectedModifiers.get();
+            if (Object.keys(selectedModifiers).length > 0) {
+                modifiersData = selectedModifiers;
+            }
+        }
+        await variantService.addToCart(quantity, modifiersData);
+    };
+    return props.children({
+        onAddToCart,
+        canAddToCart,
+        isLoading,
+        price,
+        inStock,
+        isPreOrderEnabled,
+        error,
+    });
+};
+/**
+ * Headless component for product price display
+ */
+export const Price = (props) => {
+    const variantService = useService(SelectedVariantServiceDefinition);
+    const price = variantService.currentPrice.get();
+    const compareAtPrice = variantService.currentCompareAtPrice.get();
+    const currentVariant = variantService.currentVariant.get();
+    const currency = variantService.currency.get();
+    const isVariantPrice = !!currentVariant;
+    return props.children({
+        price,
+        compareAtPrice,
+        isVariantPrice,
+        currency,
+    });
+};
+/**
+ * Headless component for product stock status
+ */
+export const Stock = (props) => {
+    const variantService = useService(SelectedVariantServiceDefinition);
+    const inStock = variantService.isInStock.get();
+    const isPreOrderEnabled = variantService.isPreOrderEnabled.get();
+    const currentVariantId = variantService.selectedVariantId.get();
+    const trackInventory = false; // V3 API has different inventory structure
+    const quantity = null; // Not directly available in v3 API
+    // Determine status based on stock and pre-order availability
+    let status;
+    if (inStock) {
+        status = "In Stock";
+    }
+    else if (isPreOrderEnabled) {
+        status = "Available for Pre-Order";
+    }
+    else {
+        status = "Out of Stock";
+    }
+    return props.children({
+        inStock,
+        isPreOrderEnabled,
+        currentVariantId,
+        status,
+        quantity,
+        trackInventory,
+    });
+};

package/dist/react/RelatedProducts.d.ts

@@ -0,0 +1,60 @@
+import React from "react";
+import { productsV3 } from "@wix/stores";
+/**
+ * Props for List headless component
+ */
+export interface ListProps {
+    /** Render prop function that receives list data */
+    children: (props: ListRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for List component
+ */
+export interface ListRenderProps {
+    /** Array of related products */
+    products: productsV3.V3Product[];
+    /** Whether products are loading */
+    isLoading: boolean;
+    /** Error message if any */
+    error: string | null;
+    /** Whether there are products available */
+    hasProducts: boolean;
+    /** Function to refresh products */
+    refresh: () => Promise<void>;
+}
+/**
+ * Headless component for displaying related products list
+ */
+export declare const List: (props: ListProps) => React.ReactNode;
+/**
+ * Props for Item headless component
+ */
+export interface ItemProps {
+    /** Product data */
+    product: productsV3.V3Product;
+    /** Render prop function that receives item data */
+    children: (props: ItemRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for Item component
+ */
+export interface ItemRenderProps {
+    /** Product title */
+    title: string;
+    /** Product image URL */
+    image: string | null;
+    /** Formatted price */
+    price: string;
+    /** Whether product is available */
+    available: boolean;
+    /** Product page URL */
+    href: string;
+    /** Product description */
+    description: string;
+    /** Function to add product to cart quickly */
+    onQuickAdd: () => void;
+}
+/**
+ * Headless component for individual related product item
+ */
+export declare const Item: (props: ItemProps) => React.ReactNode;

package/dist/react/RelatedProducts.js

@@ -0,0 +1,60 @@
+import React from "react";
+import { useService } from "@wix/services-manager-react";
+import { RelatedProductsServiceDefinition } from "../services/related-products-service";
+/**
+ * Headless component for displaying related products list
+ */
+export const List = (props) => {
+    const service = useService(RelatedProductsServiceDefinition);
+    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 unsubscribes = [
+            service.relatedProducts.subscribe(setProducts),
+            service.isLoading.subscribe(setIsLoading),
+            service.error.subscribe(setError),
+            service.hasRelatedProducts.subscribe(setHasProducts),
+        ];
+        return () => unsubscribes.forEach((fn) => fn());
+    }, [service]);
+    return props.children({
+        products,
+        isLoading,
+        error,
+        hasProducts,
+        refresh: service.refreshRelatedProducts,
+    });
+};
+/**
+ * Headless component for individual related product item
+ */
+export const Item = (props) => {
+    const { product } = props;
+    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 availabilityStatus = product.inventory?.availabilityStatus;
+    const available = availabilityStatus === "IN_STOCK" ||
+        availabilityStatus === "PARTIALLY_OUT_OF_STOCK";
+    const href = `/store/example-2/${product.slug}`;
+    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);
+    };
+    return props.children({
+        title,
+        image,
+        price,
+        available,
+        href,
+        description,
+        onQuickAdd: handleQuickAdd,
+    });
+};

package/dist/react/SocialSharing.d.ts

@@ -0,0 +1,119 @@
+import React from "react";
+import { SharingPlatform } from "../services/social-sharing-service";
+export type { SharingPlatform };
+export type RootChildren = (props: RootRenderProps) => React.ReactNode;
+/**
+ * Props for Root headless component
+ */
+export interface RootProps {
+    /** Render prop function that receives sharing data */
+    children: RootChildren;
+}
+export type ShareFacebook = (url: string, title: string, description?: string) => void;
+export type ShareTwitter = (url: string, text: string, hashtags?: string[]) => void;
+export type ShareLinkedIn = (url: string, title: string, summary?: string) => void;
+export type ShareWhatsApp = (url: string, text: string) => void;
+export type ShareEmail = (url: string, subject: string, body: string) => void;
+export type CopyLink = (url: string) => Promise<boolean>;
+export type ShareNative = (data: {
+    title: string;
+    text: string;
+    url: string;
+}) => Promise<boolean>;
+/**
+ * Render props for Root component
+ */
+export interface RootRenderProps {
+    /** Available sharing platforms */
+    platforms: SharingPlatform[];
+    /** Total share count */
+    shareCount: number;
+    /** Last shared platform */
+    lastShared: string | null;
+    /** Share to Facebook */
+    shareFacebook: ShareFacebook;
+    /** Share to Twitter */
+    shareTwitter: ShareTwitter;
+    /** Share to LinkedIn */
+    shareLinkedIn: ShareLinkedIn;
+    /** Share to WhatsApp */
+    shareWhatsApp: ShareWhatsApp;
+    /** Share via Email */
+    shareEmail: ShareEmail;
+    /** Copy to clipboard */
+    copyLink: CopyLink;
+    /** Native share API */
+    shareNative: ShareNative;
+}
+/**
+ * Headless component for social sharing root
+ */
+export declare const Root: (props: RootProps) => React.ReactNode;
+export type OnClick = () => void;
+export type PlatformChildren = (props: PlatformRenderProps) => React.ReactNode;
+/**
+ * Props for Platform headless component
+ */
+export interface PlatformProps {
+    /** Platform data */
+    platform: SharingPlatform;
+    /** Click handler */
+    onClick: OnClick;
+    /** Render prop function that receives platform data */
+    children: PlatformChildren;
+}
+export type OnSelect = () => void;
+/**
+ * Render props for Platform component
+ */
+export interface PlatformRenderProps {
+    /** Platform data */
+    platform: SharingPlatform;
+    /** Platform click handler */
+    onSelect: OnSelect;
+}
+/**
+ * Headless component for individual social platform
+ */
+export declare const Platform: (props: PlatformProps) => React.ReactNode;
+export type PlatformsChildren = (props: PlatformsRenderProps) => React.ReactNode;
+/**
+ * Props for Platforms headless component
+ */
+export interface PlatformsProps {
+    /** URL to share */
+    url: string;
+    /** Share title */
+    title: string;
+    /** Share description */
+    description?: string;
+    /** Hashtags for sharing */
+    hashtags?: string[];
+    /** Render prop function that receives platforms data */
+    children: PlatformsChildren;
+}
+/**
+ * Render props for Platforms component
+ */
+export interface PlatformsRenderProps {
+    /** Available platforms */
+    platforms: SharingPlatform[];
+    /** Share to Facebook */
+    shareFacebook: () => void;
+    /** Share to Twitter */
+    shareTwitter: () => void;
+    /** Share to LinkedIn */
+    shareLinkedIn: () => void;
+    /** Share to WhatsApp */
+    shareWhatsApp: () => void;
+    /** Share via Email */
+    shareEmail: () => void;
+    /** Copy link to clipboard */
+    copyLink: () => Promise<boolean>;
+    /** Share natively */
+    shareNative: () => Promise<boolean>;
+}
+/**
+ * Headless component for social sharing platforms with logic
+ */
+export declare const Platforms: (props: PlatformsProps) => React.ReactNode;

package/dist/react/SocialSharing.js

@@ -0,0 +1,71 @@
+import React from "react";
+import { useService } from "@wix/services-manager-react";
+import { SocialSharingServiceDefinition, } from "../services/social-sharing-service";
+/**
+ * Headless component for social sharing root
+ */
+export const Root = (props) => {
+    const service = useService(SocialSharingServiceDefinition);
+    const [platforms, setPlatforms] = React.useState([]);
+    const [shareCount, setShareCount] = React.useState(0);
+    const [lastShared, setLastShared] = React.useState(null);
+    React.useEffect(() => {
+        const unsubscribes = [
+            service.availablePlatforms.subscribe(setPlatforms),
+            service.shareCount.subscribe(setShareCount),
+            service.lastSharedPlatform.subscribe(setLastShared),
+        ];
+        return () => unsubscribes.forEach((fn) => fn());
+    }, [service]);
+    return props.children({
+        platforms,
+        shareCount,
+        lastShared,
+        shareFacebook: service.shareToFacebook,
+        shareTwitter: service.shareToTwitter,
+        shareLinkedIn: service.shareToLinkedIn,
+        shareWhatsApp: service.shareToWhatsApp,
+        shareEmail: service.shareToEmail,
+        copyLink: service.copyToClipboard,
+        shareNative: service.shareNative,
+    });
+};
+/**
+ * Headless component for individual social platform
+ */
+export const Platform = (props) => {
+    const { platform, onClick } = props;
+    return props.children({
+        platform,
+        onSelect: onClick,
+    });
+};
+/**
+ * Headless component for social sharing platforms with logic
+ */
+export const Platforms = (props) => {
+    const { url, title, description = "", hashtags = [] } = props;
+    const service = useService(SocialSharingServiceDefinition);
+    const [platforms, setPlatforms] = React.useState([]);
+    React.useEffect(() => {
+        const unsubscribe = service.availablePlatforms.subscribe(setPlatforms);
+        return unsubscribe;
+    }, [service]);
+    const shareFacebook = () => service.shareToFacebook(url, title, description);
+    const shareTwitter = () => service.shareToTwitter(url, title, hashtags);
+    const shareLinkedIn = () => service.shareToLinkedIn(url, title, description);
+    const shareWhatsApp = () => service.shareToWhatsApp(url, `${title} - ${description}`);
+    const shareEmail = () => service.shareToEmail(url, title, description);
+    const copyLink = () => service.copyToClipboard(url);
+    const shareNative = () => service.shareNative({ title, text: description, url });
+    return props.children({
+        platforms,
+        shareFacebook,
+        shareTwitter,
+        shareLinkedIn,
+        shareWhatsApp,
+        shareEmail,
+        copyLink,
+        shareNative,
+    });
+};

package/dist/react/Sort.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { type SortBy } from "../services/sort-service";
+interface SortContextValue {
+    currentSort: SortBy;
+    setSortBy: (sortBy: SortBy) => void;
+}
+export declare function useSortContext(): SortContextValue;
+export interface ProviderProps {
+    children: React.ReactNode;
+}
+export declare function Provider({ children }: ProviderProps): import("react/jsx-runtime").JSX.Element;
+export type SortControllerChildren = (props: SortContextValue) => React.ReactNode;
+export interface ControllerProps {
+    children: SortControllerChildren;
+}
+export declare function Controller({ children }: ControllerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react/Sort.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from "react";
+import { SortServiceDefinition } from "../services/sort-service";
+import { useService } from "@wix/services-manager-react";
+const SortContext = createContext(null);
+export function useSortContext() {
+    const context = useContext(SortContext);
+    if (!context) {
+        throw new Error("useSortContext must be used within a Sort.SortProvider");
+    }
+    return context;
+}
+export function Provider({ children }) {
+    const sortService = useService(SortServiceDefinition);
+    const [currentSort, setCurrentSort] = useState("");
+    useEffect(() => {
+        const unsubscribe = sortService.currentSort.subscribe((sort) => {
+            setCurrentSort(sort);
+        });
+        // Initialize with current value
+        setCurrentSort(sortService.currentSort.get());
+        return unsubscribe;
+    }, [sortService]);
+    const setSortBy = (sortBy) => {
+        sortService.setSortBy(sortBy);
+    };
+    const contextValue = {
+        currentSort,
+        setSortBy,
+    };
+    return (_jsx(SortContext.Provider, { value: contextValue, children: children }));
+}
+export function Controller({ children }) {
+    const context = useSortContext();
+    return _jsx(_Fragment, { children: children(context) });
+}