@wix/headless-stores 0.0.0

package/dist/react/core/SelectedVariant.d.ts

@@ -0,0 +1,230 @@
+import { SelectedVariantServiceConfig } from '../../services/selected-variant-service.js';
+import { type LineItem } from '@wix/headless-ecom/services';
+export interface RootProps {
+    children: React.ReactNode;
+    selectedVariantServiceConfig?: SelectedVariantServiceConfig;
+}
+/**
+ * Root component that provides the SelectedVariant service context to its children.
+ * This component sets up the necessary services for rendering and managing selected variant data.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { SelectedVariant } from '@wix/stores/components';
+ *
+ * function ProductVariantDisplay() {
+ *   return (
+ *     <SelectedVariant.Root selectedVariantServiceConfig={{ fetchInventoryData: true }}>
+ *       <div>
+ *         <SelectedVariant.Price>
+ *           {({ price, compareAtPrice, currency }) => (
+ *             <div className="price-display">
+ *               <span className="current-price">{price}</span>
+ *               {compareAtPrice && (
+ *                 <span className="compare-price">
+ *                   <s>{compareAtPrice}</s>
+ *                 </span>
+ *               )}
+ *               <span className="currency">{currency}</span>
+ *             </div>
+ *           )}
+ *         </SelectedVariant.Price>
+ *       </div>
+ *     </SelectedVariant.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare function Root(props: RootProps): React.ReactNode;
+/**
+ * Props for ProductDetails headless component
+ */
+export interface ProductDetailsProps {
+    /** Render prop function that receives product details data */
+    children: (props: ProductDetailsRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for ProductDetails component
+ */
+export interface ProductDetailsRenderProps {
+    /** Product SKU */
+    sku: string | null;
+    /** Product weight */
+    weight: string | null;
+}
+/**
+ * Headless component for selected variant details display
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { SelectedVariant } from '@wix/stores/components';
+ *
+ * function VariantDetails() {
+ *   return (
+ *     <SelectedVariant.Details>
+ *       {({ sku, weight }) => (
+ *         <div>
+ *           {sku && <div>SKU: {sku}</div>}
+ *           {weight && <div>Weight: {weight}</div>}
+ *         </div>
+ *       )}
+ *     </SelectedVariant.Details>
+ *   );
+ * }
+ * ```
+ */
+export declare function Details(props: ProductDetailsProps): 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;
+    /** Currency code */
+    currency: string;
+}
+/**
+ * Headless component for product price display
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { SelectedVariant } from '@wix/stores/components';
+ *
+ * function ProductPrice() {
+ *   return (
+ *     <SelectedVariant.Price>
+ *       {({ price, compareAtPrice, currency }) => (
+ *         <div className="price-display">
+ *           <span className="current-price">{price}</span>
+ *           {compareAtPrice && (
+ *             <span className="compare-price">
+ *               <s>{compareAtPrice}</s>
+ *             </span>
+ *           )}
+ *           <span className="currency">{currency}</span>
+ *         </div>
+ *       )}
+ *     </SelectedVariant.Price>
+ *   );
+ * }
+ * ```
+ */
+export declare function Price(props: PriceProps): import("react").ReactNode;
+/**
+ * Props for SKU headless component
+ */
+export interface SKUProps {
+    /** Render prop function that receives SKU data */
+    children: (props: SKURenderProps) => React.ReactNode;
+}
+/**
+ * Render props for SKU component
+ */
+export interface SKURenderProps {
+    /** Product SKU */
+    sku: string | null;
+}
+/**
+ * Headless component for product SKU display
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { SelectedVariant } from '@wix/stores/components';
+ *
+ * function ProductSKU() {
+ *   return (
+ *     <SelectedVariant.SKU>
+ *       {({ sku }) => (
+ *         <div>
+ *           {sku && (
+ *             <div className="product-sku">
+ *               <strong>SKU:</strong> {sku}
+ *             </div>
+ *           )}
+ *         </div>
+ *       )}
+ *     </SelectedVariant.SKU>
+ *   );
+ * }
+ * ```
+ */
+export declare function SKU(props: SKUProps): import("react").ReactNode;
+/**
+ * Props for Actions headless component
+ */
+export interface ActionsProps {
+    /** Render prop function that receives actions data */
+    children: (props: ActionsRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for Actions component
+ */
+export interface ActionsRenderProps {
+    /** Function to add product to cart */
+    addToCart: () => Promise<void>;
+    /** Function to buy now (clear cart, add product, proceed to checkout) */
+    buyNow: () => Promise<void>;
+    /** Line items */
+    lineItems: LineItem[];
+    /** Whether add to cart is available */
+    canAddToCart: boolean;
+    /** Whether add to cart is currently loading */
+    isLoading: boolean;
+    /** Whether variant is in stock */
+    inStock: boolean;
+    /** Whether pre-order is enabled */
+    isPreOrderEnabled: boolean;
+    /** Pre-order message */
+    preOrderMessage: string | null;
+    /** Error message if any */
+    error: string | null;
+}
+/**
+ * Headless component for product actions (add to cart, buy now)
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { SelectedVariant } from '@wix/stores/components';
+ *
+ * function AddToCartButton() {
+ *   return (
+ *     <SelectedVariant.Actions>
+ *       {({ addToCart, buyNow, canAddToCart, isLoading, inStock, error }) => (
+ *         <div>
+ *           {error && <div className="error">{error}</div>}
+ *           {!inStock && <div>Out of stock</div>}
+ *           <button
+ *             onClick={addToCart}
+ *             disabled={!canAddToCart || isLoading}
+ *           >
+ *             {isLoading ? 'Adding...' : 'Add to Cart'}
+ *           </button>
+ *           <button
+ *             onClick={buyNow}
+ *             disabled={!canAddToCart || isLoading}
+ *           >
+ *             Buy Now
+ *           </button>
+ *         </div>
+ *       )}
+ *     </SelectedVariant.Actions>
+ *   );
+ * }
+ * ```
+ */
+export declare function Actions(props: ActionsProps): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/react/core/SelectedVariant.js

@@ -0,0 +1,269 @@
+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 { ProductModifiersServiceDefinition } from '../../services/product-modifiers-service.js';
+import { createServicesMap } from '@wix/services-manager';
+import { Commerce } from '@wix/headless-ecom/react';
+import { CheckoutServiceDefinition, CurrentCartServiceDefinition, } from '@wix/headless-ecom/services';
+/**
+ * Root component that provides the SelectedVariant service context to its children.
+ * This component sets up the necessary services for rendering and managing selected variant data.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { SelectedVariant } from '@wix/stores/components';
+ *
+ * function ProductVariantDisplay() {
+ *   return (
+ *     <SelectedVariant.Root selectedVariantServiceConfig={{ fetchInventoryData: true }}>
+ *       <div>
+ *         <SelectedVariant.Price>
+ *           {({ price, compareAtPrice, currency }) => (
+ *             <div className="price-display">
+ *               <span className="current-price">{price}</span>
+ *               {compareAtPrice && (
+ *                 <span className="compare-price">
+ *                   <s>{compareAtPrice}</s>
+ *                 </span>
+ *               )}
+ *               <span className="currency">{currency}</span>
+ *             </div>
+ *           )}
+ *         </SelectedVariant.Price>
+ *       </div>
+ *     </SelectedVariant.Root>
+ *   );
+ * }
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(SelectedVariantServiceDefinition, SelectedVariantService, props.selectedVariantServiceConfig), children: props.children }));
+}
+/**
+ * Headless component for selected variant details display
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { SelectedVariant } from '@wix/stores/components';
+ *
+ * function VariantDetails() {
+ *   return (
+ *     <SelectedVariant.Details>
+ *       {({ sku, weight }) => (
+ *         <div>
+ *           {sku && <div>SKU: {sku}</div>}
+ *           {weight && <div>Weight: {weight}</div>}
+ *         </div>
+ *       )}
+ *     </SelectedVariant.Details>
+ *   );
+ * }
+ * ```
+ */
+export function Details(props) {
+    const selectedVariantService = useService(SelectedVariantServiceDefinition);
+    const selectedVariant = selectedVariantService.currentVariant?.get();
+    let sku = selectedVariant?.sku || null;
+    let weight = selectedVariant?.physicalProperties?.weight?.toString() || null;
+    return props.children({
+        sku,
+        weight,
+    });
+}
+/**
+ * Headless component for product price display
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { SelectedVariant } from '@wix/stores/components';
+ *
+ * function ProductPrice() {
+ *   return (
+ *     <SelectedVariant.Price>
+ *       {({ price, compareAtPrice, currency }) => (
+ *         <div className="price-display">
+ *           <span className="current-price">{price}</span>
+ *           {compareAtPrice && (
+ *             <span className="compare-price">
+ *               <s>{compareAtPrice}</s>
+ *             </span>
+ *           )}
+ *           <span className="currency">{currency}</span>
+ *         </div>
+ *       )}
+ *     </SelectedVariant.Price>
+ *   );
+ * }
+ * ```
+ */
+export function Price(props) {
+    const variantService = useService(SelectedVariantServiceDefinition);
+    const price = variantService.currentPrice.get();
+    const compareAtPrice = variantService.currentCompareAtPrice.get();
+    const currency = variantService.currency.get();
+    return props.children({
+        price,
+        compareAtPrice,
+        currency,
+    });
+}
+/**
+ * Headless component for product SKU display
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { SelectedVariant } from '@wix/stores/components';
+ *
+ * function ProductSKU() {
+ *   return (
+ *     <SelectedVariant.SKU>
+ *       {({ sku }) => (
+ *         <div>
+ *           {sku && (
+ *             <div className="product-sku">
+ *               <strong>SKU:</strong> {sku}
+ *             </div>
+ *           )}
+ *         </div>
+ *       )}
+ *     </SelectedVariant.SKU>
+ *   );
+ * }
+ * ```
+ */
+export function SKU(props) {
+    const selectedVariantService = useService(SelectedVariantServiceDefinition);
+    const selectedVariant = selectedVariantService.currentVariant?.get();
+    const sku = selectedVariant?.sku || null;
+    return props.children({
+        sku,
+    });
+}
+/**
+ * Headless component for product actions (add to cart, buy now)
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { SelectedVariant } from '@wix/stores/components';
+ *
+ * function AddToCartButton() {
+ *   return (
+ *     <SelectedVariant.Actions>
+ *       {({ addToCart, buyNow, canAddToCart, isLoading, inStock, error }) => (
+ *         <div>
+ *           {error && <div className="error">{error}</div>}
+ *           {!inStock && <div>Out of stock</div>}
+ *           <button
+ *             onClick={addToCart}
+ *             disabled={!canAddToCart || isLoading}
+ *           >
+ *             {isLoading ? 'Adding...' : 'Add to Cart'}
+ *           </button>
+ *           <button
+ *             onClick={buyNow}
+ *             disabled={!canAddToCart || isLoading}
+ *           >
+ *             Buy Now
+ *           </button>
+ *         </div>
+ *       )}
+ *     </SelectedVariant.Actions>
+ *   );
+ * }
+ * ```
+ */
+export function Actions(props) {
+    const variantService = useService(SelectedVariantServiceDefinition);
+    const cartService = useService(CurrentCartServiceDefinition);
+    // Try to get checkout service - it may not be available
+    let checkoutService = null;
+    try {
+        checkoutService = useService(CheckoutServiceDefinition);
+    }
+    catch {
+        // Checkout service not available
+        checkoutService = null;
+    }
+    // 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 inStock = variantService.isInStock.get();
+    const isPreOrderEnabled = variantService.isPreOrderEnabled.get() && !inStock;
+    const preOrderMessage = variantService.preOrderMessage.get();
+    const isLoading = variantService.isLoading.get() ||
+        (checkoutService ? checkoutService.isLoading.get() : false);
+    const error = variantService.error.get() ||
+        (checkoutService ? checkoutService.error.get() : null);
+    const quantity = variantService.selectedQuantity.get();
+    // 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 getModifiersData = () => {
+        if (modifiersService) {
+            const selectedModifiers = modifiersService.selectedModifiers.get();
+            if (Object.keys(selectedModifiers).length > 0) {
+                return selectedModifiers;
+            }
+        }
+    };
+    const addToCart = async () => {
+        const modifiersData = getModifiersData();
+        await variantService.addToCart(quantity, modifiersData);
+    };
+    const buyNowFallback = async () => {
+        try {
+            // Clear the cart first
+            await cartService.clearCart();
+            // Add the product to cart
+            await addToCart();
+            // Proceed to checkout
+            await cartService.proceedToCheckout();
+        }
+        catch (error) {
+            console.error('Buy now failed:', error);
+            throw error;
+        }
+    };
+    const getLineItems = () => {
+        const modifiersData = getModifiersData();
+        return variantService.createLineItems(quantity, modifiersData);
+    };
+    const commonProps = {
+        lineItems: getLineItems(),
+        addToCart,
+        canAddToCart,
+        isLoading,
+        inStock,
+        isPreOrderEnabled,
+        preOrderMessage,
+        error,
+    };
+    if (checkoutService) {
+        return (_jsx(Commerce.CheckoutTrigger, { children: ({ createCheckout, isLoading: checkoutLoading, error: checkoutError, }) => props.children({
+                ...commonProps,
+                isLoading: isLoading || checkoutLoading,
+                error: error || checkoutError,
+                buyNow: () => createCheckout(getLineItems()),
+            }) }));
+    }
+    return props.children({
+        ...commonProps,
+        buyNow: buyNowFallback,
+    });
+}

package/dist/react/index.d.ts

@@ -0,0 +1,6 @@
+export * as Product from './Product.js';
+export * as ProductList from './ProductList.js';
+export * as Option from './Option.js';
+export * as Choice from './Choice.js';
+export * as CategoryList from './CategoryList.js';
+export * as Category from './Category.js';

package/dist/react/index.js

@@ -0,0 +1,6 @@
+export * as Product from './Product.js';
+export * as ProductList from './ProductList.js';
+export * as Option from './Option.js';
+export * as Choice from './Choice.js';
+export * as CategoryList from './CategoryList.js';
+export * as Category from './Category.js';

package/dist/react/types.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Enum for content rendering formats
+ */
+export declare enum AsContent {
+    Plain = "plain",
+    Html = "html",
+    Ricos = "ricos"
+}

package/dist/react/types.js

@@ -0,0 +1,9 @@
+/**
+ * Enum for content rendering formats
+ */
+export var AsContent;
+(function (AsContent) {
+    AsContent["Plain"] = "plain";
+    AsContent["Html"] = "html";
+    AsContent["Ricos"] = "ricos";
+})(AsContent || (AsContent = {}));

package/dist/server-actions/custom-checkout-action.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Options for creating a checkout with a custom line item.
+ */
+export interface CustomLineItemCheckoutOptions {
+    /**
+     * The name of the product for the custom line item.
+     * @example "My Custom Product"
+     */
+    productName: string;
+    /**
+     * A description for the price, which will be displayed to the customer.
+     * @example "per month"
+     */
+    priceDescription: string;
+    /**
+     * An array of policies related to this custom item.
+     * Each policy should have a title and content.
+     */
+    policies?: {
+        content: string;
+        title: string;
+    }[];
+    /**
+     * The URL to redirect the user to after the checkout is successfully completed.
+     */
+    postFlowUrl?: string;
+    /**
+     * The quantity of the product.
+     * @default 1
+     */
+    quantity?: number;
+    /**
+     * The price of the product.
+     */
+    price: string;
+    /**
+     * The currency of the product. It will only take effect after configuring the payment provider to accept this currency.
+     */
+    currency: string;
+}
+/**
+ * Creates a factory function to generate checkout URLs for custom line items with a fixed price.
+ * This is useful when you have a single product or service with a known price,
+ * and you want to dynamically create checkout sessions for it.
+ *
+ * @param factoryOpts - The options for the factory, including the price.
+ * @returns A function that takes `CustomLineItemCheckoutOptions` and returns a checkout URL.
+ */
+export declare function getCustomLineItemCheckoutURLFactory(factoryOpts: CustomLineItemCheckoutOptions): () => Promise<string>;

package/dist/server-actions/custom-checkout-action.js

@@ -0,0 +1,64 @@
+import { checkout } from '@wix/ecom';
+import { redirects } from '@wix/redirects';
+import { auth } from '@wix/essentials';
+/**
+ * Creates a factory function to generate checkout URLs for custom line items with a fixed price.
+ * This is useful when you have a single product or service with a known price,
+ * and you want to dynamically create checkout sessions for it.
+ *
+ * @param factoryOpts - The options for the factory, including the price.
+ * @returns A function that takes `CustomLineItemCheckoutOptions` and returns a checkout URL.
+ */
+export function getCustomLineItemCheckoutURLFactory(factoryOpts) {
+    /**
+     * Generates a checkout URL for a custom line item.
+     * @param opts - The options for the custom line item checkout.
+     * @returns A promise that resolves to the full URL for the redirect session to the checkout.
+     * @throws Will throw an error if the checkout creation or redirect session fails.
+     */
+    return async function getCustomLineItemCheckoutURL() {
+        try {
+            const checkoutResult = await auth.elevate(checkout.createCheckout)({
+                customLineItems: [
+                    {
+                        productName: {
+                            original: factoryOpts.productName,
+                        },
+                        price: factoryOpts.price,
+                        quantity: factoryOpts.quantity || 1,
+                        itemType: {
+                            preset: checkout.ItemTypePreset.PHYSICAL,
+                        },
+                        priceDescription: {
+                            original: factoryOpts.priceDescription,
+                        },
+                        policies: factoryOpts.policies || [],
+                    },
+                ],
+                channelType: checkout.ChannelType.WEB,
+                ...(factoryOpts.currency
+                    ? {
+                        checkoutInfo: {
+                            currency: factoryOpts.currency,
+                        },
+                    }
+                    : {}),
+            });
+            if (!checkoutResult._id) {
+                throw new Error(`Failed to create checkout for custom line item ${factoryOpts.productName}`);
+            }
+            const { redirectSession } = await redirects.createRedirectSession({
+                ecomCheckout: { checkoutId: checkoutResult._id },
+                callbacks: {
+                    ...(factoryOpts.postFlowUrl
+                        ? { postFlowUrl: factoryOpts.postFlowUrl }
+                        : {}),
+                },
+            });
+            return redirectSession?.fullUrl;
+        }
+        catch (error) {
+            throw error;
+        }
+    };
+}

package/dist/server-actions/index.d.ts

@@ -0,0 +1 @@
+export * from './custom-checkout-action.js';

package/dist/server-actions/index.js

@@ -0,0 +1 @@
+export * from './custom-checkout-action.js';