@wix/headless-stores 0.0.52 → 0.0.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (149) hide show
  1. package/cjs/dist/astro/actions/custom-checkout.d.ts +1 -1
  2. package/cjs/dist/astro/actions/custom-checkout.js +2 -2
  3. package/cjs/dist/astro/actions/index.d.ts +1 -1
  4. package/cjs/dist/astro/actions/index.js +1 -1
  5. package/cjs/dist/enums/index.d.ts +2 -2
  6. package/cjs/dist/enums/index.js +2 -2
  7. package/cjs/dist/react/Category.d.ts +168 -67
  8. package/cjs/dist/react/Category.js +166 -50
  9. package/cjs/dist/react/CategoryList.d.ts +56 -138
  10. package/cjs/dist/react/CategoryList.js +44 -129
  11. package/cjs/dist/react/Choice.d.ts +193 -0
  12. package/cjs/dist/react/Choice.js +259 -0
  13. package/cjs/dist/react/Option.d.ts +224 -0
  14. package/cjs/dist/react/Option.js +388 -0
  15. package/cjs/dist/react/Product.d.ts +339 -96
  16. package/cjs/dist/react/Product.js +507 -94
  17. package/cjs/dist/react/{BuyNow.js → core/BuyNow.js} +2 -2
  18. package/cjs/dist/react/core/Category.d.ts +98 -0
  19. package/cjs/dist/react/core/Category.js +81 -0
  20. package/cjs/dist/react/core/CategoryList.d.ts +185 -0
  21. package/cjs/dist/react/core/CategoryList.js +174 -0
  22. package/{dist/react → cjs/dist/react/core}/PayNow.js +2 -2
  23. package/cjs/dist/react/core/Product.d.ts +148 -0
  24. package/cjs/dist/react/core/Product.js +126 -0
  25. package/cjs/dist/react/{ProductList.d.ts → core/ProductList.d.ts} +3 -3
  26. package/cjs/dist/react/{ProductList.js → core/ProductList.js} +10 -10
  27. package/{dist/react → cjs/dist/react/core}/ProductListFilters.d.ts +3 -3
  28. package/{dist/react → cjs/dist/react/core}/ProductListFilters.js +7 -7
  29. package/cjs/dist/react/{ProductListPagination.js → core/ProductListPagination.js} +8 -8
  30. package/{dist/react → cjs/dist/react/core}/ProductListSort.d.ts +1 -1
  31. package/cjs/dist/react/{ProductListSort.js → core/ProductListSort.js} +3 -3
  32. package/{dist/react → cjs/dist/react/core}/ProductModifiers.d.ts +1 -1
  33. package/{dist/react → cjs/dist/react/core}/ProductModifiers.js +13 -13
  34. package/{dist/react → cjs/dist/react/core}/ProductVariantSelector.d.ts +2 -2
  35. package/{dist/react → cjs/dist/react/core}/ProductVariantSelector.js +7 -10
  36. package/{dist/react → cjs/dist/react/core}/SelectedVariant.d.ts +2 -2
  37. package/{dist/react → cjs/dist/react/core}/SelectedVariant.js +43 -15
  38. package/cjs/dist/react/index.d.ts +15 -10
  39. package/cjs/dist/react/index.js +15 -10
  40. package/cjs/dist/react/types.d.ts +8 -0
  41. package/cjs/dist/react/types.js +9 -0
  42. package/cjs/dist/server-actions/custom-checkout-action.js +14 -10
  43. package/cjs/dist/server-actions/index.d.ts +1 -1
  44. package/cjs/dist/server-actions/index.js +1 -1
  45. package/cjs/dist/services/buy-now-service.d.ts +1 -1
  46. package/cjs/dist/services/buy-now-service.js +6 -6
  47. package/cjs/dist/services/categories-list-service.d.ts +4 -4
  48. package/cjs/dist/services/categories-list-service.js +10 -10
  49. package/cjs/dist/services/category-service.d.ts +18 -22
  50. package/cjs/dist/services/category-service.js +12 -10
  51. package/cjs/dist/services/index.d.ts +7 -7
  52. package/cjs/dist/services/index.js +7 -7
  53. package/cjs/dist/services/pay-now-service.d.ts +1 -1
  54. package/cjs/dist/services/pay-now-service.js +4 -4
  55. package/cjs/dist/services/product-modifiers-service.d.ts +3 -3
  56. package/cjs/dist/services/product-modifiers-service.js +7 -7
  57. package/cjs/dist/services/product-service.d.ts +4 -4
  58. package/cjs/dist/services/product-service.js +18 -18
  59. package/cjs/dist/services/products-list-search-service.d.ts +5 -5
  60. package/cjs/dist/services/products-list-search-service.js +117 -117
  61. package/cjs/dist/services/products-list-service.d.ts +4 -4
  62. package/cjs/dist/services/products-list-service.js +12 -12
  63. package/cjs/dist/services/selected-variant-service.d.ts +6 -2
  64. package/cjs/dist/services/selected-variant-service.js +86 -83
  65. package/cjs/dist/utils/index.d.ts +1 -0
  66. package/cjs/dist/utils/index.js +5 -4
  67. package/cjs/dist/utils/renderAsChild.d.ts +96 -0
  68. package/cjs/dist/utils/renderAsChild.js +66 -0
  69. package/cjs/dist/utils/renderChildren.d.ts +41 -0
  70. package/cjs/dist/utils/renderChildren.js +44 -0
  71. package/cjs/dist/utils/url-params.js +3 -3
  72. package/dist/astro/actions/custom-checkout.d.ts +1 -1
  73. package/dist/astro/actions/custom-checkout.js +2 -2
  74. package/dist/astro/actions/index.d.ts +1 -1
  75. package/dist/astro/actions/index.js +1 -1
  76. package/dist/enums/index.d.ts +2 -2
  77. package/dist/enums/index.js +2 -2
  78. package/dist/react/Category.d.ts +168 -67
  79. package/dist/react/Category.js +166 -50
  80. package/dist/react/CategoryList.d.ts +56 -138
  81. package/dist/react/CategoryList.js +44 -129
  82. package/dist/react/Choice.d.ts +193 -0
  83. package/dist/react/Choice.js +259 -0
  84. package/dist/react/Option.d.ts +224 -0
  85. package/dist/react/Option.js +388 -0
  86. package/dist/react/Product.d.ts +339 -96
  87. package/dist/react/Product.js +507 -94
  88. package/dist/react/{BuyNow.js → core/BuyNow.js} +2 -2
  89. package/dist/react/core/Category.d.ts +98 -0
  90. package/dist/react/core/Category.js +81 -0
  91. package/dist/react/core/CategoryList.d.ts +185 -0
  92. package/dist/react/core/CategoryList.js +174 -0
  93. package/{cjs/dist/react → dist/react/core}/PayNow.js +2 -2
  94. package/dist/react/core/Product.d.ts +148 -0
  95. package/dist/react/core/Product.js +126 -0
  96. package/dist/react/{ProductList.d.ts → core/ProductList.d.ts} +3 -3
  97. package/dist/react/{ProductList.js → core/ProductList.js} +10 -10
  98. package/{cjs/dist/react → dist/react/core}/ProductListFilters.d.ts +3 -3
  99. package/{cjs/dist/react → dist/react/core}/ProductListFilters.js +7 -7
  100. package/dist/react/{ProductListPagination.js → core/ProductListPagination.js} +8 -8
  101. package/{cjs/dist/react → dist/react/core}/ProductListSort.d.ts +1 -1
  102. package/dist/react/{ProductListSort.js → core/ProductListSort.js} +3 -3
  103. package/{cjs/dist/react → dist/react/core}/ProductModifiers.d.ts +1 -1
  104. package/{cjs/dist/react → dist/react/core}/ProductModifiers.js +13 -13
  105. package/{cjs/dist/react → dist/react/core}/ProductVariantSelector.d.ts +2 -2
  106. package/{cjs/dist/react → dist/react/core}/ProductVariantSelector.js +7 -10
  107. package/{cjs/dist/react → dist/react/core}/SelectedVariant.d.ts +2 -2
  108. package/{cjs/dist/react → dist/react/core}/SelectedVariant.js +43 -15
  109. package/dist/react/index.d.ts +15 -10
  110. package/dist/react/index.js +15 -10
  111. package/dist/react/types.d.ts +8 -0
  112. package/dist/react/types.js +9 -0
  113. package/dist/server-actions/custom-checkout-action.js +14 -10
  114. package/dist/server-actions/index.d.ts +1 -1
  115. package/dist/server-actions/index.js +1 -1
  116. package/dist/services/buy-now-service.d.ts +1 -1
  117. package/dist/services/buy-now-service.js +6 -6
  118. package/dist/services/categories-list-service.d.ts +4 -4
  119. package/dist/services/categories-list-service.js +10 -10
  120. package/dist/services/category-service.d.ts +18 -22
  121. package/dist/services/category-service.js +12 -10
  122. package/dist/services/index.d.ts +7 -7
  123. package/dist/services/index.js +7 -7
  124. package/dist/services/pay-now-service.d.ts +1 -1
  125. package/dist/services/pay-now-service.js +4 -4
  126. package/dist/services/product-modifiers-service.d.ts +3 -3
  127. package/dist/services/product-modifiers-service.js +7 -7
  128. package/dist/services/product-service.d.ts +4 -4
  129. package/dist/services/product-service.js +18 -18
  130. package/dist/services/products-list-search-service.d.ts +5 -5
  131. package/dist/services/products-list-search-service.js +117 -117
  132. package/dist/services/products-list-service.d.ts +4 -4
  133. package/dist/services/products-list-service.js +12 -12
  134. package/dist/services/selected-variant-service.d.ts +6 -2
  135. package/dist/services/selected-variant-service.js +86 -83
  136. package/dist/utils/index.d.ts +1 -0
  137. package/dist/utils/index.js +5 -4
  138. package/dist/utils/renderAsChild.d.ts +96 -0
  139. package/dist/utils/renderAsChild.js +66 -0
  140. package/dist/utils/renderChildren.d.ts +41 -0
  141. package/dist/utils/renderChildren.js +44 -0
  142. package/dist/utils/url-params.js +3 -3
  143. package/package.json +7 -3
  144. /package/cjs/dist/react/{BuyNow.d.ts → core/BuyNow.d.ts} +0 -0
  145. /package/cjs/dist/react/{PayNow.d.ts → core/PayNow.d.ts} +0 -0
  146. /package/cjs/dist/react/{ProductListPagination.d.ts → core/ProductListPagination.d.ts} +0 -0
  147. /package/dist/react/{BuyNow.d.ts → core/BuyNow.d.ts} +0 -0
  148. /package/dist/react/{PayNow.d.ts → core/PayNow.d.ts} +0 -0
  149. /package/dist/react/{ProductListPagination.d.ts → core/ProductListPagination.d.ts} +0 -0
