TFAC-1230 Integrating GroupImpactLeaderboard

gladly-team · Jun 27, 2023 · d5416f5 · d5416f5
1 parent 36e850e
commit d5416f5
Show file tree

Hide file tree

Showing 9 changed files with 353 additions and 78 deletions.
diff --git a/src/components/groupImpactComponents/GroupImpact.js b/src/components/groupImpactComponents/GroupImpact.js
@@ -221,6 +221,7 @@ GroupImpact.propTypes = {
       position: PropTypes.number,
       user: PropTypes.shape({
         username: PropTypes.string,
+        id: PropTypes.string,
       }),
       userGroupImpactMetric: PropTypes.shape({
         dollarContribution: PropTypes.number.isRequired,
@@ -254,6 +255,7 @@ GroupImpactWrapper.propTypes = {
       position: PropTypes.number,
       user: PropTypes.shape({
         username: PropTypes.string,
+        id: PropTypes.string,
       }),
       userGroupImpactMetric: PropTypes.shape({
         dollarContribution: PropTypes.number.isRequired,

diff --git a/src/components/groupImpactComponents/GroupImpact.stories.jsx b/src/components/groupImpactComponents/GroupImpact.stories.jsx
@@ -171,7 +171,7 @@ standardView.decorators = [
 export const standardViewWithNoOldGoal = Template.bind({})
 standardViewWithNoOldGoal.args = {
   user: {
-    id: 'bcde', 
+    id: 'bcde',
     cause: {
       groupImpactMetric: {
         id: 'abcd',

diff --git a/src/components/groupImpactComponents/GroupImpactContainer.js b/src/components/groupImpactComponents/GroupImpactContainer.js
@@ -24,6 +24,7 @@ export default createFragmentContainer(GroupImpact, {
         position
         user {
           username
+          id
         }
         userGroupImpactMetric {
           userId

diff --git a/src/components/groupImpactComponents/GroupImpactLeaderboard.js b/src/components/groupImpactComponents/GroupImpactLeaderboard.js
@@ -3,25 +3,46 @@ import React from 'react'
 import { makeStyles } from '@material-ui/core/styles'
 import PropTypes from 'prop-types'
 import Divider from '@material-ui/core/Divider'
+import Button from '@material-ui/core/Button'
+import ArrowBackIos from '@material-ui/icons/ArrowBackIos'
 import GroupImpactLeaderboardRow from './GroupImpactLeaderboardRow'
 
 const useStyles = makeStyles((theme) => ({
   title: {
-    padding: theme.spacing(2),
+    padding: theme.spacing(1),
+    paddingLeft: theme.spacing(3),
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
   },
   leaderboard: {
     height: '100%',
     display: 'flex',
     flexDirection: 'column',
-    width: '500px'
+    width: '500px',
+    borderLeft: '1px solid grey',
   },
   ellipses: {
-    padding: theme.spacing(2),
+    padding: theme.spacing(1),
+    paddingLeft: theme.spacing(3),
     paddingTop: theme.spacing(0),
   },
+  robotoBold: {
+    fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+    fontWeight: 900,
+  },
+  closeButton: {
+    borderRadius: '8px',
+    marginLeft: 'auto',
+  },
+  closeButtonIcon: {
+    width: 30,
+    height: 30,
+    marginRight: '-16px',
+  },
 }))
 
-const Leaderboard = ({ leaderboardEntries, userId }) => {
+const Leaderboard = ({ leaderboardEntries, userId, onClose }) => {
   const classes = useStyles()
   const displayLeaderboardEntries = leaderboardEntries.map((entry) => (
     <div key={`${entry.user.username}_${entry.position}`}>
@@ -48,7 +69,7 @@ const Leaderboard = ({ leaderboardEntries, userId }) => {
             key={`${nextPosition}_${currentPosition}`}
             className={classes.ellipses}
           >
-            <Typography variant="h2">...</Typography>
+            <Typography variant="h3">...</Typography>
           </div>
         )
       }
@@ -58,8 +79,14 @@ const Leaderboard = ({ leaderboardEntries, userId }) => {
   return (
     <div className={classes.leaderboard}>
       <div className={classes.title}>
-        <Typography variant="h3">Leaderboard</Typography>
+        <Typography variant="h5" className={classes.robotoBold}>
+          LEADERBOARD
+        </Typography>
+        <Button onClick={onClose} className={classes.closeButton}>
+          <ArrowBackIos className={classes.closeButtonIcon} />
+        </Button>
       </div>
+
       {entriesWithEllipses}
     </div>
   )
@@ -82,6 +109,11 @@ Leaderboard.propTypes = {
       }).isRequired,
     })
   ).isRequired,
+  onClose: PropTypes.func,
+}
+
+Leaderboard.defaultProps = {
+  onClose: () => {},
 }
 
 export default Leaderboard
diff --git a/src/components/groupImpactComponents/GroupImpactLeaderboardRow.js b/src/components/groupImpactComponents/GroupImpactLeaderboardRow.js
@@ -7,6 +7,8 @@ import SearchIcon from '@material-ui/icons/Search'
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'
 import clsx from 'clsx'
 import defaultTheme from 'src/utils/theme'
+import { lighten } from '@material-ui/core'
+import Tooltip from '@material-ui/core/Tooltip'
 
 const useStyles = makeStyles((theme) => ({
   wrapper: {
@@ -69,7 +71,10 @@ const useStyles = makeStyles((theme) => ({
     marginLeft: 'auto',
   },
   selected: {
-    backgroundColor: defaultTheme.palette.primary.main,
+    backgroundColor: lighten(theme.palette.primary.main, 0.62),
+  },
+  tooltips: {
+    zIndex: '9999999 !important',
   },
 }))
 const GroupImpactLeaderboardRow = ({
@@ -101,17 +106,38 @@ const GroupImpactLeaderboardRow = ({
         <div className={classes.impactIcons}>
           {(tabDollarContribution || tabDollarContribution > 0) && (
             <div className={clsx(classes.tabIcon, classes.iconWrapper)}>
-              <TabIcon className={classes.icon} />
+              <Tooltip
+                title="This user uses Tab for a Cause"
+                classes={{
+                  popper: classes.tooltips,
+                }}
+              >
+                <TabIcon className={classes.icon} />
+              </Tooltip>
             </div>
           )}
           {(searchDollarContribution || searchDollarContribution > 0) && (
             <div className={clsx(classes.searchIcon, classes.iconWrapper)}>
-              <SearchIcon className={classes.icon} />
+              <Tooltip
+                title="This user uses Search for a Cause"
+                classes={{
+                  popper: classes.tooltips,
+                }}
+              >
+                <SearchIcon className={classes.icon} />
+              </Tooltip>
             </div>
           )}
           {(shopDollarContribution || shopDollarContribution > 0) && (
             <div className={clsx(classes.shopIcon, classes.iconWrapper)}>
-              <ShoppingCartIcon className={classes.icon} />
+              <Tooltip
+                title="This user uses Shop for a Cause"
+                classes={{
+                  popper: classes.tooltips,
+                }}
+              >
+                <ShoppingCartIcon className={classes.icon} />
+              </Tooltip>
             </div>
           )}
         </div>

diff --git a/src/components/groupImpactComponents/GroupImpactSidebar.js b/src/components/groupImpactComponents/GroupImpactSidebar.js
@@ -43,6 +43,9 @@ const useStyles = makeStyles((theme) => ({
   expanded: {
     width: 400,
   },
+  expandedWithLeaderboard: {
+    width: 900,
+  },
   closed: {
     width: 0,
   },
@@ -56,8 +59,6 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: 'row',
     paddingLeft: theme.spacing(2),
     paddingRight: theme.spacing(2),
-    paddingTop: theme.spacing(3),
-    paddingBottom: theme.spacing(3),
     cursor: 'pointer',
     position: 'relative',
     maxHeight: '100vh',
@@ -77,6 +78,7 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: 'column',
     paddingLeft: theme.spacing(2),
     paddingRight: theme.spacing(2),
+    paddingTop: theme.spacing(3),
   },
   sidebarButtons: {
     width: '100%',
@@ -186,14 +188,19 @@ const useStyles = makeStyles((theme) => ({
   },
   groupImpactMetricCount: {
     marginTop: 'auto',
+    paddingBottom: theme.spacing(3),
   },
   sidebarContent: {
     display: 'flex',
-    flexDirection: 'row'
+    flexDirection: 'row',
   },
   leaderboard: {
-    maxHeight: '100%'
-  }
+    maxHeight: '100%',
+  },
+  paddingTopBottom: {
+    paddingTop: theme.spacing(3),
+    paddingBottom: theme.spacing(3),
+  },
 }))
 
 const GroupImpactSidebar = ({
@@ -300,7 +307,13 @@ const GroupImpactSidebar = ({
     e.stopPropagation()
   }
 
-  let wrapperWidthClass = classes.expanded
+  const isLeaderboardEnabled = localStorageFeaturesManager.getFeatureValue(
+    GROUP_IMPACT_LEADERBOARD
+  )
+  let wrapperWidthClass =
+    !leaderboard || !isLeaderboardEnabled
+      ? classes.expanded
+      : classes.expandedWithLeaderboard
   if (!isOpen && isClosedHover) {
     wrapperWidthClass = classes.pullTabExpanded
   } else if (!isOpen) {
@@ -326,39 +339,37 @@ const GroupImpactSidebar = ({
       historicImpactTitleString.slice(1)
   }
 
-  const isLeaderboardEnabled = localStorageFeaturesManager.getFeatureValue(
-    GROUP_IMPACT_LEADERBOARD
-  )
-
   return (
     <div className={clsx(wrapperWidthClass, classes.wrapper)}>
       <Slide direction="right" in={isOpen}>
         <Box onClick={toggleOpen} className={classes.expandedWrapper}>
-          <VerticalLinearProgress
-            progress={
-              searchDisplayProgress
-                ? [totalDisplayProgress, searchDisplayProgress]
-                : [totalDisplayProgress]
-            }
-            width={64}
-            borderRadius={32}
-            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`,
-            ]}
-          />
+          <div className={classes.paddingTopBottom}>
+            <VerticalLinearProgress
+              progress={
+                searchDisplayProgress
+                  ? [totalDisplayProgress, searchDisplayProgress]
+                  : [totalDisplayProgress]
+              }
+              width={64}
+              borderRadius={32}
+              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`,
+              ]}
+            />
+          </div>
           <Fade in={displaySidebarText} timeout={500}>
             <div className={classes.sidebarContent}>
               <div className={classes.sidebarText}>
@@ -371,9 +382,14 @@ const GroupImpactSidebar = ({
                       {groupImpactSidebarState}
                     </span>
                   ) : null}
-                  <Button onClick={toggleOpen} className={classes.closeButton}>
-                    <ArrowBackIos className={classes.closeButtonIcon} />
-                  </Button>
+                  {(!leaderboard || !isLeaderboardEnabled) && (
+                    <Button
+                      onClick={toggleOpen}
+                      className={classes.closeButton}
+                    >
+                      <ArrowBackIos className={classes.closeButtonIcon} />
+                    </Button>
+                  )}
                 </div>
                 <Typography variant="body2">{impactTitleCompiled}</Typography>
                 <Typography className={classes.robotoBold} variant="h3">
@@ -466,6 +482,7 @@ const GroupImpactSidebar = ({
                   <GroupImpactLeaderboard
                     leaderboardEntries={leaderboard}
                     userId={userId}
+                    onClose={toggleOpen}
                   />
                 </div>
               )}
@@ -538,18 +555,21 @@ GroupImpactSidebar.propTypes = {
   nextGoalButtonClickHandler: PropTypes.func,
   openHandler: PropTypes.func,
   groupImpactMetricCount: PropTypes.number,
-  leaderboard: PropTypes.arrayOf(PropTypes.shape({
-    position: PropTypes.number,
-    user: PropTypes.shape({
-      username: PropTypes.string,
-    }),
-    userGroupImpactMetric: PropTypes.shape({
-      dollarContribution: PropTypes.number.isRequired,
-      tabDollarContribution: PropTypes.number,
-      searchDollarContribution: PropTypes.number,
-      shopDollarContribution: PropTypes.number,
-    }),
-  })),
+  leaderboard: PropTypes.arrayOf(
+    PropTypes.shape({
+      position: PropTypes.number,
+      user: PropTypes.shape({
+        username: PropTypes.string,
+        id: PropTypes.string,
+      }),
+      userGroupImpactMetric: PropTypes.shape({
+        dollarContribution: PropTypes.number.isRequired,
+        tabDollarContribution: PropTypes.number,
+        searchDollarContribution: PropTypes.number,
+        shopDollarContribution: PropTypes.number,
+      }),
+    })
+  ),
 
   // sfacActivityState: PropTypes.string,
 }