Launched shop on leaderboard

gladly-team · Dec 8, 2023 · 8f8ffb4 · 8f8ffb4
1 parent cd2acb3
commit 8f8ffb4
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 15 deletions.
diff --git a/src/__tests__/pages/index.test.js b/src/__tests__/pages/index.test.js
@@ -1651,6 +1651,7 @@ describe('index.js: hardcoded notifications', () => {
               id: 'abcd',
               dollarProgress: 28e5,
               dollarProgressFromSearch: 14e5,
+              dollarProgressFromShop: 0,
               dollarGoal: 5e6,
               impactMetric: {
                 impactTitle:
@@ -1689,6 +1690,7 @@ describe('index.js: hardcoded notifications', () => {
               id: 'abcd',
               dollarProgress: 28e5,
               dollarProgressFromSearch: 14e5,
+              dollarProgressFromShop: 0,
               dollarGoal: 5e6,
               impactMetric: {
                 impactTitle:
@@ -1737,6 +1739,7 @@ describe('index.js: hardcoded notifications', () => {
               id: 'abcd',
               dollarProgress: 28e5,
               dollarProgressFromSearch: 14e5,
+              dollarProgressFromShop: 0,
               dollarGoal: 5e6,
               impactMetric: {
                 impactTitle:

diff --git a/src/components/groupImpactComponents/GroupImpact.js b/src/components/groupImpactComponents/GroupImpact.js
@@ -58,8 +58,13 @@ const GroupImpact = ({ user }) => {
     GROUP_IMPACT_SIDEBAR_STATE.NORMAL
   )
   const [sidebarOpen, setSidebarOpen] = useState(false)
-  const { id, dollarGoal, dollarProgressFromSearch, impactMetric } =
-    groupImpactMetric
+  const {
+    id,
+    dollarGoal,
+    dollarProgressFromSearch,
+    dollarProgressFromShop,
+    impactMetric,
+  } = groupImpactMetric
   const { impactTitle, impactCountPerMetric, whyValuableDescription } =
     impactMetric
 
@@ -87,6 +92,7 @@ const GroupImpact = ({ user }) => {
       id,
       dollarProgress: dollarGoal,
       dollarProgressFromSearch,
+      dollarProgressFromShop,
       dollarGoal,
       impactMetric: {
         impactTitle,
@@ -104,6 +110,7 @@ const GroupImpact = ({ user }) => {
     id,
     dollarGoal,
     dollarProgressFromSearch,
+    dollarProgressFromShop,
     impactTitle,
     whyValuableDescription,
   ])
@@ -209,6 +216,7 @@ GroupImpact.propTypes = {
         id: PropTypes.string.isRequired,
         dollarProgress: PropTypes.number.isRequired,
         dollarProgressFromSearch: PropTypes.number.isRequired,
+        dollarProgressFromShop: PropTypes.number.isRequired,
         dollarGoal: PropTypes.number.isRequired,
         impactMetric: PropTypes.shape({
           impactTitle: PropTypes.string.isRequired,
@@ -254,6 +262,7 @@ GroupImpactWrapper.propTypes = {
         id: PropTypes.string.isRequired,
         dollarProgress: PropTypes.number.isRequired,
         dollarProgressFromSearch: PropTypes.number.isRequired,
+        dollarProgressFromShop: PropTypes.number.isRequired,
         dollarGoal: PropTypes.number.isRequired,
         impactMetric: PropTypes.shape({
           impactTitle: PropTypes.string.isRequired,

diff --git a/src/components/groupImpactComponents/GroupImpactContainer.js b/src/components/groupImpactComponents/GroupImpactContainer.js
@@ -10,6 +10,7 @@ export default createFragmentContainer(GroupImpact, {
           id
           dollarProgress
           dollarProgressFromSearch
+          dollarProgressFromShop
           dollarGoal
           impactMetric {
             impactTitle

diff --git a/src/components/groupImpactComponents/GroupImpactSidebar.js b/src/components/groupImpactComponents/GroupImpactSidebar.js
@@ -26,6 +26,7 @@ import { windowOpenTop } from 'src/utils/navigation'
 import { lighten } from '@material-ui/core'
 import Handlebars from 'handlebars'
 import defaultTheme from 'src/utils/theme'
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'
 import SearchIcon from '@material-ui/icons/Search'
 import TabIcon from '@material-ui/icons/Tab'
 import ToggleButton from '@material-ui/lab/ToggleButton'
@@ -253,17 +254,29 @@ const GroupImpactSidebar = ({
     setSelectedMode(newValue)
     event.stopPropagation()
   }
-  const { dollarProgress, dollarGoal, dollarProgressFromSearch, impactMetric } =
-    displayingOldGoal ? lastGroupImpactMetric : groupImpactMetric
+  const {
+    dollarProgress,
+    dollarGoal,
+    dollarProgressFromSearch,
+    dollarProgressFromShop,
+    impactMetric,
+  } = displayingOldGoal ? lastGroupImpactMetric : groupImpactMetric
   const { impactTitle, whyValuableDescription, impactCountPerMetric } =
     impactMetric
   const classes = useStyles()
+
   const searchDollarProgress =
     dollarProgressFromSearch &&
     Math.max(
       Math.min(Math.floor(100 * (dollarProgressFromSearch / dollarGoal)), 100),
       1
     )
+  const shopDollarProgress =
+    dollarProgressFromShop &&
+    Math.max(
+      Math.min(Math.floor(100 * (dollarProgressFromShop / dollarGoal)), 100),
+      1
+    )
   const searchDisplayProgress =
     dollarProgressFromSearch &&
     Math.min(
@@ -276,9 +289,18 @@ const GroupImpactSidebar = ({
       ),
       92
     )
+  const shopDisplayProgress =
+    dollarProgressFromShop &&
+    Math.min(
+      Math.max(
+        Math.min(Math.floor(100 * (dollarProgressFromShop / dollarGoal)), 100),
+        8
+      ),
+      92
+    )
   const totalDisplayProgress = Math.max(
     Math.min(Math.floor(100 * (dollarProgress / dollarGoal)), 100),
-    (searchDisplayProgress || 0) + 8
+    (searchDisplayProgress || 0) + (shopDisplayProgress || 0) + 8
   )
   const totalProgress = Math.max(
     Math.min(Math.floor(100 * (dollarProgress / dollarGoal)), 100),
@@ -377,8 +399,12 @@ const GroupImpactSidebar = ({
           <div className={classes.paddingTopBottom}>
             <VerticalLinearProgress
               progress={
-                searchDisplayProgress
-                  ? [totalDisplayProgress, searchDisplayProgress]
+                searchDisplayProgress || shopDisplayProgress
+                  ? [
+                      totalDisplayProgress,
+                      searchDisplayProgress,
+                      shopDisplayProgress,
+                    ]
                   : [totalDisplayProgress]
               }
               width={64}
@@ -387,17 +413,19 @@ const GroupImpactSidebar = ({
               colors={[
                 defaultTheme.palette.colors.tab,
                 defaultTheme.palette.colors.search,
+                defaultTheme.palette.colors.shop,
               ]}
               icons={
-                searchDisplayProgress
-                  ? [<TabIcon />, <SearchIcon />]
+                searchDisplayProgress || shopDisplayProgress
+                  ? [<TabIcon />, <SearchIcon />, <ShoppingCartIcon />]
                   : [<TabIcon />]
               }
               tooltips={[
                 `${
-                  totalProgress - searchDollarProgress
+                  totalProgress - searchDollarProgress - shopDollarProgress
                 }% of funds raised by tabs opened through Tab for a Cause`,
                 `${searchDollarProgress}% of funds raised by searches through Search for a Cause`,
+                `${shopDollarProgress}% of funds raised by shopping through Shop for a Cause`,
               ]}
             />
           </div>
@@ -578,12 +606,13 @@ const GroupImpactSidebar = ({
         <VerticalLinearProgress
           progress={
             searchDollarProgress
-              ? [totalProgress, searchDollarProgress]
+              ? [totalProgress, searchDollarProgress, shopDollarProgress]
               : [totalProgress]
           }
           colors={[
             defaultTheme.palette.colors.tab,
             defaultTheme.palette.colors.search,
+            defaultTheme.palette.colors.shop,
           ]}
           width={isClosedHover ? 24 : 16}
           borderRadius={0}

diff --git a/src/components/groupImpactComponents/GroupImpactSidebar.stories.jsx b/src/components/groupImpactComponents/GroupImpactSidebar.stories.jsx
@@ -36,6 +36,7 @@ open.args = {
   groupImpactMetric: {
     dollarProgress: 28e5,
     dollarProgressFromSearch: 14e5,
+    dollarProgressFromShop: 0,
     dollarGoal: 5e6,
     impactMetric: {
       impactTitle: 'Provide 1 home visit from a community health worker',
@@ -53,6 +54,7 @@ openTooLittle.args = {
   groupImpactMetric: {
     dollarProgress: 2e5,
     dollarProgressFromSearch: 1e5,
+    dollarProgressFromShop: 0,
     dollarGoal: 5e6,
     impactMetric: {
       impactTitle: 'Provide 1 home visit from a community health worker',
@@ -144,6 +146,7 @@ almostDone.args = {
   groupImpactMetric: {
     dollarProgress: 4.9e6,
     dollarProgressFromSearch: 4.8e6,
+    dollarProgressFromShop: 0,
     dollarGoal: 5e6,
     impactMetric: {
       impactTitle: 'Provide 2 home visits from a community health worker',
@@ -162,6 +165,7 @@ almostDoneTwo.args = {
   groupImpactMetric: {
     dollarProgress: 4.8e6,
     dollarProgressFromSearch: 1e5,
+    dollarProgressFromShop: 0,
     dollarGoal: 5e6,
     impactMetric: {
       impactTitle: 'Provide 2 home visits from a community health worker',
@@ -180,6 +184,7 @@ aboveMax.args = {
   groupImpactMetric: {
     dollarProgress: 5.6e6,
     dollarProgressFromSearch: 1e5,
+    dollarProgressFromShop: 0,
     dollarGoal: 5e6,
     impactMetric: {
       impactTitle: 'Provide 2 home visits from a community health worker',
@@ -198,6 +203,7 @@ withLeaderboard.args = {
   groupImpactMetric: {
     dollarProgress: 4.8e6,
     dollarProgressFromSearch: 1e5,
+    dollarProgressFromShop: 0,
     dollarGoal: 5e6,
     impactMetric: {
       impactTitle: 'Provide 2 home visits from a community health worker',
@@ -322,6 +328,7 @@ withLeaderboardAndGroupImpactHistory.args = {
   groupImpactMetric: {
     dollarProgress: 4.8e6,
     dollarProgressFromSearch: 1e5,
+    dollarProgressFromShop: 0,
     dollarGoal: 5e6,
     impactMetric: {
       impactTitle: 'Provide 2 home visits from a community health worker',

diff --git a/src/components/groupImpactComponents/__tests__/GroupImpact.test.js b/src/components/groupImpactComponents/__tests__/GroupImpact.test.js
@@ -26,6 +26,7 @@ const getMockProps = () => ({
         id: 'abcd',
         dollarProgress: 250,
         dollarProgressFromSearch: 125,
+        dollarProgressFromShop: 0,
         dollarGoal: 600,
         impactMetric: {
           impactTitle: 'impact-title',
@@ -76,6 +77,7 @@ describe('GroupImpact component', () => {
         id: 'bcde',
         dollarProgress: 28e5,
         dollarProgressFromSearch: 125,
+        dollarProgressFromShop: 0,
         dollarGoal: 5e6,
         impactMetric: {
           impactTitle: 'Provide 1 home visit from a community health worker',
@@ -99,6 +101,7 @@ describe('GroupImpact component', () => {
         id: 'bcde',
         dollarProgress: 28e5,
         dollarProgressFromSearch: 125,
+        dollarProgressFromShop: 0,
         dollarGoal: 5e6,
         impactMetric: {
           impactTitle: 'Provide 1 home visit from a community health worker',
@@ -122,6 +125,7 @@ describe('GroupImpact component', () => {
         id: 'abcd',
         dollarProgress: 28e5,
         dollarProgressFromSearch: 125,
+        dollarProgressFromShop: 0,
         dollarGoal: 5e6,
         impactMetric: {
           impactTitle: 'Provide 1 home visit from a community health worker',
@@ -144,6 +148,7 @@ describe('GroupImpact component', () => {
       id: 'bcde',
       dollarProgress: 28e5,
       dollarProgressFromSearch: 125,
+      dollarProgressFromShop: 0,
       dollarGoal: 5e6,
       impactMetric: {
         impactTitle: 'Provide 1 home visit from a community health worker',
@@ -177,6 +182,7 @@ describe('GroupImpact component', () => {
       id: 'bcde',
       dollarProgress: 28e5,
       dollarProgressFromSearch: 125,
+      dollarProgressFromShop: 0,
       dollarGoal: 5e6,
       impactMetric: {
         impactTitle: 'Provide 1 home visit from a community health worker',
@@ -285,6 +291,7 @@ describe('GroupImpact component', () => {
       id: 'bcde',
       dollarProgress: 28e5,
       dollarProgressFromSearch: 125,
+      dollarProgressFromShop: 0,
       dollarGoal: 5e6,
       impactMetric: {
         impactTitle: 'Provide 1 home visit from a community health worker',
@@ -322,6 +329,7 @@ describe('GroupImpact component', () => {
       id: 'bcde',
       dollarProgress: 28e5,
       dollarProgressFromSearch: 125,
+      dollarProgressFromShop: 0,
       dollarGoal: 5e6,
       impactMetric: {
         impactTitle: 'Provide 1 home visit from a community health worker',