From 5a937557002add1632c6bc4e055f7a5386082911 Mon Sep 17 00:00:00 2001 From: Erik Kieckhafer Date: Fri, 7 Dec 2018 13:09:15 -0800 Subject: [PATCH 1/7] feat: add new inventoryStatus component --- .../InventoryStatus/v1/InventoryStatus.js | 89 +++++++++++++++++++ .../InventoryStatus/v1/InventoryStatus.md | 62 +++++++++++++ .../v1/InventoryStatus.test.js | 73 +++++++++++++++ .../components/InventoryStatus/v1/index.js | 1 + .../InventoryStatus/v1/utils/index.js | 5 ++ .../v1/utils/inventoryStatus.js | 22 +++++ .../v1/utils/inventoryStatus.test.js | 29 ++++++ .../v1/utils/isProductBestseller.js | 11 +++ .../v1/utils/isProductBestseller.test.js | 18 ++++ .../v1/utils/isProductLowQuantity.js | 9 ++ .../v1/utils/isProductLowQuantity.test.js | 18 ++++ .../InventoryStatus/v1/utils/statusLabels.js | 6 ++ .../v1/utils/statusLabels.test.js | 13 +++ .../InventoryStatus/v1/utils/statusTypes.js | 7 ++ .../v1/utils/statusTypes.test.js | 12 +++ styleguide.config.js | 7 +- 16 files changed, 379 insertions(+), 3 deletions(-) create mode 100644 package/src/components/InventoryStatus/v1/InventoryStatus.js create mode 100644 package/src/components/InventoryStatus/v1/InventoryStatus.md create mode 100644 package/src/components/InventoryStatus/v1/InventoryStatus.test.js create mode 100644 package/src/components/InventoryStatus/v1/index.js create mode 100644 package/src/components/InventoryStatus/v1/utils/index.js create mode 100644 package/src/components/InventoryStatus/v1/utils/inventoryStatus.js create mode 100644 package/src/components/InventoryStatus/v1/utils/inventoryStatus.test.js create mode 100644 package/src/components/InventoryStatus/v1/utils/isProductBestseller.js create mode 100644 package/src/components/InventoryStatus/v1/utils/isProductBestseller.test.js create mode 100644 package/src/components/InventoryStatus/v1/utils/isProductLowQuantity.js create mode 100644 package/src/components/InventoryStatus/v1/utils/isProductLowQuantity.test.js create mode 100644 package/src/components/InventoryStatus/v1/utils/statusLabels.js create mode 100644 package/src/components/InventoryStatus/v1/utils/statusLabels.test.js create mode 100644 package/src/components/InventoryStatus/v1/utils/statusTypes.js create mode 100644 package/src/components/InventoryStatus/v1/utils/statusTypes.test.js diff --git a/package/src/components/InventoryStatus/v1/InventoryStatus.js b/package/src/components/InventoryStatus/v1/InventoryStatus.js new file mode 100644 index 000000000..23c139cf6 --- /dev/null +++ b/package/src/components/InventoryStatus/v1/InventoryStatus.js @@ -0,0 +1,89 @@ +import React, { Component } from "react"; +import PropTypes from "prop-types"; +import styled from "styled-components"; +import { withComponents } from "@reactioncommerce/components-context"; +import { applyTheme, addTypographyStyles, CustomPropTypes } from "../../../utils"; +import { STATUS_LABELS, inventoryStatus } from "./utils"; + +const SoldOutSpan = styled.div` + ${addTypographyStyles("StockWarning", "labelText")} +`; + +const DefaultSpan = styled.div` + ${addTypographyStyles("", "labelText")} +`; + +class InventoryStatus extends Component { + static propTypes = { + /** + * You can provide a `className` prop that will be applied to the outermost DOM element + * rendered by this component. We do not recommend using this for styling purposes, but + * it can be useful as a selector in some situations. + */ + className: PropTypes.string, + /** + * If you've set up a components context using + * [@reactioncommerce/components-context](https://github.com/reactioncommerce/components-context) + * (recommended), then this prop will come from there automatically. If you have not + * set up a components context or you want to override one of the components in a + * single spot, you can pass in the components prop directly. + */ + components: PropTypes.shape({ + /** + * Pass either the Reaction StockWarning component or your own component that + * accepts compatible props. + */ + StockWarning: CustomPropTypes.component.isRequired + }).isRequired, + /** + * The product, whose properties determine which badge(s) to display + */ + product: PropTypes.shape({ + isBackorder: PropTypes.bool, + isLowQuantity: PropTypes.bool, + isSoldOut: PropTypes.bool + }), + /** + * Labels to use for the various badges + */ + statusLabels: PropTypes.shape({ + BACKORDER: PropTypes.string, + LOW_QUANTITY: PropTypes.string, + SOLD_OUT: PropTypes.string + }) + }; + + static defaultProps = { + statusLabels: STATUS_LABELS + }; + + render() { + const { className, components, product, statusLabels } = this.props; + const { StockWarning } = components || {}; + + const status = inventoryStatus(product, statusLabels); + + if (!status) return null; + + if (status.type && status.type === "LOW_QUANTITY") { + return ( + + ); + } + + if (status.type && status.type === "SOLD_OUT") { + return ( + {status.label} + ); + } + + return ( + {status.label} + ); + } +} + +export default withComponents(InventoryStatus); diff --git a/package/src/components/InventoryStatus/v1/InventoryStatus.md b/package/src/components/InventoryStatus/v1/InventoryStatus.md new file mode 100644 index 000000000..85094f301 --- /dev/null +++ b/package/src/components/InventoryStatus/v1/InventoryStatus.md @@ -0,0 +1,62 @@ +### Overview +The `InventoryStatus` displays a low inventory warning when the `isLowInventoryQuantity` prop is true. + +### Usage + +An inventory warning will be rendered when the `isLowInventoryQuantity` prop is `true`, and does not render when a product has a normal inventory level. + +#### Backorder +```jsx + const productData = { + isBackorder: true, + isLowQuantity: true, + isSoldOut: true, + currentQuantity: 0 + }; + + +``` + +#### Low inventory +```jsx + const productData = { + isBackorder: false, + isLowQuantity: true, + isSoldOut: false, + currentQuantity: 4 + }; + + +``` + +#### Regular inventory +```jsx + const productData = { + isBackorder: false, + isLowQuantity: false, + isSoldOut: false, + currentQuantity: 4 + }; + + +``` + +#### Sold out +```jsx + const productData = { + isBackorder: false, + isLowQuantity: true, + isSoldOut: true, + currentQuantity: 0 + }; + + +``` + +### Theme + +See [Theming Components](./#!/Theming%20Components). + +#### Typography + +- The text uses `labelText` style with `rui_components.InventoryStatus` override diff --git a/package/src/components/InventoryStatus/v1/InventoryStatus.test.js b/package/src/components/InventoryStatus/v1/InventoryStatus.test.js new file mode 100644 index 000000000..601fbed9c --- /dev/null +++ b/package/src/components/InventoryStatus/v1/InventoryStatus.test.js @@ -0,0 +1,73 @@ +import React from "react"; +import renderer from "react-test-renderer"; +import checkPropTypes from "check-prop-types"; +import InventoryStatus from "./InventoryStatus"; + +test("Displays error warning about required props", () => { + const errorMessage = checkPropTypes(InventoryStatus.propTypes, {}); + expect(errorMessage).toMatchSnapshot(); +}); + +test("Renders backorder notification when inventory is sold out and backorder is allowed", () => { + const productData = { + isBackorder: true, + isLowQuantity: true, + isSoldOut: true, + currentQuantity: 0 + }; + + const component = renderer.create(( + + )); + + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); +}); + +test("Renders low inventory notification when inventory is lower than threshold", () => { + const productData = { + isBackorder: false, + isLowQuantity: true, + isSoldOut: false, + currentQuantity: 6 + }; + + const component = renderer.create(( + + )); + + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); +}); + +test("Renders nothing when inventory is ready to be sold", () => { + const productData = { + isBackorder: false, + isLowQuantity: false, + isSoldOut: false, + currentQuantity: 4 + }; + + const component = renderer.create(( + + )); + + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); +}); + +test("Renders sold out notification when inventory is sold out and backorder is not allowed", () => { + const productData = { + isBackorder: false, + isLowQuantity: true, + isSoldOut: true, + currentQuantity: 0 + }; + + const component = renderer.create(( + + )); + + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); +}); diff --git a/package/src/components/InventoryStatus/v1/index.js b/package/src/components/InventoryStatus/v1/index.js new file mode 100644 index 000000000..7b3ec9c56 --- /dev/null +++ b/package/src/components/InventoryStatus/v1/index.js @@ -0,0 +1 @@ +export { default } from "./InventoryStatus"; diff --git a/package/src/components/InventoryStatus/v1/utils/index.js b/package/src/components/InventoryStatus/v1/utils/index.js new file mode 100644 index 000000000..c6954b6a3 --- /dev/null +++ b/package/src/components/InventoryStatus/v1/utils/index.js @@ -0,0 +1,5 @@ +export { default as STATUS_TYPES } from "./statusTypes"; +export { default as STATUS_LABELS } from "./statusLabels"; +export { default as inventoryStatus } from "./inventoryStatus"; + +export { default as isProductLowQuantity } from "./isProductLowQuantity"; diff --git a/package/src/components/InventoryStatus/v1/utils/inventoryStatus.js b/package/src/components/InventoryStatus/v1/utils/inventoryStatus.js new file mode 100644 index 000000000..46af3f453 --- /dev/null +++ b/package/src/components/InventoryStatus/v1/utils/inventoryStatus.js @@ -0,0 +1,22 @@ +import { STATUS_TYPES } from "./"; + +/** + * Determines a product's badge status + * + * @param {Object} product - The product + * @param {Object} statusLabels - Labels to use for badges + * @returns {Object} - The computed product status + */ +export default function inventoryStatus(product, statusLabels) { + let status; + + if (product.isSoldOut && product.isBackorder) { + status = { type: STATUS_TYPES.BACKORDER, label: statusLabels.BACKORDER }; + } else if (product.isSoldOut && !product.isBackorder) { + status = { type: STATUS_TYPES.SOLD_OUT, label: statusLabels.SOLD_OUT }; + } else if (product.isLowQuantity && !product.isSoldOut) { + status = { type: STATUS_TYPES.LOW_QUANTITY, label: statusLabels.LOW_QUANTITY }; + } + + return status; +} diff --git a/package/src/components/InventoryStatus/v1/utils/inventoryStatus.test.js b/package/src/components/InventoryStatus/v1/utils/inventoryStatus.test.js new file mode 100644 index 000000000..e0e728cd3 --- /dev/null +++ b/package/src/components/InventoryStatus/v1/utils/inventoryStatus.test.js @@ -0,0 +1,29 @@ +import inventoryStatus from "./inventoryStatus"; +import STATUS_TYPES from "./statusTypes"; +import STATUS_LABELS from "./statusLabels"; + +const backorderProduct = { isSoldOut: true, isBackorder: true }; +const soldOutProduct = { isSoldOut: true, isBackorder: false }; +const isLowQuantity = { isLowQuantity: true }; + + +test("inventoryStatus util should return `backorder` status", () => { + const callFunction = inventoryStatus(backorderProduct, STATUS_LABELS); + + expect(typeof inventoryStatus).toBe("function"); + expect(callFunction).toEqual({ type: STATUS_TYPES.BACKORDER, label: "Backorder" }); +}); + +test("inventoryStatus util should return `sold out` status", () => { + const callFunction = inventoryStatus(soldOutProduct, STATUS_LABELS); + + expect(typeof inventoryStatus).toBe("function"); + expect(callFunction).toEqual({ type: STATUS_TYPES.SOLD_OUT, label: "Sold Out" }); +}); + +test("inventoryStatus util should return `low inventory` status", () => { + const callFunction = inventoryStatus(isLowQuantity, STATUS_LABELS); + + expect(typeof inventoryStatus).toBe("function"); + expect(callFunction).toEqual({ type: STATUS_TYPES.LOW_QUANTITY, label: "Low Inventory" }); +}); diff --git a/package/src/components/InventoryStatus/v1/utils/isProductBestseller.js b/package/src/components/InventoryStatus/v1/utils/isProductBestseller.js new file mode 100644 index 000000000..426ba58ea --- /dev/null +++ b/package/src/components/InventoryStatus/v1/utils/isProductBestseller.js @@ -0,0 +1,11 @@ +/** + * Determines if a product is a best seller. + * TODO: this is a placeholder, as we don't have "Best Seller" at this moment + * https://github.com/reactioncommerce/reaction-next-starterkit/issues/130 + * + * @param {Object} product - The product + * @returns {Boolean} - Indicates whether the product is a best seller + */ +export default function isProductBestseller(product) { + return product.isBestseller || false; +} diff --git a/package/src/components/InventoryStatus/v1/utils/isProductBestseller.test.js b/package/src/components/InventoryStatus/v1/utils/isProductBestseller.test.js new file mode 100644 index 000000000..1427de5cb --- /dev/null +++ b/package/src/components/InventoryStatus/v1/utils/isProductBestseller.test.js @@ -0,0 +1,18 @@ +import isProductBestseller from "./isProductBestseller"; + +const isBestseller = { isBestseller: true }; +const isNotBestseller = { isBestseller: false }; + +test("isProductBestseller should return false", () => { + const callFunction = isProductBestseller(isNotBestseller); + + expect(typeof isProductBestseller).toBe("function"); + expect(callFunction).toEqual(false); +}); + +test("isProductBestseller should return true", () => { + const callFunction = isProductBestseller(isBestseller); + + expect(typeof isProductBestseller).toBe("function"); + expect(callFunction).toEqual(true); +}); diff --git a/package/src/components/InventoryStatus/v1/utils/isProductLowQuantity.js b/package/src/components/InventoryStatus/v1/utils/isProductLowQuantity.js new file mode 100644 index 000000000..aa228a096 --- /dev/null +++ b/package/src/components/InventoryStatus/v1/utils/isProductLowQuantity.js @@ -0,0 +1,9 @@ +/** + * Determines if a product has low inventory. + * + * @param {Object} product - The product + * @returns {Boolean} - Indicates whether the product has low inventory + */ +export default function isProductLowQuantity(product) { + return product.isLowQuantity && !product.isSoldOut; +} diff --git a/package/src/components/InventoryStatus/v1/utils/isProductLowQuantity.test.js b/package/src/components/InventoryStatus/v1/utils/isProductLowQuantity.test.js new file mode 100644 index 000000000..50d870fd1 --- /dev/null +++ b/package/src/components/InventoryStatus/v1/utils/isProductLowQuantity.test.js @@ -0,0 +1,18 @@ +import isProductLowQuantity from "./isProductLowQuantity"; + +const isLowQuantity = { isLowQuantity: true, isSoldOut: false }; +const isNotLowQuantity = { isLowQuantity: false, isSoldOut: false }; + +test("isProductLowQuantity should return false", () => { + const callFunction = isProductLowQuantity(isNotLowQuantity); + + expect(typeof isProductLowQuantity).toBe("function"); + expect(callFunction).toEqual(false); +}); + +test("isProductLowQuantity should return true", () => { + const callFunction = isProductLowQuantity(isLowQuantity); + + expect(typeof isProductLowQuantity).toBe("function"); + expect(callFunction).toEqual(true); +}); diff --git a/package/src/components/InventoryStatus/v1/utils/statusLabels.js b/package/src/components/InventoryStatus/v1/utils/statusLabels.js new file mode 100644 index 000000000..36fedd498 --- /dev/null +++ b/package/src/components/InventoryStatus/v1/utils/statusLabels.js @@ -0,0 +1,6 @@ +const STATUS_LABELS = { + BACKORDER: "Backordered - ships when available", + LOW_QUANTITY: "Low Inventory", + SOLD_OUT: "Out of stock" +}; +export default STATUS_LABELS; diff --git a/package/src/components/InventoryStatus/v1/utils/statusLabels.test.js b/package/src/components/InventoryStatus/v1/utils/statusLabels.test.js new file mode 100644 index 000000000..36612866d --- /dev/null +++ b/package/src/components/InventoryStatus/v1/utils/statusLabels.test.js @@ -0,0 +1,13 @@ +import STATUS_LABELS from "./statusLabels"; + +const STATUS_LABELS_VALUES = { + BACKORDER: "Backordered - ships when available", + LOW_QUANTITY: "Low Inventory", + SOLD_OUT: "Out of stock" +}; + + +test("badge label values", () => { + expect(typeof STATUS_LABELS).toBe("object"); + expect(STATUS_LABELS).toEqual(STATUS_LABELS_VALUES); +}); diff --git a/package/src/components/InventoryStatus/v1/utils/statusTypes.js b/package/src/components/InventoryStatus/v1/utils/statusTypes.js new file mode 100644 index 000000000..eb3cbae56 --- /dev/null +++ b/package/src/components/InventoryStatus/v1/utils/statusTypes.js @@ -0,0 +1,7 @@ +const STATUS_TYPES = { + BACKORDER: "BACKORDER", + LOW_QUANTITY: "LOW_QUANTITY", + SOLD_OUT: "SOLD_OUT" +}; + +export default STATUS_TYPES; diff --git a/package/src/components/InventoryStatus/v1/utils/statusTypes.test.js b/package/src/components/InventoryStatus/v1/utils/statusTypes.test.js new file mode 100644 index 000000000..e97ed6550 --- /dev/null +++ b/package/src/components/InventoryStatus/v1/utils/statusTypes.test.js @@ -0,0 +1,12 @@ +import STATUS_TYPES from "./statusTypes"; + +const STATUS_TYPES_VALUES = { + BACKORDER: "BACKORDER", + LOW_QUANTITY: "LOW_QUANTITY", + SOLD_OUT: "SOLD_OUT" +}; + +test("badge types values", () => { + expect(typeof STATUS_TYPES).toBe("object"); + expect(STATUS_TYPES).toEqual(STATUS_TYPES_VALUES); +}); diff --git a/styleguide.config.js b/styleguide.config.js index 7527d5405..3cdcf46e7 100644 --- a/styleguide.config.js +++ b/styleguide.config.js @@ -455,11 +455,12 @@ module.exports = { }), generateSection({ componentNames: [ - "Price", - "StockWarning", "BadgeOverlay", "CatalogGridItem", - "CatalogGrid" + "CatalogGrid", + "InventoryStatus", + "Price", + "StockWarning" ], content: "styleguide/src/sections/Product.md", name: "Product" From 289a2a74aef50d311b8660421e8e95f27cc89d75 Mon Sep 17 00:00:00 2001 From: Erik Kieckhafer Date: Fri, 7 Dec 2018 13:26:16 -0800 Subject: [PATCH 2/7] test: lint and test fixes --- .../src/components/InventoryStatus/v1/InventoryStatus.js | 2 +- .../InventoryStatus/v1/InventoryStatus.test.js | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/package/src/components/InventoryStatus/v1/InventoryStatus.js b/package/src/components/InventoryStatus/v1/InventoryStatus.js index 23c139cf6..ca4924c39 100644 --- a/package/src/components/InventoryStatus/v1/InventoryStatus.js +++ b/package/src/components/InventoryStatus/v1/InventoryStatus.js @@ -2,7 +2,7 @@ import React, { Component } from "react"; import PropTypes from "prop-types"; import styled from "styled-components"; import { withComponents } from "@reactioncommerce/components-context"; -import { applyTheme, addTypographyStyles, CustomPropTypes } from "../../../utils"; +import { addTypographyStyles, CustomPropTypes } from "../../../utils"; import { STATUS_LABELS, inventoryStatus } from "./utils"; const SoldOutSpan = styled.div` diff --git a/package/src/components/InventoryStatus/v1/InventoryStatus.test.js b/package/src/components/InventoryStatus/v1/InventoryStatus.test.js index 601fbed9c..6e9f89ebf 100644 --- a/package/src/components/InventoryStatus/v1/InventoryStatus.test.js +++ b/package/src/components/InventoryStatus/v1/InventoryStatus.test.js @@ -1,6 +1,7 @@ import React from "react"; import renderer from "react-test-renderer"; import checkPropTypes from "check-prop-types"; +import mockComponents from "../../../tests/mockComponents"; import InventoryStatus from "./InventoryStatus"; test("Displays error warning about required props", () => { @@ -17,7 +18,7 @@ test("Renders backorder notification when inventory is sold out and backorder is }; const component = renderer.create(( - + )); const tree = component.toJSON(); @@ -33,7 +34,7 @@ test("Renders low inventory notification when inventory is lower than threshold" }; const component = renderer.create(( - + )); const tree = component.toJSON(); @@ -49,7 +50,7 @@ test("Renders nothing when inventory is ready to be sold", () => { }; const component = renderer.create(( - + )); const tree = component.toJSON(); @@ -65,7 +66,7 @@ test("Renders sold out notification when inventory is sold out and backorder is }; const component = renderer.create(( - + )); const tree = component.toJSON(); From 78225b039e844abd0d2321415ac7e9c79db9bd8d Mon Sep 17 00:00:00 2001 From: Erik Kieckhafer Date: Fri, 7 Dec 2018 13:50:35 -0800 Subject: [PATCH 3/7] refactor: add component to context --- styleguide/src/appComponents.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/styleguide/src/appComponents.js b/styleguide/src/appComponents.js index d204999e2..e1b52d247 100644 --- a/styleguide/src/appComponents.js +++ b/styleguide/src/appComponents.js @@ -33,6 +33,7 @@ import ErrorsBlock from "../../package/src/components/ErrorsBlock/v1"; import Field from "../../package/src/components/Field/v1"; import InlineAlert from "../../package/src/components/InlineAlert/v1"; import InPageMenuItem from "../../package/src/components/InPageMenuItem/v1"; +import InventoryStatus from "../../package/src/components/InventoryStatus/v1"; import Link from "../../package/src/components/Link/v1"; import MiniCartSummary from "../../package/src/components/MiniCartSummary/v1"; import MultiSelect from "../../package/src/components/MultiSelect/v1"; @@ -90,6 +91,7 @@ export default { iconVisa, InlineAlert, InPageMenuItem, + InventoryStatus, Link, MiniCartSummary, MultiSelect, From 783601b1bd4cf375d4f8b55897be897eedfeb085 Mon Sep 17 00:00:00 2001 From: Erik Kieckhafer Date: Fri, 7 Dec 2018 14:09:53 -0800 Subject: [PATCH 4/7] test: test snapshots for new component --- .../InventoryStatus.test.js.snap | 53 +++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 package/src/components/InventoryStatus/v1/__snapshots__/InventoryStatus.test.js.snap diff --git a/package/src/components/InventoryStatus/v1/__snapshots__/InventoryStatus.test.js.snap b/package/src/components/InventoryStatus/v1/__snapshots__/InventoryStatus.test.js.snap new file mode 100644 index 000000000..516c28fa6 --- /dev/null +++ b/package/src/components/InventoryStatus/v1/__snapshots__/InventoryStatus.test.js.snap @@ -0,0 +1,53 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Displays error warning about required props 1`] = `undefined`; + +exports[`Renders backorder notification when inventory is sold out and backorder is allowed 1`] = ` +.c0 { + -webkit-font-smoothing: antialiased; + color: #505558; + font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif; + font-size: 14px; + font-style: normal; + font-stretch: normal; + font-weight: 400; + -webkit-letter-spacing: .02em; + -moz-letter-spacing: .02em; + -ms-letter-spacing: .02em; + letter-spacing: .02em; + line-height: 1.25; +} + +
+ Backordered - ships when available +
+`; + +exports[`Renders low inventory notification when inventory is lower than threshold 1`] = `"StockWarning({\\"inventoryQuantity\\":6,\\"isLowInventoryQuantity\\":true})"`; + +exports[`Renders nothing when inventory is ready to be sold 1`] = `null`; + +exports[`Renders sold out notification when inventory is sold out and backorder is not allowed 1`] = ` +.c0 { + -webkit-font-smoothing: antialiased; + color: #cd3f4c; + font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif; + font-size: 14px; + font-style: normal; + font-stretch: normal; + font-weight: 400; + -webkit-letter-spacing: .02em; + -moz-letter-spacing: .02em; + -ms-letter-spacing: .02em; + letter-spacing: .02em; + line-height: 1.25; +} + +
+ Out of stock +
+`; From 823e57862fa19bb4f4d5d96cb4935c43e8b8c6a7 Mon Sep 17 00:00:00 2001 From: Erik Kieckhafer Date: Fri, 7 Dec 2018 14:24:21 -0800 Subject: [PATCH 5/7] test: fix tests --- .../InventoryStatus/v1/utils/inventoryStatus.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package/src/components/InventoryStatus/v1/utils/inventoryStatus.test.js b/package/src/components/InventoryStatus/v1/utils/inventoryStatus.test.js index e0e728cd3..97dc3cbfa 100644 --- a/package/src/components/InventoryStatus/v1/utils/inventoryStatus.test.js +++ b/package/src/components/InventoryStatus/v1/utils/inventoryStatus.test.js @@ -11,14 +11,14 @@ test("inventoryStatus util should return `backorder` status", () => { const callFunction = inventoryStatus(backorderProduct, STATUS_LABELS); expect(typeof inventoryStatus).toBe("function"); - expect(callFunction).toEqual({ type: STATUS_TYPES.BACKORDER, label: "Backorder" }); + expect(callFunction).toEqual({ type: STATUS_TYPES.BACKORDER, label: "Backordered - ships when available" }); }); test("inventoryStatus util should return `sold out` status", () => { const callFunction = inventoryStatus(soldOutProduct, STATUS_LABELS); expect(typeof inventoryStatus).toBe("function"); - expect(callFunction).toEqual({ type: STATUS_TYPES.SOLD_OUT, label: "Sold Out" }); + expect(callFunction).toEqual({ type: STATUS_TYPES.SOLD_OUT, label: "Out of stock" }); }); test("inventoryStatus util should return `low inventory` status", () => { From cf474ab7a6870d2c2a78760bdcc17e476e5c01bd Mon Sep 17 00:00:00 2001 From: Erik Kieckhafer Date: Mon, 10 Dec 2018 13:58:47 -0800 Subject: [PATCH 6/7] refactor: change currentQuantity to inventoryAvailabletoSell --- .../src/components/InventoryStatus/v1/InventoryStatus.js | 3 ++- .../src/components/InventoryStatus/v1/InventoryStatus.md | 8 ++++---- .../components/InventoryStatus/v1/InventoryStatus.test.js | 8 ++++---- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/package/src/components/InventoryStatus/v1/InventoryStatus.js b/package/src/components/InventoryStatus/v1/InventoryStatus.js index ca4924c39..8232b4490 100644 --- a/package/src/components/InventoryStatus/v1/InventoryStatus.js +++ b/package/src/components/InventoryStatus/v1/InventoryStatus.js @@ -39,6 +39,7 @@ class InventoryStatus extends Component { * The product, whose properties determine which badge(s) to display */ product: PropTypes.shape({ + inventoryAvailableToSell: PropTypes.number, isBackorder: PropTypes.bool, isLowQuantity: PropTypes.bool, isSoldOut: PropTypes.bool @@ -68,7 +69,7 @@ class InventoryStatus extends Component { if (status.type && status.type === "LOW_QUANTITY") { return ( ); diff --git a/package/src/components/InventoryStatus/v1/InventoryStatus.md b/package/src/components/InventoryStatus/v1/InventoryStatus.md index 85094f301..f9497d713 100644 --- a/package/src/components/InventoryStatus/v1/InventoryStatus.md +++ b/package/src/components/InventoryStatus/v1/InventoryStatus.md @@ -11,7 +11,7 @@ An inventory warning will be rendered when the `isLowInventoryQuantity` prop is isBackorder: true, isLowQuantity: true, isSoldOut: true, - currentQuantity: 0 + inventoryAvailableToSell: 0 }; @@ -23,7 +23,7 @@ An inventory warning will be rendered when the `isLowInventoryQuantity` prop is isBackorder: false, isLowQuantity: true, isSoldOut: false, - currentQuantity: 4 + inventoryAvailableToSell: 4 }; @@ -35,7 +35,7 @@ An inventory warning will be rendered when the `isLowInventoryQuantity` prop is isBackorder: false, isLowQuantity: false, isSoldOut: false, - currentQuantity: 4 + inventoryAvailableToSell: 4 }; @@ -47,7 +47,7 @@ An inventory warning will be rendered when the `isLowInventoryQuantity` prop is isBackorder: false, isLowQuantity: true, isSoldOut: true, - currentQuantity: 0 + inventoryAvailableToSell: 0 }; diff --git a/package/src/components/InventoryStatus/v1/InventoryStatus.test.js b/package/src/components/InventoryStatus/v1/InventoryStatus.test.js index 6e9f89ebf..59a75e39c 100644 --- a/package/src/components/InventoryStatus/v1/InventoryStatus.test.js +++ b/package/src/components/InventoryStatus/v1/InventoryStatus.test.js @@ -14,7 +14,7 @@ test("Renders backorder notification when inventory is sold out and backorder is isBackorder: true, isLowQuantity: true, isSoldOut: true, - currentQuantity: 0 + inventoryAvailableToSell: 0 }; const component = renderer.create(( @@ -30,7 +30,7 @@ test("Renders low inventory notification when inventory is lower than threshold" isBackorder: false, isLowQuantity: true, isSoldOut: false, - currentQuantity: 6 + inventoryAvailableToSell: 6 }; const component = renderer.create(( @@ -46,7 +46,7 @@ test("Renders nothing when inventory is ready to be sold", () => { isBackorder: false, isLowQuantity: false, isSoldOut: false, - currentQuantity: 4 + inventoryAvailableToSell: 4 }; const component = renderer.create(( @@ -62,7 +62,7 @@ test("Renders sold out notification when inventory is sold out and backorder is isBackorder: false, isLowQuantity: true, isSoldOut: true, - currentQuantity: 0 + inventoryAvailableToSell: 0 }; const component = renderer.create(( From b3b5482f75701de65f5d03d2ea44c25e5646d754 Mon Sep 17 00:00:00 2001 From: Erik Kieckhafer Date: Mon, 10 Dec 2018 14:13:02 -0800 Subject: [PATCH 7/7] update const name --- package/src/components/InventoryStatus/v1/InventoryStatus.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package/src/components/InventoryStatus/v1/InventoryStatus.md b/package/src/components/InventoryStatus/v1/InventoryStatus.md index f9497d713..d62c773dd 100644 --- a/package/src/components/InventoryStatus/v1/InventoryStatus.md +++ b/package/src/components/InventoryStatus/v1/InventoryStatus.md @@ -1,9 +1,9 @@ ### Overview -The `InventoryStatus` displays a low inventory warning when the `isLowInventoryQuantity` prop is true. +The `InventoryStatus` displays a low inventory warning when the `isLowQuantity` prop is true. ### Usage -An inventory warning will be rendered when the `isLowInventoryQuantity` prop is `true`, and does not render when a product has a normal inventory level. +An inventory warning will be rendered when the `isLowQuantity` prop is `true`, and does not render when a product has a normal inventory level. #### Backorder ```jsx