Merge pull request #664 from MetaPhase-Consulting/update/remove-track…

…er-tooltip Update/remove tracker tooltip TM-686
MetaPhase-Consulting · Jan 22, 2020 · 8ead29f · 8ead29f
2 parents 1eb0594 + 8c9ceba
commit 8ead29f
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 33 deletions.
diff --git a/public/config/config.json b/public/config/config.json
@@ -15,6 +15,7 @@
     "client_counts": false,
     "cdo_season_filter": true,
     "cdo_bidding": true,
-    "confetti": true
+    "confetti": true,
+    "bidding_tips": true
   }
 }
diff --git a/public/config/config_dev.json b/public/config/config_dev.json
@@ -15,6 +15,7 @@
     "client_counts": false,
     "cdo_season_filter": true,
     "cdo_bidding": true,
-    "confetti": true
+    "confetti": true,
+    "bidding_tips": true
   }
 }
diff --git a/src/Components/BidTracker/BidTrackerCard/BidTrackerCard.jsx b/src/Components/BidTracker/BidTrackerCard/BidTrackerCard.jsx
@@ -1,5 +1,6 @@
 // NOTE: We've comments some things out around showing contact information for bids,
 // since we don't have that information yet.
+// Information needed for the glossary tooltip for bid tracker card top is commented out.
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { get } from 'lodash';
@@ -16,7 +17,7 @@ import {
   // HAND_SHAKE_ACCEPTED_PROP,
   // PRE_PANEL_PROP,
   // IN_PANEL_PROP,
-  BID_EXPLANATION_TEXT,
+  // BID_EXPLANATION_TEXT,
 } from '../../../Constants/BidData';
 import { formatDate, formatIdSpacing, getTimeDistanceInWords } from '../../../utilities';
 
@@ -45,7 +46,7 @@ class BidTrackerCard extends Component {
       priorityExists ? 'bid-tracker--priority-exists' : '',
     ].join(' ');
     const showBidCount$ = showBidCount && !priorityExists;
