Rebase and fix warning in development mode

Signed-off-by: Egor Savkin <es@m-labs.hk>

package.json

@@ -12,25 +12,25 @@
     "url": "https://git.m-labs.hk/M-Labs/web2019.git"
   },
   "devDependencies": {
-    "@babel/cli": "^7.22.6",
-    "@babel/core": "^7.22.8",
-    "@babel/preset-env": "^7.22.7",
-    "@babel/preset-react": "^7.22.5",
-    "axios": "^1.4.0",
+    "@babel/cli": "^7.23.0",
+    "@babel/core": "^7.23.2",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "axios": "^1.6.0",
     "babel-loader": "^9.1.3",
     "babel-preset-minify": "^0.5.2",
     "bootstrap": "^5.3.0",
     "jquery": "^3.7.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-bootstrap": "^2.8.0",
+    "react-bootstrap": "^2.9.1",
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
-    "uuid": "^9.0.0",
-    "webpack": "^5.88.1",
+    "uuid": "^9.0.1",
+    "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
     "json-logic-js": "^2.0.2",
-    "@uidotdev/usehooks": "^2.1.1"
+    "@uidotdev/usehooks": "^2.4.1"
   },
   "babel": {
     "presets": [

sass/css/_shop.scss

@@ -461,50 +461,6 @@ button {
                             width: 20px;
                             padding-bottom: 3px;
                         }
-
-                        .k-popup-connectors,
-                        .k-popup-warning {
-                            position: absolute;
-                            background-color: $color-primary;
-                            color: white;
-                            font-weight: 700;
-                            font-size: .6rem;
-                            padding: .8rem 1rem;
-                            box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
-                            text-align: left;
-
-                            p {
-                                margin-bottom: 0;
-                            }
-
-                            p + p {
-                                padding-bottom: 8px;
-                            }
-                        }
-
-                        .k-popup-connectors {
-                            min-width: 200px;
-                            bottom: 50px;
-                        }
-
-                        .k-popup-warning {
-                            background-color: #c75e5e;
-                            min-width: 350px;
-
-                            .rule.warning {
-                                display: flex;
-                                font-size: .75rem;
-
-                                img {
-                                    margin-right: 10px;
-                                    height: 100%;
-                                }
-                            }
-                        }
-
-                        .k-popup-warning.inverted {
-                            right: 0;
-                        }
                     }
 
                     .overlayRemove {
@@ -633,3 +589,42 @@ button {
     }
 
 }
+
+.k-popup-connectors,
+.k-popup-warning {
+    background-color: $color-primary;
+    color: white;
+    font-weight: 700;
+    font-size: .6rem;
+    padding: .8rem 1rem;
+    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
+    text-align: left;
+
+    p {
+        margin-bottom: 0;
+    }
+
+    p + p {
+        padding-bottom: 8px;
+    }
+}
+
+.k-popup-connectors {
+    min-width: 200px;
+}
+
+.k-popup-warning {
+    background-color: #c75e5e;
+    min-width: 300px;
+
+    .rule.warning {
+        display: flex;
+        font-size: .75rem;
+
+        img {
+            margin-right: 10px;
+            height: 100%;
+        }
+    }
+}
+

static/js/shop.jsx

@@ -7,6 +7,7 @@ import PropTypes from "prop-types";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import { v4 as uuidv4 } from 'uuid';
 import { OptionsDialogPopup, OptionsSummaryPopup, FilterOptions, FillExtData } from "./shop_components.jsx";
+import { OverlayTrigger } from "react-bootstrap";
 
 const data = window.shop_data;
 const itemsUnfoldedList = Array.from(data.columns.backlog.categories.map(groupId => groupId.itemIds).flat());
@@ -533,17 +534,16 @@ class ProductCartItem extends React.PureComponent {
   static get propTypes() {
     return {
       isMobile: PropTypes.bool,
+      isTouch: PropTypes.bool,
       hovered: PropTypes.bool,
       index: PropTypes.number.isRequired,
       model: PropTypes.object.isRequired,
       data: PropTypes.object,
       ext_data: PropTypes.object,
-      onToggleProgress: PropTypes.func,
-      onToggleWarning: PropTypes.func,
       onToggleOverlayRemove: PropTypes.func,
       onClickRemoveItem: PropTypes.func,
+      onClickItem: PropTypes.func,
       onCardUpdate: PropTypes.func,
-      shouldTooltipWarningClassInverted: PropTypes.bool,
     };
   }
 
@@ -555,47 +555,10 @@ class ProductCartItem extends React.PureComponent {
 
   constructor(props) {
     super(props);
-    this.handleOnMouseEnterItem = this.handleOnMouseEnterItem.bind(this);
-    this.handleOnMouseLeaveItem = this.handleOnMouseLeaveItem.bind(this);
-    this.handleOnMouseEnterWarningItem = this.handleOnMouseEnterWarningItem.bind(this);
-    this.handleOnMouseLeaveWarningItem = this.handleOnMouseLeaveWarningItem.bind(this);
     this.handleOnMouseEnterRemoveItem = this.handleOnMouseEnterRemoveItem.bind(this);
     this.handleOnMouseLeaveRemoveItem = this.handleOnMouseLeaveRemoveItem.bind(this);
     this.handleOnClickRemoveItem = this.handleOnClickRemoveItem.bind(this);
-  }
-
-  handleOnMouseEnterItem(index, e) {
-    if (this.props.onToggleProgress) {
-      this.props.onToggleProgress(index, true);
-    }
-    e.preventDefault();
-  }
-
-  handleOnMouseLeaveItem(index, e) {
-    if (this.props.onToggleProgress) {
-      this.props.onToggleProgress(index, false);
-    }
-    e.preventDefault();
-  }
-
-  handleOnMouseEnterWarningItem(index, isWarning, e) {
-    if (!isWarning) {
-      return;
-    }
-    if (this.props.onToggleWarning) {
-      this.props.onToggleWarning(index, true);
-    }
-    e.preventDefault();
-  }
-
-  handleOnMouseLeaveWarningItem(index, isWarning, e) {
-    if (!isWarning) {
-      return;
-    }
-    if (this.props.onToggleWarning) {
-      this.props.onToggleWarning(index, false);
-    }
-    e.preventDefault();
+    this.handleOnClickItem = this.handleOnClickItem.bind(this);
   }
 
   handleOnMouseEnterRemoveItem(index, e) {
@@ -612,6 +575,13 @@ class ProductCartItem extends React.PureComponent {
     e.preventDefault();
   }
 
+  handleOnClickItem(index, e) {
+    if (this.props.onClickItem && this.props.isTouch) {
+      this.props.onClickItem(index);
+    }
+    e.preventDefault();
+  }
+
   handleOnClickRemoveItem(index, e) {
     if (this.props.onClickRemoveItem) {
       this.props.onClickRemoveItem(index);
@@ -625,7 +595,6 @@ class ProductCartItem extends React.PureComponent {
       data,
       index,
       ext_data,
-      shouldTooltipWarningClassInverted,
       onCardUpdate,
     } = this.props;
 
@@ -648,40 +617,26 @@ class ProductCartItem extends React.PureComponent {
     }
 
     let render_progress;
-    if (model.showProgress && data) {
+    if (data) {
       switch(model.type) {
         case 'kasli':
-          render_progress = (
-            <div className="k-popup-connectors">
-              <p>{`${data.nbrCurrentSlot}/${model.nbrSlotMax} EEM connectors used`}</p>
-              <p>{`${data.nbrCurrentClock}/${model.nbrClockMax} Clock connectors used`}</p>
-            </div>
-          );
+          render_progress = [
+              (<p key={model.type+model.id+"EEM"}>{`${data.nbrCurrentSlot}/${model.nbrSlotMax} EEM connectors used`}</p>),
+              (<p key={model.type+model.id+"CLK"}>{`${data.nbrCurrentClock}/${model.nbrClockMax} Clock connectors used`}</p>)
+          ];
           break;
 
         case 'vhdcicarrier':
-          render_progress = (
-            <div className="k-popup-connectors">
-              <p>{`${data.nbrCurrentSlot}/${model.nbrSlotMax} EEM connectors used`}</p>
-            </div>
-          );
+          render_progress = (<p>{`${data.nbrCurrentSlot}/${model.nbrSlotMax} EEM connectors used`}</p>);
           break;
 
         case 'zotino':
         case 'hd68':
-          render_progress = (
-            <div className="k-popup-connectors">
-              <p>{`${data.nbrCurrentSlot}/${model.nbrSlotMax} connectors used`}</p>
-            </div>
-          );
+          render_progress = (<p>{`${data.nbrCurrentSlot}/${model.nbrSlotMax} connectors used`}</p>);
           break;
 
         case 'clocker':
-          render_progress = (
-            <div className="k-popup-connectors">
-              <p>{`${data.nbrCurrentClock}/${model.nbrClockMax} Clock connectors used`}</p>
-            </div>
-          );
+          render_progress = (<p>{`${data.nbrCurrentClock}/${model.nbrClockMax} Clock connectors used`}</p>);
           break;
 
         default:
@@ -710,48 +665,52 @@ class ProductCartItem extends React.PureComponent {
               >
 
             {/* warning container */}
-            <div
-                className="progress-container warning"
-                onMouseEnter={this.handleOnMouseEnterWarningItem.bind(this, index, warning)}
-                onMouseLeave={this.handleOnMouseLeaveWarningItem.bind(this, index, warning)}>
-
-              {warning ? (
-                <img className="alert-warning" src={`/images${warning.icon}`} />
-              ) : (options ? (<OptionsDialogPopup
-                  options={options}
-                  data={options_data}
-                  options_class={model.options_class}
-                  key={"popover" + index}
-                  id={"popover" + index}
-                  big={model.size === "big"}
-                  target={{
-                    construct: ((outvar, value) => {
-                      // console.log("construct", outvar, value, options_data);
-                      options_data[outvar] = value;
-                    }),
-                    update: ((outvar, value) => {
-                      // console.log("update", outvar, value, options_data);
-                      if (outvar in options_data) options_data[outvar] = value;
-                      onCardUpdate();
-                    })
-                  }}
-              />) : null) }
-
-
-
-              {warning && model.showWarning &&  (
-                <div className={`k-popup-warning ${shouldTooltipWarningClassInverted ? 'inverted': ''}`}>
+            <OverlayTrigger
+              placement="bottom"
+              trigger={warning ? ['click', 'hover', 'focus'] : []}
+              overlay={
+                ({arrowProps, hasDoneInitialMeasure, show, ...props}) => (
+                <div className="k-popup-warning" {...props}>
                   <p className="rule warning">
                     <i>{warning.message}</i>
                   </p>
-                </div>
-              )}
-            </div>
+                </div>)
+              }
+              rootClose
+            >
+              <div className="progress-container warning">
+                {warning ?
+                  (<img className="alert-warning" src={warning ? `/images${warning.icon}` : null}/>) :
+                  (options && (
+                    <OptionsDialogPopup
+                      options={options}
+                      data={options_data}
+                      options_class={model.options_class}
+                      key={"popover" + index}
+                      id={"popover" + index}
+                      big={model.size === "big"}
+                      target={{
+                        construct: ((outvar, value) => {
+                          // console.log("construct", outvar, value, options_data);
+                          options_data[outvar] = value;
+                        }),
+                        update: ((outvar, value) => {
+                          // console.log("update", outvar, value, options_data);
+                          if (outvar in options_data) options_data[outvar] = value;
+                          onCardUpdate();
+                        })
+                      }}
+                    />
+                  ))
+                }
+              </div>
+            </OverlayTrigger>
 
             <h6>{model.name_number}</h6>
 
             <div
               onMouseEnter={this.handleOnMouseEnterRemoveItem.bind(this, index)}
+              onClick={this.handleOnClickItem.bind(this, index)}
               >
 
               <img
@@ -771,26 +730,30 @@ class ProductCartItem extends React.PureComponent {
             </div>
 
             {/* progression container */}
-            <div
-                className="progress-container"
-                onMouseEnter={this.handleOnMouseEnterItem.bind(this, index)}
-                onMouseLeave={this.handleOnMouseLeaveItem.bind(this, index)}>
+            {render_progress && (
+              <OverlayTrigger
+                placement="top"
+                trigger={['click', 'hover', 'focus']}
+                overlay={({arrowProps, hasDoneInitialMeasure, show, ...props}) => (<div className="k-popup-connectors" {...props}>{render_progress}</div>)}
+                rootClose
+              >
+                <div className="progress-container">
 
-              {model.nbrSlotMax > 0 && (
-                <div className="nbr-connectors">
-                  <div style={{ ...nbrConnectorsStyle(data)}}></div>
+                  {model.nbrSlotMax > 0 && (
+                      <div className="nbr-connectors">
+                        <div style={{ ...nbrConnectorsStyle(data)}}></div>
+                      </div>
+                  )}
+
+                  {model.nbrClockMax > 0 && (
+                      <div className="nbr-clocks">
+                        <div style={{ ...nbrClocksStyle(data)}}></div>
+                      </div>
+                  )}
                 </div>
-              )}
+            </OverlayTrigger>
+            )}
 
-              {model.nbrClockMax > 0 && (
-                <div className="nbr-clocks">
-                  <div style={{ ...nbrClocksStyle(data)}}></div>
-                </div>
-              )}
-
-              {/* progress info when mouse over */}
-              {render_progress}
-            </div>
 
           </div>
         )}
@@ -854,34 +817,30 @@ class Cart extends React.PureComponent {
   static get propTypes() {
     return {
       isMobile: PropTypes.bool,
+      isTouch: PropTypes.bool,
       nbrSlots: PropTypes.number,
       itemHovered: PropTypes.string,
       data: PropTypes.object.isRequired,
-      onToggleProgress: PropTypes.func,
-      onToggleWarning: PropTypes.func,
       onToggleOverlayRemove: PropTypes.func,
       onClickRemoveItem: PropTypes.func,
       onCardUpdate: PropTypes.func,
+      onClickItem: PropTypes.func,
     };
   }
 
   render() {
     const {
       isMobile,
+      isTouch,
       nbrSlots,
       itemHovered,
       data,
-      onToggleProgress,
-      onToggleWarning,
       onToggleOverlayRemove,
       onClickRemoveItem,
+      onClickItem,
       onCardUpdate,
     } = this.props;
 
-    const nbrOccupied = nbrOccupiedSlotsInCrate(data.items);
-
-    const shouldTooltipWarningClassInverted = nbrSlots - nbrOccupied < 5;
-
     const products = data.items.map((item, index) => {
       let itemData;
       let ext_data = FillExtData(data.itemsData, index);
@@ -892,18 +851,17 @@ class Cart extends React.PureComponent {
       return (
         <ProductCartItem
             isMobile={isMobile}
+            isTouch={isTouch}
             hovered={item.id === itemHovered}
             key={item.id}
             id={item.id}
             index={index}
             data={itemData}
             ext_data={ext_data}
-            shouldTooltipWarningClassInverted={shouldTooltipWarningClassInverted && index > 10}
-            onToggleProgress={onToggleProgress}
-            onToggleWarning={onToggleWarning}
             onToggleOverlayRemove={onToggleOverlayRemove}
             onClickRemoveItem={onClickRemoveItem}
             onCardUpdate={onCardUpdate}
+            onClickItem={onClickItem}
             model={item}>
         </ProductCartItem>
       );
@@ -1302,7 +1260,7 @@ class OrderForm extends React.PureComponent {
 
           <textarea
               onChange={handleNote}
-              value={note}
+              defaultValue={note}
               rows="5"
               placeholder="Additional notes" />
 
@@ -1310,7 +1268,7 @@ class OrderForm extends React.PureComponent {
             <input
               className="btn btn-outline-primary w-100 m-0 mb-2 mb-sm-0 me-sm-2"
               style={{'cursor': 'pointer', 'fontWeight': '700'}}
-              value="Show JSON"
+              defaultValue="Show JSON"
               onClick={onClickShow}
               readOnly={true} />
 
@@ -1665,11 +1623,10 @@ class Shop extends React.PureComponent {
     this.handleMouseLeaveItem = this.handleMouseLeaveItem.bind(this);
     this.handleClickAddItem = this.handleClickAddItem.bind(this);
     this.checkAlerts = this.checkAlerts.bind(this);
-    this.handleToggleItemProgress = this.handleToggleItemProgress.bind(this);
-    this.handleToggleItemWarning = this.handleToggleItemWarning.bind(this);
     this.handleClickSelectItem = this.handleClickSelectItem.bind(this);
     this.handleClickSubmit = this.handleClickSubmit.bind(this);
     this.handleToggleOverlayRemove = this.handleToggleOverlayRemove.bind(this);
+    this.handleShowOverlayRemove = this.handleShowOverlayRemove.bind(this);
     this.handleClickToggleMobileSideMenu = this.handleClickToggleMobileSideMenu.bind(this);
     this.handleClickCloseRFQFeedback = this.handleClickCloseRFQFeedback.bind(this);
     this.handleClickShowOrder = this.handleClickShowOrder.bind(this);
@@ -1678,6 +1635,7 @@ class Shop extends React.PureComponent {
     this.handleCardsUpdated = this.handleCardsUpdated.bind(this);
 
     this.timer = null;
+    this.timer_remove = null;
   }
 
   componentDidMount() {
@@ -1801,50 +1759,6 @@ class Shop extends React.PureComponent {
     }, tap);
   }
 
-  handleToggleItemProgress(index, show) {
-    const itemsCloned = Array.from(this.state.columns.cart.items);
-
-    this.setState({
-      ...this.state,
-      columns: {
-        ...this.state.columns,
-        cart: {
-          ...this.state.columns.cart,
-          items: itemsCloned.map((item, i) => {
-            return {
-              ...item,
-              showProgress: i === index ? show : false,
-              showOverlayRemove: false,
-              showWarning: false,
-            };
-          }),
-        }
-      },
-    });
-  }
-
-  handleToggleItemWarning(index, show) {
-    const itemsCloned = Array.from(this.state.columns.cart.items);
-
-    this.setState({
-      ...this.state,
-      columns: {
-        ...this.state.columns,
-        cart: {
-          ...this.state.columns.cart,
-          items: itemsCloned.map((item, i) => {
-            return {
-              ...item,
-              showWarning: i === index ? show : false,
-              showProgress: false,
-              showOverlayRemove: false,
-            };
-          }),
-        }
-      },
-    });
-  }
-
   handleClickSelectItem(index) {
     const itemsCloned = Array.from(this.state.columns.cart.items);
 
@@ -1874,9 +1788,7 @@ class Shop extends React.PureComponent {
           items: itemsCloned.map((item, id) => {
             return {
               ...item,
-              showOverlayRemove: id === index ? show : false,
-              showProgress: false,
-              showWarning: false,
+              showOverlayRemove: id === index ? show : false
             };
           }),
         }
@@ -1884,6 +1796,17 @@ class Shop extends React.PureComponent {
     });
   }
 
+  handleShowOverlayRemove(index) {
+    if (this.timer_remove)
+      clearTimeout(this.timer_remove);
+
+    this.handleToggleOverlayRemove(index, true);
+
+    this.timer_remove = setTimeout(() => {
+      this.handleToggleOverlayRemove(index, false);
+    }, 2000);
+  }
+
   handleClickShowOrder() {
     const crate = {
       items: [],
@@ -2449,6 +2372,7 @@ class Shop extends React.PureComponent {
     } = this.state;
 
     const isMobile = window.deviceIsMobile();
+    const isTouch = window.isTouchEnabled();
 
     return (
       <DragDropContext onDragEnd={this.handleOnDragEnd}>
@@ -2496,11 +2420,11 @@ class Shop extends React.PureComponent {
                               nbrSlots={crateModeSlots[currentMode]}
                               data={columns['cart']}
                               isMobile={isMobile}
+                              isTouch={isTouch}
                               itemHovered={currentItemHovered}
-                              onToggleProgress={this.handleToggleItemProgress}
-                              onToggleWarning={this.handleToggleItemWarning}
                               onToggleOverlayRemove={this.handleToggleOverlayRemove}
                               onClickRemoveItem={this.handleDeleteItem}
+                              onClickItem={this.handleShowOverlayRemove}
                               onCardUpdate={this.handleCardsUpdated}>
                           </Cart>
                         }

templates/page-place-order.html

@@ -31,7 +31,15 @@
         return window.innerWidth < 768;
       }
 
+      function isTouchEnabled() {
+        return ('ontouchstart' in window) ||
+               (navigator.maxTouchPoints > 0) ||
+               (navigator.msMaxTouchPoints > 0);
+      }
+
+
       window.deviceIsMobile = deviceIsMobile;
+      window.isTouchEnabled = isTouchEnabled;
     })();
   </script>