TFAC-1340: Add legend at the bottom of leaderboard with points for ea…

…ch action. (#558) Also updated the GA code. Co-authored-by: Spicer Matthews <[email protected]>
gladly-team · Feb 7, 2024 · 5fcc80d · 5fcc80d
1 parent 1452005
commit 5fcc80d
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 6 deletions.
diff --git a/src/components/groupImpactComponents/GroupImpactLeaderboard.js b/src/components/groupImpactComponents/GroupImpactLeaderboard.js
@@ -5,9 +5,18 @@ 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 TabIcon from '@material-ui/icons/Tab'
+import SearchIcon from '@material-ui/icons/Search'
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'
 import ArrowBackIos from '@material-ui/icons/ArrowBackIos'
 import clsx from 'clsx'
-import { groupImpactLeaderboardFAQ } from 'src/utils/urls'
+import {
+  groupImpactLeaderboardFAQ,
+  tabLandingURL,
+  searchLandingURL,
+  shopLandingURL,
+} from 'src/utils/urls'
+import defaultTheme from 'src/utils/theme'
 import GroupImpactLeaderboardRow from './GroupImpactLeaderboardRow'
 
 const useStyles = makeStyles((theme) => ({
@@ -47,8 +56,17 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: 'row',
     width: '100%',
     justifyContent: 'flex-start',
-    paddingLeft: theme.spacing(2),
     paddingRight: theme.spacing(2),
+    paddingLeft: theme.spacing(2),
+    alignItems: 'center',
+  },
+  positionRowBoard: {
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100%',
+    justifyContent: 'flex-start',
+    paddingBottom: theme.spacing(1),
+    paddingLeft: theme.spacing(1),
     alignItems: 'center',
   },
   impactPoints: {
@@ -64,6 +82,39 @@ const useStyles = makeStyles((theme) => ({
   link: {
     color: theme.palette.primary.main,
   },
+  iconWrapper: {
+    height: '24px',
+    width: '24px',
+    borderRadius: '24px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: theme.spacing(0.5),
+  },
+  tabIcon: {
+    backgroundColor: defaultTheme.palette.colors.tab,
+  },
+  searchIcon: {
+    backgroundColor: defaultTheme.palette.colors.search,
+  },
+  shopIcon: {
+    backgroundColor: defaultTheme.palette.colors.shop,
+  },
+  referralIcon: {
+    backgroundColor: defaultTheme.palette.colors.referral,
+  },
+  impactIcons: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  icon: {
+    height: '16px',
+    width: '16px',
+    color: 'white',
+  },
+  legendCont: {
+    marginTop: theme.spacing(2),
+  },
 }))
 
 const Leaderboard = ({ leaderboardEntries, userId, onClose }) => {
@@ -161,6 +212,60 @@ const Leaderboard = ({ leaderboardEntries, userId, onClose }) => {
       </div>
       <Divider />
       {entriesWithEllipses}
+
+      <div className={classes.legendCont}>
+        <div className={classes.positionRowBoard}>
+          <div className={clsx(classes.tabIcon, classes.iconWrapper)}>
+            <TabIcon className={classes.icon} />
+          </div>
+          <Typography variant="body2">
+            Points earned by opening tabs with{' '}
+            <Link to={tabLandingURL} target="_blank" stopPropagation>
+              <span className={classes.link}>Tab for a Cause</span>
+            </Link>
+            .
+          </Typography>
+        </div>
+
+        <div className={classes.positionRowBoard}>
+          <div className={clsx(classes.searchIcon, classes.iconWrapper)}>
+            <SearchIcon className={classes.icon} />
+          </div>
+          <Typography variant="body2">
+            Earn 10x more points by searching with{' '}
+            <Link to={searchLandingURL} target="_blank" stopPropagation>
+              <span className={classes.link}>Search for a Cause</span>
+            </Link>
+            .
+          </Typography>
+        </div>
+
+        <div className={classes.positionRowBoard}>
+          <div className={clsx(classes.shopIcon, classes.iconWrapper)}>
+            <ShoppingCartIcon className={classes.icon} />
+          </div>
+          <Typography variant="body2">
+            Earn unlimited points by shopping with{' '}
+            <Link to={shopLandingURL} target="_blank" stopPropagation>
+              <span className={classes.link}>Shop for a Cause</span>
+            </Link>
+            .
+          </Typography>
+        </div>
+
+        {/* <div className={classes.positionRowBoard}>
+          <div className={clsx(classes.referralIcon, classes.iconWrapper)}>
+            <GroupAddIcon className={classes.icon} />
+          </div>
+          <Typography variant="body1">
+            Earn unlimited points by shopping with{' '}
+            <Link to={getReferralUrl()} target="_blank" stopPropagation>
+              <span className={classes.link}>Shop for a Cause</span>
+            </Link>
+            .
+          </Typography>
+        </div> */}
+      </div>
     </div>
   )
 }

diff --git a/src/components/groupImpactComponents/__tests__/GroupImpactLeaderboard.test.js b/src/components/groupImpactComponents/__tests__/GroupImpactLeaderboard.test.js
@@ -259,7 +259,7 @@ describe('GroupImpactLeaderboard component', () => {
     const wrapper = shallow(<GroupImpactLeaderboard {...mockProps} />)
     const typographies = wrapper.find(Typography)
 
-    expect(typographies.length).toEqual(5)
+    expect(typographies.length).toEqual(8)
   })
 
   it('calls onClose handler when clicked', () => {

diff --git a/src/pages/_document.js b/src/pages/_document.js
@@ -63,7 +63,7 @@ class CustomDocument extends Document {
           {/* Google Analytics V4 Tag */}
           <script
             async
-            src="https://www.googletagmanager.com/gtag/js?id=G-LDFLQCKVHG"
+            src="https://www.googletagmanager.com/gtag/js?id=G-Z4JZQERBJY"
           />
           <script
             key="gtag-global-ga4"
@@ -72,8 +72,8 @@ class CustomDocument extends Document {
             window.dataLayer = window.dataLayer || [];
             function gtag(){dataLayer.push(arguments);}
             gtag('js', new Date());
-            gtag('config', 'G-LDFLQCKVHG');
-            gtag('config', 'G-LDFLQCKVHG',{'tfac_app_version':'v4'});
+            gtag('config', 'G-Z4JZQERBJY');
+            gtag('config', 'G-Z4JZQERBJY',{'tfac_app_version':'v4'});
             `,
             }}
           />

diff --git a/src/utils/urls.js b/src/utils/urls.js
@@ -107,6 +107,7 @@ export const jobsURL = 'https://tab.gladly.io/jobs'
 
 export const searchLandingURL = 'https://search.gladly.io/'
 export const shopLandingURL = 'https://shop.gladly.io/'
+export const tabLandingURL = 'https://tab.gladly.io/'
 
 export const groupImpactLeaderboardFAQ =
   'https://gladly.zendesk.com/hc/en-us/articles/17622871939725-Leaderboards'