@wix/headless-stores 0.0.39 → 0.0.41

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

@@ -1,5 +1,5 @@
 import { type CategoriesListServiceConfig } from "../services/categories-list-service.js";
-import { categories } from "@wix/categories";
+import { type Category } from "../services/category-service.js";
 export interface RootProps {
     children: React.ReactNode;
     categoriesListConfig: CategoriesListServiceConfig;
@@ -155,7 +155,7 @@ export interface ItemContentProps {
  */
 export interface ItemContentRenderProps {
     /** Category data */
-    category: categories.Category;
+    category: Category;
 }
 /**
  * Component that renders content for each category in the list.

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

@@ -25,11 +25,11 @@ export interface RootProps {
  *       }}
  *     >
  *       <ProductListFilters.MinPrice>
- *         {({ minPrice, setMinPrice }) => (
+ *         {({ minPrice, setSelectedMinPrice }) => (
  *           <input
  *             type="number"
  *             value={minPrice}
- *             onChange={(e) => setMinPrice(Number(e.target.value))}
+ *             onChange={(e) => setSelectedMinPrice(Number(e.target.value))}
  *             placeholder="Min price"
  *           />
  *         )}
@@ -167,21 +167,21 @@ export interface PriceRangeRenderProps {
  * function PriceRangeFilter() {
  *   return (
  *     <ProductListFilters.PriceRange>
- *       {({ minPrice, maxPrice, setMinPrice, setMaxPrice }) => (
+ *       {({ minPrice, maxPrice, setSelectedMinPrice, setSelectedMaxPrice }) => (
  *         <div className="price-range">
  *           <h4>Price Range:</h4>
  *           <div className="price-inputs">
  *             <input
  *               type="number"
  *               value={minPrice}
- *               onChange={(e) => setMinPrice(Number(e.target.value))}
+ *               onChange={(e) => setSelectedMinPrice(Number(e.target.value))}
  *               placeholder="Min"
  *             />
  *             <span>to</span>
  *             <input
  *               type="number"
  *               value={maxPrice}
- *               onChange={(e) => setMaxPrice(Number(e.target.value))}
+ *               onChange={(e) => setSelectedMaxPrice(Number(e.target.value))}
  *               placeholder="Max"
  *             />
  *           </div>

package/cjs/dist/react/ProductListFilters.js

@@ -21,11 +21,11 @@ import { ProductsListFiltersService, ProductsListFiltersServiceDefinition, } fro
  *       }}
  *     >
  *       <ProductListFilters.MinPrice>
- *         {({ minPrice, setMinPrice }) => (
+ *         {({ minPrice, setSelectedMinPrice }) => (
  *           <input
  *             type="number"
  *             value={minPrice}
- *             onChange={(e) => setMinPrice(Number(e.target.value))}
+ *             onChange={(e) => setSelectedMinPrice(Number(e.target.value))}
  *             placeholder="Min price"
  *           />
  *         )}
@@ -126,21 +126,21 @@ export function ResetTrigger(props) {
  * function PriceRangeFilter() {
  *   return (
  *     <ProductListFilters.PriceRange>
- *       {({ minPrice, maxPrice, setMinPrice, setMaxPrice }) => (
+ *       {({ minPrice, maxPrice, setSelectedMinPrice, setSelectedMaxPrice }) => (
  *         <div className="price-range">
  *           <h4>Price Range:</h4>
  *           <div className="price-inputs">
  *             <input
  *               type="number"
  *               value={minPrice}
- *               onChange={(e) => setMinPrice(Number(e.target.value))}
+ *               onChange={(e) => setSelectedMinPrice(Number(e.target.value))}
  *               placeholder="Min"
  *             />
  *             <span>to</span>
  *             <input
  *               type="number"
  *               value={maxPrice}
- *               onChange={(e) => setMaxPrice(Number(e.target.value))}
+ *               onChange={(e) => setSelectedMaxPrice(Number(e.target.value))}
  *               placeholder="Max"
  *             />
  *           </div>

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

@@ -172,7 +172,7 @@ export interface FirstPageTriggerProps {
  */
 export interface FirstPageTriggerRenderProps {
     /** Function to navigate to the first page */
-    goToFirstPage: () => void;
+    navigateToFirstPage: () => void;
     /** Whether there is a previous page (indicating not on first page) */
     hasPrevPage: boolean;
 }
@@ -187,9 +187,9 @@ export interface FirstPageTriggerRenderProps {
  * function FirstPageButton() {
  *   return (
  *     <ProductListPagination.FirstPageTrigger>
- *       {({ goToFirstPage, hasPrevPage }) => (
+ *       {({ navigateToFirstPage, hasPrevPage }) => (
  *         <button
- *           onClick={goToFirstPage}
+ *           onClick={navigateToFirstPage}
  *           disabled={!hasPrevPage}
  *           title="Go to first page"
  *         >

package/cjs/dist/react/ProductListPagination.js

@@ -148,9 +148,9 @@ export function PreviousPageTrigger(props) {
  * function FirstPageButton() {
  *   return (
  *     <ProductListPagination.FirstPageTrigger>
- *       {({ goToFirstPage, hasPrevPage }) => (
+ *       {({ navigateToFirstPage, hasPrevPage }) => (
  *         <button
- *           onClick={goToFirstPage}
+ *           onClick={navigateToFirstPage}
  *           disabled={!hasPrevPage}
  *           title="Go to first page"
  *         >
@@ -164,10 +164,10 @@ export function PreviousPageTrigger(props) {
  */
 export function FirstPageTrigger(props) {
     const service = useService(ProductsListPaginationServiceDefinition);
-    const goToFirstPage = service.goToFirstPage;
+    const navigateToFirstPage = service.navigateToFirstPage;
     const hasPrevPage = service.hasPrevPage.get();
     return typeof props.children === "function"
-        ? props.children({ goToFirstPage, hasPrevPage })
+        ? props.children({ navigateToFirstPage, hasPrevPage })
         : props.children;
 }
 /**

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

@@ -16,10 +16,10 @@ export interface RootProps {
  *   return (
  *     <ProductListSort.Root>
  *       <ProductListSort.Options>
- *         {({ selectedSortOption, setSelectedSortOption, sortOptions }) => (
+ *         {({ selectedSortOption, updateSortOption, sortOptions }) => (
  *           <select
  *             value={selectedSortOption}
- *             onChange={(e) => setSelectedSortOption(e.target.value)}
+ *             onChange={(e) => updateSortOption(e.target.value)}
  *           >
  *             {sortOptions.map(option => (
  *               <option key={option.value} value={option.value}>
@@ -49,7 +49,7 @@ export interface OptionsRenderProps {
     /** Currently selected sort option value */
     selectedSortOption: string;
     /** Function to update the selected sort option */
-    setSelectedSortOption: (sort: string) => void;
+    updateSortOption: (sort: string) => void;
     /** Available sort options */
     sortOptions: SortType[];
 }
@@ -64,13 +64,13 @@ export interface OptionsRenderProps {
  * function ProductSortDropdown() {
  *   return (
  *     <ProductListSort.Options>
- *       {({ selectedSortOption, setSelectedSortOption, sortOptions }) => (
+ *       {({ selectedSortOption, updateSortOption, sortOptions }) => (
  *         <div className="sort-container">
  *           <label htmlFor="sort-select">Sort by:</label>
  *           <select
  *             id="sort-select"
  *             value={selectedSortOption}
- *             onChange={(e) => setSelectedSortOption(e.target.value)}
+ *             onChange={(e) => updateSortOption(e.target.value)}
  *             className="sort-dropdown"
  *           >
  *             {sortOptions.map(option => (

package/cjs/dist/react/ProductListSort.js

@@ -16,10 +16,10 @@ import { ProductsListSortService, ProductsListSortServiceDefinition, } from "../
  *   return (
  *     <ProductListSort.Root>
  *       <ProductListSort.Options>
- *         {({ selectedSortOption, setSelectedSortOption, sortOptions }) => (
+ *         {({ selectedSortOption, updateSortOption, sortOptions }) => (
  *           <select
  *             value={selectedSortOption}
- *             onChange={(e) => setSelectedSortOption(e.target.value)}
+ *             onChange={(e) => updateSortOption(e.target.value)}
  *           >
  *             {sortOptions.map(option => (
  *               <option key={option.value} value={option.value}>
@@ -48,13 +48,13 @@ export function Root(props) {
  * function ProductSortDropdown() {
  *   return (
  *     <ProductListSort.Options>
- *       {({ selectedSortOption, setSelectedSortOption, sortOptions }) => (
+ *       {({ selectedSortOption, updateSortOption, sortOptions }) => (
  *         <div className="sort-container">
  *           <label htmlFor="sort-select">Sort by:</label>
  *           <select
  *             id="sort-select"
  *             value={selectedSortOption}
- *             onChange={(e) => setSelectedSortOption(e.target.value)}
+ *             onChange={(e) => updateSortOption(e.target.value)}
  *             className="sort-dropdown"
  *           >
  *             {sortOptions.map(option => (
@@ -74,11 +74,11 @@ export function Options(props) {
     const service = useService(ProductsListSortServiceDefinition);
     const selectedSortOption = service.selectedSortOption.get();
     const sortOptions = service.sortOptions;
-    const setSelectedSortOption = service.setSelectedSortOption;
+    const updateSortOption = service.setSelectedSortOption;
     return typeof props.children === "function"
         ? props.children({
             selectedSortOption,
-            setSelectedSortOption,
+            updateSortOption,
             sortOptions,
         })
         : props.children;

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

@@ -33,9 +33,9 @@ export interface RootProps {
  *                             <div className="choices">
  *                               {choices.map(choice => (
  *                                 <ProductModifiers.Choice key={choice.id} modifier={modifier} choice={choice}>
- *                                   {({ value, isSelected, onSelect }) => (
+ *                                   {({ value, isSelected, select }) => (
  *                                     <button
- *                                       onClick={onSelect}
+ *                                       onClick={select}
  *                                       className={isSelected ? 'selected' : ''}
  *                                     >
  *                                       {value}
@@ -244,7 +244,7 @@ export interface ChoiceRenderProps {
     /** Whether this choice is currently selected */
     isSelected: boolean;
     /** Function to select this choice */
-    onSelect: () => void;
+    select: () => void;
     /** Modifier name */
     modifierName: string;
     /** Choice value */
@@ -263,9 +263,9 @@ export interface ChoiceRenderProps {
  * function ModifierChoiceButton({ modifier, choice }) {
  *   return (
  *     <ProductModifiers.Choice modifier={modifier} choice={choice}>
- *       {({ value, description, isSelected, onSelect, colorCode }) => (
+ *       {({ value, description, isSelected, select, colorCode }) => (
  *         <button
- *           onClick={onSelect}
+ *           onClick={select}
  *           className={`choice-button ${isSelected ? 'selected' : ''}`}
  *           style={colorCode ? { backgroundColor: colorCode } : {}}
  *         >
@@ -299,7 +299,7 @@ export interface FreeTextRenderProps {
     /** Current text value */
     value: string;
     /** Function to update text value */
-    onChange: (value: string) => void;
+    setText: (value: string) => void;
     /** Whether this modifier is mandatory */
     mandatory: boolean;
     /** Maximum characters allowed */
@@ -324,14 +324,14 @@ export interface FreeTextRenderProps {
  * function FreeTextModifier({ modifier }) {
  *   return (
  *     <ProductModifiers.FreeText modifier={modifier}>
- *       {({ value, onChange, mandatory, maxChars, placeholder, charCount, isOverLimit, modifierName }) => (
+ *       {({ value, setText, mandatory, maxChars, placeholder, charCount, isOverLimit, modifierName }) => (
  *         <div className="free-text-modifier">
  *           <label>
  *             {modifierName} {mandatory && <span className="required">*</span>}
  *           </label>
  *           <textarea
  *             value={value}
- *             onChange={(e) => onChange(e.target.value)}
+ *             setText={(e) => setText(e.target.value)}
  *             placeholder={placeholder}
  *             maxLength={maxChars}
  *             className={isOverLimit ? 'over-limit' : ''}
@@ -365,7 +365,7 @@ export interface ToggleFreeTextRenderProps {
     /** Whether the text input is shown */
     isTextInputShown: boolean;
     /** Function to toggle text input visibility */
-    onToggle: () => void;
+    toggle: () => void;
     /** Whether this modifier is mandatory */
     mandatory: boolean;
     /** Modifier name */
@@ -383,14 +383,14 @@ export interface ToggleFreeTextRenderProps {
  * function ToggleFreeTextModifier({ modifier }) {
  *   return (
  *     <ProductModifiers.ToggleFreeText modifier={modifier}>
- *       {({ isTextInputShown, onToggle, mandatory, modifierName }) => (
+ *       {({ isTextInputShown, toggle, mandatory, modifierName }) => (
  *         <div className="toggle-free-text">
  *           {!mandatory && (
  *             <label>
  *               <input
  *                 type="checkbox"
  *                 checked={isTextInputShown}
- *                 onChange={onToggle}
+ *                 onChange={toggle}
  *               />
  *               Add {modifierName}
  *             </label>

package/cjs/dist/react/ProductModifiers.js

@@ -35,9 +35,9 @@ import { createServicesMap } from "@wix/services-manager";
  *                             <div className="choices">
  *                               {choices.map(choice => (
  *                                 <ProductModifiers.Choice key={choice.id} modifier={modifier} choice={choice}>
- *                                   {({ value, isSelected, onSelect }) => (
+ *                                   {({ value, isSelected, select }) => (
  *                                     <button
- *                                       onClick={onSelect}
+ *                                       onClick={select}
  *                                       className={isSelected ? 'selected' : ''}
  *                                     >
  *                                       {value}
@@ -240,9 +240,9 @@ export function Modifier(props) {
  * function ModifierChoiceButton({ modifier, choice }) {
  *   return (
  *     <ProductModifiers.Choice modifier={modifier} choice={choice}>
- *       {({ value, description, isSelected, onSelect, colorCode }) => (
+ *       {({ value, description, isSelected, select, colorCode }) => (
  *         <button
- *           onClick={onSelect}
+ *           onClick={select}
  *           className={`choice-button ${isSelected ? 'selected' : ''}`}
  *           style={colorCode ? { backgroundColor: colorCode } : {}}
  *         >
@@ -273,14 +273,14 @@ export function Choice(props) {
     const colorCode = choice.colorCode;
     const selectedValue = modifiersService?.getModifierValue(modifierName);
     const isSelected = selectedValue?.choiceValue === choiceValue;
-    const onSelect = () => {
+    const select = () => {
         modifiersService?.setModifierChoice(modifierName, choiceValue);
     };
     return props.children({
         value,
         description,
         isSelected,
-        onSelect,
+        select,
         modifierName,
         choiceValue,
         colorCode,
@@ -297,14 +297,14 @@ export function Choice(props) {
  * function FreeTextModifier({ modifier }) {
  *   return (
  *     <ProductModifiers.FreeText modifier={modifier}>
- *       {({ value, onChange, mandatory, maxChars, placeholder, charCount, isOverLimit, modifierName }) => (
+ *       {({ value, setText, mandatory, maxChars, placeholder, charCount, isOverLimit, modifierName }) => (
  *         <div className="free-text-modifier">
  *           <label>
  *             {modifierName} {mandatory && <span className="required">*</span>}
  *           </label>
  *           <textarea
  *             value={value}
- *             onChange={(e) => onChange(e.target.value)}
+ *             setText={(e) => setText(e.target.value)}
  *             placeholder={placeholder}
  *             maxLength={maxChars}
  *             className={isOverLimit ? 'over-limit' : ''}
@@ -333,14 +333,14 @@ export function FreeText(props) {
     const value = selectedValue?.freeTextValue || "";
     const charCount = value.length;
     const isOverLimit = maxChars ? charCount > maxChars : false;
-    const onChange = (newValue) => {
+    const setText = (newValue) => {
         if (maxChars && newValue.length > maxChars)
             return;
         modifiersService?.setModifierFreeText(modifierName, newValue);
     };
     return props.children({
         value,
-        onChange,
+        setText,
         mandatory,
         maxChars,
         placeholder,
@@ -361,14 +361,14 @@ export function FreeText(props) {
  * function ToggleFreeTextModifier({ modifier }) {
  *   return (
  *     <ProductModifiers.ToggleFreeText modifier={modifier}>
- *       {({ isTextInputShown, onToggle, mandatory, modifierName }) => (
+ *       {({ isTextInputShown, toggle, mandatory, modifierName }) => (
  *         <div className="toggle-free-text">
  *           {!mandatory && (
  *             <label>
  *               <input
  *                 type="checkbox"
  *                 checked={isTextInputShown}
- *                 onChange={onToggle}
+ *                 onChange={toggle}
  *               />
  *               Add {modifierName}
  *             </label>
@@ -397,7 +397,7 @@ export function ToggleFreeText(props) {
     const modifierName = modifier.name || "";
     const mandatory = modifier.mandatory || false;
     const [isTextInputShown, setIsTextInputShown] = useState(mandatory);
-    const onToggle = () => {
+    const toggle = () => {
         const newState = !isTextInputShown;
         setIsTextInputShown(newState);
         if (!newState) {
@@ -406,7 +406,7 @@ export function ToggleFreeText(props) {
     };
     return props.children({
         isTextInputShown,
-        onToggle,
+        toggle,
         mandatory,
         modifierName,
     });

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

@@ -2,7 +2,7 @@ import { SelectedVariantServiceConfig } from "../services/selected-variant-servi
 import { type ConnectedOption, type ConnectedOptionChoice, InventoryAvailabilityStatus } from "@wix/auto_sdk_stores_products-v-3";
 export interface RootProps {
     children: React.ReactNode;
-    selectedVariantServiceConfig: SelectedVariantServiceConfig;
+    selectedVariantServiceConfig?: SelectedVariantServiceConfig;
 }
 /**
  * Root component that provides the ProductVariantSelector service context to its children.
@@ -109,8 +109,6 @@ export interface OptionProps {
 export interface OptionRenderProps {
     /** Option name */
     name: string;
-    /** Option type */
-    type: any;
     /** Array of choices for this option */
     choices: ConnectedOptionChoice[];
     /** Currently selected value for this option */
@@ -167,8 +165,6 @@ export interface ChoiceProps {
 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 visible */
@@ -178,7 +174,7 @@ export interface ChoiceRenderProps {
     /** Whether this choice is available for pre-order */
     isPreOrderEnabled: boolean;
     /** Function to select this choice */
-    onSelect: () => void;
+    select: () => void;
     /** Option name */
     optionName: string;
     /** Choice value */
@@ -195,9 +191,9 @@ export interface ChoiceRenderProps {
  * function ChoiceButton({ option, choice }) {
  *   return (
  *     <ProductVariantSelector.Choice option={option} choice={choice}>
- *       {({ value, isSelected, isVisible, isInStock, onSelect }) => (
+ *       {({ value, isSelected, isVisible, isInStock, select }) => (
  *         <button
- *           onClick={onSelect}
+ *           onClick={select}
  *           disabled={!isVisible || !isInStock}
  *           className={`choice-btn ${isSelected ? 'selected' : ''} ${!isInStock ? 'out-of-stock' : ''}`}
  *         >
@@ -285,7 +281,7 @@ export interface ResetProps {
  */
 export interface ResetRenderProps {
     /** Function to reset all selections */
-    onReset: () => void;
+    reset: () => void;
     /** Whether the reset button should be rendered */
     hasSelections: boolean;
 }
@@ -300,9 +296,9 @@ export interface ResetRenderProps {
  * function ResetButton() {
  *   return (
  *     <ProductVariantSelector.Reset>
- *       {({ onReset, hasSelections }) => (
+ *       {({ reset, hasSelections }) => (
  *         hasSelections && (
- *           <button onClick={onReset} className="reset-button">
+ *           <button onClick={reset} className="reset-button">
  *             Clear All Selections
  *           </button>
  *         )

package/cjs/dist/react/ProductVariantSelector.js

@@ -126,7 +126,6 @@ export function Option(props) {
     const selectedValue = selectedChoices[name] || null;
     return props.children({
         name,
-        type: option.optionRenderType,
         choices,
         selectedValue,
         hasChoices: choices.length > 0,
@@ -143,9 +142,9 @@ export function Option(props) {
  * function ChoiceButton({ option, choice }) {
  *   return (
  *     <ProductVariantSelector.Choice option={option} choice={choice}>
- *       {({ value, isSelected, isVisible, isInStock, onSelect }) => (
+ *       {({ value, isSelected, isVisible, isInStock, select }) => (
  *         <button
- *           onClick={onSelect}
+ *           onClick={select}
  *           disabled={!isVisible || !isInStock}
  *           className={`choice-btn ${isSelected ? 'selected' : ''} ${!isInStock ? 'out-of-stock' : ''}`}
  *         >
@@ -172,7 +171,7 @@ export function Choice(props) {
     // Check if this choice is available for pre-order
     const isPreOrderEnabled = variantService.isChoicePreOrderEnabled(optionName, choiceValue);
     const value = choiceValue;
-    const onSelect = () => {
+    const select = () => {
         const newChoices = {
             ...selectedChoices,
             [optionName]: choiceValue,
@@ -181,12 +180,11 @@ export function Choice(props) {
     };
     return props.children({
         value,
-        description: undefined, // v3 choices don't have separate description field
         isSelected,
         isVisible,
         isInStock,
         isPreOrderEnabled,
-        onSelect,
+        select,
         optionName,
         choiceValue,
     });
@@ -265,9 +263,9 @@ export function Stock(props) {
  * function ResetButton() {
  *   return (
  *     <ProductVariantSelector.Reset>
- *       {({ onReset, hasSelections }) => (
+ *       {({ reset, hasSelections }) => (
  *         hasSelections && (
- *           <button onClick={onReset} className="reset-button">
+ *           <button onClick={reset} className="reset-button">
  *             Clear All Selections
  *           </button>
  *         )
@@ -281,11 +279,11 @@ export function Reset(props) {
     const variantService = useService(SelectedVariantServiceDefinition);
     const selectedChoices = variantService.selectedChoices.get();
     const hasSelections = Object.keys(selectedChoices).length > 0;
-    const onReset = () => {
+    const reset = () => {
         variantService.resetSelections();
     };
     return props.children({
-        onReset,
+        reset,
         hasSelections,
     });
 }

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

@@ -1,7 +1,7 @@
 import { SelectedVariantServiceConfig } from "../services/selected-variant-service.js";
 export interface RootProps {
     children: React.ReactNode;
-    selectedVariantServiceConfig: SelectedVariantServiceConfig;
+    selectedVariantServiceConfig?: SelectedVariantServiceConfig;
 }
 /**
  * Root component that provides the SelectedVariant service context to its children.
@@ -174,9 +174,9 @@ export interface ActionsProps {
  */
 export interface ActionsRenderProps {
     /** Function to add product to cart */
-    onAddToCart: () => Promise<void>;
+    addToCart: () => Promise<void>;
     /** Function to buy now (clear cart, add product, proceed to checkout) */
-    onBuyNow: () => Promise<void>;
+    buyNow: () => Promise<void>;
     /** Whether add to cart is available */
     canAddToCart: boolean;
     /** Whether add to cart is currently loading */
@@ -201,18 +201,18 @@ export interface ActionsRenderProps {
  * function AddToCartButton() {
  *   return (
  *     <SelectedVariant.Actions>
- *       {({ onAddToCart, onBuyNow, canAddToCart, isLoading, inStock, error }) => (
+ *       {({ addToCart, buyNow, canAddToCart, isLoading, inStock, error }) => (
  *         <div>
  *           {error && <div className="error">{error}</div>}
  *           {!inStock && <div>Out of stock</div>}
  *           <button
- *             onClick={onAddToCart}
+ *             onClick={addToCart}
  *             disabled={!canAddToCart || isLoading}
  *           >
  *             {isLoading ? 'Adding...' : 'Add to Cart'}
  *           </button>
  *           <button
- *             onClick={onBuyNow}
+ *             onClick={buyNow}
  *             disabled={!canAddToCart || isLoading}
  *           >
  *             Buy Now

package/cjs/dist/react/SelectedVariant.js

@@ -154,18 +154,18 @@ export function SKU(props) {
  * function AddToCartButton() {
  *   return (
  *     <SelectedVariant.Actions>
- *       {({ onAddToCart, onBuyNow, canAddToCart, isLoading, inStock, error }) => (
+ *       {({ addToCart, buyNow, canAddToCart, isLoading, inStock, error }) => (
  *         <div>
  *           {error && <div className="error">{error}</div>}
  *           {!inStock && <div>Out of stock</div>}
  *           <button
- *             onClick={onAddToCart}
+ *             onClick={addToCart}
  *             disabled={!canAddToCart || isLoading}
  *           >
  *             {isLoading ? 'Adding...' : 'Add to Cart'}
  *           </button>
  *           <button
- *             onClick={onBuyNow}
+ *             onClick={buyNow}
  *             disabled={!canAddToCart || isLoading}
  *           >
  *             Buy Now
@@ -202,7 +202,7 @@ export function Actions(props) {
     const canAddToCart = (inStock || isPreOrderEnabled) &&
         !isLoading &&
         areAllRequiredModifiersFilled;
-    const onAddToCart = async () => {
+    const addToCart = async () => {
         // Get modifiers data if available
         let modifiersData;
         if (modifiersService) {
@@ -213,12 +213,12 @@ export function Actions(props) {
         }
         await variantService.addToCart(quantity, modifiersData);
     };
-    const onBuyNow = async () => {
+    const buyNow = async () => {
         try {
             // Clear the cart first
             await cartService.clearCart();
             // Add the product to cart
-            await onAddToCart();
+            await addToCart();
             // Proceed to checkout
             await cartService.proceedToCheckout();
         }
@@ -228,8 +228,8 @@ export function Actions(props) {
         }
     };
     return props.children({
-        onAddToCart,
-        onBuyNow,
+        addToCart,
+        buyNow,
         canAddToCart,
         isLoading,
         inStock,