Skip to content

Commit

Permalink
merge conflict
Browse files Browse the repository at this point in the history
  • Loading branch information
@jedtan
jedtan committed Jul 6, 2023
2 parents c234687 + 42e1de3 commit 44aa6c9
Show file tree
Hide file tree
Showing 2 changed files with 104 additions and 164 deletions.
258 changes: 99 additions & 159 deletions src/components/groupImpactComponents/GroupImpactSidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,7 @@ import Handlebars from 'handlebars'
import defaultTheme from 'src/utils/theme'
import SearchIcon from '@material-ui/icons/Search'
import TabIcon from '@material-ui/icons/Tab'
import localStorageFeaturesManager from 'src/utils/localStorageFeaturesManager'
import { GROUP_IMPACT_LEADERBOARD } from 'src/utils/experiments'
import VerticalLinearProgress from '../VerticalLinearProgress'
import GroupImpactLeaderboard from './GroupImpactLeaderboard'

const useStyles = makeStyles((theme) => ({
wrapper: {
Expand All @@ -43,9 +40,6 @@ const useStyles = makeStyles((theme) => ({
expanded: {
width: 400,
},
expandedWithLeaderboard: {
width: 900,
},
closed: {
width: 0,
},
Expand All @@ -59,6 +53,8 @@ const useStyles = makeStyles((theme) => ({
flexDirection: 'row',
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(2),
paddingTop: theme.spacing(3),
paddingBottom: theme.spacing(3),
cursor: 'pointer',
position: 'relative',
maxHeight: '100vh',
Expand All @@ -78,7 +74,6 @@ const useStyles = makeStyles((theme) => ({
flexDirection: 'column',
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(2),
paddingTop: theme.spacing(3),
},
sidebarButtons: {
width: '100%',
Expand All @@ -87,8 +82,8 @@ const useStyles = makeStyles((theme) => ({
justifyContent: 'center',
},
divider: {
marginTop: theme.spacing(3),
marginBottom: theme.spacing(3),
marginTop: theme.spacing(1.5),
marginBottom: theme.spacing(1.5),
},
buttonContent: {
display: 'flex',
Expand Down Expand Up @@ -188,18 +183,6 @@ const useStyles = makeStyles((theme) => ({
},
groupImpactMetricCount: {
marginTop: 'auto',
paddingBottom: theme.spacing(3),
},
sidebarContent: {
display: 'flex',
flexDirection: 'row',
},
leaderboard: {
maxHeight: '100%',
},
paddingTopBottom: {
paddingTop: theme.spacing(3),
paddingBottom: theme.spacing(3),
},
}))

Expand All @@ -211,8 +194,6 @@ const GroupImpactSidebar = ({
lastGroupImpactMetric,
openHandler,
groupImpactMetricCount,
leaderboard,
userId,

// sfacActivityState,
}) => {
Expand Down Expand Up @@ -307,13 +288,7 @@ const GroupImpactSidebar = ({
e.stopPropagation()
}

const isLeaderboardEnabled = localStorageFeaturesManager.getFeatureValue(
GROUP_IMPACT_LEADERBOARD
)
let wrapperWidthClass =
!leaderboard || !isLeaderboardEnabled
? classes.expanded
: classes.expandedWithLeaderboard
let wrapperWidthClass = classes.expanded
if (!isOpen && isClosedHover) {
wrapperWidthClass = classes.pullTabExpanded
} else if (!isOpen) {
Expand Down Expand Up @@ -343,77 +318,69 @@ const GroupImpactSidebar = ({
<div className={clsx(wrapperWidthClass, classes.wrapper)}>
<Slide direction="right" in={isOpen}>
<Box onClick={toggleOpen} className={classes.expandedWrapper}>
<div className={classes.paddingTopBottom}>
<VerticalLinearProgress
progress={
searchDisplayProgress
? [totalDisplayProgress, searchDisplayProgress]
: [totalDisplayProgress]
}
width={64}
borderRadius={32}
showMarkers={false}
colors={[
defaultTheme.palette.colors.tab,
defaultTheme.palette.colors.search,
]}
icons={
searchDisplayProgress
? [<TabIcon />, <SearchIcon />]
: [<TabIcon />]
}
tooltips={[
`${
totalProgress - searchDollarProgress
}% of funds was raised by tabs opened through Tab for a Cause`,
`${searchDollarProgress}% of funds was raised by searches through Search for a Cause`,
]}
/>
</div>
<VerticalLinearProgress
progress={
searchDisplayProgress
? [totalDisplayProgress, searchDisplayProgress]
: [totalDisplayProgress]
}
width={64}
borderRadius={32}
showMarkers={false}
colors={[
defaultTheme.palette.colors.tab,
defaultTheme.palette.colors.search,
]}
icons={
searchDisplayProgress
? [<TabIcon />, <SearchIcon />]
: [<TabIcon />]
}
tooltips={[
`${
totalProgress - searchDollarProgress
}% of funds raised by tabs opened through Tab for a Cause`,
`${searchDollarProgress}% of funds raised by searches through Search for a Cause`,
]}
/>
<Fade in={displaySidebarText} timeout={500}>
<div className={classes.sidebarContent}>
<div className={classes.sidebarText}>
<div className={classes.goalText}>
<Typography className={classes.robotoBold} variant="h5">
GROUP GOAL
</Typography>
{groupImpactSidebarState ? (
<span className={classes.badge}>
{groupImpactSidebarState}
</span>
) : null}
{(!leaderboard || !isLeaderboardEnabled) && (
<Button
onClick={toggleOpen}
className={classes.closeButton}
>
<ArrowBackIos className={classes.closeButtonIcon} />
</Button>
)}
</div>
<Typography variant="body2">{impactTitleCompiled}</Typography>
<Typography className={classes.robotoBold} variant="h3">
{totalProgress}%
<div className={classes.sidebarText}>
<div className={classes.goalText}>
<Typography className={classes.robotoBold} variant="h5">
GROUP GOAL
</Typography>
<Typography variant="body2">completed</Typography>
<Divider className={classes.divider} />
<Typography className={classes.robotoBold} variant="h6">
How this Helps
</Typography>
<Typography>{whyValuableDescription}</Typography>
<Divider className={classes.divider} />
<div className={classes.sidebarButtons}>
<Link to={aboutURL}>
<Button className={classes.sidebarButton}>
<div className={classes.buttonContent}>
<InfoIcon />
<Typography className={classes.sidebarButtonText}>
About the Cause
</Typography>
</div>
</Button>
</Link>
{/* <Button className={classes.sidebarButton}>
{groupImpactSidebarState ? (
<span className={classes.badge}>
{groupImpactSidebarState}
</span>
) : null}
<Button onClick={toggleOpen} className={classes.closeButton}>
<ArrowBackIos className={classes.closeButtonIcon} />
</Button>
</div>
<Typography variant="body2">{impactTitleCompiled}</Typography>
<Typography className={classes.robotoBold} variant="h3">
{totalProgress}%
</Typography>
<Typography variant="body2">completed</Typography>
<Divider className={classes.divider} />
<Typography className={classes.robotoBold} variant="h6">
How this Helps
</Typography>
<Typography>{whyValuableDescription}</Typography>
<Divider className={classes.divider} />
<div className={classes.sidebarButtons}>
<Link to={aboutURL}>
<Button className={classes.sidebarButton}>
<div className={classes.buttonContent}>
<InfoIcon />
<Typography className={classes.sidebarButtonText}>
About the Cause
</Typography>
</div>
</Button>
</Link>
{/* <Button className={classes.sidebarButton}>
<div className={classes.buttonContent}>
<StarsOutlined />
<Typography className={classes.sidebarButtonText}>Impact</Typography>
Expand All @@ -425,18 +392,18 @@ const GroupImpactSidebar = ({
<Typography className={classes.sidebarButtonText}>Nonprofits</Typography>
</div>
</Button> */}
</div>
<Divider className={classes.divider} />
{displayingOldGoal && (
<Button
className={classes.nextGoalButton}
variant="contained"
onClick={onClickNextGoalButton}
>
Start Next Goal
</Button>
)}
{/* {sfacActivityState !== SFAC_ACTIVITY_STATES.ACTIVE && (
</div>
<Divider className={classes.divider} />
{displayingOldGoal && (
<Button
className={classes.nextGoalButton}
variant="contained"
onClick={onClickNextGoalButton}
>
Start Next Goal
</Button>
)}
{/* {sfacActivityState !== SFAC_ACTIVITY_STATES.ACTIVE && (
<div className={classes.sfacUpsell}>
<Typography>
You could triple your impact by raising money each time you
Expand All @@ -452,38 +419,28 @@ const GroupImpactSidebar = ({
</Button>
</div>
)} */}
<div className={classes.shopUpsell}>
<div className={classes.shopUpsell}>
<Typography>
You could triple your impact by raising money each time you
shop online. Try out our newest project: Shop for a Cause
today!
</Typography>
<Button
onClick={onYesShopClick}
className={classes.yesButton}
variant="contained"
>
Learn More
</Button>
</div>
{groupImpactMetricCount && groupImpactMetricCount > 0 && (
<div
data-test-id="groupImpactMetricCount"
className={classes.groupImpactMetricCount}
>
<Typography>
You could triple your impact by raising money each time you
shop online. Try out our newest project: Shop for a Cause
today!
Tabbers like you have helped {historicImpactTitleString}.
</Typography>
<Button
onClick={onYesShopClick}
className={classes.yesButton}
variant="contained"
>
Learn More
</Button>
</div>
{groupImpactMetricCount && groupImpactMetricCount > 0 && (
<div
data-test-id="groupImpactMetricCount"
className={classes.groupImpactMetricCount}
>
<Typography>
Tabbers like you have helped {historicImpactTitleString}.
</Typography>
</div>
)}
</div>
{leaderboard && isLeaderboardEnabled && (
<div className={classes.leaderboard}>
<GroupImpactLeaderboard
leaderboardEntries={leaderboard}
userId={userId}
onClose={toggleOpen}
/>
</div>
)}
</div>
Expand Down Expand Up @@ -518,7 +475,7 @@ const GroupImpactSidebar = ({
defaultTheme.palette.colors.tab,
defaultTheme.palette.colors.search,
]}
width={isClosedHover ? 24 : 8}
width={isClosedHover ? 24 : 16}
borderRadius={0}
showMarkers={false}
/>
Expand All @@ -529,7 +486,6 @@ const GroupImpactSidebar = ({

GroupImpactSidebar.displayName = 'GroupImpactSidebar'
GroupImpactSidebar.propTypes = {
userId: PropTypes.string.isRequired,
open: PropTypes.bool.isRequired,
groupImpactSidebarState: PropTypes.string,
groupImpactMetric: PropTypes.shape({
Expand All @@ -555,21 +511,6 @@ GroupImpactSidebar.propTypes = {
nextGoalButtonClickHandler: PropTypes.func,
openHandler: PropTypes.func,
groupImpactMetricCount: PropTypes.number,
leaderboard: PropTypes.arrayOf(
PropTypes.shape({
position: PropTypes.number,
user: PropTypes.shape({
username: PropTypes.string,
id: PropTypes.string,
}),
userGroupImpactMetric: PropTypes.shape({
dollarContribution: PropTypes.number.isRequired,
tabDollarContribution: PropTypes.number,
searchDollarContribution: PropTypes.number,
shopDollarContribution: PropTypes.number,
}),
})
),

// sfacActivityState: PropTypes.string,
}
Expand All @@ -580,7 +521,6 @@ GroupImpactSidebar.defaultProps = {
openHandler: () => {},
lastGroupImpactMetric: null,
groupImpactMetricCount: null,
leaderboard: null,

// sfacActivityState: null,
}
Expand Down
10 changes: 5 additions & 5 deletions src/components/groupImpactComponents/__tests__/GroupImpactSidebar.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,8 +157,8 @@ describe('GroupImpactSidebar component', () => {
expect(
wrapper.find(VerticalLinearProgress).first().prop('tooltips')
).toEqual([
`25% of funds was raised by tabs opened through Tab for a Cause`,
`16% of funds was raised by searches through Search for a Cause`,
`25% of funds raised by tabs opened through Tab for a Cause`,
`16% of funds raised by searches through Search for a Cause`,
])
expect(wrapper.find(VerticalLinearProgress).at(1).prop('progress')).toEqual(
[
Expand Down Expand Up @@ -209,8 +209,8 @@ describe('GroupImpactSidebar component', () => {
expect(
wrapper.find(VerticalLinearProgress).first().prop('tooltips')
).toEqual([
`2% of funds was raised by tabs opened through Tab for a Cause`,
`1% of funds was raised by searches through Search for a Cause`,
`2% of funds raised by tabs opened through Tab for a Cause`,
`1% of funds raised by searches through Search for a Cause`,
])
expect(wrapper.find(VerticalLinearProgress).at(1).prop('progress')).toEqual(
[3, 1]
Expand Down Expand Up @@ -257,7 +257,7 @@ describe('GroupImpactSidebar component', () => {
}
const wrapper = shallow(<GroupImpactSidebar {...mockProps} />)

expect(wrapper.find(VerticalLinearProgress).at(1).prop('width')).toEqual(8)
expect(wrapper.find(VerticalLinearProgress).at(1).prop('width')).toEqual(16)

wrapper.find(Box).at(1).simulate('mouseover')
wrapper.update()
Expand Down

0 comments on commit 44aa6c9

Please sign in to comment.