From 5142c290166b38dde1949aa91d09f8ea35a50569 Mon Sep 17 00:00:00 2001 From: Spicer Matthews Date: Thu, 7 Dec 2023 23:12:07 -0800 Subject: [PATCH] Launched shop on leaderboard --- src/__tests__/pages/index.test.js | 3 ++ .../groupImpactComponents/GroupImpact.js | 13 ++++- .../GroupImpactContainer.js | 1 + .../GroupImpactSidebar.js | 47 +++++++++++++++---- .../GroupImpactSidebar.stories.jsx | 7 +++ .../__tests__/GroupImpact.test.js | 8 ++++ .../__tests__/GroupImpactSidebar.test.js | 16 ++++++- src/schema/schema.graphql | 5 ++ 8 files changed, 87 insertions(+), 13 deletions(-) diff --git a/src/__tests__/pages/index.test.js b/src/__tests__/pages/index.test.js index e16f9ea2..812d8b0e 100644 --- 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: 14e5, dollarGoal: 5e6, impactMetric: { impactTitle: @@ -1689,6 +1690,7 @@ describe('index.js: hardcoded notifications', () => { id: 'abcd', dollarProgress: 28e5, dollarProgressFromSearch: 14e5, + dollarProgressFromShop: 14e5, dollarGoal: 5e6, impactMetric: { impactTitle: @@ -1737,6 +1739,7 @@ describe('index.js: hardcoded notifications', () => { id: 'abcd', dollarProgress: 28e5, dollarProgressFromSearch: 14e5, + dollarProgressFromShop: 14e5, dollarGoal: 5e6, impactMetric: { impactTitle: 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 = ({ ({ 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', diff --git a/src/components/groupImpactComponents/__tests__/GroupImpactSidebar.test.js b/src/components/groupImpactComponents/__tests__/GroupImpactSidebar.test.js index dde86e22..7fda34bf 100644 --- a/src/components/groupImpactComponents/__tests__/GroupImpactSidebar.test.js +++ b/src/components/groupImpactComponents/__tests__/GroupImpactSidebar.test.js @@ -119,6 +119,7 @@ describe('GroupImpactSidebar component', () => { groupImpactMetric: { dollarProgress: 250, dollarProgressFromSearch: 100, + dollarProgressFromShop: 0, dollarGoal: 600, impactMetric: { impactTitle: 'impact-title', @@ -147,6 +148,11 @@ describe('GroupImpactSidebar component', () => { (mockProps.groupImpactMetric.dollarProgressFromSearch / mockProps.groupImpactMetric.dollarGoal) ), + Math.floor( + 100 * + (mockProps.groupImpactMetric.dollarProgressFromShop / + mockProps.groupImpactMetric.dollarGoal) + ), ]) expect(wrapper.find(VerticalLinearProgress).first().prop('icons')).toEqual([ , @@ -182,6 +188,7 @@ describe('GroupImpactSidebar component', () => { groupImpactMetric: { dollarProgress: 650, dollarProgressFromSearch: 100, + dollarProgressFromShop: 0, dollarGoal: 600, impactMetric: { impactTitle: 'impact-title', @@ -193,7 +200,7 @@ describe('GroupImpactSidebar component', () => { expect(wrapper.find(Typography).at(2).text()).toEqual('108%') expect( wrapper.find(VerticalLinearProgress).first().prop('progress') - ).toEqual([100, 16]) + ).toEqual([100, 16, 0]) expect(wrapper.find(VerticalLinearProgress).first().prop('icons')).toEqual([ , , @@ -217,6 +224,7 @@ describe('GroupImpactSidebar component', () => { groupImpactMetric: { dollarProgress: 20, dollarProgressFromSearch: 6, + dollarProgressFromShop: 0, dollarGoal: 600, impactMetric: { impactTitle: 'impact-title', @@ -234,7 +242,7 @@ describe('GroupImpactSidebar component', () => { ) expect( wrapper.find(VerticalLinearProgress).first().prop('progress') - ).toEqual([16, 8]) + ).toEqual([16, 8, 0]) expect(wrapper.find(VerticalLinearProgress).first().prop('icons')).toEqual([ , , @@ -412,6 +420,7 @@ describe('GroupImpactSidebar component', () => { ...getMockProps(), groupImpactMetric: { dollarProgressFromSearch: 125, + dollarProgressFromShop: 0, dollarProgress: 250, dollarGoal: 600, impactMetric: { @@ -439,6 +448,7 @@ describe('GroupImpactSidebar component', () => { ...getMockProps(), groupImpactMetric: { dollarProgressFromSearch: 125, + dollarProgressFromShop: 0, dollarProgress: 250, dollarGoal: 600, impactMetric: { @@ -466,6 +476,7 @@ describe('GroupImpactSidebar component', () => { ...getMockProps(), groupImpactMetric: { dollarProgressFromSearch: 125, + dollarProgressFromShop: 0, dollarProgress: 250, dollarGoal: 600, impactMetric: { @@ -487,6 +498,7 @@ describe('GroupImpactSidebar component', () => { ...getMockProps(), groupImpactMetric: { dollarProgressFromSearch: 125, + dollarProgressFromShop: 0, dollarProgress: 250, dollarGoal: 600, impactMetric: { diff --git a/src/schema/schema.graphql b/src/schema/schema.graphql index 89ed2733..006905c2 100644 --- 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 }