@arcteryx/components-cart - npm Package Compare versions

Comparing version 5.0.15 to 5.1.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [5.1.0](http://bitbucket.org/arcteryx/arcteryx-js-helpers/compare/@arcteryx/components-cart@5.0.15...@arcteryx/components-cart@5.1.0) (2020-12-30)
+
+
+### Features
+
+* TMS-542 disabled decrease and increasing ([a190b62](http://bitbucket.org/arcteryx/arcteryx-js-helpers/commits/a190b62ba49cb965f3fed1e2bd978c4f7c73e2d9))
+
+
+
+
+
 ## [5.0.15](http://bitbucket.org/arcteryx/arcteryx-js-helpers/compare/@arcteryx/components-cart@5.0.14...@arcteryx/components-cart@5.0.15) (2020-12-30)
@@ -8,0 +19,0 @@

dist/cjs/index.js

@@ -306,17 +306,15 @@ 'use strict';
     color: ${({
-  count
-}) => count === 1 ? "var(--inactive-state-grey)" : "var(--black)"};
+  disabled
+}) => disabled ? "var(--inactive-state-grey)" : "var(--black)"};
     cursor: ${({
-  count
-}) => count === 1 ? "not-allowed" : "pointer"};
+  disabled
+}) => disabled ? "not-allowed" : "pointer"};
   }
   &[aria-label="increase"] {
     color: ${({
-  count,
-  stock
-}) => count < stock ? "var(--black)" : "var(--inactive-state-grey)"};
+  disabled
+}) => !disabled ? "var(--black)" : "var(--inactive-state-grey)"};
     cursor: ${({
-  count,
-  stock
-}) => count < stock ? "pointer" : "not-allowed"};
+  disabled
+}) => !disabled ? "pointer" : "not-allowed"};
   }
@@ -349,3 +347,4 @@ `;
   isNarrow,
-  isSidebar
+  isSidebar,
+  stockMessage
 }) => {
@@ -355,2 +354,3 @@ const {
   } = reactI18next.useTranslation("components-cart");
+  const insufficientInventory = stockMessage === 'Sorry there is insufficient inventory to fulfil your request';
 
@@ -398,3 +398,3 @@ const decrementCount = event => {
       onClick: incrementCount,
-      disabled: quantity >= stock
+      disabled: insufficientInventory
     }, "+"));
@@ -536,3 +536,4 @@ }
     isNarrow: isNarrow,
-    isSidebar: isSidebar
+    isSidebar: isSidebar,
+    stockMessage: product.stockMessage
   }), /*#__PURE__*/React__default.createElement(StyledPrice, {
@@ -539,0 +540,0 @@ className: "qa-cart-item-price",

dist/es/index.js

@@ -298,17 +298,15 @@ import React, { useContext } from 'react';
     color: ${({
-  count
-}) => count === 1 ? "var(--inactive-state-grey)" : "var(--black)"};
+  disabled
+}) => disabled ? "var(--inactive-state-grey)" : "var(--black)"};
     cursor: ${({
-  count
-}) => count === 1 ? "not-allowed" : "pointer"};
+  disabled
+}) => disabled ? "not-allowed" : "pointer"};
   }
   &[aria-label="increase"] {
     color: ${({
-  count,
-  stock
-}) => count < stock ? "var(--black)" : "var(--inactive-state-grey)"};
+  disabled
+}) => !disabled ? "var(--black)" : "var(--inactive-state-grey)"};
     cursor: ${({
-  count,
-  stock
-}) => count < stock ? "pointer" : "not-allowed"};
+  disabled
+}) => !disabled ? "pointer" : "not-allowed"};
   }
@@ -341,3 +339,4 @@ `;
   isNarrow,
-  isSidebar
+  isSidebar,
+  stockMessage
 }) => {
@@ -347,2 +346,3 @@ const {
   } = useTranslation("components-cart");
+  const insufficientInventory = stockMessage === 'Sorry there is insufficient inventory to fulfil your request';
 
@@ -390,3 +390,3 @@ const decrementCount = event => {
       onClick: incrementCount,
-      disabled: quantity >= stock
+      disabled: insufficientInventory
     }, "+"));
@@ -528,3 +528,4 @@ }
     isNarrow: isNarrow,
