@wix/headless-stores 0.0.34 → 0.0.35

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

@@ -1,4 +1,80 @@
 import { type ConnectedModifier, type ConnectedModifierChoice } from "@wix/auto_sdk_stores_products-v-3";
+import type { PropsWithChildren } from "react";
+/**
+ * Root component that provides the ProductModifiers service context to its children.
+ * This component sets up the necessary services for managing product modifier functionality.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductModifiers } from '@wix/stores/components';
+ *
+ * function ProductCustomization() {
+ *   return (
+ *     <ProductModifiers.Root>
+ *       <div>
+ *         <ProductModifiers.Modifiers>
+ *           {({ modifiers, hasModifiers, selectedModifiers, areAllRequiredModifiersFilled }) => (
+ *             <div>
+ *               {hasModifiers && (
+ *                 <div>
+ *                   <h3>Customize your product</h3>
+ *                   {modifiers.map(modifier => (
+ *                     <ProductModifiers.Modifier key={modifier.id} modifier={modifier}>
+ *                       {({ name, mandatory, hasChoices, choices, isFreeText }) => (
+ *                         <div className="modifier-field">
+ *                           <label>
+ *                             {name} {mandatory && <span className="required">*</span>}
+ *                           </label>
+ *                           {hasChoices && (
+ *                             <div className="choices">
+ *                               {choices.map(choice => (
+ *                                 <ProductModifiers.Choice key={choice.id} modifier={modifier} choice={choice}>
+ *                                   {({ value, isSelected, onSelect }) => (
+ *                                     <button
+ *                                       onClick={onSelect}
+ *                                       className={isSelected ? 'selected' : ''}
+ *                                     >
+ *                                       {value}
+ *                                     </button>
+ *                                   )}
+ *                                 </ProductModifiers.Choice>
+ *                               ))}
+ *                             </div>
+ *                           )}
+ *                           {isFreeText && (
+ *                             <ProductModifiers.FreeText modifier={modifier}>
+ *                               {({ value, onChange, placeholder, maxChars }) => (
+ *                                 <input
+ *                                   type="text"
+ *                                   value={value}
+ *                                   onChange={(e) => onChange(e.target.value)}
+ *                                   placeholder={placeholder}
+ *                                   maxLength={maxChars}
+ *                                 />
+ *                               )}
+ *                             </ProductModifiers.FreeText>
+ *                           )}
+ *                         </div>
+ *                       )}
+ *                     </ProductModifiers.Modifier>
+ *                   ))}
+ *                   {!areAllRequiredModifiersFilled && (
+ *                     <div className="warning">Please fill all required options</div>
+ *                   )}
+ *                 </div>
+ *               )}
+ *             </div>
+ *           )}
+ *         </ProductModifiers.Modifiers>
+ *       </div>
+ *     </ProductModifiers.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare function Root(props: PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;
 /**
  * Props for Modifiers headless component
  */

package/cjs/dist/react/ProductModifiers.js

@@ -1,7 +1,86 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
-import { useService } from "@wix/services-manager-react";
-import { ProductModifiersServiceDefinition } from "../services/product-modifiers-service.js";
+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 { createServicesMap } from "@wix/services-manager";
+/**
+ * Root component that provides the ProductModifiers service context to its children.
+ * This component sets up the necessary services for managing product modifier functionality.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductModifiers } from '@wix/stores/components';
+ *
+ * function ProductCustomization() {
+ *   return (
+ *     <ProductModifiers.Root>
+ *       <div>
+ *         <ProductModifiers.Modifiers>
+ *           {({ modifiers, hasModifiers, selectedModifiers, areAllRequiredModifiersFilled }) => (
+ *             <div>
+ *               {hasModifiers && (
+ *                 <div>
+ *                   <h3>Customize your product</h3>
+ *                   {modifiers.map(modifier => (
+ *                     <ProductModifiers.Modifier key={modifier.id} modifier={modifier}>
+ *                       {({ name, mandatory, hasChoices, choices, isFreeText }) => (
+ *                         <div className="modifier-field">
+ *                           <label>
+ *                             {name} {mandatory && <span className="required">*</span>}
+ *                           </label>
+ *                           {hasChoices && (
+ *                             <div className="choices">
+ *                               {choices.map(choice => (
+ *                                 <ProductModifiers.Choice key={choice.id} modifier={modifier} choice={choice}>
+ *                                   {({ value, isSelected, onSelect }) => (
+ *                                     <button
+ *                                       onClick={onSelect}
+ *                                       className={isSelected ? 'selected' : ''}
+ *                                     >
+ *                                       {value}
+ *                                     </button>
+ *                                   )}
+ *                                 </ProductModifiers.Choice>
+ *                               ))}
+ *                             </div>
+ *                           )}
+ *                           {isFreeText && (
+ *                             <ProductModifiers.FreeText modifier={modifier}>
+ *                               {({ value, onChange, placeholder, maxChars }) => (
+ *                                 <input
+ *                                   type="text"
+ *                                   value={value}
+ *                                   onChange={(e) => onChange(e.target.value)}
+ *                                   placeholder={placeholder}
+ *                                   maxLength={maxChars}
+ *                                 />
+ *                               )}
+ *                             </ProductModifiers.FreeText>
+ *                           )}
+ *                         </div>
+ *                       )}
+ *                     </ProductModifiers.Modifier>
+ *                   ))}
+ *                   {!areAllRequiredModifiersFilled && (
+ *                     <div className="warning">Please fill all required options</div>
+ *                   )}
+ *                 </div>
+ *               )}
+ *             </div>
+ *           )}
+ *         </ProductModifiers.Modifiers>
+ *       </div>
+ *     </ProductModifiers.Root>
+ *   );
+ * }
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ProductModifiersServiceDefinition, ProductModifiersService, {}), children: props.children }));
+}
 /**
  * Custom hook to safely get the modifiers service
  */

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

