diff --git a/src/components/groupImpactComponents/GroupImpact.js b/src/components/groupImpactComponents/GroupImpact.js index de291171..f10b8939 100644 --- 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 index a3df758b..483fff40 100644 --- 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 index 10473400..729ec736 100644 --- 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 = ({
, ] + searchDisplayProgress || shopDisplayProgress + ? [, , ] : [] } 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`, ]} />
@@ -578,12 +606,13 @@ const GroupImpactSidebar = ({