-    isSidebar: isSidebar
+    isSidebar: isSidebar,
+    stockMessage: product.stockMessage
   }), /*#__PURE__*/React.createElement(StyledPrice, {
@@ -531,0 +532,0 @@ className: "qa-cart-item-price",

dist/umd/index.js

@@ -305,17 +305,15 @@ (function (global, factory) {
     color: ${({
-  count
-}) => count === 1 ? "var(--inactive-state-grey)" : "var(--black)"};
+  disabled
+}) => disabled ? "var(--inactive-state-grey)" : "var(--black)"};
     cursor: ${({
-  count
-}) => count === 1 ? "not-allowed" : "pointer"};
+  disabled
+}) => disabled ? "not-allowed" : "pointer"};
   }
   &[aria-label="increase"] {
     color: ${({
-  count,
-  stock
-}) => count < stock ? "var(--black)" : "var(--inactive-state-grey)"};
+  disabled
+}) => !disabled ? "var(--black)" : "var(--inactive-state-grey)"};
     cursor: ${({
-  count,
-  stock
-}) => count < stock ? "pointer" : "not-allowed"};
+  disabled
+}) => !disabled ? "pointer" : "not-allowed"};
   }
@@ -348,3 +346,4 @@ `;
     isNarrow,
-    isSidebar
+    isSidebar,
+    stockMessage
   }) => {
@@ -354,2 +353,3 @@ const {
     } = reactI18next.useTranslation("components-cart");
+    const insufficientInventory = stockMessage === 'Sorry there is insufficient inventory to fulfil your request';
 
@@ -397,3 +397,3 @@ const decrementCount = event => {
         onClick: incrementCount,
-        disabled: quantity >= stock
+        disabled: insufficientInventory
       }, "+"));
@@ -535,3 +535,4 @@ }
       isNarrow: isNarrow,
-      isSidebar: isSidebar
+      isSidebar: isSidebar,
+      stockMessage: product.stockMessage
     }), /*#__PURE__*/React__default.createElement(StyledPrice, {
@@ -538,0 +539,0 @@ className: "qa-cart-item-price",

package.json

 {
   "name": "@arcteryx/components-cart",
-  "version": "5.0.15",
+  "version": "5.1.0",
   "description": "Arcteryx Cart",
@@ -19,3 +19,3 @@ "source": "src/index.js",
   "license": "ISC",
-  "gitHead": "d39d4e750c57958fe5bc290e496e722a64485ef3",
+  "gitHead": "e907390a52b979063676be45b4ffb41207c9dd1a",
   "peerDependencies": {
@@ -22,0 +22,0 @@ "@arcteryx/components-contexts": "^1.1.0",

src/components/Item/CartProduct.js

@@ -84,3 +84,12 @@ import Price from "@arcteryx/components-price";
 `;
-const CartProduct = ({ product, handleRemove, canEdit, handleIncrement, handleDecrement, isSidebar, isFlyIn }) => {
+const CartProduct = (
+  {
+    product,
+    handleRemove,
+    canEdit,
+    handleIncrement,
+    handleDecrement,
+    isSidebar,
+    isFlyIn
+  }) => {
   const isNarrow = Boolean(isSidebar || isFlyIn);
@@ -113,2 +122,3 @@ const removeFromCart = () => {
           isSidebar={isSidebar}
+          stockMessage={product.stockMessage}
         />
@@ -115,0 +125,0 @@

src/components/Item/Quantity.js

@@ -31,8 +31,8 @@ import React from "react";
   &[aria-label="decrease"] {
-    color: ${({ count }) => (count === 1 ? "var(--inactive-state-grey)" : "var(--black)")};
-    cursor: ${({ count }) => (count === 1 ? "not-allowed" : "pointer")};
+    color: ${({ disabled }) => (disabled ? "var(--inactive-state-grey)" : "var(--black)")};
+    cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
   }
   &[aria-label="increase"] {
-    color: ${({ count, stock }) => (count < stock ? "var(--black)" : "var(--inactive-state-grey)")};
-    cursor: ${({ count, stock }) => (count < stock ? "pointer" : "not-allowed")};
+    color: ${({ disabled }) => (!disabled ? "var(--black)" : "var(--inactive-state-grey)")};
+    cursor: ${({ disabled }) => (!disabled ? "pointer" : "not-allowed")};
   }
@@ -59,4 +59,15 @@ `;
 
-const Quantity = ({ handleIncrement, handleDecrement, quantity, stock = 10, canEdit, isNarrow, isSidebar }) => {
+const Quantity = (
+  {
+    handleIncrement,
+    handleDecrement,
+    quantity,
+    stock = 10,
+    canEdit,
+    isNarrow,
+    isSidebar,
+    stockMessage
+  }) => {
   const { t } = useTranslation("components-cart");
+  const insufficientInventory = stockMessage === 'Sorry there is insufficient inventory to fulfil your request';
 
@@ -100,3 +111,3 @@ const decrementCount = event => {
           onClick={incrementCount}
-          disabled={quantity >= stock}
+          disabled={insufficientInventory}
         >
@@ -103,0 +114,0 @@ +

No alert changes

Improved metrics

Lines of code

5966

increased by0.4%

Worsened metrics

Total package byte prevSize

494039

decreased by-0.07%

No dependency changes