@@ -5,7 +5,6 @@ export * as Category from "./Category.js";
 export * as FilteredCollection from "./FilteredCollection.js";
 export * as ProductVariantSelector from "./ProductVariantSelector.js";
 export * as RelatedProducts from "./RelatedProducts.js";
-export * as SocialSharing from "./SocialSharing.js";
 export * as Collection from "./Collection.js";
 export * as Product from "./Product.js";
 export * as ProductModifiers from "./ProductModifiers.js";

package/cjs/dist/react/index.js

@@ -5,7 +5,6 @@ export * as Category from "./Category.js";
 export * as FilteredCollection from "./FilteredCollection.js";
 export * as ProductVariantSelector from "./ProductVariantSelector.js";
 export * as RelatedProducts from "./RelatedProducts.js";
-export * as SocialSharing from "./SocialSharing.js";
 export * as Collection from "./Collection.js";
 export * as Product from "./Product.js";
 export * as ProductModifiers from "./ProductModifiers.js";

package/cjs/dist/services/index.d.ts

@@ -6,6 +6,5 @@ export { ProductModifiersService, ProductModifiersServiceDefinition, } from "./p
 export { ProductService, ProductServiceDefinition, loadProductServiceConfig, } from "./product-service.js";
 export { RelatedProductsService, RelatedProductsServiceDefinition, loadRelatedProductsServiceConfig, } from "./related-products-service.js";
 export { SelectedVariantService, SelectedVariantServiceDefinition, } from "./selected-variant-service.js";
-export { SocialSharingService, SocialSharingServiceDefinition, } from "./social-sharing-service.js";
-export { ProductListService, ProductsListServiceDefinition, loadProductsListServiceConfig } from "./products-list-service.js";
+export { ProductListService, ProductsListServiceDefinition, loadProductsListServiceConfig, } from "./products-list-service.js";
 export { SortService, SortServiceDefinition, SortBy } from "./sort-service.js";

package/cjs/dist/services/index.js

@@ -16,6 +16,5 @@ export { ProductModifiersService, ProductModifiersServiceDefinition, } from "./p
 export { ProductService, ProductServiceDefinition, loadProductServiceConfig, } from "./product-service.js";
 export { RelatedProductsService, RelatedProductsServiceDefinition, loadRelatedProductsServiceConfig, } from "./related-products-service.js";
 export { SelectedVariantService, SelectedVariantServiceDefinition, } from "./selected-variant-service.js";
-export { SocialSharingService, SocialSharingServiceDefinition, } from "./social-sharing-service.js";
-export { ProductListService, ProductsListServiceDefinition, loadProductsListServiceConfig } from "./products-list-service.js";
+export { ProductListService, ProductsListServiceDefinition, loadProductsListServiceConfig, } from "./products-list-service.js";
 export { SortService, SortServiceDefinition } from "./sort-service.js";

package/dist/react/ProductModifiers.d.ts

@@ -1,4 +1,80 @@
 import { type ConnectedModifier, type ConnectedModifierChoice } from "@wix/auto_sdk_stores_products-v-3";
