Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TFAC-1226 Displaying Split Bar for Search and Tab #470

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default createFragmentContainer(GroupImpact, {
groupImpactMetric {
id
dollarProgress
dollarGoal
dollarProgressFromTab
impactMetric {
impactTitle
whyValuableDescription
Expand Down
28 changes: 20 additions & 8 deletions src/components/groupImpactComponents/GroupImpactSidebar.js
Original file line number Diff line number Diff line change
Expand Up @@ -191,15 +191,20 @@ const GroupImpactSidebar = ({
!!lastGroupImpactMetric
)
const [isClosedHover, setIsClosedHover] = useState(false)
const { dollarProgress, dollarGoal, impactMetric } = displayingOldGoal
? lastGroupImpactMetric
: groupImpactMetric
const { dollarProgress, dollarGoal, dollarProgressFromTab, impactMetric } =
displayingOldGoal ? lastGroupImpactMetric : groupImpactMetric
const { impactTitle, whyValuableDescription } = impactMetric
const classes = useStyles()
const progress = Math.max(
const totalProgress = Math.max(
Math.min(Math.floor(100 * (dollarProgress / dollarGoal)), 100),
1
)
const tabDollarProgress =
dollarProgressFromTab &&
Math.max(
Math.min(Math.floor(100 * (dollarProgressFromTab / dollarGoal)), 100),
1
)

// const onYesClick = () => {
// gtag('event', 'group_impact_sidebar', {
Expand Down Expand Up @@ -266,10 +271,15 @@ const GroupImpactSidebar = ({
<Slide direction="right" in={isOpen}>
<Box onClick={toggleOpen} className={classes.expandedWrapper}>
<VerticalLinearProgress
progress={[progress]}
progress={
tabDollarProgress
? [totalProgress, tabDollarProgress]
: [totalProgress]
}
width={64}
borderRadius={32}
showMarkers
colors={['primary', 'red']}
/>
<Fade in={displaySidebarText} timeout={500}>
<div className={classes.sidebarText}>
Expand All @@ -288,7 +298,7 @@ const GroupImpactSidebar = ({
</div>
<Typography variant="body2">{impactTitle}</Typography>
<Typography className={classes.robotoBold} variant="h3">
{progress}%
{totalProgress}%
</Typography>
<Typography variant="body2">completed</Typography>
<Divider className={classes.divider} />
Expand Down Expand Up @@ -379,12 +389,12 @@ const GroupImpactSidebar = ({
}
>
<Typography variant="body2" className={classes.pullTabProgress}>
{progress}%
{totalProgress}%
</Typography>
<Stars className={classes.pullTabStar} />
</div>
<VerticalLinearProgress
progress={[progress]}
progress={[totalProgress]}
width={isClosedHover ? 24 : 8}
borderRadius={0}
showMarkers={false}
Expand All @@ -400,6 +410,7 @@ GroupImpactSidebar.propTypes = {
groupImpactSidebarState: PropTypes.string,
groupImpactMetric: PropTypes.shape({
dollarProgress: PropTypes.number.isRequired,
dollarProgressFromTab: PropTypes.number,
dollarGoal: PropTypes.number.isRequired,
impactMetric: PropTypes.shape({
impactTitle: PropTypes.string.isRequired,
Expand All @@ -408,6 +419,7 @@ GroupImpactSidebar.propTypes = {
}).isRequired,
lastGroupImpactMetric: PropTypes.shape({
dollarProgress: PropTypes.number.isRequired,
dollarProgressFromTab: PropTypes.number,
dollarGoal: PropTypes.number.isRequired,
impactMetric: PropTypes.shape({
impactTitle: PropTypes.string.isRequired,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ open.args = {
open: true,
groupImpactMetric: {
dollarProgress: 28e5,
dollarProgressFromTab: 14e5,
dollarGoal: 5e6,
impactMetric: {
impactTitle: 'Provide 1 home visit from a community health worker',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const getMockProps = () => ({
groupImpactMetric: {
id: 'abcd',
dollarProgress: 250,
dollarProgressFromTab: 125,
dollarGoal: 600,
impactMetric: {
impactTitle: 'impact-title',
Expand Down Expand Up @@ -72,6 +73,7 @@ describe('GroupImpact component', () => {
{
id: 'bcde',
dollarProgress: 28e5,
dollarProgressFromTab: 125,
dollarGoal: 5e6,
impactMetric: {
impactTitle: 'Provide 1 home visit from a community health worker',
Expand All @@ -93,6 +95,7 @@ describe('GroupImpact component', () => {
{
id: 'bcde',
dollarProgress: 28e5,
dollarProgressFromTab: 125,
dollarGoal: 5e6,
impactMetric: {
impactTitle: 'Provide 1 home visit from a community health worker',
Expand All @@ -114,6 +117,7 @@ describe('GroupImpact component', () => {
{
id: 'abcd',
dollarProgress: 28e5,
dollarProgressFromTab: 125,
dollarGoal: 5e6,
impactMetric: {
impactTitle: 'Provide 1 home visit from a community health worker',
Expand All @@ -134,6 +138,7 @@ describe('GroupImpact component', () => {
const lastGroupImpactMetric = {
id: 'bcde',
dollarProgress: 28e5,
dollarProgressFromTab: 125,
dollarGoal: 5e6,
impactMetric: {
impactTitle: 'Provide 1 home visit from a community health worker',
Expand Down Expand Up @@ -165,6 +170,7 @@ describe('GroupImpact component', () => {
const lastGroupImpactMetric = {
id: 'bcde',
dollarProgress: 28e5,
dollarProgressFromTab: 125,
dollarGoal: 5e6,
impactMetric: {
impactTitle: 'Provide 1 home visit from a community health worker',
Expand Down Expand Up @@ -271,6 +277,7 @@ describe('GroupImpact component', () => {
const lastGroupImpactMetric = {
id: 'bcde',
dollarProgress: 28e5,
dollarProgressFromTab: 125,
dollarGoal: 5e6,
impactMetric: {
impactTitle: 'Provide 1 home visit from a community health worker',
Expand Down Expand Up @@ -307,6 +314,7 @@ describe('GroupImpact component', () => {
const lastGroupImpactMetric = {
id: 'bcde',
dollarProgress: 28e5,
dollarProgressFromTab: 125,
dollarGoal: 5e6,
impactMetric: {
impactTitle: 'Provide 1 home visit from a community health worker',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ jest.mock('src/utils/navigation')
const getMockProps = () => ({
groupImpactSidebarState: 'badge-text',
groupImpactMetric: {
dollarProgressFromTab: 125,
dollarProgress: 250,
dollarGoal: 600,
impactMetric: {
Expand Down Expand Up @@ -104,6 +105,11 @@ describe('GroupImpactSidebar component', () => {
(mockProps.groupImpactMetric.dollarProgress /
mockProps.groupImpactMetric.dollarGoal)
),
Math.floor(
100 *
(mockProps.groupImpactMetric.dollarProgressFromTab /
mockProps.groupImpactMetric.dollarGoal)
),
])
})

Expand Down Expand Up @@ -163,6 +169,7 @@ describe('GroupImpactSidebar component', () => {
nextGoalButtonClickHandler: jest.fn(),
lastGroupImpactMetric: {
dollarProgress: 5e6,
dollarProgressForTab: 2e6,
dollarGoal: 5e6,
impactMetric: {
impactTitle: 'Provide 1 home visit from a community health worker',
Expand Down Expand Up @@ -227,6 +234,11 @@ describe('GroupImpactSidebar component', () => {
(mockProps.groupImpactMetric.dollarProgress /
mockProps.groupImpactMetric.dollarGoal)
),
Math.floor(
100 *
(mockProps.groupImpactMetric.dollarProgressFromTab /
mockProps.groupImpactMetric.dollarGoal)
),
])

expect(mockProps.nextGoalButtonClickHandler).toHaveBeenCalled()
Expand Down
30 changes: 30 additions & 0 deletions src/schema/schema.graphql
Original file line number Diff line number Diff line change
Expand Up @@ -477,6 +477,16 @@ type GroupImpactMetric implements Node {

"""ISO datetime string of when this GroupImpactMetric was ended"""
dateCompleted: String

"""
The micro USD amount raised for this instance of GroupImpactMetric so far from tabs
"""
dollarProgressFromTab: Int!

"""
The micro USD amount raised for this instance of GroupImpactMetric so far from search
"""
dollarProgressFromSearch: Int!
}

"""Fields on which to filter the list of causes."""
Expand Down Expand Up @@ -957,6 +967,9 @@ type User implements Node {

"""whether or not the user has opted into searching for extra impact"""
yahooPaidSearchRewardOptIn: Boolean!

"""Current UserGroupImpactMetric"""
userGroupImpactMetric: UserGroupImpactMetric
}

"""a user's charity specific impact"""
Expand Down Expand Up @@ -1254,6 +1267,23 @@ enum sfacActivityState {
inactive
}

"""A specific users contribution to a GroupImpactMetric"""
type UserGroupImpactMetric implements Node {
"""Information about the GroupImpactMetric"""
groupImpactMetric: GroupImpactMetric

"""The ID of an object"""
id: ID!

"""The ID of the user which the UserGroupImpactMetric belongs to"""
userId: String!

"""
The micro USD amount raised for this instance of GroupImpactMetric so far by this user
"""
dollarContribution: Int!
}

"""The Wildfire object"""
type Wildfire {
causeName: String
Expand Down