Launched shop on leaderboard

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

Hide file tree

Showing 4 changed files with 55 additions and 11 deletions.
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/schema/schema.graphql b/src/schema/schema.graphql
@@ -498,6 +498,11 @@ type GroupImpactMetric implements Node {
   """
   dollarProgressFromSearch: Int!
 
+  """
+  The micro USD amount raised for this instance of GroupImpactMetric so far from shop
+  """
+  dollarProgressFromShop: Int!
+
   """ISO datetime string of when this GroupImpactMetric will expire"""
   dateExpires: String
 }