+import type { PropsWithChildren } from "react";
+/**
+ * Root component that provides the ProductModifiers service context to its children.
+ * This component sets up the necessary services for managing product modifier functionality.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductModifiers } from '@wix/stores/components';
+ *
+ * function ProductCustomization() {
+ *   return (
+ *     <ProductModifiers.Root>
+ *       <div>
+ *         <ProductModifiers.Modifiers>
+ *           {({ modifiers, hasModifiers, selectedModifiers, areAllRequiredModifiersFilled }) => (
+ *             <div>
+ *               {hasModifiers && (
+ *                 <div>
+ *                   <h3>Customize your product</h3>
+ *                   {modifiers.map(modifier => (
+ *                     <ProductModifiers.Modifier key={modifier.id} modifier={modifier}>
+ *                       {({ name, mandatory, hasChoices, choices, isFreeText }) => (
+ *                         <div className="modifier-field">
+ *                           <label>
+ *                             {name} {mandatory && <span className="required">*</span>}
+ *                           </label>
+ *                           {hasChoices && (
+ *                             <div className="choices">
+ *                               {choices.map(choice => (
+ *                                 <ProductModifiers.Choice key={choice.id} modifier={modifier} choice={choice}>
+ *                                   {({ value, isSelected, onSelect }) => (
+ *                                     <button
+ *                                       onClick={onSelect}
+ *                                       className={isSelected ? 'selected' : ''}
+ *                                     >
+ *                                       {value}
+ *                                     </button>
+ *                                   )}
+ *                                 </ProductModifiers.Choice>
+ *                               ))}
+ *                             </div>
+ *                           )}
+ *                           {isFreeText && (
+ *                             <ProductModifiers.FreeText modifier={modifier}>
+ *                               {({ value, onChange, placeholder, maxChars }) => (
+ *                                 <input
+ *                                   type="text"
+ *                                   value={value}
+ *                                   onChange={(e) => onChange(e.target.value)}
+ *                                   placeholder={placeholder}
+ *                                   maxLength={maxChars}
+ *                                 />
+ *                               )}
+ *                             </ProductModifiers.FreeText>
+ *                           )}
+ *                         </div>
+ *                       )}
+ *                     </ProductModifiers.Modifier>
+ *                   ))}
+ *                   {!areAllRequiredModifiersFilled && (
+ *                     <div className="warning">Please fill all required options</div>
+ *                   )}
+ *                 </div>
+ *               )}
+ *             </div>
+ *           )}
+ *         </ProductModifiers.Modifiers>
+ *       </div>
+ *     </ProductModifiers.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare function Root(props: PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;
 /**
  * Props for Modifiers headless component
  */

package/dist/react/ProductModifiers.js

@@ -1,7 +1,86 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
-import { useService } from "@wix/services-manager-react";
-import { ProductModifiersServiceDefinition } from "../services/product-modifiers-service.js";
+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 { createServicesMap } from "@wix/services-manager";
+/**
+ * Root component that provides the ProductModifiers service context to its children.
+ * This component sets up the necessary services for managing product modifier functionality.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductModifiers } from '@wix/stores/components';
+ *
+ * function ProductCustomization() {
+ *   return (
+ *     <ProductModifiers.Root>
+ *       <div>
+ *         <ProductModifiers.Modifiers>
+ *           {({ modifiers, hasModifiers, selectedModifiers, areAllRequiredModifiersFilled }) => (
+ *             <div>
+ *               {hasModifiers && (
+ *                 <div>
+ *                   <h3>Customize your product</h3>
+ *                   {modifiers.map(modifier => (
+ *                     <ProductModifiers.Modifier key={modifier.id} modifier={modifier}>
+ *                       {({ name, mandatory, hasChoices, choices, isFreeText }) => (
+ *                         <div className="modifier-field">
+ *                           <label>
+ *                             {name} {mandatory && <span className="required">*</span>}
+ *                           </label>
+ *                           {hasChoices && (
+ *                             <div className="choices">
+ *                               {choices.map(choice => (
+ *                                 <ProductModifiers.Choice key={choice.id} modifier={modifier} choice={choice}>
+ *                                   {({ value, isSelected, onSelect }) => (
+ *                                     <button
+ *                                       onClick={onSelect}
+ *                                       className={isSelected ? 'selected' : ''}
+ *                                     >
+ *                                       {value}
+ *                                     </button>
+ *                                   )}
+ *                                 </ProductModifiers.Choice>
+ *                               ))}
+ *                             </div>
+ *                           )}
+ *                           {isFreeText && (
+ *                             <ProductModifiers.FreeText modifier={modifier}>
+ *                               {({ value, onChange, placeholder, maxChars }) => (
+ *                                 <input
+ *                                   type="text"
+ *                                   value={value}
+ *                                   onChange={(e) => onChange(e.target.value)}
+ *                                   placeholder={placeholder}
+ *                                   maxLength={maxChars}
+ *                                 />
+ *                               )}
+ *                             </ProductModifiers.FreeText>
+ *                           )}
+ *                         </div>
+ *                       )}
+ *                     </ProductModifiers.Modifier>
+ *                   ))}
+ *                   {!areAllRequiredModifiersFilled && (
+ *                     <div className="warning">Please fill all required options</div>
+ *                   )}
+ *                 </div>
+ *               )}
+ *             </div>
+ *           )}
+ *         </ProductModifiers.Modifiers>
+ *       </div>
+ *     </ProductModifiers.Root>
+ *   );
+ * }
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ProductModifiersServiceDefinition, ProductModifiersService, {}), children: props.children }));
+}
 /**
  * Custom hook to safely get the modifiers service
  */