@@ -0,0 +1,126 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { useService, WixServices } from '@wix/services-manager-react';
3
+ import { ProductServiceDefinition, ProductService, } from '../../services/product-service.js';
4
+ import { createServicesMap } from '@wix/services-manager';
5
+ /**
6
+ * Root component that provides the Product service context to its children.
7
+ * This component sets up the necessary services for rendering and managing a single product's data.
8
+ *
9
+ * @order 1
10
+ * @component
11
+ * @example
12
+ * ```tsx
13
+ * import { Product } from '@wix/stores/components';
14
+ *
15
+ * function ProductPage() {
16
+ * return (
17
+ * <Product.Root productServiceConfig={{ product: myProduct }}>
18
+ * <div>
19
+ * <Product.Name>
20
+ * {({ name }) => (
21
+ * <h1
22
+ * className="text-4xl font-bold text-content-primary mb-4"
23
+ * data-testid="product-name"
24
+ * >
25
+ * {name}
26
+ * </h1>
27
+ * )}
28
+ * </Product.Name>
29
+ * </div>
30
+ * </Product.Root>
31
+ * );
32
+ * }
33
+ * ```
34
+ */
35
+ export function Root(props) {
36
+ return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ProductServiceDefinition, ProductService, props.productServiceConfig), children: props.children }));
37
+ }
38
+ /**
39
+ * Headless component for product name display
40
+ *
41
+ * @component
42
+ * @example
43
+ * ```tsx
44
+ * import { Product } from '@wix/stores/components';
45
+ *
46
+ * function ProductHeader() {
47
+ * return (
48
+ * <Product.Name>
49
+ * {({ name }) => (
50
+ * <h1>{name}</h1>
51
+ * )}
52
+ * </Product.Name>
53
+ * );
54
+ * }
55
+ * ```
56
+ */
57
+ export function Name(props) {
58
+ const service = useService(ProductServiceDefinition);
59
+ const product = service.product.get();
60
+ const name = product.name;
61
+ return props.children({
62
+ name,
63
+ });
64
+ }
65
+ /**
66
+ * Headless component for product description display
67
+ *
68
+ * @component
69
+ * @example
70
+ * ```tsx
71
+ * import { Product } from '@wix/stores/components';
72
+ *
73
+ * function ProductDescription() {
74
+ * return (
75
+ * <Product.Description>
76
+ * {({ plainDescription, description }) => (
77
+ * <div>
78
+ * {plainDescription && (
79
+ * <div
80
+ * dangerouslySetInnerHTML={{
81
+ * __html: plainDescription,
82
+ * }}
83
+ * />
84
+ * )}
85
+ * {description && (
86
+ * <div>Rich content description available</div>
87
+ * )}
88
+ * </div>
89
+ * )}
90
+ * </Product.Description>
91
+ * );
92
+ * }
93
+ * ```
94
+ */
95
+ export function Description(props) {
96
+ const service = useService(ProductServiceDefinition);
97
+ const product = service.product.get();
98
+ const descriptionRichContent = product.description;
99
+ const plainDescription = product.plainDescription;
100
+ return props.children({
101
+ description: descriptionRichContent,
102
+ plainDescription: plainDescription,
103
+ });
104
+ }
105
+ export function Media(props) {
106
+ const service = useService(ProductServiceDefinition);
107
+ const product = service.product.get();
108
+ const media = product.media?.itemsInfo?.items ?? [];
109
+ return props.children({
110
+ media,
111
+ });
112
+ }
113
+ export function Content(props) {
114
+ const service = useService(ProductServiceDefinition);
115
+ const product = service.product.get();
116
+ return props.children({
117
+ product,
118
+ });
119
+ }
120
+ export function Loading(props) {
121
+ const service = useService(ProductServiceDefinition);
122
+ const isLoading = service.isLoading.get();
123
+ return props.children({
124
+ isLoading,
125
+ });
126
+ }
@@ -1,6 +1,6 @@
1
- import { type ProductsListServiceConfig } from "../services/products-list-service.js";
2
- import { productsV3 } from "@wix/stores";
3
- import { ProductsListSearchServiceConfig } from "../services/products-list-search-service.js";
1
+ import { type ProductsListServiceConfig } from '../../services/products-list-service.js';
2
+ import { productsV3 } from '@wix/stores';
3
+ import { ProductsListSearchServiceConfig } from '../../services/products-list-search-service.js';
4
4
  /**
5
5
  * Props for Root headless component
6
6
  */
