Add disable button styles. Disable shopping cart buttons logic

recipes/src/components/Button/index.tsx

@@ -29,6 +29,7 @@ export default function CBKButton(props: CBKButtonProps) {
     'cbk-btn--raised': props.raised,
     'cbk-btn--unelevated': props.unelevated,
     'cbk-btn--outlined': props.outlined,
+    'cbk-btn--disabled': props.disabled,
   })
   if (props.icon) {
     return (

recipes/src/components/Button/styles.scss

@@ -40,6 +40,19 @@ button.cbk-btn {
     background-color: $grey-400;
   }
 
+  &--disabled {
+    color: $grey-500!important;
+    pointer-events: none!important;
+    cursor: default;
+    box-shadow: none!important;
+    font-style: italic;
+    background-color: white;
+    &:hover,
+    &:active {
+      position: unset!important;
+    }
+  }
+
   &--raised {
     background-color: $black;
     color: $white;
@@ -63,10 +76,15 @@ button.cbk-btn {
       top: 4px;
       left: 4px
     }
+    &.cbk-btn--disabled {
+      background-color: $grey-300;
+      border-color: $grey-300;
+    }
   }
 
   &--unelevated {
     background-color: $black;
+    border: 3px solid $black;
     color: $white;
     &:hover {
       background-color: $black;
@@ -75,8 +93,13 @@ button.cbk-btn {
     
     &:active {
       background-color: $black;
+      border: 3px solid $black;
       box-shadow: 3px 3px $yellow-dark;
     }
+    &.cbk-btn--disabled {
+      background-color: $grey-300;
+      border-color: $grey-300;
+    }
   }
 
   &--outlined {
@@ -115,6 +138,11 @@ button.cbk-btn {
       );
       background-size: 45.25px 45.25px;
     }
+    
+    &.cbk-btn--disabled {
+      background-color: $white;
+      border-color: $grey-300;
+    }
   }
 
   &:last-child {

recipes/src/containers/ShoppingCart/View/index.tsx

@@ -33,6 +33,7 @@ interface ShoppingCartViewState {
   selectedMeasure?: {
     name: string, values: string[]
   },
+  saveDisabled: boolean,
 }
 
 class ShoppingCartView extends React.Component<ShoppingCartViewProps, ShoppingCartViewState> {
@@ -43,6 +44,7 @@ class ShoppingCartView extends React.Component<ShoppingCartViewProps, ShoppingCa
       dialogOpen: false,
       selected: [],
       selectedMeasure: undefined,
+      saveDisabled: true
     }
   }
   
@@ -97,7 +99,12 @@ class ShoppingCartView extends React.Component<ShoppingCartViewProps, ShoppingCa
     if (selectedMeasure && selected.every(item => selectedMeasure.values.includes(item.unit))) {
       try {
         const result = this.props.mergeItemsCart(this.state.selected, combineMultipleItems(this.state.selected));
-        this.clearSelection(() => this.selectItem(result.payload.newItem));
+        this.clearSelection(() => {
+          this.selectItem(result.payload.newItem);
+          this.setState({
+            saveDisabled: false
+          })
+        });
       } catch(error) {
         toast.error("There was an error merging items:", error);
       }
@@ -115,7 +122,11 @@ class ShoppingCartView extends React.Component<ShoppingCartViewProps, ShoppingCa
 
   removeItems = () => {
     this.props.removeMultipleItemsFromCart(this.state.selected);
-    this.clearSelection();
+    this.clearSelection(() => {
+      this.setState({
+        saveDisabled: false
+      })
+    });
   }
 
   sortItems = (event: React.ChangeEvent<HTMLSelectElement>) => {
@@ -135,25 +146,15 @@ class ShoppingCartView extends React.Component<ShoppingCartViewProps, ShoppingCa
               <>
                 <div className='cbk-shopping-cart-view__actions'>
                   <div className='cbk-shopping-cart-view__actions--selection-actions'>
-                    {
-                      this.state.selected.length ? (
-                        <>
-                          <Button outlined onClick={this.removeItems}>
-                            Remove
-                          </Button>
-                          <Button outlined onClick={this.clearSelection}>
-                            Clear
-                          </Button>
-                          {
-                            this.state.selected.length > 1 && (
-                              <Button outlined onClick={this.mergeItems}>
-                                Merge
-                              </Button>
-                            )
-                          }
-                        </>
-                      ) : null
-                    }
+                    <Button outlined onClick={this.mergeItems} disabled={this.state.selected.length < 2}>
+                      Merge
+                    </Button>
+                    <Button outlined onClick={() => this.clearSelection()} disabled={!this.state.selected.length}>
+                      Clear
+                    </Button>
+                    <Button unelevated onClick={this.removeItems} disabled={!this.state.selected.length}>
+                      Remove
+                    </Button>
                   </div>
                   <Select
                     onChange={this.sortItems}
@@ -167,7 +168,7 @@ class ShoppingCartView extends React.Component<ShoppingCartViewProps, ShoppingCa
                   <Button outlined onClick={() => this.openDialog(true) }>
                     Delete
                   </Button>
-                  <Button raised onClick={() => this.props.save(this.props.items)}>
+                  <Button raised onClick={() => this.props.save(this.props.items)} disabled={this.state.saveDisabled}>
                     Save
                   </Button>
                 </div>