package/dist/react/index.d.ts

@@ -5,7 +5,6 @@ export * as Category from "./Category.js";
 export * as FilteredCollection from "./FilteredCollection.js";
 export * as ProductVariantSelector from "./ProductVariantSelector.js";
 export * as RelatedProducts from "./RelatedProducts.js";
-export * as SocialSharing from "./SocialSharing.js";
 export * as Collection from "./Collection.js";
 export * as Product from "./Product.js";
 export * as ProductModifiers from "./ProductModifiers.js";

package/dist/react/index.js

@@ -5,7 +5,6 @@ export * as Category from "./Category.js";
 export * as FilteredCollection from "./FilteredCollection.js";
 export * as ProductVariantSelector from "./ProductVariantSelector.js";
 export * as RelatedProducts from "./RelatedProducts.js";
-export * as SocialSharing from "./SocialSharing.js";
 export * as Collection from "./Collection.js";
 export * as Product from "./Product.js";
 export * as ProductModifiers from "./ProductModifiers.js";

package/dist/services/index.d.ts

@@ -6,6 +6,5 @@ export { ProductModifiersService, ProductModifiersServiceDefinition, } from "./p
 export { ProductService, ProductServiceDefinition, loadProductServiceConfig, } from "./product-service.js";
 export { RelatedProductsService, RelatedProductsServiceDefinition, loadRelatedProductsServiceConfig, } from "./related-products-service.js";
 export { SelectedVariantService, SelectedVariantServiceDefinition, } from "./selected-variant-service.js";
-export { SocialSharingService, SocialSharingServiceDefinition, } from "./social-sharing-service.js";
-export { ProductListService, ProductsListServiceDefinition, loadProductsListServiceConfig } from "./products-list-service.js";
+export { ProductListService, ProductsListServiceDefinition, loadProductsListServiceConfig, } from "./products-list-service.js";
 export { SortService, SortServiceDefinition, SortBy } from "./sort-service.js";

package/dist/services/index.js

@@ -16,6 +16,5 @@ export { ProductModifiersService, ProductModifiersServiceDefinition, } from "./p
 export { ProductService, ProductServiceDefinition, loadProductServiceConfig, } from "./product-service.js";
 export { RelatedProductsService, RelatedProductsServiceDefinition, loadRelatedProductsServiceConfig, } from "./related-products-service.js";
 export { SelectedVariantService, SelectedVariantServiceDefinition, } from "./selected-variant-service.js";
-export { SocialSharingService, SocialSharingServiceDefinition, } from "./social-sharing-service.js";
-export { ProductListService, ProductsListServiceDefinition, loadProductsListServiceConfig } from "./products-list-service.js";
+export { ProductListService, ProductsListServiceDefinition, loadProductsListServiceConfig, } from "./products-list-service.js";
 export { SortService, SortServiceDefinition } from "./sort-service.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-stores",