@@ -1,9 +1,9 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useService, WixServices } from "@wix/services-manager-react";
3
- import { createServicesMap } from "@wix/services-manager";
4
- import { ProductListService, ProductsListServiceDefinition, } from "../services/products-list-service.js";
5
- import { ProductService, ProductServiceDefinition, } from "../services/product-service.js";
6
- import { ProductsListSearchService, ProductsListSearchServiceDefinition, } from "../services/products-list-search-service.js";
2
+ import { useService, WixServices } from '@wix/services-manager-react';
3
+ import { createServicesMap } from '@wix/services-manager';
4
+ import { ProductListService, ProductsListServiceDefinition, } from '../../services/products-list-service.js';
5
+ import { ProductService, ProductServiceDefinition, } from '../../services/product-service.js';
6
+ import { ProductsListSearchService, ProductsListSearchServiceDefinition, } from '../../services/products-list-search-service.js';
7
7
  /**
8
8
  * Root component that provides both ProductList and ProductListSearch service contexts to its children.
9
9
  * This component sets up the necessary services for managing products list state, including search,
@@ -97,7 +97,7 @@ export function EmptyState(props) {
97
97
  const errorValue = error.get();
98
98
  const productsValue = products.get();
99
99
  if (!isLoadingValue && !errorValue && productsValue.length === 0) {
100
- return typeof props.children === "function"
100
+ return typeof props.children === 'function'
101
101
  ? props.children({})
102
102
  : props.children;
103
103
  }
@@ -130,7 +130,7 @@ export function Loading(props) {
130
130
  const { isLoading } = useService(ProductsListServiceDefinition);
131
131
  const isLoadingValue = isLoading.get();
132
132
  if (isLoadingValue) {
133
- return typeof props.children === "function"
133
+ return typeof props.children === 'function'
134
134
  ? props.children({})
135
135
  : props.children;
136
136
  }
@@ -166,7 +166,7 @@ export function Error(props) {
166
166
  const { error } = useService(ProductsListServiceDefinition);
167
167
  const errorValue = error.get();
168
168
  if (errorValue) {
169
- return typeof props.children === "function"
169
+ return typeof props.children === 'function'
170
170
  ? props.children({ error: errorValue })
171
171
  : props.children;
172
172
  }
@@ -204,14 +204,14 @@ export function ItemContent(props) {
204
204
  if (isLoading.get() || error.get() || productsValue.length === 0) {
205
205
  return null;
206
206
  }
207
- return productsValue.map((product) => (_jsx(WixServices, { servicesMap: createServicesMap().addService(ProductServiceDefinition, ProductService, { product }), children: typeof props.children === "function"
207
+ return productsValue.map((product) => (_jsx(WixServices, { servicesMap: createServicesMap().addService(ProductServiceDefinition, ProductService, { product }), children: typeof props.children === 'function'
208
208
  ? props.children({ product })
209
209
  : props.children }, product._id)));
210
210
  }
211
211
  export function Items(props) {
212
212
  const { products } = useService(ProductsListServiceDefinition);
213
213
  const productsValue = products.get();
214
- return typeof props.children === "function"
214
+ return typeof props.children === 'function'
215
215
  ? props.children({ products: productsValue })
216
216
  : props.children;
217
217
  }
@@ -1,6 +1,6 @@
1
- import type { ReactNode } from "react";
2
- import { type ProductOption, InventoryStatusType } from "../services/products-list-search-service.js";
3
- import { Category } from "@wix/auto_sdk_categories_categories";
1
+ import type { ReactNode } from 'react';
2
+ import { type ProductOption, InventoryStatusType } from '../../services/products-list-search-service.js';
3
+ import { Category } from '@wix/auto_sdk_categories_categories';
4
4
  /**
5
5
  * Props for InventoryStatus headless component
6
6
  */
