@faststore/components 3.0.77 → 3.0.85

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 (14) hide show
  1. package/dist/cjs/molecules/OrderSummary/OrderSummary.d.ts +7 -7
  2. package/dist/cjs/molecules/ProductCard/ProductCardContent.d.ts +6 -6
  3. package/dist/cjs/molecules/QuantitySelector/QuantitySelector.d.ts +8 -4
  4. package/dist/cjs/molecules/QuantitySelector/QuantitySelector.js +15 -15
  5. package/dist/cjs/molecules/QuantitySelector/QuantitySelector.js.map +1 -1
  6. package/dist/esm/molecules/OrderSummary/OrderSummary.d.ts +7 -7
  7. package/dist/esm/molecules/ProductCard/ProductCardContent.d.ts +6 -6
  8. package/dist/esm/molecules/QuantitySelector/QuantitySelector.d.ts +8 -4
  9. package/dist/esm/molecules/QuantitySelector/QuantitySelector.js +15 -15
  10. package/dist/esm/molecules/QuantitySelector/QuantitySelector.js.map +1 -1
  11. package/package.json +2 -2
  12. package/src/molecules/OrderSummary/OrderSummary.tsx +7 -7
  13. package/src/molecules/ProductCard/ProductCardContent.tsx +6 -6
  14. package/src/molecules/QuantitySelector/QuantitySelector.tsx +39 -34
package/dist/cjs/molecules/OrderSummary/OrderSummary.d.ts CHANGED
@@ -2,24 +2,24 @@ import React from 'react';
2
2
  import type { HTMLAttributes } from 'react';
3
3
  export interface OrderSummaryProps extends HTMLAttributes<HTMLUListElement> {
4
4
  /**
5
- * ID to find this component in testing tools (e.g.: cypress,
5
+ * ID to find this component in testing tools (e.g., cypress,
6
6
  * testing-library, and jest).
7
7
  */
8
8
  testId?: string;
9
9
  /**
10
- * Label for the subtotal value of the order. Will only show if subtotalValue is provided.
10
+ * Label for the subtotal value of the order. It will only show if subtotalValue is provided.
11
11
  */
12
12
  subtotalLabel?: string;
13
13
  /**
14
- * Subtotal value of the order. If provided, subtotal label and value will be shown.
14
+ * Subtotal value of the order. If provided, a subtotal label and value will be shown.
15
15
  */
16
16
  subtotalValue?: string;
17
17
  /**
18
- * Label for the discount value for the order. Will only show if discountValue is provided.
18
+ * Label for the discount value for the order. It will only show if discountValue is provided.
19
19
  */
20
20
  discountLabel?: string;
21
21
  /**
22
- * Discount value for the order. If provided, discount label and value will be shown.
22
+ * Discount value for the order. If provided, a discount label and value will be shown.
23
23
  */
24
24
  discountValue?: string;
25
25
  /**
@@ -31,11 +31,11 @@ export interface OrderSummaryProps extends HTMLAttributes<HTMLUListElement> {
31
31
  */
32
32
  totalValue?: string;
33
33
  /**
34
- * Enables to include taxes status.
34
+ * Specifies whether the displayed price should include taxes.
35
35
  */
36
36
  includeTaxes?: boolean;
37
37
  /**
38
- * Label to determine if the price is with taxes included.
38
+ * Label to determine if the price includes taxes.
39
39
  */
40
40
  includeTaxesLabel?: string;
41
41
  }
