Merge pull request #370 from reactioncommerce/369-feat-machikoyasuda-cartitem-subtotal

feat(#369): CartItem - Display Subtotal

Author: machikoyasuda

package/src/components/CartItem/v1/CartItem.js

@@ -5,6 +5,7 @@ import { withComponents } from "@reactioncommerce/components-context";
 import { addTypographyStyles, applyTheme, CustomPropTypes } from "../../../utils";
 
 const Item = styled.div`
+  position: relative;
   align-items: flex-start;
   border-bottom-color: ${applyTheme("CartItem.borderBottomColor")};
   border-bottom-style: solid;
@@ -79,17 +80,39 @@ const ItemContentQuantityInput = styled.div`
 `;
 
 const ItemContentPrice = styled.div`
-  bottom: 0;
-  flex: 0 1 auto;
-  position: absolute;
+  position: ${(props) => (props.isMiniCart ? "absolute" : "initial")};
+  bottom: ${applyTheme("CartItem.paddingBottom")};
   right: 0;
-
+  text-align: right;
+  @media (max-width: 768px) {
+    position: absolute;
+  }
   @media (min-width: 768px) {
     margin-left: 1.5rem;
-    position: ${({ isMiniCart }) => (isMiniCart ? "absolute" : "relative")};
   }
 `;
 
+const ItemContentSubtotal = styled.div`
+  position: ${(props) => (props.isMiniCart ? "initial" : "absolute")};
+  margin-top: ${(props) => (props.isMiniCart ? applyTheme("CartItem.subtotalDisplaySpacingAbove")(props) : "0")};
+  bottom: ${applyTheme("CartItem.paddingBottom")};
+  right: 0;
+  text-align: right;
+  @media (max-width: 768px) {
+    position: initial;
+    margin-top: ${applyTheme("CartItem.subtotalDisplaySpacingAbove")};
+  }
+`;
+
+const ItemContentSubtotalTitle = styled.div`
+  ${addTypographyStyles("ItemContentSubtotalTitle", "labelText")};
+  white-space: pre;
+`;
+
+const ItemContentSubtotalDisplay = styled.div`
+  ${addTypographyStyles("ItemContentSubtotalDisplay", "bodyTextSemiBold")};
+`;
+
 const ItemRemoveButton = styled.button`
   ${addTypographyStyles("CartItemRemoveButton", "labelText")}
   align-self: flex-start;
@@ -219,6 +242,12 @@ class CartItem extends Component {
       /**
        * Chosen items title
        */
+      subtotal: PropTypes.shape({
+        /**
+         * The display subtotal
+         */
+        displayAmount: PropTypes.string
+      }),
       title: PropTypes.string,
       /**
        * Quantity of chosen item in cart
@@ -293,10 +322,12 @@ class CartItem extends Component {
         title,
         quantity,
         isLowQuantity,
-        price: { displayAmount: displayPrice }
+        price: { displayAmount: displayPrice },
+        subtotal
       }
     } = this.props;
 
+    const { displayAmount: displaySubtotal } = subtotal || {};
     const { displayAmount: displayCompareAtPrice } = compareAtPrice || {};
 
     const {
@@ -339,15 +370,22 @@ class CartItem extends Component {
 
             {!isReadOnly && <ItemRemoveButton onClick={this.handleRemoveItemFromCart}>Remove</ItemRemoveButton>}
           </ItemContentDetail>
-
-          <ItemContentPrice isMiniCart={isMiniCart}>
-            <Price
-              displayPrice={displayPrice}
-              displayCompareAtPrice={displayCompareAtPrice}
-              hasPriceBottom={isMiniCart}
-            />
-          </ItemContentPrice>
         </ItemContent>
+        <ItemContentPrice isMiniCart={isMiniCart}>
+          <Price
+            displayPrice={displayPrice}
+            displayCompareAtPrice={displayCompareAtPrice}
+            hasPriceBottom={isMiniCart}
+          />
+          { quantity !== 1 ?
+            <ItemContentSubtotal isMiniCart={isMiniCart}>
+              <ItemContentSubtotalTitle>Total ({quantity}):</ItemContentSubtotalTitle>
+              <ItemContentSubtotalDisplay>{displaySubtotal}</ItemContentSubtotalDisplay>
+            </ItemContentSubtotal>
+            :
+            null
+          }
+        </ItemContentPrice>
       </Item>
     );
   }

package/src/components/CartItem/v1/CartItem.md

@@ -26,6 +26,9 @@ const item = {
   },
   productSlug: "product-slug",
   productVendor: "Patagonia",
+  subtotal: {
+    displayAmount: "$40.00",
+  },
   title: "A Great Product",
   quantity: 2
 };
@@ -37,6 +40,41 @@ const item = {
 />
 ```
 
+#### Default: isMiniCart
+
+```jsx
+const item = {
+  _id: "123",
+  attributes: [{ label: "Color", value: "Red" }, { label: "Size", value: "Medium" }],
+  compareAtPrice: {
+    displayAmount: "$45.00"
+  },
+  currentQuantity: 3,
+  imageURLs: {
+    small: "//placehold.it/150",
+    thumbnail: "//placehold.it/100"
+  },
+  isLowQuantity: true,
+  price: {
+    displayAmount: "$20.00"
+  },
+  productSlug: "product-slug",
+  productVendor: "Patagonia",
+  subtotal: {
+    displayAmount: "$40.00",
+  },
+  title: "A Great Product",
+  quantity: 2
+};
+
+<CartItem
+  isMiniCart
+  item={item}
+  onChangeCartItemQuantity={(value, _id) => console.log("cart item quantity changed to", value, "for item", _id)}
+  onRemoveItemFromCart={() => console.log("Item removed from cart")}
+/>
+```
+
 #### Without Compare At Price
 ```jsx
 const item = {

package/src/components/CartItem/v1/CartItem.test.js

@@ -21,6 +21,9 @@ const mockItem = {
   },
   productSlug: "product-slug",
   productVendor: "Patagonia",
+  subtotal: {
+    displayAmount: "$40.00"
+  },
   title: "A Great Product",
   quantity: 2
 };