fix(issue#16): Adds class inverted to flip warning when:

4 slots remains and current card is at almost the end of the crate

aka when the warnings is about a card that is at the end of the crate

sass/css/_shop.scss

@@ -403,6 +403,7 @@ button {
                     .progress-container {
                         width: 100%;
                         text-align: center;
+                        position: relative;
 
                         > .alert-warning {
                             background-color: inherit;
@@ -450,6 +451,10 @@ button {
                                 }
                             }
                         }
+
+                        .k-popup-warning.inverted {
+                            right: 0;
+                        }
                     }
 
                     .overlayRemove {

static/js/shop.jsx

@@ -522,6 +522,7 @@ class ProductCartItem extends React.PureComponent {
       onToggleWarning: PropTypes.func,
       onToggleOverlayRemove: PropTypes.func,
       onClickRemoveItem: PropTypes.func,
+      shouldTooltipWarningClassInverted: PropTypes.bool,
     };
   }
 
@@ -602,6 +603,7 @@ class ProductCartItem extends React.PureComponent {
       model,
       data,
       index,
+      shouldTooltipWarningClassInverted,
     } = this.props;
 
     let warning;
@@ -678,8 +680,8 @@ class ProductCartItem extends React.PureComponent {
                 <img className="alert-warning" src={warning ? `/images${warning.icon}` : null} />
               )}
 
-              {warning && model.showWarning &&  (
-                <div className="k-popup-warning">
+              {warning &&  (
+                <div className={`k-popup-warning ${shouldTooltipWarningClassInverted ? 'inverted': ''}`}>
                   <p className="rule warning">
                     <i>{warning.message}</i>
                   </p>
@@ -817,6 +819,10 @@ class Cart extends React.PureComponent {
       onClickRemoveItem,
     } = this.props;
 
+    const nbrOccupied = nbrOccupiedSlotsInCrate(data.items);
+
+    const shouldTooltipWarningClassInverted = nbrSlots - nbrOccupied < 5;
+
     const products = data.items.map((item, index) => {
       let itemData;
       if (data.itemsData && index in data.itemsData) {
@@ -829,6 +835,7 @@ class Cart extends React.PureComponent {
             key={item.id}
             index={index}
             data={itemData}
+            shouldTooltipWarningClassInverted={shouldTooltipWarningClassInverted && index > 10}
             onToggleProgress={onToggleProgress}
             onToggleWarning={onToggleWarning}
             onToggleOverlayRemove={onToggleOverlayRemove}