package/dist/cjs/molecules/ProductCard/ProductCardContent.d.ts CHANGED
@@ -12,7 +12,7 @@ export interface ProductCardContentProps extends HTMLAttributes<HTMLElement> {
12
12
  */
13
13
  title: string;
14
14
  /**
15
- * Props for the link from ProductCard component.
15
+ * Props for the link from the ProductCard component.
16
16
  */
17
17
  linkProps?: Partial<LinkProps<LinkElementType>>;
18
18
  /**
@@ -20,7 +20,7 @@ export interface ProductCardContentProps extends HTMLAttributes<HTMLElement> {
20
20
  */
21
21
  price?: PriceDefinition;
22
22
  /**
23
- * Enables a outOfStock status.
23
+ * Enables an outOfStock status.
24
24
  */
25
25
  outOfStock?: boolean;
26
26
  /**
@@ -28,7 +28,7 @@ export interface ProductCardContentProps extends HTMLAttributes<HTMLElement> {
28
28
  */
29
29
  outOfStockLabel?: string;
30
30
  /**
31
- * Specifies Rating Value of the product.
31
+ * Specifies the Rating Value of the product.
32
32
  */
33
33
  ratingValue?: number;
34
34
  /**
@@ -40,15 +40,15 @@ export interface ProductCardContentProps extends HTMLAttributes<HTMLElement> {
40
40
  */
41
41
  showDiscountBadge?: boolean;
42
42
  /**
43
- * Callback function when button is clicked.
43
+ * Callback function when the button is clicked.
44
44
  */
45
45
  onButtonClick?: () => void;
46
46
  /**
47
- * Enables to include taxes status.
47
+ * Specifies whether the displayed price should include taxes.
48
48
  */
49
49
  includeTaxes?: boolean;
50
50
  /**
51
- * Label to determine if the price is with taxes included.
51
+ * Label to determine if the price includes taxes.
52
52
  */
53
53
  includeTaxesLabel?: string;
54
54
  }
package/dist/cjs/molecules/QuantitySelector/QuantitySelector.d.ts CHANGED
@@ -20,11 +20,11 @@ export interface QuantitySelectorProps {
20
20
  initial?: number;
21
21
  /**
22
22
  * Controls by how many units the value advances
23
- */
23
+ */
24
24
  unitMultiplier?: number;
25
25
  /**
26
- * Controls wheter you use or not the unitMultiplier
27
- */
26
+ * Controls wheter you use or not the unitMultiplier
27
+ */
28
28
  useUnitMultiplier?: boolean;
29
29
  /**
30
30
  * Specifies that the whole quantity selector component should be disabled.
@@ -34,6 +34,10 @@ export interface QuantitySelectorProps {
34
34
  * Event emitted when value is changed
35
35
  */
36
36
  onChange?: (value: number) => void;
37
+ /**
38
+ * Event emitted when value is out of the min and max bounds
39
+ */
40
+ onValidateBlur?: (min: number, maxValue: number, quantity: number) => void;
37
41
  }
38
- declare const QuantitySelector: ({ max, min, unitMultiplier, useUnitMultiplier, initial, disabled, onChange, testId, ...otherProps }: QuantitySelectorProps) => React.JSX.Element;
42
+ declare const QuantitySelector: ({ max, min, unitMultiplier, useUnitMultiplier, initial, disabled, onChange, onValidateBlur, testId, ...otherProps }: QuantitySelectorProps) => React.JSX.Element;
39
43
  export default QuantitySelector;
