Merge pull request #475 from gladly-team/jtan/display-impact-metric-c…

…ounts

TFAC-1226 Split bar on Group Impact for Tabs & Searches

src/__tests__/pages/index.test.js

@@ -1605,6 +1605,7 @@ describe('index.js: hardcoded notifications', () => {
             groupImpactMetric: {
               id: 'abcd',
               dollarProgress: 28e5,
+              dollarProgressFromSearch: 14e5,
               dollarGoal: 5e6,
               impactMetric: {
                 impactTitle:
@@ -1642,6 +1643,7 @@ describe('index.js: hardcoded notifications', () => {
             groupImpactMetric: {
               id: 'abcd',
               dollarProgress: 28e5,
+              dollarProgressFromSearch: 14e5,
               dollarGoal: 5e6,
               impactMetric: {
                 impactTitle:
@@ -1689,6 +1691,7 @@ describe('index.js: hardcoded notifications', () => {
             groupImpactMetric: {
               id: 'abcd',
               dollarProgress: 28e5,
+              dollarProgressFromSearch: 14e5,
               dollarGoal: 5e6,
               impactMetric: {
                 impactTitle:

src/components/VerticalLinearProgress.js

@@ -104,6 +104,9 @@ const useAnimationStyles = ({ endProgress, borderRadius, width, colors }) => {
     invisible: {
       backgroundColor: 'transparent',
     },
+    tooltips: {
+      zIndex: '9999999 !important',
+    },
   }))
   return classes()
 }
@@ -168,12 +171,12 @@ const VerticalLinearProgress = ({
         </div>
       )}
       {icons.map((icon, index) => (
-        <div
-          className={classes[`iconWrapper${index}`]}
-          key={icon.constructor.name}
-        >
+        <div className={classes[`iconWrapper${index}`]} key={tooltips[index]}>
           <Tooltip
-            title={`This portion of the goal was contributed by revenue coming from ${tooltips[index]}`}
+            title={`${tooltips[index]}`}
+            classes={{
+              popper: classes.tooltips,
+            }}
           >
             <IconButton className={classes[`icon${index}`]}>
               {cloneElement(icon, {

src/components/__tests__/VerticalLinearProgress.test.js

@@ -5,6 +5,7 @@ import { mount, shallow } from 'enzyme'
 import LinearProgress from '@material-ui/core/LinearProgress'
 import { Stars } from '@mui/icons-material'
 import SearchIcon from '@material-ui/icons/Search'
+import Tooltip from '@material-ui/core/Tooltip'
 
 const getMockProps = () => ({
   progress: [25, 50],
@@ -90,8 +91,10 @@ describe('VerticalLinearProgress component', () => {
       ...getMockProps(),
       startingProgress: [20, 40],
       icons: [<SearchIcon />],
+      tooltips: ['abc'],
     }
     const wrapper = shallow(<VerticalLinearProgress {...mockProps} />)
     expect(wrapper.find(SearchIcon).exists()).toEqual(true)
+    expect(wrapper.find(Tooltip).exists()).toEqual(true)
   })
 })

src/components/groupImpactComponents/GroupImpact.js

@@ -58,7 +58,8 @@ const GroupImpact = ({ user }) => {
     GROUP_IMPACT_SIDEBAR_STATE.NORMAL
   )
   const [sidebarOpen, setSidebarOpen] = useState(false)
-  const { id, dollarGoal, impactMetric } = groupImpactMetric
+  const { id, dollarGoal, dollarProgressFromSearch, impactMetric } =
+    groupImpactMetric
   const { impactTitle, impactCountPerMetric, whyValuableDescription } =
     impactMetric
 
@@ -85,6 +86,7 @@ const GroupImpact = ({ user }) => {
     const newGroupImpactMetric = {
       id,
       dollarProgress: dollarGoal,
+      dollarProgressFromSearch,
       dollarGoal,
       impactMetric: {
         impactTitle,
@@ -98,7 +100,13 @@ const GroupImpact = ({ user }) => {
     localStorageManager.setItem(COMPLETED_GROUP_IMPACT_VIEWS, 0)
     localStorageManager.setItem(CURRENT_GROUP_IMPACT_VIEWS, 0)
     setSidebarMode(GROUP_IMPACT_SIDEBAR_STATE.NEW)
-  }, [id, dollarGoal, impactTitle, whyValuableDescription])
+  }, [
+    id,
+    dollarGoal,
+    dollarProgressFromSearch,
+    impactTitle,
+    whyValuableDescription,
+  ])
 
   useEffect(() => {
     if (lastGroupImpactMetric.id === null) {
@@ -196,6 +204,7 @@ GroupImpact.propTypes = {
       groupImpactMetric: PropTypes.shape({
         id: PropTypes.string.isRequired,
         dollarProgress: PropTypes.number.isRequired,
+        dollarProgressFromSearch: PropTypes.number.isRequired,
         dollarGoal: PropTypes.number.isRequired,
         impactMetric: PropTypes.shape({
           impactTitle: PropTypes.string.isRequired,
@@ -216,6 +225,7 @@ GroupImpactWrapper.propTypes = {
       groupImpactMetric: PropTypes.shape({
         id: PropTypes.string.isRequired,
         dollarProgress: PropTypes.number.isRequired,
+        dollarProgressFromSearch: PropTypes.number.isRequired,
         dollarGoal: PropTypes.number.isRequired,
         impactMetric: PropTypes.shape({
           impactTitle: PropTypes.string.isRequired,

src/components/groupImpactComponents/GroupImpactContainer.js

@@ -8,6 +8,7 @@ export default createFragmentContainer(GroupImpact, {
         groupImpactMetric {
           id
           dollarProgress
+          dollarProgressFromSearch
           dollarGoal
           impactMetric {
             impactTitle

src/components/groupImpactComponents/GroupImpactSidebar.js

@@ -25,11 +25,14 @@ import gtag from 'ga-gtag'
 import { windowOpenTop } from 'src/utils/navigation'
 import { lighten } from '@material-ui/core'
 import Handlebars from 'handlebars'
+import defaultTheme from 'src/utils/theme'
+import SearchIcon from '@material-ui/icons/Search'
+import TabIcon from '@material-ui/icons/Tab'
 import VerticalLinearProgress from '../VerticalLinearProgress'
 
 const useStyles = makeStyles((theme) => ({
   wrapper: {
-    height: '100%',
+    height: 'inherit',
     display: 'grid',
     gridTemplateColumns: '1fr',
     transition: 'width .3s',
@@ -54,12 +57,13 @@ const useStyles = makeStyles((theme) => ({
     paddingBottom: theme.spacing(3),
     cursor: 'pointer',
     position: 'relative',
+    maxHeight: '100vh',
   },
   collapsedWrapper: {
     gridRowStart: 1,
     gridColumnStart: 1,
     top: 0,
-    height: '100%',
+    height: 'inherit',
     paddingTop: theme.spacing(2),
     cursor: 'pointer',
     display: 'flex',
@@ -199,13 +203,34 @@ const GroupImpactSidebar = ({
     !!lastGroupImpactMetric
   )
   const [isClosedHover, setIsClosedHover] = useState(false)
-  const { dollarProgress, dollarGoal, impactMetric } = displayingOldGoal
-    ? lastGroupImpactMetric
-    : groupImpactMetric
+  const { dollarProgress, dollarGoal, dollarProgressFromSearch, impactMetric } =
+    displayingOldGoal ? lastGroupImpactMetric : groupImpactMetric
   const { impactTitle, whyValuableDescription, impactCountPerMetric } =
     impactMetric
   const classes = useStyles()
-  const progress = Math.max(
+  const searchDollarProgress =
+    dollarProgressFromSearch &&
+    Math.max(
+      Math.min(Math.floor(100 * (dollarProgressFromSearch / dollarGoal)), 100),
+      1
+    )
+  const searchDisplayProgress =
+    dollarProgressFromSearch &&
+    Math.min(
+      Math.max(
+        Math.min(
+          Math.floor(100 * (dollarProgressFromSearch / dollarGoal)),
+          100
+        ),
+        8
+      ),
+      92
+    )
+  const totalDisplayProgress = Math.max(
+    Math.min(Math.floor(100 * (dollarProgress / dollarGoal)), 100),
+    (searchDisplayProgress || 0) + 8
+  )
+  const totalProgress = Math.max(
     Math.min(Math.floor(100 * (dollarProgress / dollarGoal)), 100),
     1
   )
@@ -294,10 +319,29 @@ const GroupImpactSidebar = ({
       <Slide direction="right" in={isOpen}>
         <Box onClick={toggleOpen} className={classes.expandedWrapper}>
           <VerticalLinearProgress
-            progress={[progress]}
+            progress={
+              searchDisplayProgress
+                ? [totalDisplayProgress, searchDisplayProgress]
+                : [totalDisplayProgress]
+            }
             width={64}
             borderRadius={32}
-            showMarkers
+            showMarkers={false}
+            colors={[
+              defaultTheme.palette.colors.tab,
+              defaultTheme.palette.colors.search,
+            ]}
+            icons={
+              searchDisplayProgress
+                ? [<TabIcon />, <SearchIcon />]
+                : [<TabIcon />]
+            }
+            tooltips={[
+              `${
+                totalProgress - searchDollarProgress
+              }% of funds was raised by tabs opened through Tab for a Cause`,
+              `${searchDollarProgress}% of funds was raised by searches through Search for a Cause`,
+            ]}
           />
           <Fade in={displaySidebarText} timeout={500}>
             <div className={classes.sidebarText}>
@@ -316,7 +360,7 @@ const GroupImpactSidebar = ({
               </div>
               <Typography variant="body2">{impactTitleCompiled}</Typography>
               <Typography className={classes.robotoBold} variant="h3">
-                {progress}%
+                {totalProgress}%
               </Typography>
               <Typography variant="body2">completed</Typography>
               <Divider className={classes.divider} />
@@ -394,7 +438,7 @@ const GroupImpactSidebar = ({
                   data-test-id="groupImpactMetricCount"
                   className={classes.groupImpactMetricCount}
                 >
-                  <Typography className={classes.countText}>
+                  <Typography>
                     Tabbers like you have helped {historicImpactTitleString}.
                   </Typography>
                 </div>
@@ -417,12 +461,20 @@ const GroupImpactSidebar = ({
           }
         >
           <Typography variant="body2" className={classes.pullTabProgress}>
-            {progress}%
+            {totalProgress}%
           </Typography>
           <Stars className={classes.pullTabStar} />
         </div>
         <VerticalLinearProgress
-          progress={[progress]}
+          progress={
+            searchDollarProgress
+              ? [totalProgress, searchDollarProgress]
+              : [totalProgress]
+          }
+          colors={[
+            defaultTheme.palette.colors.tab,
+            defaultTheme.palette.colors.search,
+          ]}
           width={isClosedHover ? 24 : 8}
           borderRadius={0}
           showMarkers={false}
@@ -438,6 +490,7 @@ GroupImpactSidebar.propTypes = {
   groupImpactSidebarState: PropTypes.string,
   groupImpactMetric: PropTypes.shape({
     dollarProgress: PropTypes.number.isRequired,
+    dollarProgressFromSearch: PropTypes.number,
     dollarGoal: PropTypes.number.isRequired,
     impactMetric: PropTypes.shape({
       impactTitle: PropTypes.string.isRequired,
@@ -447,6 +500,7 @@ GroupImpactSidebar.propTypes = {
   }).isRequired,
   lastGroupImpactMetric: PropTypes.shape({
     dollarProgress: PropTypes.number.isRequired,
+    dollarProgressFromSearch: PropTypes.number,
     dollarGoal: PropTypes.number.isRequired,
     impactMetric: PropTypes.shape({
       impactTitle: PropTypes.string.isRequired,

src/components/groupImpactComponents/GroupImpactSidebar.stories.jsx

@@ -34,6 +34,23 @@ open.args = {
   open: true,
   groupImpactMetric: {
     dollarProgress: 28e5,
+    dollarProgressFromSearch: 14e5,
+    dollarGoal: 5e6,
+    impactMetric: {
+      impactTitle: 'Provide 1 home visit from a community health worker',
+      whyValuableDescription:
+        'Community health workers provide quality health care to those who might not otherwise have access.',
+    },
+  },
+  groupImpactSidebarState: GROUP_IMPACT_SIDEBAR_STATE.NEW,
+}
+
+export const openTooLittle = Template.bind({})
+openTooLittle.args = {
+  open: true,
+  groupImpactMetric: {
+    dollarProgress: 2e5,
+    dollarProgressFromSearch: 1e5,
     dollarGoal: 5e6,
     impactMetric: {
       impactTitle: 'Provide 1 home visit from a community health worker',
@@ -113,3 +130,37 @@ withCount.args = {
   groupImpactMetricCount: 5,
   groupImpactSidebarState: GROUP_IMPACT_SIDEBAR_STATE.COMPLETED,
 }
+
+export const almostDone = Template.bind({})
+almostDone.args = {
+  open: true,
+  groupImpactMetric: {
+    dollarProgress: 4.9e6,
+    dollarProgressFromSearch: 4.8e6,
+    dollarGoal: 5e6,
+    impactMetric: {
+      impactTitle: 'Provide 2 home visits from a community health worker',
+      whyValuableDescription:
+        'Community health workers provide quality health care to those who might not otherwise have access.',
+    },
+  },
+  groupImpactMetricCount: 5,
+  groupImpactSidebarState: GROUP_IMPACT_SIDEBAR_STATE.COMPLETED,
+}
+
+export const almostDoneTwo = Template.bind({})
+almostDoneTwo.args = {
+  open: true,
+  groupImpactMetric: {
+    dollarProgress: 4.8e6,
+    dollarProgressFromSearch: 1e5,
+    dollarGoal: 5e6,
+    impactMetric: {
+      impactTitle: 'Provide 2 home visits from a community health worker',
+      whyValuableDescription:
+        'Community health workers provide quality health care to those who might not otherwise have access.',
+    },
+  },
+  groupImpactMetricCount: 5,
+  groupImpactSidebarState: GROUP_IMPACT_SIDEBAR_STATE.COMPLETED,
+}