diff --git a/src/js/common/components/Challenge/PointsExplanationModal.jsx b/src/js/common/components/Challenge/PointsExplanationModal.jsx new file mode 100644 index 000000000..71c3a7bf7 --- /dev/null +++ b/src/js/common/components/Challenge/PointsExplanationModal.jsx @@ -0,0 +1,250 @@ +import withStyles from '@mui/styles/withStyles'; +import withTheme from '@mui/styles/withTheme'; +import PropTypes from 'prop-types'; +import React, { Component } from 'react'; +import styled from 'styled-components'; +import DesignTokenColors from '../Style/DesignTokenColors'; +import ModalDisplayTemplateA, { templateAStyles, TextFieldWrapper } from '../../../components/Widgets/ModalDisplayTemplateA'; +import { DialogTitle, DialogTitleText } from '@mui/material'; +import { renderLog } from '../../utils/logging'; + +class PointsExplanationModal extends Component { + constructor (props) { + super(props); + this.state = { + showTerms: false, + }; + } + + toggleTerms = () => { + this.setState({ showTerms: !this.state.showTerms }); + }; + + render() { + renderLog('PointsExplanationModalModal'); + const { show, toggleModal } = this.props; + const { showTerms } = this.state; + + const dialogTitleText = ''; + + const textFieldJSX = ( + + + + + + How we calculate the challenge leaderboard ranking + + + + + + + At the end of a challenge, the participant who has the most points is ranked as #1 and wins the challenge. + + + + + + + How you earn points + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ACTIONPOINTS EARNED
Friend you invited joins a challenge10
Friend you invited clicks the invitation link5
Adding a photo to your profile5
Sending a challenge invitation to a friend2
Every time a friend you invited earns 5 points1
+ + + + + + {showTerms ? 'Hide contest terms' : 'View contest terms'} + + + + + + {showTerms && ( + <> + + + + Contest terms + + + + + + )} + + + + ); + + return ( + {dialogTitleText}} + textFieldJSX={textFieldJSX} + show={show} + tallMode + toggleModal={toggleModal} + /> + ); + } +} + +PointsExplanationModal.propTypes = { + show: PropTypes.bool.isRequired, + toggleModal: PropTypes.func.isRequired, +}; + +const styles = () => ({ + howToVoteRoot: { + color: '#999', + height: 18, + width: 18, + }, +}); + +const PointsWrapper = styled('div')` + white-space: normal; +`; + +export const CardRowsWrapper = styled('div')` + margin-top: 2px; +`; + +export const CardForListRow = styled('div')` + color: ${DesignTokenColors.neutral900}; + font-size: 12px; + line-height: 1.5; + padding-bottom: 8px; + + &:First-child { + border-bottom: 1px solid ${DesignTokenColors.neutral300}; + } + + &:nth-child(2) { + padding-top: 8px; + } +`; + +export const FlexDivLeft = styled('div')` + align-items: flex-start; + display: flex; + justify-content: start; +`; + +export const HowWeCalculateDiv = styled('div')` + font-size: 10px; + +`; + +export const AtTheEndDiv = styled('div')` + font-weight: bold; + font-size: 10px; +`; + +export const HowYouEarnPointsDiv = styled('div')` + font-size: 12px; +`; + +export const ViewContestTermsDiv = styled('div')` + font-size: 8px; +`; + +const Table = styled('table')` + width: 100%; + border-collapse: collapse; +`; + +const Th = styled('th')` + text-align: left; + color: ${DesignTokenColors.neutral900}; + font-size: 8px; + padding-top: 8px; + + &:nth-child(2) { + text-align: right; + } +`; + +const Tr = styled('tr')` + background-color: white; + + &:last-child { + td { + border-bottom: none; + } +`; + +const Td = styled('td')` + color: ${DesignTokenColors.neutral900}; + font-size: 10px; + padding: 2px; + border-bottom: 1px solid ${DesignTokenColors.neutral300}; + + &:nth-child(2) { + text-align: right; + } +`; + +const ViewContestTermsLink = styled('span')` + color: ${DesignTokenColors.accent500}; + cursor: pointer; + text-decoration: underline; +`; + +export const ContestTermDiv = styled('div')` + font-size: 12px; +`; + +const Ul = styled('ul')` + font-size: 10px; + line-height: 1.5; + text-align: left; + padding-left: 10px; +`; + +export default withTheme(withStyles(templateAStyles)(PointsExplanationModal)); diff --git a/src/js/common/components/Challenge/YourRankOutOf.jsx b/src/js/common/components/Challenge/YourRankOutOf.jsx index b2de29f5f..47b22298c 100644 --- a/src/js/common/components/Challenge/YourRankOutOf.jsx +++ b/src/js/common/components/Challenge/YourRankOutOf.jsx @@ -4,27 +4,27 @@ import PropTypes from 'prop-types'; import DesignTokenColors from '../Style/DesignTokenColors'; import { InfoOutlined } from '@mui/icons-material'; -const YourRankModal = React.lazy(() => import(/* webpackChunkName: 'YourRankModal' */ './YourRankModal')); // eslint-disable-line import/no-cycle +const PointsExplanationModal = React.lazy(() => import(/* webpackChunkName: 'PointsExplanationModal' */ './PointsExplanationModal')); // eslint-disable-line import/no-cycle class YourRankOutOf extends PureComponent { constructor (props) { super(props); this.state = { - yourRankModalOpen: false, + pointsExplanationModalOpen: false, moreInfoIconHovered: false, }; } - openYourRankModal = () => { + openPointsExplanationModal = () => { this.setState({ - yourRankModalOpen: true, + pointsExplanationModalOpen: true, }); }; toggleYourRankFunction = () => { - const { yourRankModalOpen } = this.state; + const { pointsExplanationModalOpen } = this.state; this.setState({ - yourRankModalOpen: !yourRankModalOpen, + pointsExplanationModalOpen: !pointsExplanationModalOpen, }); }; @@ -43,7 +43,7 @@ class YourRankOutOf extends PureComponent { render() { const { rankOfVoter, participantsCount } = this.props; - const { yourRankModalOpen, moreInfoIconHovered } = this.state; + const { pointsExplanationModalOpen, moreInfoIconHovered } = this.state; return ( @@ -65,12 +65,12 @@ class YourRankOutOf extends PureComponent { style={{ color: moreInfoIconHovered ? DesignTokenColors.primary500 : DesignTokenColors.neutral600, cursor: 'pointer' }} onMouseEnter={() => this.handleMoreInfoIconHover()} onMouseLeave={() => this.handleMoreInfoIconLeave()} - onClick={() => this.openYourRankModal()} + onClick={() => this.openPointsExplanationModal()} /> - {yourRankModalOpen && ( + {pointsExplanationModalOpen && ( Loading...}> - )}