package/dist/cjs/molecules/QuantitySelector/QuantitySelector.js CHANGED
@@ -3,7 +3,7 @@ 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 QuantitySelector = ({ max, min = 1, unitMultiplier = 1, useUnitMultiplier, initial, disabled = false, onChange, testId = 'fs-quantity-selector', ...otherProps }) => {
6
+ const QuantitySelector = ({ max, min = 1, unitMultiplier = 1, useUnitMultiplier, initial, disabled = false, onChange, onValidateBlur, testId = 'fs-quantity-selector', ...otherProps }) => {
7
7
  const [quantity, setQuantity] = (0, react_1.useState)(initial ?? min);
8
8
  const [multipliedUnit, setMultipliedUnit] = (0, react_1.useState)(quantity * unitMultiplier);
9
9
  const roundUpQuantityIfNeeded = (quantity) => {
@@ -24,33 +24,33 @@ const QuantitySelector = ({ max, min = 1, unitMultiplier = 1, useUnitMultiplier,
24
24
  const decrease = () => changeQuantity(-1);
25
25
  function validateQuantityBounds(n) {
26
26
  const maxValue = min ? Math.max(n, min) : n;
27
- return max ? Math.min(maxValue, useUnitMultiplier ? max * unitMultiplier : max) : maxValue;
27
+ return max
28
+ ? Math.min(maxValue, useUnitMultiplier ? max * unitMultiplier : max)
29
+ : maxValue;
28
30
  }
29
31
  function validateBlur() {
30
- const roundedQuantity = roundUpQuantityIfNeeded(quantity);
32
+ const quantityValue = validateQuantityBounds(quantity);
33
+ const roundedQuantity = roundUpQuantityIfNeeded(quantityValue);
34
+ const maxValue = max ?? (min ? Math.max(quantity, min) : quantity);
35
+ const isOutOfBounds = quantity > maxValue || quantity < min;
36
+ if (isOutOfBounds) {
37
+ onValidateBlur?.(min, maxValue, roundedQuantity);
38
+ }
31
39
  setQuantity(() => {
32
40
  setMultipliedUnit(roundedQuantity);
33
41
  onChange?.(roundedQuantity / unitMultiplier);
34
42
  return roundedQuantity / unitMultiplier;
35
43
  });
36
44
  }
37
- function validateInput(e) {
38
- const val = e.currentTarget.value;
39
- if (!Number.isNaN(Number(val))) {
40
- setQuantity(() => {
41
- const quantityValue = validateQuantityBounds(Number(val));
42
- setMultipliedUnit(quantityValue);
43
- onChange?.(quantityValue);
44
- return quantityValue;
45
- });
46
- }
47
- }
48
45
  (0, react_1.useEffect)(() => {
49
46
  initial && setQuantity(initial);
50
47
  }, [initial]);
48
+ const changeInputValue = (e) => {
49
+ setQuantity(Number(e.currentTarget.value));
50
+ };
51
51
  return (react_1.default.createElement("div", { "data-fs-quantity-selector": disabled ? 'disabled' : 'true', "data-testid": testId, ...otherProps },
52
52
  react_1.default.createElement(__1.IconButton, { "data-quantity-selector-button": "left", icon: react_1.default.createElement(__1.Icon, { name: "Minus", width: 16, height: 16, weight: "bold" }), "aria-label": "Decrement Quantity", "aria-controls": "quantity-selector-input", disabled: isLeftDisabled || disabled, onClick: decrease, testId: `${testId}-left-button`, size: "small" }),
53
- react_1.default.createElement(__1.Input, { "data-quantity-selector-input": true, id: "quantity-selector-input", "aria-label": "Quantity", value: useUnitMultiplier ? multipliedUnit : quantity, onChange: validateInput, onBlur: validateBlur, disabled: disabled }),
53
+ react_1.default.createElement(__1.Input, { "data-quantity-selector-input": true, id: "quantity-selector-input", "aria-label": "Quantity", value: useUnitMultiplier ? multipliedUnit : quantity, onChange: changeInputValue, onBlur: validateBlur, disabled: disabled }),
54
54
  react_1.default.createElement(__1.IconButton, { "data-quantity-selector-button": "right", "aria-controls": "quantity-selector-input", "aria-label": "Increment Quantity", disabled: isRightDisabled || disabled, icon: react_1.default.createElement(__1.Icon, { name: "Plus", width: 16, height: 16, weight: "bold" }), onClick: increase, testId: `${testId}-right-button`, size: "small" })));
55
55
  };
56
56
  exports.default = QuantitySelector;
package/dist/cjs/molecules/QuantitySelector/QuantitySelector.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"QuantitySelector.js","sourceRoot":"","sources":["../../../../src/molecules/QuantitySelector/QuantitySelector.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"QuantitySelector.js","sourceRoot":"","sources":["../../../../src/molecules/QuantitySelector/QuantitySelector.tsx"],"names":[],"mappings":"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"}
package/dist/esm/molecules/OrderSummary/OrderSummary.d.ts CHANGED
@@ -2,24 +2,24 @@ import React from 'react';
2
2
  import type { HTMLAttributes } from 'react';
3
3
  export interface OrderSummaryProps extends HTMLAttributes<HTMLUListElement> {
4
4
  /**
5
- * ID to find this component in testing tools (e.g.: cypress,
5
+ * ID to find this component in testing tools (e.g., cypress,
6
6
  * testing-library, and jest).
7
7
  */
8
8
  testId?: string;
9
9
  /**
10
- * Label for the subtotal value of the order. Will only show if subtotalValue is provided.
10
+ * Label for the subtotal value of the order. It will only show if subtotalValue is provided.
11
11
  */
12
12
  subtotalLabel?: string;
13
13
  /**
14
- * Subtotal value of the order. If provided, subtotal label and value will be shown.
14
+ * Subtotal value of the order. If provided, a subtotal label and value will be shown.
15
15
  */
16
16
  subtotalValue?: string;
17
17
  /**
18
- * Label for the discount value for the order. Will only show if discountValue is provided.
18
+ * Label for the discount value for the order. It will only show if discountValue is provided.
19
19
  */
20
20
  discountLabel?: string;
21
21
  /**
22
- * Discount value for the order. If provided, discount label and value will be shown.
22
+ * Discount value for the order. If provided, a discount label and value will be shown.
23
23
  */
24
24
  discountValue?: string;
25
25
  /**
@@ -31,11 +31,11 @@ export interface OrderSummaryProps extends HTMLAttributes<HTMLUListElement> {
31
31
  */
32
32
  totalValue?: string;
33
33
  /**
34
- * Enables to include taxes status.
34
+ * Specifies whether the displayed price should include taxes.
35
35
  */
36
36
  includeTaxes?: boolean;
37
37
  /**
38
- * Label to determine if the price is with taxes included.
38
+ * Label to determine if the price includes taxes.
39
39
  */
40
40
  includeTaxesLabel?: string;
41
41
  }
package/dist/esm/molecules/ProductCard/ProductCardContent.d.ts CHANGED
@@ -12,7 +12,7 @@ export interface ProductCardContentProps extends HTMLAttributes<HTMLElement> {
12
12
  */
13
13
  title: string;
14
14
  /**
15
- * Props for the link from ProductCard component.
15
+ * Props for the link from the ProductCard component.
16
16
  */
17
17
  linkProps?: Partial<LinkProps<LinkElementType>>;
18
18
  /**
@@ -20,7 +20,7 @@ export interface ProductCardContentProps extends HTMLAttributes<HTMLElement> {
20
20
  */
21
21
  price?: PriceDefinition;
22
22
  /**
23
- * Enables a outOfStock status.
23
+ * Enables an outOfStock status.
24
24
  */
25
25
  outOfStock?: boolean;
26
26
  /**
@@ -28,7 +28,7 @@ export interface ProductCardContentProps extends HTMLAttributes<HTMLElement> {
28
28
  */
29
29
  outOfStockLabel?: string;
30
30
  /**
31
- * Specifies Rating Value of the product.
31
+ * Specifies the Rating Value of the product.
32
32
  */
33
33
  ratingValue?: number;
34
34
  /**
@@ -40,15 +40,15 @@ export interface ProductCardContentProps extends HTMLAttributes<HTMLElement> {
40
40
  */
41
41
  showDiscountBadge?: boolean;
42
42
  /**
43
- * Callback function when button is clicked.
43
+ * Callback function when the button is clicked.
44
44
  */
45
45
  onButtonClick?: () => void;
46
46
  /**
47
- * Enables to include taxes status.
47
+ * Specifies whether the displayed price should include taxes.
48
48
  */
49
49
  includeTaxes?: boolean;
50
50
  /**
51
- * Label to determine if the price is with taxes included.
51
+ * Label to determine if the price includes taxes.
52
52
  */
53
53
  includeTaxesLabel?: string;
54
54
  }
package/dist/esm/molecules/QuantitySelector/QuantitySelector.d.ts CHANGED
@@ -20,11 +20,11 @@ export interface QuantitySelectorProps {
20
20
  initial?: number;
21
21
  /**
22
22
  * Controls by how many units the value advances
23
- */
23
+ */
24
24
  unitMultiplier?: number;
25
25
  /**
26
- * Controls wheter you use or not the unitMultiplier
27
- */
26
+ * Controls wheter you use or not the unitMultiplier
27
+ */
28
28
  useUnitMultiplier?: boolean;
29
29
  /**
30
30
  * Specifies that the whole quantity selector component should be disabled.
@@ -34,6 +34,10 @@ export interface QuantitySelectorProps {
34
34
  * Event emitted when value is changed
35
35
  */
36
36
  onChange?: (value: number) => void;
37
+ /**
38
+ * Event emitted when value is out of the min and max bounds
39
+ */
40
+ onValidateBlur?: (min: number, maxValue: number, quantity: number) => void;
37
41
  }
38
- declare const QuantitySelector: ({ max, min, unitMultiplier, useUnitMultiplier, initial, disabled, onChange, testId, ...otherProps }: QuantitySelectorProps) => React.JSX.Element;
42
+ declare const QuantitySelector: ({ max, min, unitMultiplier, useUnitMultiplier, initial, disabled, onChange, onValidateBlur, testId, ...otherProps }: QuantitySelectorProps) => React.JSX.Element;
39
43
  export default QuantitySelector;
package/dist/esm/molecules/QuantitySelector/QuantitySelector.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import React, { useEffect, useState } from 'react';
2
2
  import { Icon, IconButton, Input } from '../../';
3
- const QuantitySelector = ({ max, min = 1, unitMultiplier = 1, useUnitMultiplier, initial, disabled = false, onChange, testId = 'fs-quantity-selector', ...otherProps }) => {
3
+ const QuantitySelector = ({ max, min = 1, unitMultiplier = 1, useUnitMultiplier, initial, disabled = false, onChange, onValidateBlur, testId = 'fs-quantity-selector', ...otherProps }) => {
4
4
  const [quantity, setQuantity] = useState(initial ?? min);
5
5
  const [multipliedUnit, setMultipliedUnit] = useState(quantity * unitMultiplier);
6
6
  const roundUpQuantityIfNeeded = (quantity) => {
@@ -21,33 +21,33 @@ const QuantitySelector = ({ max, min = 1, unitMultiplier = 1, useUnitMultiplier,
21
21
  const decrease = () => changeQuantity(-1);
22
22
  function validateQuantityBounds(n) {
23
23
  const maxValue = min ? Math.max(n, min) : n;
24
- return max ? Math.min(maxValue, useUnitMultiplier ? max * unitMultiplier : max) : maxValue;
24
+ return max
25
+ ? Math.min(maxValue, useUnitMultiplier ? max * unitMultiplier : max)
26
+ : maxValue;
25
27
  }
26
28
  function validateBlur() {
27
- const roundedQuantity = roundUpQuantityIfNeeded(quantity);
29
+ const quantityValue = validateQuantityBounds(quantity);
30
+ const roundedQuantity = roundUpQuantityIfNeeded(quantityValue);
31
+ const maxValue = max ?? (min ? Math.max(quantity, min) : quantity);
32
+ const isOutOfBounds = quantity > maxValue || quantity < min;
33
+ if (isOutOfBounds) {
34
+ onValidateBlur?.(min, maxValue, roundedQuantity);
35
+ }
28
36
  setQuantity(() => {
29
37
  setMultipliedUnit(roundedQuantity);
30
38
  onChange?.(roundedQuantity / unitMultiplier);
31
39
  return roundedQuantity / unitMultiplier;
32
40
  });
33
41
  }
34
- function validateInput(e) {
35
- const val = e.currentTarget.value;
36
- if (!Number.isNaN(Number(val))) {
37
- setQuantity(() => {
38
- const quantityValue = validateQuantityBounds(Number(val));
39
- setMultipliedUnit(quantityValue);
40
- onChange?.(quantityValue);
41
- return quantityValue;
42
- });
43
- }
44
- }
45
42
  useEffect(() => {
46
43
  initial && setQuantity(initial);
47
44
  }, [initial]);
45
+ const changeInputValue = (e) => {
46
+ setQuantity(Number(e.currentTarget.value));
47
+ };
48
48
  return (React.createElement("div", { "data-fs-quantity-selector": disabled ? 'disabled' : 'true', "data-testid": testId, ...otherProps },
49
49
  React.createElement(IconButton, { "data-quantity-selector-button": "left", icon: React.createElement(Icon, { name: "Minus", width: 16, height: 16, weight: "bold" }), "aria-label": "Decrement Quantity", "aria-controls": "quantity-selector-input", disabled: isLeftDisabled || disabled, onClick: decrease, testId: `${testId}-left-button`, size: "small" }),
50
- React.createElement(Input, { "data-quantity-selector-input": true, id: "quantity-selector-input", "aria-label": "Quantity", value: useUnitMultiplier ? multipliedUnit : quantity, onChange: validateInput, onBlur: validateBlur, disabled: disabled }),
50
+ React.createElement(Input, { "data-quantity-selector-input": true, id: "quantity-selector-input", "aria-label": "Quantity", value: useUnitMultiplier ? multipliedUnit : quantity, onChange: changeInputValue, onBlur: validateBlur, disabled: disabled }),
51
51
  React.createElement(IconButton, { "data-quantity-selector-button": "right", "aria-controls": "quantity-selector-input", "aria-label": "Increment Quantity", disabled: isRightDisabled || disabled, icon: React.createElement(Icon, { name: "Plus", width: 16, height: 16, weight: "bold" }), onClick: increase, testId: `${testId}-right-button`, size: "small" })));
52
52
  };
53
53
  export default QuantitySelector;
package/dist/esm/molecules/QuantitySelector/QuantitySelector.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"QuantitySelector.js","sourceRoot":"","sources":["../../../../src/molecules/QuantitySelector/QuantitySelector.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"QuantitySelector.js","sourceRoot":"","sources":["../../../../src/molecules/QuantitySelector/QuantitySelector.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.0.77",
3
+ "version": "3.0.85",
4
4
  "main": "dist/cjs/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "typings": "dist/esm/index.d.ts",
@@ -49,5 +49,5 @@
49
49
  "volta": {
50
50
  "extends": "../../package.json"
51
51
  },
52
- "gitHead": "c03af091effe1a702a2cab6afe2e67fbb783d5dc"
52
+ "gitHead": "486b94c3eff276ff55763857f5ca17ce1f71fef7"
53
53
  }
package/src/molecules/OrderSummary/OrderSummary.tsx CHANGED
@@ -5,24 +5,24 @@ import { Label, List } from '../../'
5
5
 
6
6
  export interface OrderSummaryProps extends HTMLAttributes<HTMLUListElement> {
7
7
  /**
8
- * ID to find this component in testing tools (e.g.: cypress,
8
+ * ID to find this component in testing tools (e.g., cypress,
9
9
  * testing-library, and jest).
10
10
  */
11
11
  testId?: string
12
12
  /**
13
- * Label for the subtotal value of the order. Will only show if subtotalValue is provided.
13
+ * Label for the subtotal value of the order. It will only show if subtotalValue is provided.
14
14
  */
15
15
  subtotalLabel?: string
16
16
  /**
17
- * Subtotal value of the order. If provided, subtotal label and value will be shown.
17
+ * Subtotal value of the order. If provided, a subtotal label and value will be shown.
18
18
  */
19
19
  subtotalValue?: string
20
20
  /**
21
- * Label for the discount value for the order. Will only show if discountValue is provided.
21
+ * Label for the discount value for the order. It will only show if discountValue is provided.
22
22
  */
23
23
  discountLabel?: string
24
24
  /**
25
- * Discount value for the order. If provided, discount label and value will be shown.
25
+ * Discount value for the order. If provided, a discount label and value will be shown.
26
26
  */
27
27
  discountValue?: string
28
28
  /**
@@ -34,11 +34,11 @@ export interface OrderSummaryProps extends HTMLAttributes<HTMLUListElement> {
34
34
  */
35
35
  totalValue?: string
36
36
  /**
37
- * Enables to include taxes status.
37
+ * Specifies whether the displayed price should include taxes.
38
38
  */
39
39
  includeTaxes?: boolean
40
40
  /**
41
- * Label to determine if the price is with taxes included.
41
+ * Label to determine if the price includes taxes.
42
42
  */
43
43
  includeTaxesLabel?: string
44
44
  }
package/src/molecules/ProductCard/ProductCardContent.tsx CHANGED
@@ -26,7 +26,7 @@ export interface ProductCardContentProps extends HTMLAttributes<HTMLElement> {
26
26
  */
27
27
  title: string
28
28
  /**
29
- * Props for the link from ProductCard component.
29
+ * Props for the link from the ProductCard component.
30
30
  */
31
31
  linkProps?: Partial<LinkProps<LinkElementType>>
32
32
  /**
@@ -34,7 +34,7 @@ export interface ProductCardContentProps extends HTMLAttributes<HTMLElement> {
34
34
  */
35
35
  price?: PriceDefinition
36
36
  /**
37
- * Enables a outOfStock status.
37
+ * Enables an outOfStock status.
38
38
  */
39
39
  outOfStock?: boolean
40
40
  /**
@@ -42,7 +42,7 @@ export interface ProductCardContentProps extends HTMLAttributes<HTMLElement> {
42
42
  */
43
43
  outOfStockLabel?: string
44
44
  /**
45
- * Specifies Rating Value of the product.
45
+ * Specifies the Rating Value of the product.
46
46
  */
47
47
  ratingValue?: number
48
48
  /**
@@ -54,15 +54,15 @@ export interface ProductCardContentProps extends HTMLAttributes<HTMLElement> {
54
54
  */
55
55
  showDiscountBadge?: boolean
56
56
  /**
57
- * Callback function when button is clicked.
57
+ * Callback function when the button is clicked.
58
58
  */
59
59
  onButtonClick?: () => void
60
60
  /**
61
- * Enables to include taxes status.
61
+ * Specifies whether the displayed price should include taxes.
62
62
  */
63
63
  includeTaxes?: boolean
64
64
  /**
65
- * Label to determine if the price is with taxes included.
65
+ * Label to determine if the price includes taxes.
66
66
  */
67
67
  includeTaxesLabel?: string
68
68
  }
package/src/molecules/QuantitySelector/QuantitySelector.tsx CHANGED
@@ -22,13 +22,13 @@ export interface QuantitySelectorProps {
22
22
  */
23
23
  initial?: number
24
24
  /**
25
- * Controls by how many units the value advances
26
- */
25
+ * Controls by how many units the value advances
26
+ */
27
27
  unitMultiplier?: number
28
- /**
29
- * Controls wheter you use or not the unitMultiplier
30
- */
31
- useUnitMultiplier?: boolean
28
+ /**
29
+ * Controls wheter you use or not the unitMultiplier
30
+ */
31
+ useUnitMultiplier?: boolean
32
32
  /**
33
33
  * Specifies that the whole quantity selector component should be disabled.
34
34
  */
@@ -37,6 +37,10 @@ export interface QuantitySelectorProps {
37
37
  * Event emitted when value is changed
38
38
  */
39
39
  onChange?: (value: number) => void
40
+ /**
41
+ * Event emitted when value is out of the min and max bounds
42
+ */
43
+ onValidateBlur?: (min: number, maxValue: number, quantity: number) => void
40
44
  }
41
45
 
42
46
  const QuantitySelector = ({
@@ -47,21 +51,24 @@ const QuantitySelector = ({
47
51
  initial,
48
52
  disabled = false,
49
53
  onChange,
54
+ onValidateBlur,
50
55
  testId = 'fs-quantity-selector',
51
56
  ...otherProps
52
57
  }: QuantitySelectorProps) => {
53
58
  const [quantity, setQuantity] = useState<number>(initial ?? min)
54
- const [multipliedUnit, setMultipliedUnit] = useState<number>(quantity * unitMultiplier)
59
+ const [multipliedUnit, setMultipliedUnit] = useState<number>(
60
+ quantity * unitMultiplier
61
+ )
55
62
 
56
63
  const roundUpQuantityIfNeeded = (quantity: number) => {
57
- if(!useUnitMultiplier){
64
+ if (!useUnitMultiplier) {
58
65
  return quantity
59
66
  }
60
- return Math.ceil(quantity / unitMultiplier) * unitMultiplier;
61
- }
67
+ return Math.ceil(quantity / unitMultiplier) * unitMultiplier
68
+ }
62
69
 
63
70
  const isLeftDisabled = quantity === min
64
- const isRightDisabled = quantity === max
71
+ const isRightDisabled = quantity === max
65
72
 
66
73
  const changeQuantity = (increaseValue: number) => {
67
74
  const quantityValue = validateQuantityBounds(quantity + increaseValue)
@@ -70,7 +77,7 @@ const QuantitySelector = ({
70
77
  setQuantity(quantityValue)
71
78
  setMultipliedUnit(quantityValue * unitMultiplier)
72
79
  }
73
-
80
+
74
81
  const increase = () => changeQuantity(1)
75
82
 
76
83
  const decrease = () => changeQuantity(-1)
@@ -78,39 +85,37 @@ const QuantitySelector = ({
78
85
  function validateQuantityBounds(n: number): number {
79
86
  const maxValue = min ? Math.max(n, min) : n
80
87
 
81
- return max ? Math.min(maxValue, useUnitMultiplier ? max * unitMultiplier : max) : maxValue
88
+ return max
89
+ ? Math.min(maxValue, useUnitMultiplier ? max * unitMultiplier : max)
90
+ : maxValue
82
91
  }
83
92
 
84
93
  function validateBlur() {
85
- const roundedQuantity = roundUpQuantityIfNeeded(quantity)
94
+ const quantityValue = validateQuantityBounds(quantity)
95
+ const roundedQuantity = roundUpQuantityIfNeeded(quantityValue)
86
96
 
87
- setQuantity(() => {
88
- setMultipliedUnit(roundedQuantity)
89
- onChange?.(roundedQuantity / unitMultiplier)
90
-
91
- return roundedQuantity / unitMultiplier
92
- })
93
- }
94
-
95
- function validateInput(e: React.FormEvent<HTMLInputElement>) {
96
- const val = e.currentTarget.value
97
+ const maxValue = max ?? (min ? Math.max(quantity, min) : quantity)
98
+ const isOutOfBounds = quantity > maxValue || quantity < min
99
+ if (isOutOfBounds) {
100
+ onValidateBlur?.(min, maxValue, roundedQuantity)
101
+ }
97
102
 
98
- if (!Number.isNaN(Number(val))) {
99
- setQuantity(() => {
100
- const quantityValue = validateQuantityBounds(Number(val))
101
- setMultipliedUnit(quantityValue)
102
- onChange?.(quantityValue)
103
+ setQuantity(() => {
104
+ setMultipliedUnit(roundedQuantity)
105
+ onChange?.(roundedQuantity / unitMultiplier)
103
106
 
104
- return quantityValue
105
- })
106
- }
107
+ return roundedQuantity / unitMultiplier
108
+ })
107
109
  }
108
110
 
109
-
110
111
  useEffect(() => {
111
112
  initial && setQuantity(initial)
112
113
  }, [initial])
113
114
 
115
+ const changeInputValue = (e: React.ChangeEvent<HTMLInputElement>) => {
116
+ setQuantity(Number(e.currentTarget.value))
117
+ }
118
+
114
119
  return (
115
120
  <div
116
121
  data-fs-quantity-selector={disabled ? 'disabled' : 'true'}
@@ -132,7 +137,7 @@ const QuantitySelector = ({
132
137
  id="quantity-selector-input"
133
138
  aria-label="Quantity"
134
139
  value={useUnitMultiplier ? multipliedUnit : quantity}
135
- onChange={validateInput}
140
+ onChange={changeInputValue}
136
141
  onBlur={validateBlur}
137
142
  disabled={disabled}
138
143
  />