diff --git a/src/components/CartPopover/CartPopover.js b/src/components/CartPopover/CartPopover.js index fff48188e9..3846d65943 100644 --- a/src/components/CartPopover/CartPopover.js +++ b/src/components/CartPopover/CartPopover.js @@ -90,10 +90,6 @@ class CartPopover extends Component { */ value: PropTypes.string })), - /** - * Current stock quantity of item - */ - currentQuantity: PropTypes.number, /** * Image url of chosen item */ diff --git a/src/components/CartPopover/CartPopover.test.js b/src/components/CartPopover/CartPopover.test.js index 207dfa53c4..99b87d3121 100644 --- a/src/components/CartPopover/CartPopover.test.js +++ b/src/components/CartPopover/CartPopover.test.js @@ -16,7 +16,6 @@ const cartItem = { value: "Summer" } ], - currentQuantity: 10, imageUrl: "//placehold.it/100", isLowInventoryQuantity: false, price: { diff --git a/src/components/CheckoutSummary/CheckoutSummary.test.js b/src/components/CheckoutSummary/CheckoutSummary.test.js index 335a81fb7e..03ffeb64ed 100644 --- a/src/components/CheckoutSummary/CheckoutSummary.test.js +++ b/src/components/CheckoutSummary/CheckoutSummary.test.js @@ -28,11 +28,11 @@ const testCart = { compareAtPrice: { displayAmount: "$45.00" }, - currentQuantity: 3, imageURLs: { small: "//placehold.it/150", thumbnail: "//placehold.it/100" }, + currentQuantity: 3, isLowQuantity: true, price: { displayAmount: "$20.00" @@ -48,11 +48,11 @@ const testCart = { { label: "Color", value: "Black" }, { label: "Size", value: "10" } ], - currentQuantity: 500, imageURLs: { small: "//placehold.it/150", thumbnail: "//placehold.it/100" }, + currentQuantity: 30, isLowQuantity: false, price: { displayAmount: "$78.00" diff --git a/src/components/MediaGallery/MediaGallery.test.js b/src/components/MediaGallery/MediaGallery.test.js index 1a626cf6c1..47e5284957 100644 --- a/src/components/MediaGallery/MediaGallery.test.js +++ b/src/components/MediaGallery/MediaGallery.test.js @@ -4,7 +4,6 @@ import MediaGallery from "./MediaGallery"; const mediaItems = [ { - toGrid: 1, priority: 0, productId: "cmVhY3Rpb24vcHJvZHVjdDpCQ1RNWjZIVHhGU3BwSkVTaw==", variantId: "cmVhY3Rpb24vcHJvZHVjdDo2cWlxUHdCa2VKZHRkUWM0Rw==", @@ -17,7 +16,6 @@ const mediaItems = [ } }, { - toGrid: 1, priority: 0, productId: "cmVhY3Rpb24vcHJvZHVjdDpCQ1RNWjZIVHhGU3BwSkVTaw==", variantId: "cmVhY3Rpb24vcHJvZHVjdDo2cWlxUHdCa2VKZHRkUWM0Rw==", diff --git a/src/components/MediaGalleryItem/MediaGalleryItem.test.js b/src/components/MediaGalleryItem/MediaGalleryItem.test.js index d7cf36a985..6afd7d1341 100644 --- a/src/components/MediaGalleryItem/MediaGalleryItem.test.js +++ b/src/components/MediaGalleryItem/MediaGalleryItem.test.js @@ -3,7 +3,6 @@ import renderer from "react-test-renderer"; import MediaGalleryItem from "./MediaGalleryItem"; const media = { - toGrid: 1, priority: 0, productId: "cmVhY3Rpb24vcHJvZHVjdDpCQ1RNWjZIVHhGU3BwSkVTaw==", variantId: "cmVhY3Rpb24vcHJvZHVjdDo2cWlxUHdCa2VKZHRkUWM0Rw==", diff --git a/src/components/OrderCard/OrderCard.test.js b/src/components/OrderCard/OrderCard.test.js index faafbcd9d2..eab096b327 100644 --- a/src/components/OrderCard/OrderCard.test.js +++ b/src/components/OrderCard/OrderCard.test.js @@ -33,11 +33,11 @@ const order = { compareAtPrice: { displayAmount: "$45.00" }, - currentQuantity: 3, imageURLs: { small: "//placehold.it/150", thumbnail: "//placehold.it/100" }, + inventoryAvailableToSell: 3, isLowQuantity: true, price: { displayAmount: "$20.00" @@ -50,11 +50,11 @@ const order = { { _id: "456", attributes: [{ label: "Color", value: "Black" }, { label: "Size", value: "10" }], - currentQuantity: 500, imageURLs: { small: "//placehold.it/150", thumbnail: "//placehold.it/100" }, + inventoryAvailableToSell: 30, isLowQuantity: false, price: { displayAmount: "$78.00" diff --git a/src/components/OrderCardFulfillmentGroup/OrderCardFulfillmentGroup.js b/src/components/OrderCardFulfillmentGroup/OrderCardFulfillmentGroup.js index 4567cee318..bbd7189c87 100644 --- a/src/components/OrderCardFulfillmentGroup/OrderCardFulfillmentGroup.js +++ b/src/components/OrderCardFulfillmentGroup/OrderCardFulfillmentGroup.js @@ -70,12 +70,19 @@ class OrderCardFulfillmentGroup extends Component { const { classes, fulfillmentGroup } = this.props; if (fulfillmentGroup && Array.isArray(fulfillmentGroup.items.nodes)) { + const items = fulfillmentGroup.items.nodes.map((item) => ({ + ...item, + // Backwards compatibility until all component library components are updated + // to accept `inventoryAvailableToSell`. + currentQuantity: item.currentQuantity || item.inventoryAvailableToSell + })); + return ( ); diff --git a/src/components/OrderCardFulfillmentGroup/OrderCardFulfillmentGroup.test.js b/src/components/OrderCardFulfillmentGroup/OrderCardFulfillmentGroup.test.js index bbf915fbe9..821e3adaee 100644 --- a/src/components/OrderCardFulfillmentGroup/OrderCardFulfillmentGroup.test.js +++ b/src/components/OrderCardFulfillmentGroup/OrderCardFulfillmentGroup.test.js @@ -23,11 +23,11 @@ const testFulfillmentGroup = { compareAtPrice: { displayAmount: "$45.00" }, - currentQuantity: 3, imageURLs: { small: "//placehold.it/150", thumbnail: "//placehold.it/100" }, + inventoryAvailableToSell: 3, isLowQuantity: true, price: { displayAmount: "$20.00" @@ -40,11 +40,11 @@ const testFulfillmentGroup = { { _id: "456", attributes: [{ label: "Color", value: "Black" }, { label: "Size", value: "10" }], - currentQuantity: 500, imageURLs: { small: "//placehold.it/150", thumbnail: "//placehold.it/100" }, + inventoryAvailableToSell: 30, isLowQuantity: false, price: { displayAmount: "$78.00" diff --git a/src/components/OrderFulfillmentGroup/OrderFulfillmentGroup.js b/src/components/OrderFulfillmentGroup/OrderFulfillmentGroup.js index 0e9aa2e2b5..4beda9e207 100644 --- a/src/components/OrderFulfillmentGroup/OrderFulfillmentGroup.js +++ b/src/components/OrderFulfillmentGroup/OrderFulfillmentGroup.js @@ -67,6 +67,13 @@ class OrderFulfillmentGroup extends Component { const { classes, fulfillmentGroup, hasMoreCartItems, loadMoreCartItems } = this.props; if (fulfillmentGroup && Array.isArray(fulfillmentGroup.items.nodes)) { + const items = fulfillmentGroup.items.nodes.map((item) => ({ + ...item, + // Backwards compatibility until all component library components are updated + // to accept `inventoryAvailableToSell`. + currentQuantity: item.currentQuantity || item.inventoryAvailableToSell + })); + return (
@@ -75,7 +82,7 @@ class OrderFulfillmentGroup extends Component { isReadOnly hasMoreCartItems={hasMoreCartItems} onLoadMoreCartItems={loadMoreCartItems} - items={fulfillmentGroup.items.nodes} + items={items} onChangeCartItemQuantity={this.handleItemQuantityChange} onRemoveItemFromCart={this.handleRemoveItem} /> diff --git a/src/components/OrderFulfillmentGroup/OrderFulfillmentGroup.test.js b/src/components/OrderFulfillmentGroup/OrderFulfillmentGroup.test.js index 9a4613fe00..a1df7340e0 100644 --- a/src/components/OrderFulfillmentGroup/OrderFulfillmentGroup.test.js +++ b/src/components/OrderFulfillmentGroup/OrderFulfillmentGroup.test.js @@ -23,11 +23,11 @@ const testFulfillmentGroup = { compareAtPrice: { displayAmount: "$45.00" }, - currentQuantity: 3, imageURLs: { small: "//placehold.it/150", thumbnail: "//placehold.it/100" }, + inventoryAvailableToSell: 3, isLowQuantity: true, price: { displayAmount: "$20.00" @@ -40,11 +40,11 @@ const testFulfillmentGroup = { { _id: "456", attributes: [{ label: "Color", value: "Black" }, { label: "Size", value: "10" }], - currentQuantity: 500, imageURLs: { small: "//placehold.it/150", thumbnail: "//placehold.it/100" }, + inventoryAvailableToSell: 30, isLowQuantity: false, price: { displayAmount: "$78.00" diff --git a/src/components/OrderSummary/OrderSummary.test.js b/src/components/OrderSummary/OrderSummary.test.js index 59dd54ab09..7972fa5772 100644 --- a/src/components/OrderSummary/OrderSummary.test.js +++ b/src/components/OrderSummary/OrderSummary.test.js @@ -23,7 +23,6 @@ const testFulfillmentGroup = { compareAtPrice: { displayAmount: "$45.00" }, - currentQuantity: 3, imageURLs: { small: "//placehold.it/150", thumbnail: "//placehold.it/100" @@ -40,7 +39,6 @@ const testFulfillmentGroup = { { _id: "456", attributes: [{ label: "Color", value: "Black" }, { label: "Size", value: "10" }], - currentQuantity: 500, imageURLs: { small: "//placehold.it/150", thumbnail: "//placehold.it/100" diff --git a/src/components/ProductDetail/ProductDetail.test.js b/src/components/ProductDetail/ProductDetail.test.js index d84dcc53be..3f267c7035 100644 --- a/src/components/ProductDetail/ProductDetail.test.js +++ b/src/components/ProductDetail/ProductDetail.test.js @@ -2,6 +2,8 @@ import React from "react"; import renderer from "react-test-renderer"; import { MuiThemeProvider } from "@material-ui/core/styles"; import { Provider } from "mobx-react"; +import { ComponentsProvider } from "@reactioncommerce/components-context"; +import components from "custom/componentsContext"; import theme from "custom/reactionTheme"; import ProductDetail from "./ProductDetail"; import sampleData from "./__mocks__/productData.mock"; @@ -43,11 +45,13 @@ const uiStore = { test("basic snapshot", () => { const component = renderer.create(( - - - - - + + + + + + + )); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); diff --git a/src/components/ProductDetail/__mocks__/productData.mock.js b/src/components/ProductDetail/__mocks__/productData.mock.js index 1f40b31c79..449ff7b7f1 100644 --- a/src/components/ProductDetail/__mocks__/productData.mock.js +++ b/src/components/ProductDetail/__mocks__/productData.mock.js @@ -168,7 +168,6 @@ export default { ], media: [ { - toGrid: 1, priority: 0, productId: "cmVhY3Rpb24vcHJvZHVjdDpCQ1RNWjZIVHhGU3BwSkVTaw==", variantId: "cmVhY3Rpb24vcHJvZHVjdDo2cWlxUHdCa2VKZHRkUWM0Rw==", @@ -181,7 +180,6 @@ export default { } }, { - toGrid: 1, priority: 0, productId: "cmVhY3Rpb24vcHJvZHVjdDpCQ1RNWjZIVHhGU3BwSkVTaw==", variantId: "cmVhY3Rpb24vcHJvZHVjdDo2cWlxUHdCa2VKZHRkUWM0Rw==", @@ -194,7 +192,6 @@ export default { } }, { - toGrid: 1, priority: 0, productId: "cmVhY3Rpb24vcHJvZHVjdDpCQ1RNWjZIVHhGU3BwSkVTaw==", variantId: "cmVhY3Rpb24vcHJvZHVjdDpTTXI0cmhERm5ZdkZNdERUWA==", @@ -207,7 +204,6 @@ export default { } }, { - toGrid: 1, priority: 0, productId: "cmVhY3Rpb24vcHJvZHVjdDpCQ1RNWjZIVHhGU3BwSkVTaw==", variantId: "cmVhY3Rpb24vcHJvZHVjdDpDSm9SQm05dlJyb3JjOW14Wg==", @@ -220,7 +216,6 @@ export default { } }, { - toGrid: 1, priority: 2, productId: "cmVhY3Rpb24vcHJvZHVjdDpCQ1RNWjZIVHhGU3BwSkVTaw==", variantId: "cmVhY3Rpb24vcHJvZHVjdDo2cWlxUHdCa2VKZHRkUWM0Rw==", @@ -233,7 +228,6 @@ export default { } }, { - toGrid: 1, priority: 3, productId: "cmVhY3Rpb24vcHJvZHVjdDpCQ1RNWjZIVHhGU3BwSkVTaw==", variantId: "cmVhY3Rpb24vcHJvZHVjdDo2cWlxUHdCa2VKZHRkUWM0Rw==", @@ -246,7 +240,6 @@ export default { } }, { - toGrid: 1, priority: 4, productId: "cmVhY3Rpb24vcHJvZHVjdDpCQ1RNWjZIVHhGU3BwSkVTaw==", variantId: "cmVhY3Rpb24vcHJvZHVjdDo2cWlxUHdCa2VKZHRkUWM0Rw==", @@ -259,7 +252,6 @@ export default { } }, { - toGrid: 1, priority: 5, productId: "cmVhY3Rpb24vcHJvZHVjdDpCQ1RNWjZIVHhGU3BwSkVTaw==", variantId: "cmVhY3Rpb24vcHJvZHVjdDo2cWlxUHdCa2VKZHRkUWM0Rw==", diff --git a/src/components/ProductDetail/__snapshots__/ProductDetail.test.js.snap b/src/components/ProductDetail/__snapshots__/ProductDetail.test.js.snap index 1f16812dda..0d6581e910 100644 --- a/src/components/ProductDetail/__snapshots__/ProductDetail.test.js.snap +++ b/src/components/ProductDetail/__snapshots__/ProductDetail.test.js.snap @@ -1,6 +1,20 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`basic snapshot 1`] = ` +.c7 { + width: 1.125em; + height: 1.125em; +} + +.c2 { + position: relative; + opacity: 0.5; +} + +.c3 { + position: relative; +} + .c5 { -webkit-font-smoothing: antialiased; -webkit-align-items: center; @@ -68,15 +82,6 @@ exports[`basic snapshot 1`] = ` fill: #ffffff; } -.c2 { - position: relative; - opacity: 0.5; -} - -.c3 { - position: relative; -} - .c4 { -webkit-font-smoothing: antialiased; color: #cd3f4c; @@ -921,7 +926,37 @@ Details can be added below the image for more specific product information. "width": 0, } } - /> + > + + + + + +
diff --git a/src/components/ProductDetailAddToCart/ProductDetailAddToCart.js b/src/components/ProductDetailAddToCart/ProductDetailAddToCart.js index b306cb5d95..ba57b4af0a 100644 --- a/src/components/ProductDetailAddToCart/ProductDetailAddToCart.js +++ b/src/components/ProductDetailAddToCart/ProductDetailAddToCart.js @@ -27,7 +27,6 @@ const cartItem = { value: "Summer" } ], - currentQuantity: 10, imageUrl: "//placehold.it/100", isLowInventoryQuantity: false, price: { diff --git a/src/components/ProductGrid/__mocks__/products.mock.js b/src/components/ProductGrid/__mocks__/products.mock.js index f856db425a..b561cfec72 100644 --- a/src/components/ProductGrid/__mocks__/products.mock.js +++ b/src/components/ProductGrid/__mocks__/products.mock.js @@ -13,7 +13,6 @@ export default [ isSoldOut: true, isBackorder: false, primaryImage: { - toGrid: 1, priority: 0, productId: "cmVhY3Rpb24vcHJvZHVjdDpqbmE5NWthOWFOa015dG14aA==", URLs: { @@ -57,7 +56,6 @@ export default [ isSoldOut: false, isBackorder: false, primaryImage: { - toGrid: 1, priority: 0, productId: "cmVhY3Rpb24vcHJvZHVjdDpCQ1RNWjZIVHhGU3BwSkVTaw==", URLs: { diff --git a/src/components/ProductGrid/__snapshots__/ProductGrid.test.js.snap b/src/components/ProductGrid/__snapshots__/ProductGrid.test.js.snap index 35d517c017..f99d2cfaa5 100644 --- a/src/components/ProductGrid/__snapshots__/ProductGrid.test.js.snap +++ b/src/components/ProductGrid/__snapshots__/ProductGrid.test.js.snap @@ -279,7 +279,6 @@ Array [ }, "priority": 0, "productId": "cmVhY3Rpb24vcHJvZHVjdDpqbmE5NWthOWFOa015dG14aA==", - "toGrid": 1, }, "slug": "men's-lightweigth-synchilla", "title": "Men's Lightweigth Synchilla", @@ -328,7 +327,6 @@ Details can be added below the image for more specific product information. }, "priority": 0, "productId": "cmVhY3Rpb24vcHJvZHVjdDpCQ1RNWjZIVHhGU3BwSkVTaw==", - "toGrid": 1, }, "slug": "example-product", "title": "Basic Reaction Product", diff --git a/src/containers/cart/fragments.gql b/src/containers/cart/fragments.gql index c9e1d16dfa..14d66e666b 100644 --- a/src/containers/cart/fragments.gql +++ b/src/containers/cart/fragments.gql @@ -197,7 +197,6 @@ fragment CartItemConnectionFragment on CartItemConnection { variantTitle optionTitle updatedAt - currentQuantity } } } diff --git a/src/containers/catalog/catalogItemProduct.gql b/src/containers/catalog/catalogItemProduct.gql index 073e7f9984..5090797a0b 100644 --- a/src/containers/catalog/catalogItemProduct.gql +++ b/src/containers/catalog/catalogItemProduct.gql @@ -39,13 +39,11 @@ query catalogItemProductQuery($slugOrId: String!) { small thumbnail } - toGrid priority productId variantId } media { - toGrid priority productId variantId @@ -107,7 +105,6 @@ query catalogItemProductQuery($slugOrId: String!) { isSoldOut isLowQuantity media { - toGrid priority productId variantId @@ -135,14 +132,12 @@ query catalogItemProductQuery($slugOrId: String!) { small thumbnail } - toGrid priority productId variantId } } media { - toGrid priority productId variantId @@ -170,7 +165,6 @@ query catalogItemProductQuery($slugOrId: String!) { small thumbnail } - toGrid priority productId variantId diff --git a/src/lib/tracking/utils/getVariantTrackingData.test.js b/src/lib/tracking/utils/getVariantTrackingData.test.js index 1ca796c923..19ff192adf 100644 --- a/src/lib/tracking/utils/getVariantTrackingData.test.js +++ b/src/lib/tracking/utils/getVariantTrackingData.test.js @@ -37,7 +37,6 @@ const product = { }, media: [ { - toGrid: 1, priority: 0, productId: "1001", variantId: "1002", @@ -46,7 +45,6 @@ const product = { } }, { - toGrid: 1, priority: 0, productId: "1001", variantId: "1003", diff --git a/src/lib/utils/cartItemsConnectionToArray.js b/src/lib/utils/cartItemsConnectionToArray.js index 376290f7fb..e01a20b18b 100644 --- a/src/lib/utils/cartItemsConnectionToArray.js +++ b/src/lib/utils/cartItemsConnectionToArray.js @@ -18,6 +18,10 @@ export default function cartItemsConnectionToArray(cartItemsConnection) { // Make a copy to be able to mutate const item = { ...node }; + // Backwards compatibility until all component library components are updated + // to accept `inventoryAvailableToSell`. + item.currentQuantity = item.currentQuantity || item.inventoryAvailableToSell; + return item; }); } diff --git a/src/lib/utils/cartItemsConnectionToArray.test.js b/src/lib/utils/cartItemsConnectionToArray.test.js index ad14f29f4b..dfab89071c 100644 --- a/src/lib/utils/cartItemsConnectionToArray.test.js +++ b/src/lib/utils/cartItemsConnectionToArray.test.js @@ -13,7 +13,6 @@ const cart = { small: "https://my.cdn.com/assets/files/Media/2oDhWDyk4qFsCZiAW/small/belle-HERO.png", thumbnail: "https://my.cdn.com/assets/files/Media/2oDhWDyk4qFsCZiAW/thumbnail/belle-HERO.png" }, - currentQuantity: null, optionTitle: "Red", productSlug: "basic-reaction-product", productType: "product-simple", @@ -30,7 +29,6 @@ const cart = { small: "https://my.cdn.com/assets/files/Media/mBSj5Fe8QgCKMCN4K/small/belle-HERO.png", thumbnail: "https://my.cdn.com/assets/files/Media/mBSj5Fe8QgCKMCN4K/thumbnail/belle-HERO.png" }, - currentQuantity: null, optionTitle: "Green", productSlug: "basic-reaction-product", productType: "product-simple", @@ -54,7 +52,6 @@ test("cartItemsConnectionToArray should convert a Relay style connection into a small: "https://my.cdn.com/assets/files/Media/2oDhWDyk4qFsCZiAW/small/belle-HERO.png", thumbnail: "https://my.cdn.com/assets/files/Media/2oDhWDyk4qFsCZiAW/thumbnail/belle-HERO.png" }, - currentQuantity: null, optionTitle: "Red", productSlug: "basic-reaction-product", productType: "product-simple", @@ -69,7 +66,6 @@ test("cartItemsConnectionToArray should convert a Relay style connection into a small: "https://my.cdn.com/assets/files/Media/mBSj5Fe8QgCKMCN4K/small/belle-HERO.png", thumbnail: "https://my.cdn.com/assets/files/Media/mBSj5Fe8QgCKMCN4K/thumbnail/belle-HERO.png" }, - currentQuantity: null, optionTitle: "Green", productSlug: "basic-reaction-product", productType: "product-simple", diff --git a/src/lib/utils/relayConnectionToArray.test.js b/src/lib/utils/relayConnectionToArray.test.js index f687c99de7..d004ef45e8 100644 --- a/src/lib/utils/relayConnectionToArray.test.js +++ b/src/lib/utils/relayConnectionToArray.test.js @@ -4,7 +4,6 @@ const items = { edges: [ { node: { - currentQuantity: null, optionTitle: "Red", productSlug: "basic-reaction-product", productType: "product-simple", @@ -14,7 +13,6 @@ const items = { }, { node: { - currentQuantity: null, optionTitle: "Green", productSlug: "basic-reaction-product", productType: "product-simple", @@ -30,7 +28,6 @@ test("relayConnectionToArray should convert a relay cursor connection to an arra const expected = [ { - currentQuantity: null, optionTitle: "Red", productSlug: "basic-reaction-product", productType: "product-simple", @@ -38,7 +35,6 @@ test("relayConnectionToArray should convert a relay cursor connection to an arra variantTitle: "Option 1 - Red Dwarf" }, { - currentQuantity: null, optionTitle: "Green", productSlug: "basic-reaction-product", productType: "product-simple",