@wix/headless-stores 0.0.95 → 0.0.96
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.
- package/cjs/dist/react/Product.js +28 -28
- package/dist/react/Product.js +28 -28
- package/package.json +2 -2
|
@@ -6,9 +6,9 @@ import { AsChildSlot } from '@wix/headless-utils/react';
|
|
|
6
6
|
import { MediaGallery } from '@wix/headless-media/react';
|
|
7
7
|
import { Quantity as QuantityComponent } from '@wix/headless-components/react';
|
|
8
8
|
import * as CoreProduct from './core/Product.js';
|
|
9
|
-
import * as
|
|
10
|
-
import * as
|
|
11
|
-
import * as
|
|
9
|
+
import * as CoreProductVariantSelector from './core/ProductVariantSelector.js';
|
|
10
|
+
import * as CoreProductModifiers from './core/ProductModifiers.js';
|
|
11
|
+
import * as CoreSelectedVariant from './core/SelectedVariant.js';
|
|
12
12
|
import * as Option from './Option.js';
|
|
13
13
|
import { AsContent } from './types.js';
|
|
14
14
|
import { DataComponentTags } from '../data-component-tags.js';
|
|
@@ -89,9 +89,9 @@ var TestIds;
|
|
|
89
89
|
*/
|
|
90
90
|
export const Root = (props) => {
|
|
91
91
|
const { children, product, ...attrs } = props;
|
|
92
|
-
return (_jsx(
|
|
93
|
-
|
|
94
|
-
|
|
92
|
+
return (_jsx(CoreProduct.Root, { productServiceConfig: { product: props.product }, children: _jsx(MediaGallery.Root, { mediaGalleryServiceConfig: {
|
|
93
|
+
media: props.product.media?.itemsInfo?.items ?? [],
|
|
94
|
+
}, children: _jsx(CoreProductVariantSelector.Root, { children: _jsx(CoreProductModifiers.Root, { children: _jsx(CoreSelectedVariant.Root, { children: _jsx(AsChildSlot, { "data-testid": TestIds.productRoot, "data-component-tag": DataComponentTags.productRoot, ...attrs, children: children }) }) }) }) }) }));
|
|
95
95
|
};
|
|
96
96
|
Root.displayName = 'Product.Root';
|
|
97
97
|
/**
|
|
@@ -202,7 +202,7 @@ export const Description = React.forwardRef((props, ref) => {
|
|
|
202
202
|
*/
|
|
203
203
|
export const Price = React.forwardRef((props, ref) => {
|
|
204
204
|
const { asChild, children, className, ...otherProps } = props;
|
|
205
|
-
return (_jsx(
|
|
205
|
+
return (_jsx(CoreSelectedVariant.Price, { children: ({ price, compareAtPrice }) => {
|
|
206
206
|
return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productPrice, "data-discounted": compareAtPrice !== null, customElement: children, customElementProps: {
|
|
207
207
|
price,
|
|
208
208
|
formattedPrice: price,
|
|
@@ -240,7 +240,7 @@ export const Price = React.forwardRef((props, ref) => {
|
|
|
240
240
|
export const CompareAtPrice = React.forwardRef((props, ref) => {
|
|
241
241
|
const { asChild, children, className, ...otherProps } = props;
|
|
242
242
|
const testId = TestIds.productCompareAtPrice;
|
|
243
|
-
return (_jsx(
|
|
243
|
+
return (_jsx(CoreSelectedVariant.Price, { children: ({ compareAtPrice }) => {
|
|
244
244
|
// Don't render anything if there's no compare-at price
|
|
245
245
|
if (!compareAtPrice) {
|
|
246
246
|
return null;
|
|
@@ -466,15 +466,15 @@ export const Stock = React.forwardRef((props, ref) => {
|
|
|
466
466
|
* ```
|
|
467
467
|
*/
|
|
468
468
|
export const Variants = React.forwardRef((props, ref) => {
|
|
469
|
-
const { asChild, children, className } = props;
|
|
470
|
-
return (_jsx(
|
|
469
|
+
const { asChild, children, className, ...attributes } = props;
|
|
470
|
+
return (_jsx(CoreProductVariantSelector.Options, { children: ({ hasOptions, options }) => {
|
|
471
471
|
if (!hasOptions)
|
|
472
472
|
return null;
|
|
473
473
|
const contextValue = {
|
|
474
474
|
hasOptions,
|
|
475
475
|
options,
|
|
476
476
|
};
|
|
477
|
-
return (_jsx(VariantsContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productVariants, customElement: children, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
|
|
477
|
+
return (_jsx(VariantsContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ...attributes, ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productVariants, customElement: children, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
|
|
478
478
|
} }));
|
|
479
479
|
});
|
|
480
480
|
/**
|
|
@@ -527,7 +527,7 @@ export const VariantOptionRepeater = React.forwardRef((props, _ref) => {
|
|
|
527
527
|
if (!hasOptions)
|
|
528
528
|
return null;
|
|
529
529
|
return (_jsx(_Fragment, { children: options.map((option) => {
|
|
530
|
-
return (_jsx(
|
|
530
|
+
return (_jsx(CoreProductVariantSelector.Option, { option: option, children: (optionData) => (_jsx(Option.Root, { option: {
|
|
531
531
|
...optionData,
|
|
532
532
|
mandatory: false,
|
|
533
533
|
}, children: children })) }, option._id));
|
|
@@ -577,15 +577,15 @@ export const VariantOptionRepeater = React.forwardRef((props, _ref) => {
|
|
|
577
577
|
* ```
|
|
578
578
|
*/
|
|
579
579
|
export const Modifiers = React.forwardRef((props, ref) => {
|
|
580
|
-
const { asChild, children, className } = props;
|
|
581
|
-
return (_jsx(
|
|
580
|
+
const { asChild, children, className, ...attributes } = props;
|
|
581
|
+
return (_jsx(CoreProductModifiers.Modifiers, { children: ({ hasModifiers, modifiers }) => {
|
|
582
582
|
if (!hasModifiers)
|
|
583
583
|
return null;
|
|
584
584
|
const contextValue = {
|
|
585
585
|
hasModifiers,
|
|
586
586
|
modifiers,
|
|
587
587
|
};
|
|
588
|
-
return (_jsx(ModifiersContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productModifiers, customElement: children, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
|
|
588
|
+
return (_jsx(ModifiersContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ...attributes, ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productModifiers, customElement: children, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
|
|
589
589
|
} }));
|
|
590
590
|
});
|
|
591
591
|
/**
|
|
@@ -640,7 +640,7 @@ export const ModifierOptionRepeater = React.forwardRef((props, _ref) => {
|
|
|
640
640
|
if (!hasModifiers)
|
|
641
641
|
return null;
|
|
642
642
|
return (_jsx(_Fragment, { children: modifiers.map((modifier) => {
|
|
643
|
-
return (_jsx(
|
|
643
|
+
return (_jsx(CoreProductModifiers.Modifier, { modifier: modifier, children: (modifierData) => (_jsx(Option.Root, { option: {
|
|
644
644
|
...modifierData,
|
|
645
645
|
}, allowedTypes: allowedTypes, children: children })) }, modifier._id));
|
|
646
646
|
}) }));
|
|
@@ -755,7 +755,7 @@ export { ProductMediaGallery as MediaGallery };
|
|
|
755
755
|
*/
|
|
756
756
|
export const ProductQuantity = React.forwardRef((props, ref) => {
|
|
757
757
|
const { asChild, children, className } = props;
|
|
758
|
-
return (_jsx(
|
|
758
|
+
return (_jsx(CoreProductVariantSelector.Stock, { children: ({ inStock, isPreOrderEnabled, availableQuantity, selectedQuantity, setSelectedQuantity, }) => {
|
|
759
759
|
const renderProps = {
|
|
760
760
|
selectedQuantity,
|
|
761
761
|
availableQuantity,
|
|
@@ -782,7 +782,7 @@ export const ProductQuantity = React.forwardRef((props, ref) => {
|
|
|
782
782
|
*/
|
|
783
783
|
export const ProductQuantityDecrement = React.forwardRef((props, ref) => {
|
|
784
784
|
const { asChild, children, className } = props;
|
|
785
|
-
return (_jsx(
|
|
785
|
+
return (_jsx(CoreProductVariantSelector.Stock, { children: ({ selectedQuantity, inStock, isPreOrderEnabled }) => {
|
|
786
786
|
const disabled = selectedQuantity <= 1 || (!inStock && !isPreOrderEnabled);
|
|
787
787
|
if (asChild && children) {
|
|
788
788
|
return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productQuantityDecrement, customElement: children, customElementProps: { disabled } }));
|
|
@@ -802,7 +802,7 @@ export const ProductQuantityDecrement = React.forwardRef((props, ref) => {
|
|
|
802
802
|
*/
|
|
803
803
|
export const ProductQuantityInput = React.forwardRef((props, ref) => {
|
|
804
804
|
const { asChild, children, className, disabled = true } = props;
|
|
805
|
-
return (_jsx(
|
|
805
|
+
return (_jsx(CoreProductVariantSelector.Stock, { children: () => {
|
|
806
806
|
if (asChild && children) {
|
|
807
807
|
return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, disabled: disabled, "data-testid": TestIds.productQuantityInput, customElement: children, customElementProps: {} }));
|
|
808
808
|
}
|
|
@@ -822,7 +822,7 @@ export const ProductQuantityInput = React.forwardRef((props, ref) => {
|
|
|
822
822
|
*/
|
|
823
823
|
export const ProductQuantityIncrement = React.forwardRef((props, ref) => {
|
|
824
824
|
const { asChild, children, className } = props;
|
|
825
|
-
return (_jsx(
|
|
825
|
+
return (_jsx(CoreProductVariantSelector.Stock, { children: ({ selectedQuantity, availableQuantity, inStock, isPreOrderEnabled, }) => {
|
|
826
826
|
const disabled = (!!availableQuantity && selectedQuantity >= availableQuantity) ||
|
|
827
827
|
(!inStock && !isPreOrderEnabled);
|
|
828
828
|
if (asChild && children) {
|
|
@@ -859,13 +859,13 @@ export const ProductQuantityIncrement = React.forwardRef((props, ref) => {
|
|
|
859
859
|
*/
|
|
860
860
|
export const ProductQuantityRaw = React.forwardRef((props, ref) => {
|
|
861
861
|
const { asChild, children, className } = props;
|
|
862
|
-
return (_jsx(
|
|
862
|
+
return (_jsx(CoreProductVariantSelector.Stock, { children: (renderProps) => {
|
|
863
863
|
return (_jsx(AsChildSlot, { ref: ref, customElement: children, asChild: asChild, className: className, "data-testid": TestIds.productQuantityRaw, customElementProps: renderProps }));
|
|
864
864
|
} }));
|
|
865
865
|
});
|
|
866
866
|
export const ProductVariantSelectorReset = React.forwardRef((props, ref) => {
|
|
867
867
|
const { asChild, children, className } = props;
|
|
868
|
-
return (_jsx(
|
|
868
|
+
return (_jsx(CoreProductVariantSelector.Reset, { children: (renderProps) => {
|
|
869
869
|
if (!renderProps.hasSelections) {
|
|
870
870
|
return null;
|
|
871
871
|
}
|
|
@@ -879,7 +879,7 @@ export const ProductVariantSelectorReset = React.forwardRef((props, ref) => {
|
|
|
879
879
|
*/
|
|
880
880
|
export const ProductActionAddToCart = React.forwardRef((props, ref) => {
|
|
881
881
|
const { asChild, children, className, label, loadingState } = props;
|
|
882
|
-
return (_jsx(
|
|
882
|
+
return (_jsx(CoreSelectedVariant.Actions, { children: ({ lineItems, canAddToCart, isLoading, addToCart, isPreOrderEnabled, }) => {
|
|
883
883
|
if (isPreOrderEnabled) {
|
|
884
884
|
return null;
|
|
885
885
|
}
|
|
@@ -901,7 +901,7 @@ export const ProductActionAddToCart = React.forwardRef((props, ref) => {
|
|
|
901
901
|
*/
|
|
902
902
|
export const ProductActionBuyNow = React.forwardRef((props, ref) => {
|
|
903
903
|
const { asChild, children, className, label, loadingState } = props;
|
|
904
|
-
return (_jsx(
|
|
904
|
+
return (_jsx(CoreSelectedVariant.Actions, { children: ({ lineItems, canAddToCart, isLoading, buyNow, inStock, isPreOrderEnabled, }) => {
|
|
905
905
|
if (!inStock || isPreOrderEnabled) {
|
|
906
906
|
return null;
|
|
907
907
|
}
|
|
@@ -923,7 +923,7 @@ export const ProductActionBuyNow = React.forwardRef((props, ref) => {
|
|
|
923
923
|
*/
|
|
924
924
|
export const ProductActionPreOrder = React.forwardRef((props, ref) => {
|
|
925
925
|
const { asChild, children, className, label, loadingState } = props;
|
|
926
|
-
return (_jsx(
|
|
926
|
+
return (_jsx(CoreSelectedVariant.Actions, { children: ({ lineItems, isLoading, addToCart, isPreOrderEnabled }) => {
|
|
927
927
|
if (!isPreOrderEnabled) {
|
|
928
928
|
return null;
|
|
929
929
|
}
|
|
@@ -1038,7 +1038,7 @@ function getStockStatusMessage(inStock, isPreOrderEnabled, availabilityStatus, l
|
|
|
1038
1038
|
*/
|
|
1039
1039
|
export const ProductVariantStock = React.forwardRef((props, ref) => {
|
|
1040
1040
|
const { asChild, children, className, labels } = props;
|
|
1041
|
-
return (_jsx(
|
|
1041
|
+
return (_jsx(CoreProductVariantSelector.Stock, { children: ({ inStock, isPreOrderEnabled, availabilityStatus, currentVariantId, }) => {
|
|
1042
1042
|
// Only render if we have a current variant selected
|
|
1043
1043
|
if (!currentVariantId && !availabilityStatus) {
|
|
1044
1044
|
return null;
|
|
@@ -1085,7 +1085,7 @@ export const ProductVariantStock = React.forwardRef((props, ref) => {
|
|
|
1085
1085
|
*/
|
|
1086
1086
|
export const ProductVariantSKU = React.forwardRef((props, ref) => {
|
|
1087
1087
|
const { asChild, children, className } = props;
|
|
1088
|
-
return (_jsx(
|
|
1088
|
+
return (_jsx(CoreSelectedVariant.Details, { children: ({ sku }) => {
|
|
1089
1089
|
// Don't render anything if there's no SKU
|
|
1090
1090
|
if (!sku) {
|
|
1091
1091
|
return null;
|
|
@@ -1119,7 +1119,7 @@ export const ProductVariantSKU = React.forwardRef((props, ref) => {
|
|
|
1119
1119
|
*/
|
|
1120
1120
|
export const ProductVariantWeight = React.forwardRef((props, ref) => {
|
|
1121
1121
|
const { asChild, children, className } = props;
|
|
1122
|
-
return (_jsx(
|
|
1122
|
+
return (_jsx(CoreSelectedVariant.Details, { children: ({ weight }) => {
|
|
1123
1123
|
// Don't render anything if there's no weight
|
|
1124
1124
|
if (!weight) {
|
|
1125
1125
|
return null;
|
package/dist/react/Product.js
CHANGED
|
@@ -6,9 +6,9 @@ import { AsChildSlot } from '@wix/headless-utils/react';
|
|
|
6
6
|
import { MediaGallery } from '@wix/headless-media/react';
|
|
7
7
|
import { Quantity as QuantityComponent } from '@wix/headless-components/react';
|
|
8
8
|
import * as CoreProduct from './core/Product.js';
|
|
9
|
-
import * as
|
|
10
|
-
import * as
|
|
11
|
-
import * as
|
|
9
|
+
import * as CoreProductVariantSelector from './core/ProductVariantSelector.js';
|
|
10
|
+
import * as CoreProductModifiers from './core/ProductModifiers.js';
|
|
11
|
+
import * as CoreSelectedVariant from './core/SelectedVariant.js';
|
|
12
12
|
import * as Option from './Option.js';
|
|
13
13
|
import { AsContent } from './types.js';
|
|
14
14
|
import { DataComponentTags } from '../data-component-tags.js';
|
|
@@ -89,9 +89,9 @@ var TestIds;
|
|
|
89
89
|
*/
|
|
90
90
|
export const Root = (props) => {
|
|
91
91
|
const { children, product, ...attrs } = props;
|
|
92
|
-
return (_jsx(
|
|
93
|
-
|
|
94
|
-
|
|
92
|
+
return (_jsx(CoreProduct.Root, { productServiceConfig: { product: props.product }, children: _jsx(MediaGallery.Root, { mediaGalleryServiceConfig: {
|
|
93
|
+
media: props.product.media?.itemsInfo?.items ?? [],
|
|
94
|
+
}, children: _jsx(CoreProductVariantSelector.Root, { children: _jsx(CoreProductModifiers.Root, { children: _jsx(CoreSelectedVariant.Root, { children: _jsx(AsChildSlot, { "data-testid": TestIds.productRoot, "data-component-tag": DataComponentTags.productRoot, ...attrs, children: children }) }) }) }) }) }));
|
|
95
95
|
};
|
|
96
96
|
Root.displayName = 'Product.Root';
|
|
97
97
|
/**
|
|
@@ -202,7 +202,7 @@ export const Description = React.forwardRef((props, ref) => {
|
|
|
202
202
|
*/
|
|
203
203
|
export const Price = React.forwardRef((props, ref) => {
|
|
204
204
|
const { asChild, children, className, ...otherProps } = props;
|
|
205
|
-
return (_jsx(
|
|
205
|
+
return (_jsx(CoreSelectedVariant.Price, { children: ({ price, compareAtPrice }) => {
|
|
206
206
|
return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productPrice, "data-discounted": compareAtPrice !== null, customElement: children, customElementProps: {
|
|
207
207
|
price,
|
|
208
208
|
formattedPrice: price,
|
|
@@ -240,7 +240,7 @@ export const Price = React.forwardRef((props, ref) => {
|
|
|
240
240
|
export const CompareAtPrice = React.forwardRef((props, ref) => {
|
|
241
241
|
const { asChild, children, className, ...otherProps } = props;
|
|
242
242
|
const testId = TestIds.productCompareAtPrice;
|
|
243
|
-
return (_jsx(
|
|
243
|
+
return (_jsx(CoreSelectedVariant.Price, { children: ({ compareAtPrice }) => {
|
|
244
244
|
// Don't render anything if there's no compare-at price
|
|
245
245
|
if (!compareAtPrice) {
|
|
246
246
|
return null;
|
|
@@ -466,15 +466,15 @@ export const Stock = React.forwardRef((props, ref) => {
|
|
|
466
466
|
* ```
|
|
467
467
|
*/
|
|
468
468
|
export const Variants = React.forwardRef((props, ref) => {
|
|
469
|
-
const { asChild, children, className } = props;
|
|
470
|
-
return (_jsx(
|
|
469
|
+
const { asChild, children, className, ...attributes } = props;
|
|
470
|
+
return (_jsx(CoreProductVariantSelector.Options, { children: ({ hasOptions, options }) => {
|
|
471
471
|
if (!hasOptions)
|
|
472
472
|
return null;
|
|
473
473
|
const contextValue = {
|
|
474
474
|
hasOptions,
|
|
475
475
|
options,
|
|
476
476
|
};
|
|
477
|
-
return (_jsx(VariantsContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productVariants, customElement: children, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
|
|
477
|
+
return (_jsx(VariantsContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ...attributes, ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productVariants, customElement: children, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
|
|
478
478
|
} }));
|
|
479
479
|
});
|
|
480
480
|
/**
|
|
@@ -527,7 +527,7 @@ export const VariantOptionRepeater = React.forwardRef((props, _ref) => {
|
|
|
527
527
|
if (!hasOptions)
|
|
528
528
|
return null;
|
|
529
529
|
return (_jsx(_Fragment, { children: options.map((option) => {
|
|
530
|
-
return (_jsx(
|
|
530
|
+
return (_jsx(CoreProductVariantSelector.Option, { option: option, children: (optionData) => (_jsx(Option.Root, { option: {
|
|
531
531
|
...optionData,
|
|
532
532
|
mandatory: false,
|
|
533
533
|
}, children: children })) }, option._id));
|
|
@@ -577,15 +577,15 @@ export const VariantOptionRepeater = React.forwardRef((props, _ref) => {
|
|
|
577
577
|
* ```
|
|
578
578
|
*/
|
|
579
579
|
export const Modifiers = React.forwardRef((props, ref) => {
|
|
580
|
-
const { asChild, children, className } = props;
|
|
581
|
-
return (_jsx(
|
|
580
|
+
const { asChild, children, className, ...attributes } = props;
|
|
581
|
+
return (_jsx(CoreProductModifiers.Modifiers, { children: ({ hasModifiers, modifiers }) => {
|
|
582
582
|
if (!hasModifiers)
|
|
583
583
|
return null;
|
|
584
584
|
const contextValue = {
|
|
585
585
|
hasModifiers,
|
|
586
586
|
modifiers,
|
|
587
587
|
};
|
|
588
|
-
return (_jsx(ModifiersContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productModifiers, customElement: children, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
|
|
588
|
+
return (_jsx(ModifiersContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ...attributes, ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productModifiers, customElement: children, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
|
|
589
589
|
} }));
|
|
590
590
|
});
|
|
591
591
|
/**
|
|
@@ -640,7 +640,7 @@ export const ModifierOptionRepeater = React.forwardRef((props, _ref) => {
|
|
|
640
640
|
if (!hasModifiers)
|
|
641
641
|
return null;
|
|
642
642
|
return (_jsx(_Fragment, { children: modifiers.map((modifier) => {
|
|
643
|
-
return (_jsx(
|
|
643
|
+
return (_jsx(CoreProductModifiers.Modifier, { modifier: modifier, children: (modifierData) => (_jsx(Option.Root, { option: {
|
|
644
644
|
...modifierData,
|
|
645
645
|
}, allowedTypes: allowedTypes, children: children })) }, modifier._id));
|
|
646
646
|
}) }));
|
|
@@ -755,7 +755,7 @@ export { ProductMediaGallery as MediaGallery };
|
|
|
755
755
|
*/
|
|
756
756
|
export const ProductQuantity = React.forwardRef((props, ref) => {
|
|
757
757
|
const { asChild, children, className } = props;
|
|
758
|
-
return (_jsx(
|
|
758
|
+
return (_jsx(CoreProductVariantSelector.Stock, { children: ({ inStock, isPreOrderEnabled, availableQuantity, selectedQuantity, setSelectedQuantity, }) => {
|
|
759
759
|
const renderProps = {
|
|
760
760
|
selectedQuantity,
|
|
761
761
|
availableQuantity,
|
|
@@ -782,7 +782,7 @@ export const ProductQuantity = React.forwardRef((props, ref) => {
|
|
|
782
782
|
*/
|
|
783
783
|
export const ProductQuantityDecrement = React.forwardRef((props, ref) => {
|
|
784
784
|
const { asChild, children, className } = props;
|
|
785
|
-
return (_jsx(
|
|
785
|
+
return (_jsx(CoreProductVariantSelector.Stock, { children: ({ selectedQuantity, inStock, isPreOrderEnabled }) => {
|
|
786
786
|
const disabled = selectedQuantity <= 1 || (!inStock && !isPreOrderEnabled);
|
|
787
787
|
if (asChild && children) {
|
|
788
788
|
return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productQuantityDecrement, customElement: children, customElementProps: { disabled } }));
|
|
@@ -802,7 +802,7 @@ export const ProductQuantityDecrement = React.forwardRef((props, ref) => {
|
|
|
802
802
|
*/
|
|
803
803
|
export const ProductQuantityInput = React.forwardRef((props, ref) => {
|
|
804
804
|
const { asChild, children, className, disabled = true } = props;
|
|
805
|
-
return (_jsx(
|
|
805
|
+
return (_jsx(CoreProductVariantSelector.Stock, { children: () => {
|
|
806
806
|
if (asChild && children) {
|
|
807
807
|
return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, disabled: disabled, "data-testid": TestIds.productQuantityInput, customElement: children, customElementProps: {} }));
|
|
808
808
|
}
|
|
@@ -822,7 +822,7 @@ export const ProductQuantityInput = React.forwardRef((props, ref) => {
|
|
|
822
822
|
*/
|
|
823
823
|
export const ProductQuantityIncrement = React.forwardRef((props, ref) => {
|
|
824
824
|
const { asChild, children, className } = props;
|
|
825
|
-
return (_jsx(
|
|
825
|
+
return (_jsx(CoreProductVariantSelector.Stock, { children: ({ selectedQuantity, availableQuantity, inStock, isPreOrderEnabled, }) => {
|
|
826
826
|
const disabled = (!!availableQuantity && selectedQuantity >= availableQuantity) ||
|
|
827
827
|
(!inStock && !isPreOrderEnabled);
|
|
828
828
|
if (asChild && children) {
|
|
@@ -859,13 +859,13 @@ export const ProductQuantityIncrement = React.forwardRef((props, ref) => {
|
|
|
859
859
|
*/
|
|
860
860
|
export const ProductQuantityRaw = React.forwardRef((props, ref) => {
|
|
861
861
|
const { asChild, children, className } = props;
|
|
862
|
-
return (_jsx(
|
|
862
|
+
return (_jsx(CoreProductVariantSelector.Stock, { children: (renderProps) => {
|
|
863
863
|
return (_jsx(AsChildSlot, { ref: ref, customElement: children, asChild: asChild, className: className, "data-testid": TestIds.productQuantityRaw, customElementProps: renderProps }));
|
|
864
864
|
} }));
|
|
865
865
|
});
|
|
866
866
|
export const ProductVariantSelectorReset = React.forwardRef((props, ref) => {
|
|
867
867
|
const { asChild, children, className } = props;
|
|
868
|
-
return (_jsx(
|
|
868
|
+
return (_jsx(CoreProductVariantSelector.Reset, { children: (renderProps) => {
|
|
869
869
|
if (!renderProps.hasSelections) {
|
|
870
870
|
return null;
|
|
871
871
|
}
|
|
@@ -879,7 +879,7 @@ export const ProductVariantSelectorReset = React.forwardRef((props, ref) => {
|
|
|
879
879
|
*/
|
|
880
880
|
export const ProductActionAddToCart = React.forwardRef((props, ref) => {
|
|
881
881
|
const { asChild, children, className, label, loadingState } = props;
|
|
882
|
-
return (_jsx(
|
|
882
|
+
return (_jsx(CoreSelectedVariant.Actions, { children: ({ lineItems, canAddToCart, isLoading, addToCart, isPreOrderEnabled, }) => {
|
|
883
883
|
if (isPreOrderEnabled) {
|
|
884
884
|
return null;
|
|
885
885
|
}
|
|
@@ -901,7 +901,7 @@ export const ProductActionAddToCart = React.forwardRef((props, ref) => {
|
|
|
901
901
|
*/
|
|
902
902
|
export const ProductActionBuyNow = React.forwardRef((props, ref) => {
|
|
903
903
|
const { asChild, children, className, label, loadingState } = props;
|
|
904
|
-
return (_jsx(
|
|
904
|
+
return (_jsx(CoreSelectedVariant.Actions, { children: ({ lineItems, canAddToCart, isLoading, buyNow, inStock, isPreOrderEnabled, }) => {
|
|
905
905
|
if (!inStock || isPreOrderEnabled) {
|
|
906
906
|
return null;
|
|
907
907
|
}
|
|
@@ -923,7 +923,7 @@ export const ProductActionBuyNow = React.forwardRef((props, ref) => {
|
|
|
923
923
|
*/
|
|
924
924
|
export const ProductActionPreOrder = React.forwardRef((props, ref) => {
|
|
925
925
|
const { asChild, children, className, label, loadingState } = props;
|
|
926
|
-
return (_jsx(
|
|
926
|
+
return (_jsx(CoreSelectedVariant.Actions, { children: ({ lineItems, isLoading, addToCart, isPreOrderEnabled }) => {
|
|
927
927
|
if (!isPreOrderEnabled) {
|
|
928
928
|
return null;
|
|
929
929
|
}
|
|
@@ -1038,7 +1038,7 @@ function getStockStatusMessage(inStock, isPreOrderEnabled, availabilityStatus, l
|
|
|
1038
1038
|
*/
|
|
1039
1039
|
export const ProductVariantStock = React.forwardRef((props, ref) => {
|
|
1040
1040
|
const { asChild, children, className, labels } = props;
|
|
1041
|
-
return (_jsx(
|
|
1041
|
+
return (_jsx(CoreProductVariantSelector.Stock, { children: ({ inStock, isPreOrderEnabled, availabilityStatus, currentVariantId, }) => {
|
|
1042
1042
|
// Only render if we have a current variant selected
|
|
1043
1043
|
if (!currentVariantId && !availabilityStatus) {
|
|
1044
1044
|
return null;
|
|
@@ -1085,7 +1085,7 @@ export const ProductVariantStock = React.forwardRef((props, ref) => {
|
|
|
1085
1085
|
*/
|
|
1086
1086
|
export const ProductVariantSKU = React.forwardRef((props, ref) => {
|
|
1087
1087
|
const { asChild, children, className } = props;
|
|
1088
|
-
return (_jsx(
|
|
1088
|
+
return (_jsx(CoreSelectedVariant.Details, { children: ({ sku }) => {
|
|
1089
1089
|
// Don't render anything if there's no SKU
|
|
1090
1090
|
if (!sku) {
|
|
1091
1091
|
return null;
|
|
@@ -1119,7 +1119,7 @@ export const ProductVariantSKU = React.forwardRef((props, ref) => {
|
|
|
1119
1119
|
*/
|
|
1120
1120
|
export const ProductVariantWeight = React.forwardRef((props, ref) => {
|
|
1121
1121
|
const { asChild, children, className } = props;
|
|
1122
|
-
return (_jsx(
|
|
1122
|
+
return (_jsx(CoreSelectedVariant.Details, { children: ({ weight }) => {
|
|
1123
1123
|
// Don't render anything if there's no weight
|
|
1124
1124
|
if (!weight) {
|
|
1125
1125
|
return null;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wix/headless-stores",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.96",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"prebuild": "cd ../media && yarn build && cd ../ecom && yarn build",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"@wix/auto_sdk_stores_read-only-variants-v-3": "^1.0.23",
|
|
63
63
|
"@wix/ecom": "^1.0.1278",
|
|
64
64
|
"@wix/essentials": "^0.1.24",
|
|
65
|
-
"@wix/headless-ecom": "0.0.
|
|
65
|
+
"@wix/headless-ecom": "0.0.32",
|
|
66
66
|
"@wix/headless-media": "0.0.15",
|
|
67
67
|
"@wix/headless-utils": "0.0.4",
|
|
68
68
|
"@wix/redirects": "^1.0.83",
|