From 2adb262fb045a493d08ec7fb070024ab95f4468b Mon Sep 17 00:00:00 2001
From: sovanna <sovanna.hing@gmail.com>
Date: Mon, 20 Apr 2020 18:22:38 +0900
Subject: [PATCH] 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 |  5 +++++
 static/js/shop.jsx  | 11 +++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/sass/css/_shop.scss b/sass/css/_shop.scss
index f618738..b374be0 100644
--- a/sass/css/_shop.scss
+++ b/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 {
diff --git a/static/js/shop.jsx b/static/js/shop.jsx
index 1de9cf9..78e52e8 100644
--- a/static/js/shop.jsx
+++ b/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}