-    const questionText = get(BID_EXPLANATION_TEXT, `[${bid.status}]`);
+    // const questionText = get(BID_EXPLANATION_TEXT, `[${bid.status}]`);
     return (
       <BoxShadow className={containerClass} id={`bid-${bid.id}`}>
         <div className="bid-tracker-inner-container">
@@ -54,7 +55,7 @@ class BidTrackerCard extends Component {
             deleteBid={deleteBid}
             showBidCount={showBidCount$}
             hideDelete={priorityExists}
-            questionText={questionText}
+            // questionText={questionText}
             useCDOView={useCDOView}
           />
           <div className={`usa-grid-full padded-container-inner bid-tracker-bid-steps-container ${statusClass}`}>

diff --git a/src/Components/BidTracker/BidTrackerCardTop/BidTrackerCardTop.jsx b/src/Components/BidTracker/BidTrackerCardTop/BidTrackerCardTop.jsx
@@ -4,9 +4,15 @@ import FontAwesome from 'react-fontawesome';
 import { get } from 'lodash';
 import { Tooltip } from 'react-tippy';
 import { Link } from 'react-router-dom';
+import { checkFlag } from 'flags';
 import { BID_OBJECT } from '../../../Constants/PropTypes';
 import BidTrackerCardTitle from '../BidTrackerCardTitle';
-import GlossaryTermTrigger from '../../GlossaryTermTrigger';
+// import ConfirmLink from '../../ConfirmLink';
+// import GlossaryTermTrigger from '../../GlossaryTermTrigger';
+// Note that all glossary logic is commented out for tooltip
+
+const useBiddingTips = () => checkFlag('flags.bidding_tips');
+
 
 class BidTrackerCardTop extends Component {
   constructor(props) {
@@ -23,18 +29,21 @@ class BidTrackerCardTop extends Component {
   }
 
   render() {
-    const { bid, hideDelete, showBidCount, questionText, useCDOView } = this.props;
+    const { bid, hideDelete, showBidCount, useCDOView /* , questionText */ } = this.props;
     const { readOnly } = this.context;
     const { position } = bid;
+    // const showQuestion = !!(questionText && questionText.text);
     const bidStatistics = get(bid, 'bid_statistics[0]', {});
     const post = get(position, 'post', {});
-    const showQuestion = !!(questionText && questionText.text);
     const positionNumber = get(position, 'position_number');
+    const biddingTips = useBiddingTips();
 
     const getQuestionElement = () => (
+      // <span>{questionText.text} </span>
+      // eslint-disable-next-line max-len
+      // <GlossaryTermTrigger className="tooltip-link" text={questionText.link} term={questionText.term} />
       <span>
-        <span>{questionText.text} </span>
-        <GlossaryTermTrigger className="tooltip-link" text={questionText.link} term={questionText.term} />
+        Your bid is likely in one of several steps in the process. <Link className="tooltip-link" to="/biddingProcess">Learn more here.</Link>
       </span>
     );
     return (
@@ -53,24 +62,21 @@ class BidTrackerCardTop extends Component {
         </div>
         <div className="bid-tracker-card-title-outer-container-right">
           <div className="bid-tracker-card-title-container-right">
-            {
-              showQuestion &&
-              <div className="bid-tracker-question-text-container">
-                <Tooltip
-                  html={getQuestionElement()}
-                  arrow
-                  tabIndex="0"
-                  interactive
-                  interactiveBorder={5}
-                  useContext
-                >
-                  <span>
-                    <FontAwesome name="question-circle" /> Why is it taking so long? -
-                    <Link to="/biddingProcess"> Learn More Here</Link>
-                  </span>
-                </Tooltip>
-              </div>
-            }
+            {biddingTips &&
+            <div className="bid-tracker-question-text-container">
+              <Tooltip
+                html={getQuestionElement()}
+                arrow
+                tabIndex="0"
+                interactive
+                interactiveBorder={5}
+                useContext
+              >
+                <span>
+                  <FontAwesome name="question-circle" /> Why is it taking so long?
+                </span>
+              </Tooltip>
+            </div>}
             <div className="bid-tracker-actions-container">
               {bid.can_delete && !hideDelete && (!readOnly || useCDOView) &&
                 <button className="unstyled-button" onClick={this.onDeleteBid}>
@@ -90,11 +96,11 @@ BidTrackerCardTop.contextTypes = {
 
 BidTrackerCardTop.propTypes = {
   bid: BID_OBJECT.isRequired,
-  questionText: PropTypes.shape({
-    text: PropTypes.string,
-    link: PropTypes.string,
-    term: PropTypes.string,
-  }),
+  // questionText: PropTypes.shape({
+  //   text: PropTypes.string,
+  //   link: PropTypes.string,
+  //   term: PropTypes.string,
+  // }),
   deleteBid: PropTypes.func.isRequired,
   showBidCount: PropTypes.bool,
   hideDelete: PropTypes.bool,

diff --git a/src/Components/BidTracker/BidTrackerCardTop/__snapshots__/BidTrackerCardTop.test.jsx.snap b/src/Components/BidTracker/BidTrackerCardTop/__snapshots__/BidTrackerCardTop.test.jsx.snap
@@ -39,6 +39,66 @@ exports[`BidTrackerCardTopComponent matches snapshot 1`] = `
     <div
       className="bid-tracker-card-title-container-right"
     >
+      <div
+        className="bid-tracker-question-text-container"
+      >
+        <Tooltip
+          animateFill={true}
+          animation="shift"
+          arrow={true}
+          arrowSize="regular"
+          className=""
+          delay={0}
+          disabled={false}
+          distance={10}
+          duration={375}
+          followCursor={false}
+          hideDelay={0}
+          hideDuration={375}
+          hideOnClick={true}
+          html={
+            <span>
+              Your bid is likely in one of several steps in the process. 
+              <Link
+                className="tooltip-link"
+                replace={false}
+                to="/biddingProcess"
+              >
+                Learn more here.
+              </Link>
+            </span>
+          }
+          inertia={false}
+          interactive={true}
+          interactiveBorder={5}
+          multiple={false}
+          offset={0}
+          onHidden={[Function]}
+          onHide={[Function]}
+          onRequestClose={[Function]}
+          onShow={[Function]}
+          onShown={[Function]}
+          popperOptions={Object {}}
+          position="top"
+          size="regular"
+          sticky={false}
+          stickyDuration={200}
+          style={Object {}}
+          tabIndex="0"
+          theme="dark"
+          touchHold={false}
+          trigger="mouseenter focus"
+          unmountHTMLWhenHide={false}
+          useContext={true}
+        >
+          <span>
+            <FontAwesome
+              name="question-circle"
+            />
+             Why is it taking so long?
+          </span>
+        </Tooltip>
+      </div>
       <div
         className="bid-tracker-actions-container"
       />

diff --git a/src/sass/_tooltip.scss b/src/sass/_tooltip.scss
@@ -16,4 +16,6 @@
 
 .tooltip-link {
   text-decoration: underline;
+  color: $color-white !important;
 }
+