@@ -1,6 +1,6 @@
1
1
  import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
2
- import { useService } from "@wix/services-manager-react";
3
- import { ProductsListSearchServiceDefinition, } from "../services/products-list-search-service.js";
2
+ import { useService } from '@wix/services-manager-react';
3
+ import { ProductsListSearchServiceDefinition, } from '../../services/products-list-search-service.js';
4
4
  /**
5
5
  * Headless component for managing inventory status filters
6
6
  *
@@ -42,7 +42,7 @@ export function InventoryStatus(props) {
42
42
  const availableInventoryStatuses = service.availableInventoryStatuses.get();
43
43
  const selectedInventoryStatuses = service.selectedInventoryStatuses.get();
44
44
  const toggleInventoryStatus = service.toggleInventoryStatus;
45
- return typeof props.children === "function"
45
+ return typeof props.children === 'function'
46
46
  ? props.children({
47
47
  availableInventoryStatuses,
48
48
  selectedInventoryStatuses,
@@ -84,7 +84,7 @@ export function ResetTrigger(props) {
84
84
  const service = useService(ProductsListSearchServiceDefinition);
85
85
  const resetFilters = service.reset;
86
86
  const isFiltered = service.isFiltered.get();
87
- return typeof props.children === "function"
87
+ return typeof props.children === 'function'
88
88
  ? props.children({ resetFilters, isFiltered })
89
89
  : props.children;
90
90
  }
@@ -137,7 +137,7 @@ export function PriceRange(props) {
137
137
  const availableMaxPrice = service.availableMaxPrice.get();
138
138
  const setSelectedMinPrice = service.setSelectedMinPrice;
139
139
  const setSelectedMaxPrice = service.setSelectedMaxPrice;
140
- return typeof props.children === "function"
140
+ return typeof props.children === 'function'
141
141
  ? props.children({
142
142
  availableMinPrice,
143
143
  selectedMinPrice,
@@ -152,7 +152,7 @@ export function CategoryFilter(props) {
152
152
  const service = useService(ProductsListSearchServiceDefinition);
153
153
  const selectedCategory = service.selectedCategory.get();
154
154
  const setSelectedCategory = service.setSelectedCategory;
155
- return typeof props.children === "function"
155
+ return typeof props.children === 'function'
156
156
  ? props.children({ selectedCategory, setSelectedCategory })
157
157
  : props.children;
158
158
  }
@@ -209,7 +209,7 @@ export function ProductOptions(props) {
209
209
  const toggleChoice = (choiceId) => {
210
210
  service.toggleProductOption(option.id, choiceId);
211
211
  };
212
- return typeof props.children === "function"
212
+ return typeof props.children === 'function'
213
213
  ? props.children({ option, selectedChoices, toggleChoice })
214
214
  : props.children;
215
215
  }) }));
@@ -1,6 +1,6 @@
1
- import { useService } from "@wix/services-manager-react";
2
- import { ProductsListSearchServiceDefinition } from "../services/products-list-search-service.js";
3
- import { ProductsListServiceDefinition } from "../services/products-list-service.js";
1
+ import { useService } from '@wix/services-manager-react';
2
+ import { ProductsListSearchServiceDefinition } from '../../services/products-list-search-service.js';
3
+ import { ProductsListServiceDefinition } from '../../services/products-list-service.js';
4
4
  /**
5
5
  * Headless component for managing page size (items per page)
6
6
  *
@@ -39,7 +39,7 @@ export function PageSize(props) {
39
39
  const service = useService(ProductsListSearchServiceDefinition);
40
40
  const currentLimit = service.currentLimit.get();
41
41
  const setLimit = service.setLimit;
42
- return typeof props.children === "function"
42
+ return typeof props.children === 'function'
43
43
  ? props.children({ currentLimit, setLimit })
44
44
  : props.children;
45
45
  }
@@ -77,7 +77,7 @@ export function NextPageTrigger(props) {
77
77
  const service = useService(ProductsListSearchServiceDefinition);
78
78
  const nextPage = service.nextPage;
79
79
  const hasNextPage = service.hasNextPage.get();
80
- return typeof props.children === "function"
80
+ return typeof props.children === 'function'
81
81
  ? props.children({ nextPage, hasNextPage })
82
82
  : props.children;
83
83
  }
@@ -115,7 +115,7 @@ export function PreviousPageTrigger(props) {
115
115
  const service = useService(ProductsListSearchServiceDefinition);
116
116
  const prevPage = service.prevPage;
117
117
  const hasPrevPage = service.hasPrevPage.get();
118
- return typeof props.children === "function"
118
+ return typeof props.children === 'function'
119
119
  ? props.children({ prevPage, hasPrevPage })
120
120
  : props.children;
121
121
  }
@@ -153,7 +153,7 @@ export function FirstPageTrigger(props) {
153
153
  const service = useService(ProductsListSearchServiceDefinition);
154
154
  const navigateToFirstPage = service.navigateToFirstPage;
155
155
  const hasPrevPage = service.hasPrevPage.get();
156
- return typeof props.children === "function"
156
+ return typeof props.children === 'function'
157
157
  ? props.children({ navigateToFirstPage, hasPrevPage })
158
158
  : props.children;
159
159
  }
@@ -193,7 +193,7 @@ export function LoadMoreTrigger(props) {
193
193
  const loadMore = service.loadMore;
194
194
  const hasMoreProducts = service.hasNextPage.get();
195
195
  const isLoading = productsListService.isLoading.get();
196
- return typeof props.children === "function"
196
+ return typeof props.children === 'function'
197
197
  ? props.children({ loadMore, hasMoreProducts, isLoading })
198
198
  : props.children;
199
199
  }
@@ -1,4 +1,4 @@
1
- import { SortType } from "../enums/sort-enums.js";
1
+ import { SortType } from '../../enums/sort-enums.js';
2
2
  /**
3
3
  * Props for Options headless component
4
4
  */
