feat(mobile/shop): Adds feedback when add new card from backlog

static/css/order-hardware.css

@@ -8,6 +8,10 @@
   z-index: 10;
 }
 
+.feedback-add-success {
+  display: none;
+}
+
 /*
   ##Device = Tablets, Ipads (portrait)
   ##Screen = B/w 768px to 1024px
@@ -171,6 +175,19 @@
   ##Screen = B/w 481px to 767px
 */
 @media (min-width: 481px) and (max-width: 767px) {
+  .feedback-add-success {
+    background-color: green;
+    display: block;
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    padding: 1em;
+    z-index: 100000;
+    color: white;
+    border-radius: 10px;
+    box-shadow: 0 0 5px 3px;
+  }
+
   .dropdown-item {
     font-size: .75em;
   }
@@ -306,7 +323,7 @@
     position: absolute;
     height: 100%;
     width: 100%;
-    background-color: rgba(0, 0, 0, 0);
+    background-color: rgba(0, 0, 0, .3);
     top: 0;
     bottom: 0;
     z-index: 10;
@@ -355,6 +372,19 @@
   ##Screen = B/w 320px to 479px
 */
 @media (min-width: 320px) and (max-width: 480px) {
+  .feedback-add-success {
+    background-color: green;
+    display: block;
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    padding: 1em;
+    z-index: 100000;
+    color: white;
+    border-radius: 10px;
+    box-shadow: 0 0 5px 3px;
+  }
+
   .dropdown-item {
     font-size: .75em;
   }
@@ -409,7 +439,7 @@
     position: absolute;
     height: 100%;
     width: 100%;
-    background-color: rgba(0, 0, 0, 0);
+    background-color: rgba(0, 0, 0, .3);
     top: 0;
     bottom: 0;
   }

static/js/shop.jsx

@@ -137,6 +137,8 @@ class Layout extends React.PureComponent {
       aside: PropTypes.any,
       main: PropTypes.any,
       mobileSideMenuShouldOpen: PropTypes.bool,
+      isMobile: PropTypes.bool,
+      newCardJustAdded: PropTypes.bool,
       onClickToggleMobileSideMenu: PropTypes.func,
     };
   }
@@ -152,6 +154,8 @@ class Layout extends React.PureComponent {
       aside,
       main,
       mobileSideMenuShouldOpen,
+      isMobile,
+      newCardJustAdded,
       onClickToggleMobileSideMenu
     } = this.props;
 
@@ -166,6 +170,12 @@ class Layout extends React.PureComponent {
           <section className="main">{main}</section>
         )}
 
+        {isMobile && newCardJustAdded ? (
+          <div className="feedback-add-success">
+           ✓ added
+          </div>
+        ) : null}
+
       </div>
     );
   }
@@ -196,9 +206,9 @@ class ProductItem extends React.PureComponent {
     this.handleOnClickAddItem = this.handleOnClickAddItem.bind(this);
   }
 
-  handleOnClickAddItem(index, e) {
+  handleOnClickAddItem(index, tap, e) {
     if (this.props.onClickAddItem) {
-      this.props.onClickAddItem(index);
+      this.props.onClickAddItem(index, tap);
     }
     e.preventDefault();
   }
@@ -235,7 +245,7 @@ class ProductItem extends React.PureComponent {
 
         <div className="content">
 
-          <button onClick={this.handleOnClickAddItem.bind(this, index)}>
+          <button onClick={this.handleOnClickAddItem.bind(this, index, true)}>
             <img src="/images/shop/icon-add.svg" alt="add" />
           </button>
 
@@ -1158,6 +1168,8 @@ class Shop extends React.PureComponent {
     this.handleClickSubmit = this.handleClickSubmit.bind(this);
     this.handleToggleOverlayRemove = this.handleToggleOverlayRemove.bind(this);
     this.handleClickToggleMobileSideMenu = this.handleClickToggleMobileSideMenu.bind(this);
+
+    this.timer = null;
   }
 
   componentDidMount() {
@@ -1195,6 +1207,18 @@ class Shop extends React.PureComponent {
         prevState.columns.cart.items,
         this.state.columns.cart.items);
     }
+
+    if (this.state.newCardJustAdded) {
+      this.timer = setTimeout(() => {
+        this.setState({
+          newCardJustAdded: false,
+        });
+      }, 2000);
+    }
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timer);
   }
 
   handleCrateModeChange(mode) {
@@ -1245,7 +1269,7 @@ class Shop extends React.PureComponent {
     });
   }
 
-  handleClickAddItem(index) {
+  handleClickAddItem(index, tap) {
     const source = {
       droppableId: 'backlog',
       index: index,
@@ -1258,8 +1282,8 @@ class Shop extends React.PureComponent {
     this.handleOnDragEnd({
       source,
       destination,
-      draggableId: null,
+      draggableId: null
-    });
+    }, tap);
   }
 
   handleToggleItemProgress(index, show) {
@@ -1374,7 +1398,7 @@ class Shop extends React.PureComponent {
     a.click();
   }
 
-  handleOnDragEnd(result) {
+  handleOnDragEnd(result, newAdded) {
     const {
       source,
       destination,
@@ -1385,6 +1409,7 @@ class Shop extends React.PureComponent {
       if (source.droppableId === 'cart') {
         this.setState({
           ...this.state,
+          newCardJustAdded: false,
           columns: {
             ...this.state.columns,
             [source.droppableId]: {
@@ -1406,6 +1431,7 @@ class Shop extends React.PureComponent {
       case 'backlog':
         this.setState({
           ...this.state,
+          newCardJustAdded: newAdded ? true : false,
           columns: {
             ...this.state.columns,
             [destination.droppableId]: {
@@ -1425,6 +1451,7 @@ class Shop extends React.PureComponent {
       case destination.droppableId:
         this.setState({
           ...this.state,
+          newCardJustAdded: false,
           columns: {
             ...this.state.columns,
             [destination.droppableId]: {
@@ -1735,6 +1762,7 @@ class Shop extends React.PureComponent {
       columns,
       rules,
       mobileSideMenuShouldOpen,
+      newCardJustAdded,
     } = this.state;
 
     const isMobile = window.deviceIsMobile();
@@ -1745,6 +1773,8 @@ class Shop extends React.PureComponent {
         <Layout
             className="shop"
             mobileSideMenuShouldOpen={mobileSideMenuShouldOpen}
+            isMobile={isMobile}
+            newCardJustAdded={newCardJustAdded}
             onClickToggleMobileSideMenu={this.handleClickToggleMobileSideMenu}
             aside={
               <Backlog