-  "version": "0.0.34",
+  "version": "0.0.35",
   "type": "module",
   "scripts": {
     "prebuild": "cd ../media && yarn build && cd ../ecom && yarn build",

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

@@ -1,194 +0,0 @@
-import React from "react";
-import { type SharingPlatform } from "../services/social-sharing-service.js";
-/**
- * Props for Root headless component
- */
-export interface RootProps {
-    /** Render prop function that receives sharing data */
-    children: (props: RootRenderProps) => React.ReactNode;
-}
-/**
- * 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: (url: string, title: string, description?: string) => void;
-    /** Share to Twitter */
-    shareTwitter: (url: string, text: string, hashtags?: string[]) => void;
-    /** Share to LinkedIn */
-    shareLinkedIn: (url: string, title: string, summary?: string) => void;
-    /** Share to WhatsApp */
-    shareWhatsApp: (url: string, text: string) => void;
-    /** Share via Email */
-    shareEmail: (url: string, subject: string, body: string) => void;
-    /** Copy to clipboard */
-    copyLink: (url: string) => Promise<boolean>;
-    /** Native share API */
-    shareNative: (data: {
-        title: string;
-        text: string;
-        url: string;
-    }) => Promise<boolean>;
-}
-/**
- * Headless component for social sharing root
- *
- * @component
- * @example
- * ```tsx
- * import { SocialSharing } from '@wix/stores/components';
- *
- * function ShareProduct() {
- *   const productUrl = 'https://example.com/product/123';
- *   const productTitle = 'Amazing Product';
- *
- *   return (
- *     <SocialSharing.Root>
- *       {({ platforms, shareCount, shareFacebook, shareTwitter, copyLink, shareNative }) => (
- *         <div>
- *           <p>Share this product ({shareCount} shares)</p>
- *           <div className="share-buttons">
- *             <button onClick={() => shareFacebook(productUrl, productTitle)}>
- *               Share on Facebook
- *             </button>
- *             <button onClick={() => shareTwitter(productUrl, `Check out ${productTitle}!`)}>
- *               Share on Twitter
- *             </button>
- *             <button onClick={() => copyLink(productUrl)}>
- *               Copy Link
- *             </button>
- *             <button onClick={() => shareNative({
- *               title: productTitle,
- *               text: 'Check this out!',
- *               url: productUrl
- *             })}>
- *               Share
- *             </button>
- *           </div>
- *         </div>
- *       )}
- *     </SocialSharing.Root>
- *   );
- * }
- * ```
- */
-export declare const Root: (props: RootProps) => React.ReactNode;
-/**
- * Props for Platform headless component
- */
-export interface PlatformProps {
-    /** Platform data */
-    platform: SharingPlatform;
-    /** Click handler */
-    onClick: () => void;
-    /** Render prop function that receives platform data */
-    children: (props: PlatformRenderProps) => React.ReactNode;
-}
-/**
- * Render props for Platform component
- */
-export interface PlatformRenderProps {
-    /** Platform data */
-    platform: SharingPlatform;
-    /** Platform click handler */
-    onSelect: () => void;
-}
-/**
- * Headless component for individual social platform
- *
- * @component
- * @example
- * ```tsx
- * import { SocialSharing } from '@wix/stores/components';
- *
- * function SocialButton({ platform, onClick }) {
- *   return (
- *     <SocialSharing.Platform platform={platform} onClick={onClick}>
- *       {({ platform, onSelect }) => (
- *         <button
- *           onClick={onSelect}
- *           className={`social-btn social-btn-${platform.name.toLowerCase()}`}
- *         >
- *           <span className="icon">{platform.icon}</span>
- *           Share on {platform.name}
- *         </button>
- *       )}
- *     </SocialSharing.Platform>
- *   );
- * }
- * ```
- */
-export declare const Platform: (props: PlatformProps) => 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: (props: PlatformsRenderProps) => React.ReactNode;
-}
-/**
- * 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
- *
- * @component
- * @example
- * ```tsx
- * import { SocialSharing } from '@wix/stores/components';
- *
- * function SocialShareButtons() {
- *   return (
- *     <SocialSharing.Platforms
- *       url="https://example.com/product/123"
- *       title="Amazing Product"
- *       description="Check out this amazing product!"
- *       hashtags={['product', 'amazing']}
- *     >
- *       {({ platforms, shareFacebook, shareTwitter, shareLinkedIn, copyLink, shareNative }) => (
- *         <div className="social-platforms">
- *           <button onClick={shareFacebook}>Share on Facebook</button>
- *           <button onClick={shareTwitter}>Share on Twitter</button>
- *           <button onClick={shareLinkedIn}>Share on LinkedIn</button>
- *           <button onClick={() => copyLink()}>Copy Link</button>
- *           <button onClick={() => shareNative()}>Share</button>
- *         </div>
- *       )}
- *     </SocialSharing.Platforms>
- *   );
- * }
- * ```
- */
-export declare const Platforms: (props: PlatformsProps) => React.ReactNode;