@@ -1,5 +1,5 @@
1
- import { useService } from "@wix/services-manager-react";
2
- import { ProductsListSearchServiceDefinition } from "../services/products-list-search-service.js";
1
+ import { useService } from '@wix/services-manager-react';
2
+ import { ProductsListSearchServiceDefinition } from '../../services/products-list-search-service.js';
3
3
  /**
4
4
  * Headless component for managing product list sorting options
5
5
  *
@@ -43,7 +43,7 @@ export function Options(props) {
43
43
  const selectedSortOption = service.selectedSortOption.get();
44
44
  const sortOptions = service.sortOptions;
45
45
  const updateSortOption = service.setSelectedSortOption;
46
- return typeof props.children === "function"
46
+ return typeof props.children === 'function'
47
47
  ? props.children({
48
48
  selectedSortOption,
49
49
  updateSortOption,
@@ -1,4 +1,4 @@
1
- import { type ConnectedModifier, type ConnectedModifierChoice } from "@wix/auto_sdk_stores_products-v-3";
1
+ import { type ConnectedModifier, type ConnectedModifierChoice } from '@wix/auto_sdk_stores_products-v-3';
2
2
  export interface RootProps {
3
3
  children: React.ReactNode;
4
4
  }
@@ -1,9 +1,9 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useState } from "react";
3
- import { useService, WixServices } from "@wix/services-manager-react";
4
- import { ProductModifiersServiceDefinition, ProductModifiersService, } from "../services/product-modifiers-service.js";
5
- import { ModifierRenderType, } from "@wix/auto_sdk_stores_products-v-3";
6
- import { createServicesMap } from "@wix/services-manager";
2
+ import { useState } from 'react';
3
+ import { useService, WixServices } from '@wix/services-manager-react';
4
+ import { ProductModifiersServiceDefinition, ProductModifiersService, } from '../../services/product-modifiers-service.js';
5
+ import { ModifierRenderType, } from '@wix/auto_sdk_stores_products-v-3';
6
+ import { createServicesMap } from '@wix/services-manager';
7
7
  /**
8
8
  * Root component that provides the ProductModifiers service context to its children.
9
9
  * This component sets up the necessary services for managing product modifier functionality.
@@ -207,7 +207,7 @@ export function Modifiers(props) {
207
207
  export function Modifier(props) {
208
208
  const modifiersService = useModifiersService();
209
209
  const { modifier } = props;
210
- const name = modifier.name || "";
210
+ const name = modifier.name || '';
211
211
  const type = modifier.modifierRenderType;
212
212
  const mandatory = modifier.mandatory || false;
213
213
  const choices = modifier.choicesSettings?.choices || [];
@@ -262,13 +262,13 @@ export function Modifier(props) {
262
262
  export function Choice(props) {
263
263
  const modifiersService = useModifiersService();
264
264
  const { modifier, choice } = props;
265
- const modifierName = modifier.name || "";
265
+ const modifierName = modifier.name || '';
266
266
  const renderType = modifier.modifierRenderType;
267
267
  // For TEXT_CHOICES, use choice.key; for SWATCH_CHOICES, use choice.name
268
268
  const choiceValue = renderType === ModifierRenderType.TEXT_CHOICES
269
- ? choice.key || choice.name || ""
270
- : choice.name || "";
271
- const value = choice.name || ""; // Display name is always choice.name
269
+ ? choice.key || choice.name || ''
270
+ : choice.name || '';
271
+ const value = choice.name || ''; // Display name is always choice.name
272
272
  const description = choice.description;
273
273
  const colorCode = choice.colorCode;
274
274
  const selectedValue = modifiersService?.getModifierValue(modifierName);
@@ -324,13 +324,13 @@ export function Choice(props) {
324
324
  export function FreeText(props) {
325
325
  const modifiersService = useModifiersService();
326
326
  const { modifier } = props;
327
- const modifierName = modifier.name || "";
327
+ const modifierName = modifier.name || '';
328
328
  const mandatory = modifier.mandatory || false;
329
329
  const freeTextSettings = modifier.freeTextSettings;
330
330
  const maxChars = freeTextSettings?.maxLength;
331
331
  const placeholder = freeTextSettings?.placeholder;
332
332
  const selectedValue = modifiersService?.getModifierValue(modifierName);
333
- const value = selectedValue?.freeTextValue || "";
333
+ const value = selectedValue?.freeTextValue || '';
334
334
  const charCount = value.length;
335
335
  const isOverLimit = maxChars ? charCount > maxChars : false;
336
336
  const setText = (newValue) => {
@@ -394,7 +394,7 @@ export function FreeText(props) {
394
394
  export function ToggleFreeText(props) {
395
395
  const modifiersService = useModifiersService();
396
396
  const { modifier } = props;
397
- const modifierName = modifier.name || "";
397
+ const modifierName = modifier.name || '';
398
398
  const mandatory = modifier.mandatory || false;
399
399
  const [isTextInputShown, setIsTextInputShown] = useState(mandatory);
400
400
  const toggle = () => {
@@ -1,5 +1,5 @@
1
- import { SelectedVariantServiceConfig } from "../services/selected-variant-service.js";
2
- import { type ConnectedOption, type ConnectedOptionChoice, InventoryAvailabilityStatus } from "@wix/auto_sdk_stores_products-v-3";
1
+ import { SelectedVariantServiceConfig } from '../../services/selected-variant-service.js';
2
+ import { type ConnectedOption, type ConnectedOptionChoice, InventoryAvailabilityStatus } from '@wix/auto_sdk_stores_products-v-3';
3
3
  export interface RootProps {
4
4
  children: React.ReactNode;
5
5
  selectedVariantServiceConfig?: SelectedVariantServiceConfig;
@@ -1,8 +1,8 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useService, WixServices } from "@wix/services-manager-react";
3
- import { SelectedVariantServiceDefinition, SelectedVariantService, } from "../services/selected-variant-service.js";
4
- import { createServicesMap } from "@wix/services-manager";
5
- import { InventoryAvailabilityStatus, } from "@wix/auto_sdk_stores_products-v-3";
2
+ import { useService, WixServices } from '@wix/services-manager-react';
3
+ import { SelectedVariantServiceDefinition, SelectedVariantService, } from '../../services/selected-variant-service.js';
4
+ import { createServicesMap } from '@wix/services-manager';
5
+ import { InventoryAvailabilityStatus, } from '@wix/auto_sdk_stores_products-v-3';
6
6
  /**
7
7
  * Root component that provides the ProductVariantSelector service context to its children.
8
8
  * This component sets up the necessary services for rendering and managing product variant selection.
@@ -121,7 +121,7 @@ export function Option(props) {
121
121
  const variantService = useService(SelectedVariantServiceDefinition);
122
122
  const selectedChoices = variantService.selectedChoices.get();
123
123
  const { option } = props;
124
- const name = option.name || "";
124
+ const name = option.name || '';
125
125
  const choices = option.choicesSettings?.choices || [];
126
126
  const selectedValue = selectedChoices[name] || null;
127
127
  return props.children({
@@ -161,8 +161,8 @@ export function Choice(props) {
161
161
  const variantService = useService(SelectedVariantServiceDefinition);
162
162
  const selectedChoices = variantService.selectedChoices.get();
163
163
  const { option, choice } = props;
164
- const optionName = option.name || "";
165
- const choiceValue = choice.name || "";
164
+ const optionName = option.name || '';
165
+ const choiceValue = choice.name || '';
166
166
  const isSelected = selectedChoices[optionName] === choiceValue;
167
167
  // Check if this choice is available based on current selections
168
168
  const isVisible = variantService.isChoiceAvailable(optionName, choiceValue);
@@ -189,7 +189,6 @@ export function Choice(props) {
189
189
  choiceValue,
190
190
  });
191
191
  }
192
- ;
193
192
  /**
194
193
  * Headless component for product stock status
195
194
  *
@@ -251,7 +250,6 @@ export function Stock(props) {
251
250
  decrementQuantity,
252
251
  });
253
252
  }
254
- ;
255
253
  /**
256
254
  * Headless component for resetting variant selections
257
255
  *
@@ -287,4 +285,3 @@ export function Reset(props) {
287
285
  hasSelections,
288
286
  });
289
287
  }
290
- ;
@@ -1,4 +1,4 @@
1
- import { SelectedVariantServiceConfig } from "../services/selected-variant-service.js";
1
+ import { SelectedVariantServiceConfig } from '../../services/selected-variant-service.js';
2
2
  export interface RootProps {
3
3
  children: React.ReactNode;
4
4
  selectedVariantServiceConfig?: SelectedVariantServiceConfig;
@@ -224,4 +224,4 @@ export interface ActionsRenderProps {
224
224
  * }
225
225
  * ```
226
226
  */
