@faststore/components 3.41.3 → 3.42.0
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/dist/cjs/molecules/SearchProducts/SearchProductItemContent.d.ts +24 -0
- package/dist/cjs/molecules/SearchProducts/SearchProductItemContent.js +9 -3
- package/dist/cjs/molecules/SearchProducts/SearchProductItemContent.js.map +1 -1
- package/dist/cjs/molecules/SearchProducts/SearchProductItemControl.d.ts +50 -0
- package/dist/cjs/molecules/SearchProducts/SearchProductItemControl.js +62 -0
- package/dist/cjs/molecules/SearchProducts/SearchProductItemControl.js.map +1 -0
- package/dist/cjs/organisms/SKUMatrix/SKUMatrixSidebar.js +1 -1
- package/dist/cjs/organisms/SKUMatrix/SKUMatrixSidebar.js.map +1 -1
- package/dist/esm/molecules/SearchProducts/SearchProductItemContent.d.ts +24 -0
- package/dist/esm/molecules/SearchProducts/SearchProductItemContent.js +10 -4
- package/dist/esm/molecules/SearchProducts/SearchProductItemContent.js.map +1 -1
- package/dist/esm/molecules/SearchProducts/SearchProductItemControl.d.ts +50 -0
- package/dist/esm/molecules/SearchProducts/SearchProductItemControl.js +59 -0
- package/dist/esm/molecules/SearchProducts/SearchProductItemControl.js.map +1 -0
- package/dist/esm/organisms/SKUMatrix/SKUMatrixSidebar.js +1 -1
- package/dist/esm/organisms/SKUMatrix/SKUMatrixSidebar.js.map +1 -1
- package/package.json +2 -2
- package/src/molecules/SearchProducts/SearchProductItemContent.tsx +61 -10
- package/src/molecules/SearchProducts/SearchProductItemControl.tsx +199 -0
- package/src/organisms/SKUMatrix/SKUMatrixSidebar.tsx +1 -1
|
@@ -9,6 +9,30 @@ export interface SearchProductItemContentProps {
|
|
|
9
9
|
* Specifies product's prices.
|
|
10
10
|
*/
|
|
11
11
|
price: PriceDefinition;
|
|
12
|
+
/**
|
|
13
|
+
* Quick order settings.
|
|
14
|
+
*/
|
|
15
|
+
quickOrder?: {
|
|
16
|
+
enabled: boolean;
|
|
17
|
+
outOfStockLabel: string;
|
|
18
|
+
availability: boolean;
|
|
19
|
+
hasVariants: boolean;
|
|
20
|
+
skuMatrixControl: React.ReactNode;
|
|
21
|
+
quantity: number;
|
|
22
|
+
min?: number;
|
|
23
|
+
max?: number;
|
|
24
|
+
onChangeQuantity(value: number): void;
|
|
25
|
+
buyProps?: {
|
|
26
|
+
onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
27
|
+
'data-testid': string;
|
|
28
|
+
'data-sku': string;
|
|
29
|
+
'data-seller': string;
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
/**
|
|
33
|
+
* Event emitted when value is out of the min and max bounds
|
|
34
|
+
*/
|
|
35
|
+
onValidateBlur?: (min: number, maxValue: number, quantity: number) => void;
|
|
12
36
|
}
|
|
13
37
|
declare const SearchProductItemContent: React.ForwardRefExoticComponent<SearchProductItemContentProps & React.RefAttributes<HTMLElement>>;
|
|
14
38
|
export default SearchProductItemContent;
|
|
@@ -3,10 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
const tslib_1 = require("tslib");
|
|
4
4
|
const react_1 = tslib_1.__importStar(require("react"));
|
|
5
5
|
const __1 = require("../..");
|
|
6
|
-
const
|
|
6
|
+
const SearchProductItemControl_1 = tslib_1.__importDefault(require("./SearchProductItemControl"));
|
|
7
|
+
const SearchProductItemContent = (0, react_1.forwardRef)(function SearchProductItemContent({ price, title, quickOrder, onValidateBlur, ...otherProps }, ref) {
|
|
8
|
+
const renderProductItemContent = (0, react_1.useCallback)(() => {
|
|
9
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
10
|
+
react_1.default.createElement("p", { "data-fs-search-product-item-title": true }, title),
|
|
11
|
+
price.value !== 0 && (react_1.default.createElement(__1.ProductPrice, { "data-fs-search-product-item-prices": true, listPrice: price.listPrice, value: price.value, formatter: price.formatter }))));
|
|
12
|
+
}, [price.formatter, price.listPrice, price.value, title]);
|
|
7
13
|
return (react_1.default.createElement("section", { ref: ref, "data-fs-search-product-item-content": true, ...otherProps },
|
|
8
|
-
|
|
9
|
-
|
|
14
|
+
!quickOrder?.enabled && renderProductItemContent(),
|
|
15
|
+
quickOrder?.enabled && (react_1.default.createElement(SearchProductItemControl_1.default, { outOfStockLabel: quickOrder.outOfStockLabel, availability: quickOrder.availability, hasVariants: quickOrder.hasVariants, skuMatrixControl: quickOrder.skuMatrixControl, quantity: quickOrder.quantity, onChangeQuantity: quickOrder.onChangeQuantity, max: quickOrder.max, onValidateBlur: onValidateBlur, ...quickOrder.buyProps }, renderProductItemContent()))));
|
|
10
16
|
});
|
|
11
17
|
exports.default = SearchProductItemContent;
|
|
12
18
|
//# sourceMappingURL=SearchProductItemContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchProductItemContent.js","sourceRoot":"","sources":["../../../../src/molecules/SearchProducts/SearchProductItemContent.tsx"],"names":[],"mappings":";;;AAAA,
|
|
1
|
+
{"version":3,"file":"SearchProductItemContent.js","sourceRoot":"","sources":["../../../../src/molecules/SearchProducts/SearchProductItemContent.tsx"],"names":[],"mappings":";;;AAAA,uDAAsD;AACtD,6BAAoC;AACpC,kGAAiE;AAuCjE,MAAM,wBAAwB,GAAG,IAAA,kBAAU,EAGzC,SAAS,wBAAwB,CACjC,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,GAAG,UAAU,EAAE,EAC3D,GAAG;IAEH,MAAM,wBAAwB,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAChD,OAAO,CACL;YACE,kFAAsC,KAAK,CAAK;YAC/C,KAAK,CAAC,KAAK,KAAK,CAAC,IAAI,CACpB,8BAAC,gBAAY,gDAEX,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,SAAS,EAAE,KAAK,CAAC,SAAS,GAC1B,CACH,CACA,CACJ,CAAA;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAA;IAE1D,OAAO,CACL,2CAAS,GAAG,EAAE,GAAG,kDAA0C,UAAU;QAClE,CAAC,UAAU,EAAE,OAAO,IAAI,wBAAwB,EAAE;QAElD,UAAU,EAAE,OAAO,IAAI,CACtB,8BAAC,kCAAwB,IACvB,eAAe,EAAE,UAAU,CAAC,eAAe,EAC3C,YAAY,EAAE,UAAU,CAAC,YAAY,EACrC,WAAW,EAAE,UAAU,CAAC,WAAW,EACnC,gBAAgB,EAAE,UAAU,CAAC,gBAAgB,EAC7C,QAAQ,EAAE,UAAU,CAAC,QAAQ,EAC7B,gBAAgB,EAAE,UAAU,CAAC,gBAAgB,EAC7C,GAAG,EAAE,UAAU,CAAC,GAAG,EACnB,cAAc,EAAE,cAAc,KAC1B,UAAU,CAAC,QAAQ,IAEtB,wBAAwB,EAAE,CACF,CAC5B,CACO,CACX,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,kBAAe,wBAAwB,CAAA"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import React, { type HTMLAttributes } from 'react';
|
|
2
|
+
import type { MouseEvent, ReactNode } from 'react';
|
|
3
|
+
export interface SearchProductItemControlProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onClick'> {
|
|
4
|
+
/**
|
|
5
|
+
* Renders child elements.
|
|
6
|
+
*/
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Specifies the label for out-of-stock products.
|
|
10
|
+
*/
|
|
11
|
+
outOfStockLabel: string;
|
|
12
|
+
/**
|
|
13
|
+
* Specifies whether the product is available.
|
|
14
|
+
*/
|
|
15
|
+
availability: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Specifies whether the product has variations.
|
|
18
|
+
*/
|
|
19
|
+
hasVariants: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Renders the elements of the SKUMatrix.
|
|
22
|
+
*/
|
|
23
|
+
skuMatrixControl: ReactNode;
|
|
24
|
+
/**
|
|
25
|
+
* The maximum value the input can receive
|
|
26
|
+
*/
|
|
27
|
+
max?: number;
|
|
28
|
+
/**
|
|
29
|
+
* The minimum value the input can receive
|
|
30
|
+
*/
|
|
31
|
+
min?: number;
|
|
32
|
+
/**
|
|
33
|
+
* Specifies the quantity to be added to the cart.
|
|
34
|
+
*/
|
|
35
|
+
quantity: number;
|
|
36
|
+
/**
|
|
37
|
+
* Callback that fires when the add to cart button is clicked.
|
|
38
|
+
*/
|
|
39
|
+
onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
|
|
40
|
+
/**
|
|
41
|
+
* Callback that fires when the input value changes.
|
|
42
|
+
*/
|
|
43
|
+
onChangeQuantity: (value: number) => void;
|
|
44
|
+
/**
|
|
45
|
+
* Event emitted when value is out of the min and max bounds
|
|
46
|
+
*/
|
|
47
|
+
onValidateBlur?: (min: number, maxValue: number, quantity: number) => void;
|
|
48
|
+
}
|
|
49
|
+
declare const SearchProductItemControl: React.ForwardRefExoticComponent<SearchProductItemControlProps & React.RefAttributes<HTMLDivElement>>;
|
|
50
|
+
export default SearchProductItemControl;
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const tslib_1 = require("tslib");
|
|
4
|
+
const react_1 = tslib_1.__importStar(require("react"));
|
|
5
|
+
const __1 = require("../..");
|
|
6
|
+
const SearchProductItemControl = (0, react_1.forwardRef)(function SearchProductItemControl({ availability, children, hasVariants, skuMatrixControl, quantity, outOfStockLabel, min = 1, max = undefined, onClick, onChangeQuantity, onValidateBlur, ...otherProps }, ref) {
|
|
7
|
+
const [statusAddToCart, setStatusAddToCart] = (0, react_1.useState)('default');
|
|
8
|
+
const showSKUMatrixControl = availability && hasVariants;
|
|
9
|
+
function stopPropagationClick(e) {
|
|
10
|
+
e.preventDefault();
|
|
11
|
+
e.stopPropagation();
|
|
12
|
+
}
|
|
13
|
+
function handleAddToCart(event) {
|
|
14
|
+
if (onClick) {
|
|
15
|
+
setStatusAddToCart('inProgress');
|
|
16
|
+
setTimeout(() => {
|
|
17
|
+
setStatusAddToCart('completed');
|
|
18
|
+
onClick(event);
|
|
19
|
+
}, 1000);
|
|
20
|
+
setTimeout(() => {
|
|
21
|
+
setStatusAddToCart('default');
|
|
22
|
+
onChangeQuantity(1);
|
|
23
|
+
}, 2000);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
const getIcon = (0, react_1.useCallback)(() => {
|
|
27
|
+
switch (statusAddToCart) {
|
|
28
|
+
case 'inProgress':
|
|
29
|
+
return react_1.default.createElement(__1.Loader, null);
|
|
30
|
+
case 'completed':
|
|
31
|
+
return react_1.default.createElement(__1.Icon, { name: "Checked", width: 24, height: 24 });
|
|
32
|
+
default:
|
|
33
|
+
return react_1.default.createElement(__1.Icon, { name: "ShoppingCart", width: 24, height: 24 });
|
|
34
|
+
}
|
|
35
|
+
}, [statusAddToCart]);
|
|
36
|
+
function validateBlur() {
|
|
37
|
+
const maxValue = max ?? (min ? Math.max(quantity, min) : quantity);
|
|
38
|
+
const isOutOfBounds = quantity > maxValue || quantity < min;
|
|
39
|
+
const minQuantity = quantity < min ? min : quantity;
|
|
40
|
+
const realQuantity = quantity > maxValue ? maxValue : minQuantity;
|
|
41
|
+
if (isOutOfBounds) {
|
|
42
|
+
onValidateBlur?.(min, maxValue, realQuantity);
|
|
43
|
+
}
|
|
44
|
+
onChangeQuantity(realQuantity);
|
|
45
|
+
}
|
|
46
|
+
return (react_1.default.createElement("div", { ref: ref, "data-fs-search-product-item-control": true, ...otherProps },
|
|
47
|
+
react_1.default.createElement("div", { "data-fs-search-product-item-control-content": true },
|
|
48
|
+
!availability && (react_1.default.createElement(__1.Badge, { "data-fs-search-product-item-control-badge": true, variant: "warning" }, outOfStockLabel)),
|
|
49
|
+
children),
|
|
50
|
+
availability && !hasVariants && (react_1.default.createElement("div", { "data-fs-search-product-item-control-actions": true, role: "group", "aria-hidden": true, tabIndex: -1, onKeyDown: () => { }, onClick: stopPropagationClick },
|
|
51
|
+
react_1.default.createElement("div", { "data-fs-search-product-item-control-actions-desktop": true },
|
|
52
|
+
react_1.default.createElement(__1.QuantitySelector, { disabled: statusAddToCart !== 'default', max: max, onValidateBlur: onValidateBlur, initial: quantity, onChange: onChangeQuantity })),
|
|
53
|
+
react_1.default.createElement("div", { "data-fs-search-product-item-control-actions-mobile": true },
|
|
54
|
+
react_1.default.createElement(__1.Input, { "data-fs-product-item-control-input": true, min: 1, value: quantity, onChange: (e) => onChangeQuantity(e.target.value ? Number(e.target.value) : 0), onBlur: validateBlur, onInput: (event) => {
|
|
55
|
+
const input = event.currentTarget;
|
|
56
|
+
input.value = input.value.replace(/\D/g, '');
|
|
57
|
+
} })),
|
|
58
|
+
react_1.default.createElement(__1.IconButton, { variant: "primary", "aria-label": "Add product to cart", onClick: handleAddToCart, disabled: statusAddToCart === 'inProgress', icon: getIcon() }))),
|
|
59
|
+
showSKUMatrixControl && (react_1.default.createElement("div", { onClick: stopPropagationClick, "aria-hidden": true, tabIndex: -1, onKeyDown: () => { } }, skuMatrixControl))));
|
|
60
|
+
});
|
|
61
|
+
exports.default = SearchProductItemControl;
|
|
62
|
+
//# sourceMappingURL=SearchProductItemControl.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SearchProductItemControl.js","sourceRoot":"","sources":["../../../../src/molecules/SearchProducts/SearchProductItemControl.tsx"],"names":[],"mappings":"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"}
|
|
@@ -20,7 +20,7 @@ function SKUMatrixSidebar({ title, direction = 'rightSide', size = 'partial', ch
|
|
|
20
20
|
}), { amount: 0, subtotal: 0 });
|
|
21
21
|
}, [allVariantProducts]);
|
|
22
22
|
function resetQuantityItems() {
|
|
23
|
-
setAllVariantProducts((prev) => prev.map((item) => ({ ...item,
|
|
23
|
+
setAllVariantProducts((prev) => prev.map((item) => ({ ...item, selectedCount: 0 })));
|
|
24
24
|
}
|
|
25
25
|
function onClose() {
|
|
26
26
|
resetQuantityItems();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SKUMatrixSidebar.js","sourceRoot":"","sources":["../../../../src/organisms/SKUMatrix/SKUMatrixSidebar.tsx"],"names":[],"mappings":";;;AAEA,uDAAsC;AACtC,6BAAiE;AACjE,oEAAmC;AACnC,sEAA8D;AAC9D,uCAAgE;AAChE,iDAM8B;AAC9B,kEAA8E;AAY9E,MAAM,sBAAsB,GAA4C,CAAC,EACvE,GAAG,EACH,GAAG,EACH,GAAG,UAAU,EACd,EAAE,EAAE,CAAC,uCAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,KAAM,UAAU,GAAI,CAAA;AAyCjD,SAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,SAAS,GAAG,WAAW,EACvB,IAAI,GAAG,SAAS,EAChB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,SAAS,EACT,cAAc,GAAG,sBAAsB,EACvC,QAAQ,EAAE,EAAE,OAAO,EAAE,gBAAgB,EAAE,GAAG,QAAQ,EAAE,EACpD,YAAY,EACZ,GAAG,UAAU,EACS;IACtB,MAAM,EACJ,MAAM,EACN,SAAS,EACT,qBAAqB,EACrB,kBAAkB,EAClB,oBAAoB,GACrB,GAAG,IAAA,oBAAY,GAAE,CAAA;IAClB,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,aAAK,GAAE,CAAA;IAC7B,MAAM,EAAE,IAAI,EAAE,GAAG,IAAA,qBAAa,GAAE,CAAA;IAEhC,MAAM,WAAW,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC/B,OAAO,kBAAkB,CAAC,MAAM,CAC9B,CAAC,GAAG,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC;YACjB,MAAM,EAAE,GAAG,CAAC,MAAM,GAAG,OAAO,CAAC,aAAa;YAC1C,QAAQ,EAAE,GAAG,CAAC,QAAQ,GAAG,OAAO,CAAC,aAAa,GAAG,OAAO,CAAC,KAAK;SAC/D,CAAC,EACF,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAC3B,CAAA;IACH,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAA;IAExB,SAAS,kBAAkB;QACzB,qBAAqB,CAAC,CAAC,IAAI,EAAE,EAAE,CAC7B,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"SKUMatrixSidebar.js","sourceRoot":"","sources":["../../../../src/organisms/SKUMatrix/SKUMatrixSidebar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,6 +9,30 @@ export interface SearchProductItemContentProps {
|
|
|
9
9
|
* Specifies product's prices.
|
|
10
10
|
*/
|
|
11
11
|
price: PriceDefinition;
|
|
12
|
+
/**
|
|
13
|
+
* Quick order settings.
|
|
14
|
+
*/
|
|
15
|
+
quickOrder?: {
|
|
16
|
+
enabled: boolean;
|
|
17
|
+
outOfStockLabel: string;
|
|
18
|
+
availability: boolean;
|
|
19
|
+
hasVariants: boolean;
|
|
20
|
+
skuMatrixControl: React.ReactNode;
|
|
21
|
+
quantity: number;
|
|
22
|
+
min?: number;
|
|
23
|
+
max?: number;
|
|
24
|
+
onChangeQuantity(value: number): void;
|
|
25
|
+
buyProps?: {
|
|
26
|
+
onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
27
|
+
'data-testid': string;
|
|
28
|
+
'data-sku': string;
|
|
29
|
+
'data-seller': string;
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
/**
|
|
33
|
+
* Event emitted when value is out of the min and max bounds
|
|
34
|
+
*/
|
|
35
|
+
onValidateBlur?: (min: number, maxValue: number, quantity: number) => void;
|
|
12
36
|
}
|
|
13
37
|
declare const SearchProductItemContent: React.ForwardRefExoticComponent<SearchProductItemContentProps & React.RefAttributes<HTMLElement>>;
|
|
14
38
|
export default SearchProductItemContent;
|
|
@@ -1,9 +1,15 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
1
|
+
import React, { forwardRef, useCallback } from 'react';
|
|
2
2
|
import { ProductPrice } from '../..';
|
|
3
|
-
|
|
3
|
+
import SearchProductItemControl from './SearchProductItemControl';
|
|
4
|
+
const SearchProductItemContent = forwardRef(function SearchProductItemContent({ price, title, quickOrder, onValidateBlur, ...otherProps }, ref) {
|
|
5
|
+
const renderProductItemContent = useCallback(() => {
|
|
6
|
+
return (React.createElement(React.Fragment, null,
|
|
7
|
+
React.createElement("p", { "data-fs-search-product-item-title": true }, title),
|
|
8
|
+
price.value !== 0 && (React.createElement(ProductPrice, { "data-fs-search-product-item-prices": true, listPrice: price.listPrice, value: price.value, formatter: price.formatter }))));
|
|
9
|
+
}, [price.formatter, price.listPrice, price.value, title]);
|
|
4
10
|
return (React.createElement("section", { ref: ref, "data-fs-search-product-item-content": true, ...otherProps },
|
|
5
|
-
|
|
6
|
-
|
|
11
|
+
!quickOrder?.enabled && renderProductItemContent(),
|
|
12
|
+
quickOrder?.enabled && (React.createElement(SearchProductItemControl, { outOfStockLabel: quickOrder.outOfStockLabel, availability: quickOrder.availability, hasVariants: quickOrder.hasVariants, skuMatrixControl: quickOrder.skuMatrixControl, quantity: quickOrder.quantity, onChangeQuantity: quickOrder.onChangeQuantity, max: quickOrder.max, onValidateBlur: onValidateBlur, ...quickOrder.buyProps }, renderProductItemContent()))));
|
|
7
13
|
});
|
|
8
14
|
export default SearchProductItemContent;
|
|
9
15
|
//# sourceMappingURL=SearchProductItemContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchProductItemContent.js","sourceRoot":"","sources":["../../../../src/molecules/SearchProducts/SearchProductItemContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"SearchProductItemContent.js","sourceRoot":"","sources":["../../../../src/molecules/SearchProducts/SearchProductItemContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACpC,OAAO,wBAAwB,MAAM,4BAA4B,CAAA;AAuCjE,MAAM,wBAAwB,GAAG,UAAU,CAGzC,SAAS,wBAAwB,CACjC,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,GAAG,UAAU,EAAE,EAC3D,GAAG;IAEH,MAAM,wBAAwB,GAAG,WAAW,CAAC,GAAG,EAAE;QAChD,OAAO,CACL;YACE,wEAAsC,KAAK,CAAK;YAC/C,KAAK,CAAC,KAAK,KAAK,CAAC,IAAI,CACpB,oBAAC,YAAY,gDAEX,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,SAAS,EAAE,KAAK,CAAC,SAAS,GAC1B,CACH,CACA,CACJ,CAAA;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAA;IAE1D,OAAO,CACL,iCAAS,GAAG,EAAE,GAAG,kDAA0C,UAAU;QAClE,CAAC,UAAU,EAAE,OAAO,IAAI,wBAAwB,EAAE;QAElD,UAAU,EAAE,OAAO,IAAI,CACtB,oBAAC,wBAAwB,IACvB,eAAe,EAAE,UAAU,CAAC,eAAe,EAC3C,YAAY,EAAE,UAAU,CAAC,YAAY,EACrC,WAAW,EAAE,UAAU,CAAC,WAAW,EACnC,gBAAgB,EAAE,UAAU,CAAC,gBAAgB,EAC7C,QAAQ,EAAE,UAAU,CAAC,QAAQ,EAC7B,gBAAgB,EAAE,UAAU,CAAC,gBAAgB,EAC7C,GAAG,EAAE,UAAU,CAAC,GAAG,EACnB,cAAc,EAAE,cAAc,KAC1B,UAAU,CAAC,QAAQ,IAEtB,wBAAwB,EAAE,CACF,CAC5B,CACO,CACX,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,wBAAwB,CAAA"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import React, { type HTMLAttributes } from 'react';
|
|
2
|
+
import type { MouseEvent, ReactNode } from 'react';
|
|
3
|
+
export interface SearchProductItemControlProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onClick'> {
|
|
4
|
+
/**
|
|
5
|
+
* Renders child elements.
|
|
6
|
+
*/
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Specifies the label for out-of-stock products.
|
|
10
|
+
*/
|
|
11
|
+
outOfStockLabel: string;
|
|
12
|
+
/**
|
|
13
|
+
* Specifies whether the product is available.
|
|
14
|
+
*/
|
|
15
|
+
availability: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Specifies whether the product has variations.
|
|
18
|
+
*/
|
|
19
|
+
hasVariants: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Renders the elements of the SKUMatrix.
|
|
22
|
+
*/
|
|
23
|
+
skuMatrixControl: ReactNode;
|
|
24
|
+
/**
|
|
25
|
+
* The maximum value the input can receive
|
|
26
|
+
*/
|
|
27
|
+
max?: number;
|
|
28
|
+
/**
|
|
29
|
+
* The minimum value the input can receive
|
|
30
|
+
*/
|
|
31
|
+
min?: number;
|
|
32
|
+
/**
|
|
33
|
+
* Specifies the quantity to be added to the cart.
|
|
34
|
+
*/
|
|
35
|
+
quantity: number;
|
|
36
|
+
/**
|
|
37
|
+
* Callback that fires when the add to cart button is clicked.
|
|
38
|
+
*/
|
|
39
|
+
onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
|
|
40
|
+
/**
|
|
41
|
+
* Callback that fires when the input value changes.
|
|
42
|
+
*/
|
|
43
|
+
onChangeQuantity: (value: number) => void;
|
|
44
|
+
/**
|
|
45
|
+
* Event emitted when value is out of the min and max bounds
|
|
46
|
+
*/
|
|
47
|
+
onValidateBlur?: (min: number, maxValue: number, quantity: number) => void;
|
|
48
|
+
}
|
|
49
|
+
declare const SearchProductItemControl: React.ForwardRefExoticComponent<SearchProductItemControlProps & React.RefAttributes<HTMLDivElement>>;
|
|
50
|
+
export default SearchProductItemControl;
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import React, { forwardRef, useCallback, useState, } from 'react';
|
|
2
|
+
import { Badge, Icon, IconButton, Input, Loader, QuantitySelector } from '../..';
|
|
3
|
+
const SearchProductItemControl = forwardRef(function SearchProductItemControl({ availability, children, hasVariants, skuMatrixControl, quantity, outOfStockLabel, min = 1, max = undefined, onClick, onChangeQuantity, onValidateBlur, ...otherProps }, ref) {
|
|
4
|
+
const [statusAddToCart, setStatusAddToCart] = useState('default');
|
|
5
|
+
const showSKUMatrixControl = availability && hasVariants;
|
|
6
|
+
function stopPropagationClick(e) {
|
|
7
|
+
e.preventDefault();
|
|
8
|
+
e.stopPropagation();
|
|
9
|
+
}
|
|
10
|
+
function handleAddToCart(event) {
|
|
11
|
+
if (onClick) {
|
|
12
|
+
setStatusAddToCart('inProgress');
|
|
13
|
+
setTimeout(() => {
|
|
14
|
+
setStatusAddToCart('completed');
|
|
15
|
+
onClick(event);
|
|
16
|
+
}, 1000);
|
|
17
|
+
setTimeout(() => {
|
|
18
|
+
setStatusAddToCart('default');
|
|
19
|
+
onChangeQuantity(1);
|
|
20
|
+
}, 2000);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
const getIcon = useCallback(() => {
|
|
24
|
+
switch (statusAddToCart) {
|
|
25
|
+
case 'inProgress':
|
|
26
|
+
return React.createElement(Loader, null);
|
|
27
|
+
case 'completed':
|
|
28
|
+
return React.createElement(Icon, { name: "Checked", width: 24, height: 24 });
|
|
29
|
+
default:
|
|
30
|
+
return React.createElement(Icon, { name: "ShoppingCart", width: 24, height: 24 });
|
|
31
|
+
}
|
|
32
|
+
}, [statusAddToCart]);
|
|
33
|
+
function validateBlur() {
|
|
34
|
+
const maxValue = max ?? (min ? Math.max(quantity, min) : quantity);
|
|
35
|
+
const isOutOfBounds = quantity > maxValue || quantity < min;
|
|
36
|
+
const minQuantity = quantity < min ? min : quantity;
|
|
37
|
+
const realQuantity = quantity > maxValue ? maxValue : minQuantity;
|
|
38
|
+
if (isOutOfBounds) {
|
|
39
|
+
onValidateBlur?.(min, maxValue, realQuantity);
|
|
40
|
+
}
|
|
41
|
+
onChangeQuantity(realQuantity);
|
|
42
|
+
}
|
|
43
|
+
return (React.createElement("div", { ref: ref, "data-fs-search-product-item-control": true, ...otherProps },
|
|
44
|
+
React.createElement("div", { "data-fs-search-product-item-control-content": true },
|
|
45
|
+
!availability && (React.createElement(Badge, { "data-fs-search-product-item-control-badge": true, variant: "warning" }, outOfStockLabel)),
|
|
46
|
+
children),
|
|
47
|
+
availability && !hasVariants && (React.createElement("div", { "data-fs-search-product-item-control-actions": true, role: "group", "aria-hidden": true, tabIndex: -1, onKeyDown: () => { }, onClick: stopPropagationClick },
|
|
48
|
+
React.createElement("div", { "data-fs-search-product-item-control-actions-desktop": true },
|
|
49
|
+
React.createElement(QuantitySelector, { disabled: statusAddToCart !== 'default', max: max, onValidateBlur: onValidateBlur, initial: quantity, onChange: onChangeQuantity })),
|
|
50
|
+
React.createElement("div", { "data-fs-search-product-item-control-actions-mobile": true },
|
|
51
|
+
React.createElement(Input, { "data-fs-product-item-control-input": true, min: 1, value: quantity, onChange: (e) => onChangeQuantity(e.target.value ? Number(e.target.value) : 0), onBlur: validateBlur, onInput: (event) => {
|
|
52
|
+
const input = event.currentTarget;
|
|
53
|
+
input.value = input.value.replace(/\D/g, '');
|
|
54
|
+
} })),
|
|
55
|
+
React.createElement(IconButton, { variant: "primary", "aria-label": "Add product to cart", onClick: handleAddToCart, disabled: statusAddToCart === 'inProgress', icon: getIcon() }))),
|
|
56
|
+
showSKUMatrixControl && (React.createElement("div", { onClick: stopPropagationClick, "aria-hidden": true, tabIndex: -1, onKeyDown: () => { } }, skuMatrixControl))));
|
|
57
|
+
});
|
|
58
|
+
export default SearchProductItemControl;
|
|
59
|
+
//# sourceMappingURL=SearchProductItemControl.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SearchProductItemControl.js","sourceRoot":"","sources":["../../../../src/molecules/SearchProducts/SearchProductItemControl.tsx"],"names":[],"mappings":"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"}
|
|
@@ -17,7 +17,7 @@ function SKUMatrixSidebar({ title, direction = 'rightSide', size = 'partial', ch
|
|
|
17
17
|
}), { amount: 0, subtotal: 0 });
|
|
18
18
|
}, [allVariantProducts]);
|
|
19
19
|
function resetQuantityItems() {
|
|
20
|
-
setAllVariantProducts((prev) => prev.map((item) => ({ ...item,
|
|
20
|
+
setAllVariantProducts((prev) => prev.map((item) => ({ ...item, selectedCount: 0 })));
|
|
21
21
|
}
|
|
22
22
|
function onClose() {
|
|
23
23
|
resetQuantityItems();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SKUMatrixSidebar.js","sourceRoot":"","sources":["../../../../src/organisms/SKUMatrix/SKUMatrixSidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,IAAI,MAAM,kBAAkB,CAAA;AACnC,OAAO,KAA8B,MAAM,mBAAmB,CAAA;AAC9D,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAChE,OAAO,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,SAAS,EACT,QAAQ,GACT,MAAM,uBAAuB,CAAA;AAC9B,OAAO,SAAS,EAAE,EAAE,eAAe,EAAuB,MAAM,cAAc,CAAA;AAY9E,MAAM,sBAAsB,GAA4C,CAAC,EACvE,GAAG,EACH,GAAG,EACH,GAAG,UAAU,EACd,EAAE,EAAE,CAAC,6BAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,KAAM,UAAU,GAAI,CAAA;AAyCjD,SAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,SAAS,GAAG,WAAW,EACvB,IAAI,GAAG,SAAS,EAChB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,SAAS,EACT,cAAc,GAAG,sBAAsB,EACvC,QAAQ,EAAE,EAAE,OAAO,EAAE,gBAAgB,EAAE,GAAG,QAAQ,EAAE,EACpD,YAAY,EACZ,GAAG,UAAU,EACS;IACtB,MAAM,EACJ,MAAM,EACN,SAAS,EACT,qBAAqB,EACrB,kBAAkB,EAClB,oBAAoB,GACrB,GAAG,YAAY,EAAE,CAAA;IAClB,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,CAAA;IAC7B,MAAM,EAAE,IAAI,EAAE,GAAG,aAAa,EAAE,CAAA;IAEhC,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,OAAO,kBAAkB,CAAC,MAAM,CAC9B,CAAC,GAAG,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC;YACjB,MAAM,EAAE,GAAG,CAAC,MAAM,GAAG,OAAO,CAAC,aAAa;YAC1C,QAAQ,EAAE,GAAG,CAAC,QAAQ,GAAG,OAAO,CAAC,aAAa,GAAG,OAAO,CAAC,KAAK;SAC/D,CAAC,EACF,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAC3B,CAAA;IACH,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAA;IAExB,SAAS,kBAAkB;QACzB,qBAAqB,CAAC,CAAC,IAAI,EAAE,EAAE,CAC7B,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"SKUMatrixSidebar.js","sourceRoot":"","sources":["../../../../src/organisms/SKUMatrix/SKUMatrixSidebar.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@faststore/components",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.42.0",
|
|
4
4
|
"main": "dist/cjs/index.js",
|
|
5
5
|
"module": "dist/esm/index.js",
|
|
6
6
|
"typings": "dist/esm/index.d.ts",
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"volta": {
|
|
57
57
|
"extends": "../../package.json"
|
|
58
58
|
},
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "d8814aed0849211cb76d06b880c6d556bf1ac898"
|
|
60
60
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react'
|
|
1
|
+
import React, { forwardRef, useCallback } from 'react'
|
|
2
2
|
import { ProductPrice } from '../..'
|
|
3
|
+
import SearchProductItemControl from './SearchProductItemControl'
|
|
3
4
|
|
|
4
5
|
import type { PriceDefinition } from '../../typings/PriceDefinition'
|
|
5
6
|
|
|
@@ -12,23 +13,73 @@ export interface SearchProductItemContentProps {
|
|
|
12
13
|
* Specifies product's prices.
|
|
13
14
|
*/
|
|
14
15
|
price: PriceDefinition
|
|
16
|
+
/**
|
|
17
|
+
* Quick order settings.
|
|
18
|
+
*/
|
|
19
|
+
quickOrder?: {
|
|
20
|
+
enabled: boolean
|
|
21
|
+
outOfStockLabel: string
|
|
22
|
+
availability: boolean
|
|
23
|
+
hasVariants: boolean
|
|
24
|
+
skuMatrixControl: React.ReactNode
|
|
25
|
+
quantity: number
|
|
26
|
+
min?: number
|
|
27
|
+
max?: number
|
|
28
|
+
onChangeQuantity(value: number): void
|
|
29
|
+
buyProps?: {
|
|
30
|
+
onClick: (e: React.MouseEvent<HTMLButtonElement>) => void
|
|
31
|
+
'data-testid': string
|
|
32
|
+
'data-sku': string
|
|
33
|
+
'data-seller': string
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Event emitted when value is out of the min and max bounds
|
|
38
|
+
*/
|
|
39
|
+
onValidateBlur?: (min: number, maxValue: number, quantity: number) => void
|
|
15
40
|
}
|
|
16
41
|
|
|
17
42
|
const SearchProductItemContent = forwardRef<
|
|
18
43
|
HTMLElement,
|
|
19
44
|
SearchProductItemContentProps
|
|
20
|
-
>(function SearchProductItemContent(
|
|
45
|
+
>(function SearchProductItemContent(
|
|
46
|
+
{ price, title, quickOrder, onValidateBlur, ...otherProps },
|
|
47
|
+
ref
|
|
48
|
+
) {
|
|
49
|
+
const renderProductItemContent = useCallback(() => {
|
|
50
|
+
return (
|
|
51
|
+
<>
|
|
52
|
+
<p data-fs-search-product-item-title>{title}</p>
|
|
53
|
+
{price.value !== 0 && (
|
|
54
|
+
<ProductPrice
|
|
55
|
+
data-fs-search-product-item-prices
|
|
56
|
+
listPrice={price.listPrice}
|
|
57
|
+
value={price.value}
|
|
58
|
+
formatter={price.formatter}
|
|
59
|
+
/>
|
|
60
|
+
)}
|
|
61
|
+
</>
|
|
62
|
+
)
|
|
63
|
+
}, [price.formatter, price.listPrice, price.value, title])
|
|
64
|
+
|
|
21
65
|
return (
|
|
22
66
|
<section ref={ref} data-fs-search-product-item-content {...otherProps}>
|
|
23
|
-
|
|
67
|
+
{!quickOrder?.enabled && renderProductItemContent()}
|
|
24
68
|
|
|
25
|
-
{
|
|
26
|
-
<
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
69
|
+
{quickOrder?.enabled && (
|
|
70
|
+
<SearchProductItemControl
|
|
71
|
+
outOfStockLabel={quickOrder.outOfStockLabel}
|
|
72
|
+
availability={quickOrder.availability}
|
|
73
|
+
hasVariants={quickOrder.hasVariants}
|
|
74
|
+
skuMatrixControl={quickOrder.skuMatrixControl}
|
|
75
|
+
quantity={quickOrder.quantity}
|
|
76
|
+
onChangeQuantity={quickOrder.onChangeQuantity}
|
|
77
|
+
max={quickOrder.max}
|
|
78
|
+
onValidateBlur={onValidateBlur}
|
|
79
|
+
{...quickOrder.buyProps}
|
|
80
|
+
>
|
|
81
|
+
{renderProductItemContent()}
|
|
82
|
+
</SearchProductItemControl>
|
|
32
83
|
)}
|
|
33
84
|
</section>
|
|
34
85
|
)
|
|
@@ -0,0 +1,199 @@
|
|
|
1
|
+
import React, {
|
|
2
|
+
forwardRef,
|
|
3
|
+
type HTMLAttributes,
|
|
4
|
+
useCallback,
|
|
5
|
+
useState,
|
|
6
|
+
} from 'react'
|
|
7
|
+
import { Badge, Icon, IconButton, Input, Loader, QuantitySelector } from '../..'
|
|
8
|
+
|
|
9
|
+
import type { MouseEvent, ReactNode } from 'react'
|
|
10
|
+
|
|
11
|
+
type StatusButtonAddToCartType = 'default' | 'inProgress' | 'completed'
|
|
12
|
+
|
|
13
|
+
export interface SearchProductItemControlProps
|
|
14
|
+
extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onClick'> {
|
|
15
|
+
/**
|
|
16
|
+
* Renders child elements.
|
|
17
|
+
*/
|
|
18
|
+
children: ReactNode
|
|
19
|
+
/**
|
|
20
|
+
* Specifies the label for out-of-stock products.
|
|
21
|
+
*/
|
|
22
|
+
outOfStockLabel: string
|
|
23
|
+
/**
|
|
24
|
+
* Specifies whether the product is available.
|
|
25
|
+
*/
|
|
26
|
+
availability: boolean
|
|
27
|
+
/**
|
|
28
|
+
* Specifies whether the product has variations.
|
|
29
|
+
*/
|
|
30
|
+
hasVariants: boolean
|
|
31
|
+
/**
|
|
32
|
+
* Renders the elements of the SKUMatrix.
|
|
33
|
+
*/
|
|
34
|
+
skuMatrixControl: ReactNode
|
|
35
|
+
/**
|
|
36
|
+
* The maximum value the input can receive
|
|
37
|
+
*/
|
|
38
|
+
max?: number
|
|
39
|
+
/**
|
|
40
|
+
* The minimum value the input can receive
|
|
41
|
+
*/
|
|
42
|
+
min?: number
|
|
43
|
+
/**
|
|
44
|
+
* Specifies the quantity to be added to the cart.
|
|
45
|
+
*/
|
|
46
|
+
quantity: number
|
|
47
|
+
/**
|
|
48
|
+
* Callback that fires when the add to cart button is clicked.
|
|
49
|
+
*/
|
|
50
|
+
onClick?: (e: MouseEvent<HTMLButtonElement>) => void
|
|
51
|
+
/**
|
|
52
|
+
* Callback that fires when the input value changes.
|
|
53
|
+
*/
|
|
54
|
+
onChangeQuantity: (value: number) => void
|
|
55
|
+
/**
|
|
56
|
+
* Event emitted when value is out of the min and max bounds
|
|
57
|
+
*/
|
|
58
|
+
onValidateBlur?: (min: number, maxValue: number, quantity: number) => void
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
const SearchProductItemControl = forwardRef<
|
|
62
|
+
HTMLDivElement,
|
|
63
|
+
SearchProductItemControlProps
|
|
64
|
+
>(function SearchProductItemControl(
|
|
65
|
+
{
|
|
66
|
+
availability,
|
|
67
|
+
children,
|
|
68
|
+
hasVariants,
|
|
69
|
+
skuMatrixControl,
|
|
70
|
+
quantity,
|
|
71
|
+
outOfStockLabel,
|
|
72
|
+
min = 1,
|
|
73
|
+
max = undefined,
|
|
74
|
+
onClick,
|
|
75
|
+
onChangeQuantity,
|
|
76
|
+
onValidateBlur,
|
|
77
|
+
...otherProps
|
|
78
|
+
},
|
|
79
|
+
ref
|
|
80
|
+
) {
|
|
81
|
+
const [statusAddToCart, setStatusAddToCart] =
|
|
82
|
+
useState<StatusButtonAddToCartType>('default')
|
|
83
|
+
|
|
84
|
+
const showSKUMatrixControl = availability && hasVariants
|
|
85
|
+
|
|
86
|
+
function stopPropagationClick(e: MouseEvent) {
|
|
87
|
+
e.preventDefault()
|
|
88
|
+
e.stopPropagation()
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
function handleAddToCart(event: MouseEvent<HTMLButtonElement>) {
|
|
92
|
+
if (onClick) {
|
|
93
|
+
setStatusAddToCart('inProgress')
|
|
94
|
+
|
|
95
|
+
setTimeout(() => {
|
|
96
|
+
setStatusAddToCart('completed')
|
|
97
|
+
onClick(event)
|
|
98
|
+
}, 1000)
|
|
99
|
+
|
|
100
|
+
setTimeout(() => {
|
|
101
|
+
setStatusAddToCart('default')
|
|
102
|
+
onChangeQuantity(1)
|
|
103
|
+
}, 2000)
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
const getIcon = useCallback(() => {
|
|
108
|
+
switch (statusAddToCart) {
|
|
109
|
+
case 'inProgress':
|
|
110
|
+
return <Loader />
|
|
111
|
+
case 'completed':
|
|
112
|
+
return <Icon name="Checked" width={24} height={24} />
|
|
113
|
+
default:
|
|
114
|
+
return <Icon name="ShoppingCart" width={24} height={24} />
|
|
115
|
+
}
|
|
116
|
+
}, [statusAddToCart])
|
|
117
|
+
|
|
118
|
+
function validateBlur() {
|
|
119
|
+
const maxValue = max ?? (min ? Math.max(quantity, min) : quantity)
|
|
120
|
+
const isOutOfBounds = quantity > maxValue || quantity < min
|
|
121
|
+
const minQuantity = quantity < min ? min : quantity
|
|
122
|
+
const realQuantity = quantity > maxValue ? maxValue : minQuantity
|
|
123
|
+
|
|
124
|
+
if (isOutOfBounds) {
|
|
125
|
+
onValidateBlur?.(min, maxValue, realQuantity)
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
onChangeQuantity(realQuantity)
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
return (
|
|
132
|
+
<div ref={ref} data-fs-search-product-item-control {...otherProps}>
|
|
133
|
+
<div data-fs-search-product-item-control-content>
|
|
134
|
+
{!availability && (
|
|
135
|
+
<Badge data-fs-search-product-item-control-badge variant="warning">
|
|
136
|
+
{outOfStockLabel}
|
|
137
|
+
</Badge>
|
|
138
|
+
)}
|
|
139
|
+
{children}
|
|
140
|
+
</div>
|
|
141
|
+
{availability && !hasVariants && (
|
|
142
|
+
<div
|
|
143
|
+
data-fs-search-product-item-control-actions
|
|
144
|
+
role="group"
|
|
145
|
+
aria-hidden={true}
|
|
146
|
+
tabIndex={-1}
|
|
147
|
+
onKeyDown={() => {}}
|
|
148
|
+
onClick={stopPropagationClick}
|
|
149
|
+
>
|
|
150
|
+
<div data-fs-search-product-item-control-actions-desktop>
|
|
151
|
+
<QuantitySelector
|
|
152
|
+
disabled={statusAddToCart !== 'default'}
|
|
153
|
+
max={max}
|
|
154
|
+
onValidateBlur={onValidateBlur}
|
|
155
|
+
initial={quantity}
|
|
156
|
+
onChange={onChangeQuantity}
|
|
157
|
+
/>
|
|
158
|
+
</div>
|
|
159
|
+
|
|
160
|
+
<div data-fs-search-product-item-control-actions-mobile>
|
|
161
|
+
<Input
|
|
162
|
+
data-fs-product-item-control-input
|
|
163
|
+
min={1}
|
|
164
|
+
value={quantity}
|
|
165
|
+
onChange={(e) =>
|
|
166
|
+
onChangeQuantity(e.target.value ? Number(e.target.value) : 0)
|
|
167
|
+
}
|
|
168
|
+
onBlur={validateBlur}
|
|
169
|
+
onInput={(event: React.FormEvent<HTMLInputElement>) => {
|
|
170
|
+
const input = event.currentTarget
|
|
171
|
+
input.value = input.value.replace(/\D/g, '')
|
|
172
|
+
}}
|
|
173
|
+
/>
|
|
174
|
+
</div>
|
|
175
|
+
|
|
176
|
+
<IconButton
|
|
177
|
+
variant="primary"
|
|
178
|
+
aria-label="Add product to cart"
|
|
179
|
+
onClick={handleAddToCart}
|
|
180
|
+
disabled={statusAddToCart === 'inProgress'}
|
|
181
|
+
icon={getIcon()}
|
|
182
|
+
/>
|
|
183
|
+
</div>
|
|
184
|
+
)}
|
|
185
|
+
|
|
186
|
+
{showSKUMatrixControl && (
|
|
187
|
+
<div
|
|
188
|
+
onClick={stopPropagationClick}
|
|
189
|
+
aria-hidden={true}
|
|
190
|
+
tabIndex={-1}
|
|
191
|
+
onKeyDown={() => {}}
|
|
192
|
+
>
|
|
193
|
+
{skuMatrixControl}
|
|
194
|
+
</div>
|
|
195
|
+
)}
|
|
196
|
+
</div>
|
|
197
|
+
)
|
|
198
|
+
})
|
|
199
|
+
export default SearchProductItemControl
|