227
- export declare function Actions(props: ActionsProps): import("react").ReactNode;
227
+ export declare function Actions(props: ActionsProps): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
@@ -1,9 +1,10 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useService, WixServices } from "@wix/services-manager-react";
3
- import { SelectedVariantServiceDefinition, SelectedVariantService, } from "../services/selected-variant-service.js";
4
- import { ProductModifiersServiceDefinition } from "../services/product-modifiers-service.js";
5
- import { CurrentCartServiceDefinition } from "@wix/headless-ecom/services";
6
- import { createServicesMap } from "@wix/services-manager";
2
+ import { useService, WixServices } from '@wix/services-manager-react';
3
+ import { SelectedVariantServiceDefinition, SelectedVariantService, } from '../../services/selected-variant-service.js';
4
+ import { ProductModifiersServiceDefinition } from '../../services/product-modifiers-service.js';
5
+ import { createServicesMap } from '@wix/services-manager';
6
+ import { Checkout } from '@wix/headless-ecom/react';
7
+ import { CheckoutServiceDefinition, CurrentCartServiceDefinition, } from '@wix/headless-ecom/services';
7
8
  /**
8
9
  * Root component that provides the SelectedVariant service context to its children.
9
10
  * This component sets up the necessary services for rendering and managing selected variant data.
@@ -180,6 +181,15 @@ export function SKU(props) {
180
181
  export function Actions(props) {
181
182
  const variantService = useService(SelectedVariantServiceDefinition);
182
183
  const cartService = useService(CurrentCartServiceDefinition);
184
+ // Try to get checkout service - it may not be available
185
+ let checkoutService = null;
186
+ try {
187
+ checkoutService = useService(CheckoutServiceDefinition);
188
+ }
189
+ catch {
190
+ // Checkout service not available
191
+ checkoutService = null;
192
+ }
183
193
  // Try to get modifiers service - it may not exist for all products
184
194
  let modifiersService = null;
185
195
  try {
@@ -192,8 +202,10 @@ export function Actions(props) {
192
202
  const inStock = variantService.isInStock.get();
193
203
  const isPreOrderEnabled = variantService.isPreOrderEnabled.get();
194
204
  const preOrderMessage = variantService.preOrderMessage.get();
195
- const isLoading = variantService.isLoading.get();
196
- const error = variantService.error.get();
205
+ const isLoading = variantService.isLoading.get() ||
206
+ (checkoutService ? checkoutService.isLoading.get() : false);
207
+ const error = variantService.error.get() ||
208
+ (checkoutService ? checkoutService.error.get() : null);
197
209
  const quantity = variantService.selectedQuantity.get();
198
210
  // Check if all required modifiers are filled
199
211
  const areAllRequiredModifiersFilled = modifiersService
@@ -202,18 +214,19 @@ export function Actions(props) {
202
214
  const canAddToCart = (inStock || isPreOrderEnabled) &&
203
215
  !isLoading &&
204
216
  areAllRequiredModifiersFilled;
205
- const addToCart = async () => {
206
- // Get modifiers data if available
207
- let modifiersData;
217
+ const getModifiersData = () => {
208
218
  if (modifiersService) {
209
219
  const selectedModifiers = modifiersService.selectedModifiers.get();
210
220
  if (Object.keys(selectedModifiers).length > 0) {
211
- modifiersData = selectedModifiers;
221
+ return selectedModifiers;
212
222
  }
213
223
  }
224
+ };
225
+ const addToCart = async () => {
226
+ const modifiersData = getModifiersData();
214
227
  await variantService.addToCart(quantity, modifiersData);
215
228
  };
216
- const buyNow = async () => {
229
+ const buyNowFallback = async () => {
217
230
  try {
218
231
  // Clear the cart first
219
232
  await cartService.clearCart();
@@ -223,18 +236,33 @@ export function Actions(props) {
223
236
  await cartService.proceedToCheckout();
224
237
  }
225
238
  catch (error) {
226
- console.error("Buy now failed:", error);
239
+ console.error('Buy now failed:', error);
227
240
  throw error;
228
241
  }
229
242
  };
230
- return props.children({
243
+ const getLineItems = () => {
244
+ const modifiersData = getModifiersData();
245
+ return variantService.createLineItems(quantity, modifiersData);
246
+ };
247
+ const commonProps = {
231
248
  addToCart,
232
- buyNow,
233
249
  canAddToCart,
234
250
  isLoading,
235
251
  inStock,
236
252
  isPreOrderEnabled,
237
253
  preOrderMessage,
238
254
  error,
255
+ };
256
+ if (checkoutService) {
257
+ return (_jsx(Checkout.Trigger, { children: ({ createCheckout, isLoading: checkoutLoading, error: checkoutError, }) => props.children({
258
+ ...commonProps,
259
+ isLoading: isLoading || checkoutLoading,
260
+ error: error || checkoutError,
261
+ buyNow: () => createCheckout(getLineItems()),
262
+ }) }));
263
+ }
264
+ return props.children({
265
+ ...commonProps,
266
+ buyNow: buyNowFallback,
239
267
  });
240
268
  }
@@ -1,10 +1,15 @@
1
- export * as CategoryList from "./CategoryList.js";
2
- export * as Category from "./Category.js";
3
- export * as Product from "./Product.js";
4
- export * as ProductModifiers from "./ProductModifiers.js";
5
- export * as ProductList from "./ProductList.js";
6
- export * as ProductListFilters from "./ProductListFilters.js";
7
- export * as ProductListPagination from "./ProductListPagination.js";
8
- export * as ProductListSort from "./ProductListSort.js";
9
- export * as ProductVariantSelector from "./ProductVariantSelector.js";
10
- export * as SelectedVariant from "./SelectedVariant.js";
1
+ export * as CategoryListCore from './core/CategoryList.js';
2
+ export * as CategoryCore from './core/Category.js';
3
+ export * as ProductCore from './core/Product.js';
4
+ export * as ProductModifiers from './core/ProductModifiers.js';
5
+ export * as ProductList from './core/ProductList.js';
6
+ export * as ProductListFilters from './core/ProductListFilters.js';
7
+ export * as ProductListPagination from './core/ProductListPagination.js';
8
+ export * as ProductListSort from './core/ProductListSort.js';
9
+ export * as ProductVariantSelector from './core/ProductVariantSelector.js';
10
+ export * as SelectedVariant from './core/SelectedVariant.js';
11
+ export * as Product from './Product.js';
12
+ export * as Option from './Option.js';
13
+ export * as Choice from './Choice.js';
14
+ export * as CategoryList from './CategoryList.js';
15
+ export * as Category from './Category.js';
@@ -1,10 +1,15 @@
1
- export * as CategoryList from "./CategoryList.js";
2
- export * as Category from "./Category.js";
3
- export * as Product from "./Product.js";
4
- export * as ProductModifiers from "./ProductModifiers.js";
5
- export * as ProductList from "./ProductList.js";
6
- export * as ProductListFilters from "./ProductListFilters.js";
7
- export * as ProductListPagination from "./ProductListPagination.js";
8
- export * as ProductListSort from "./ProductListSort.js";
9
- export * as ProductVariantSelector from "./ProductVariantSelector.js";
10
- export * as SelectedVariant from "./SelectedVariant.js";
1
+ export * as CategoryListCore from './core/CategoryList.js';
2
+ export * as CategoryCore from './core/Category.js';
3
+ export * as ProductCore from './core/Product.js';
4
+ export * as ProductModifiers from './core/ProductModifiers.js';
5
+ export * as ProductList from './core/ProductList.js';
6
+ export * as ProductListFilters from './core/ProductListFilters.js';
7
+ export * as ProductListPagination from './core/ProductListPagination.js';
8
+ export * as ProductListSort from './core/ProductListSort.js';
9
+ export * as ProductVariantSelector from './core/ProductVariantSelector.js';
10
+ export * as SelectedVariant from './core/SelectedVariant.js';
11
+ export * as Product from './Product.js';
12
+ export * as Option from './Option.js';
13
+ export * as Choice from './Choice.js';
14
+ export * as CategoryList from './CategoryList.js';
15
+ export * as Category from './Category.js';