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.

Sign up for GitHub

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

Jump to bottom

Update to ChallengeInviteFriends. Style updates to hover over ballot items. Routing update to JoinChallengeButton. #4027

Merged
merged 1 commit into from
Sep 14, 2024
Merged

Update to ChallengeInviteFriends. Style updates to hover over ballot items. Routing update to JoinChallengeButton. #4027

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -413,9 +413,9 @@ class App extends Component {
<Route exact path="/:challengeSEOFriendlyPath/+/" render={(props) => <ChallengeHomePage match={props.match} />} />
<Route exact path="/:challengeSEOFriendlyPath/+/edit" render={(props) => <ChallengeStartEditAll match={props.match} editExistingChallenge setShowHeaderFooter={this.setShowHeaderFooter} />} />
<Route exact path="/:challengeSEOFriendlyPath/+/join-challenge" render={(props) => <ChallengeInviteFriendsJoin match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} />} />
<Route exact path="/:challengeSEOFriendlyPath/+/:tabSelected" render={(props) => <ChallengeHomePage match={props.match} />} />
<Route exact path="/:challengeSEOFriendlyPath/+/customize-message" render={(props) => <ChallengeInviteCustomizeMessage match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} />} />
<Route exact path="/:challengeSEOFriendlyPath/+/copy-message" render={(props) => <ChallengeInviteCopy match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} />} />
<Route exact path="/:challengeSEOFriendlyPath/+/invite-friends" render={(props) => <ChallengeInviteCopy match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} />} />
<Route exact path="/:challengeSEOFriendlyPath/+/:tabSelected" render={(props) => <ChallengeHomePage match={props.match} />} />
<Route exact path="/:politicianWeVoteId/p/" render={(props) => <PoliticianDetailsPage match={props.match} />} />
<Route exact path="/:politicianSEOFriendlyPath/-/" render={(props) => <PoliticianDetailsPage match={props.match} />} />
<Route exact path="/:campaignSEOFriendlyPath/-/share-campaign" render={(props) => <CampaignSupportShare match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} />} />
Expand Down
98 changes: 86 additions & 12 deletions src/js/common/components/Challenge/JoinChallengeButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,71 @@ import BaseButton from '../../../components/Buttons/BaseButton';
import historyPush from '../../utils/historyPush';
import { renderLog } from '../../utils/logging';
import AppObservableStore from '../../stores/AppObservableStore';
import ChallengeStore from '../../stores/ChallengeStore';
import VoterStore from '../../../stores/VoterStore';
import { getChallengeValuesFromIdentifiers } from '../../utils/challengeUtils';

class JoinChallengeButton extends React.Component {
constructor (props) {
super(props);
this.state = {
challengeSEOFriendlyPath: '',
challengeWeVoteId: '',
goToNextStepAfterSignIn: false,
voterFirstName: '',
voterIsSignedIn: false,
goToNextStepAfterSignIn: false,
voterSupportsThisChallenge: false,
};
}

componentDidMount () {
// console.log('JoinChallengeButton componentDidMount');
this.onVoterStoreChange();
this.voterStoreListener = VoterStore.addListener(this.onVoterStoreChange.bind(this));
this.onChallengeStoreChange();
this.challengeStoreListener = ChallengeStore.addListener(this.onChallengeStoreChange.bind(this));
}

componentWillUnmount () {
this.challengeStoreListener.remove();
this.voterStoreListener.remove();
}

onChallengeStoreChange () {
const { challengeSEOFriendlyPath: challengeSEOFriendlyPathFromProps, challengeWeVoteId: challengeWeVoteIdFromProps } = this.props;
console.log('onChallengeStoreChange challengeSEOFriendlyPathFromProps: ', challengeSEOFriendlyPathFromProps, ', challengeWeVoteIdFromProps: ', challengeWeVoteIdFromProps);
const {
challengeSEOFriendlyPath,
challengeWeVoteId,
} = getChallengeValuesFromIdentifiers(challengeSEOFriendlyPathFromProps, challengeWeVoteIdFromProps);
// console.log('onChallengeStoreChange AFTER getChallengeValuesFromIdentifiers challengeWeVoteId: ', challengeWeVoteId);
if (challengeSEOFriendlyPath) {
this.setState({
challengeSEOFriendlyPath,
});
} else {
this.setState({
challengeSEOFriendlyPath: challengeSEOFriendlyPathFromProps,
});
}
let voterSupportsThisChallenge
if (challengeWeVoteId) {
// const voterCanEditThisChallenge = ChallengeStore.getVoterCanEditThisChallenge(challengeWeVoteId);
voterSupportsThisChallenge = ChallengeStore.getVoterSupportsThisChallenge(challengeWeVoteId);
this.setState({
challengeWeVoteId,
// voterCanEditThisChallenge,
voterSupportsThisChallenge,
});
} else {
voterSupportsThisChallenge = ChallengeStore.getVoterSupportsThisChallenge(challengeWeVoteIdFromProps);
this.setState({
challengeWeVoteId: challengeWeVoteIdFromProps,
voterSupportsThisChallenge,
});
}
}

onVoterStoreChange () {
const { goToNextStepAfterSignIn, voterIsSignedIn: voterIsSignedInPrevious } = this.state;
const voterIsSignedIn = VoterStore.getVoterIsSignedIn();
Expand All @@ -43,22 +86,44 @@ class JoinChallengeButton extends React.Component {
});
}

getChallengeBasePath = () => {
const { challengeSEOFriendlyPath, challengeWeVoteId } = this.state;
let challengeBasePath;
if (challengeSEOFriendlyPath) {
challengeBasePath = `/${challengeSEOFriendlyPath}/+/`;
} else {
challengeBasePath = `/+/${challengeWeVoteId}/`;
}
return challengeBasePath;
}

goToInviteFriends = () => {
// DALE 2024-09-13 Soon we will evolve this to have a mode where the Invite friends page is shown in a drawer
const challengeBasePath = this.getChallengeBasePath();
const inviteFriendsPath = `${challengeBasePath}invite-friends`;
const { location: { pathname: currentPathname } } = window;
AppObservableStore.setSetUpAccountBackLinkPath(currentPathname);
AppObservableStore.setSetUpAccountEntryPath(inviteFriendsPath);
historyPush(inviteFriendsPath);
}

goToJoinChallenge = () => {
const { challengeBasePath } = this.props;
const challengeBasePath = this.getChallengeBasePath();
console.log('goToJoinChallenge challengeBasePath: ', challengeBasePath);
const { voterFirstName } = this.state;
// TODO: Check to see if voter has filled out a voting plan
const itemsAreMissing = true; // Temporarily assume we have something we need from voter
if (VoterStore.getVoterIsSignedIn()) {
let setUpAccountEntryPath = '';
let joinChallengeNextStepPath = '';
if (!voterFirstName || itemsAreMissing) {
setUpAccountEntryPath = `${challengeBasePath}join-challenge`;
joinChallengeNextStepPath = `${challengeBasePath}join-challenge`;
} else {
setUpAccountEntryPath = `${challengeBasePath}customize-message`;
joinChallengeNextStepPath = `${challengeBasePath}customize-message`;
}
const { location: { pathname: currentPathname } } = window;
AppObservableStore.setSetUpAccountBackLinkPath(currentPathname);
AppObservableStore.setSetUpAccountEntryPath(setUpAccountEntryPath);
historyPush(setUpAccountEntryPath);
AppObservableStore.setSetUpAccountEntryPath(joinChallengeNextStepPath);
historyPush(joinChallengeNextStepPath);
} else {
this.setState({
goToNextStepAfterSignIn: true,
Expand All @@ -69,22 +134,31 @@ class JoinChallengeButton extends React.Component {

render () {
renderLog('JoinChallengeButton'); // Set LOG_RENDER_EVENTS to log all renders
const { buttonText } = this.props;
const { voterSupportsThisChallenge } = this.state;
const { challengeSEOFriendlyPath, challengeWeVoteId } = this.state;
console.log('JoinChallengeButton render challengeSEOFriendlyPath: ', challengeSEOFriendlyPath, ', challengeWeVoteId: ', challengeWeVoteId);
let buttonText;
if (voterSupportsThisChallenge) {
buttonText = 'Invite more friends';
} else {
buttonText = 'Join Challenge';
}
console.log('JoinChallengeButton render voterSupportsThisChallenge: ', voterSupportsThisChallenge);
return (
<JoinChallengeButtonWrapper>
<BaseButton
id="joinChallengeButton"
onClick={this.goToJoinChallenge}
onClick={voterSupportsThisChallenge ? this.goToInviteFriends : this.goToJoinChallenge}
primary
label={buttonText || 'Join Challenge'}
label={buttonText}
/>
</JoinChallengeButtonWrapper>
);
}
}
JoinChallengeButton.propTypes = {
buttonText: PropTypes.string,
challengeBasePath: PropTypes.string,
challengeSEOFriendlyPath: PropTypes.string,
challengeWeVoteId: PropTypes.string,
};

const JoinChallengeButtonWrapper = styled('div')`
Expand Down
11 changes: 4 additions & 7 deletions src/js/common/components/Style/ScrollingStyles.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,11 @@ import DesignTokenColors from './DesignTokenColors';
export const BallotHorizontallyScrollingContainer = styled('div', {
shouldForwardProp: (prop) => !['isChosen', 'showLeftGradient', 'showRightGradient'].includes(prop),
})(({ isChosen, showLeftGradient, showRightGradient }) => (`
width: 100%;
width: 100%;
overflow-x: auto;
white-space: nowrap;
border: none;
border-radius: 16px;
margin-bottom: 5px;
border-bottom: 1px solid #ddd;
padding-top: 6px;
transition: box-shadow 0.2s ease, background-color 0.3s ease; /* Smooth transition for shadow and background color */

/* Default styles */
Expand All @@ -22,8 +21,7 @@ export const BallotHorizontallyScrollingContainer = styled('div', {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Shadow effect on hover */
}


/* Fade out, right side */
/* Fade out, right side */
${showRightGradient ? '-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0));' : ''}
${showRightGradient ? 'mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0));' : ''} );

Expand All @@ -35,7 +33,6 @@ export const BallotHorizontallyScrollingContainer = styled('div', {
${showLeftGradient && showRightGradient ? '-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 6%, rgba(0, 0, 0, 1) 94%, rgba(0, 0, 0, 0));' : ''}
${showLeftGradient && showRightGradient ? 'mask-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(0, 0, 0, 1) 6%, rgba(0, 0, 0, 1) 94%, rgba(0, 0, 0, 0));' : ''}


/* Make the scrollbar not be visible */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
Expand Down
52 changes: 28 additions & 24 deletions src/js/common/pages/Challenge/ChallengeHomePage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ class ChallengeHomePage extends Component {
challengeWeVoteIdForDisplay: '', // Value for challenge already received
sharingStepCompleted: false,
step2Completed: false,
voterCanEditThisPolitician: false,
voterCanEditThisChallenge: false,
};
// this.onScroll = this.onScroll.bind(this);
}
Expand Down Expand Up @@ -437,12 +437,12 @@ class ChallengeHomePage extends Component {
historyPush('/ballot');
}

onPoliticianCampaignEditClick = () => {
onChallengeCampaignEditClick = () => {
historyPush(`${this.getChallengeBasePath()}edit`);
return null;
}

onPoliticianCampaignShareClick = () => {
onChallengeCampaignShareClick = () => {
historyPush(`${this.getChallengeBasePath()}share-challenge`);
return null;
}
Expand All @@ -462,10 +462,11 @@ class ChallengeHomePage extends Component {
challengeTitle,
challengeWeVoteIdForDisplay,
scrolledDown,
voterCanEditThisPolitician, voterSupportsThisPolitician,
voterCanEditThisChallenge,
voterSupportsThisChallenge,
voterWeVoteId,
} = this.state;
// console.log('ChallengeHomePage render challengeTitle: ', challengeTitle);
console.log('ChallengeHomePage render challengeSEOFriendlyPath: ', challengeSEOFriendlyPath, ', challengeSEOFriendlyPathForDisplay: ', challengeSEOFriendlyPathForDisplay);
const challengeAdminEditUrl = `${webAppConfig.WE_VOTE_SERVER_ROOT_URL}challenge/${challengeWeVoteId}/summary`;
// const candidateWeVoteId = CandidateStore.getCandidateWeVoteIdRunningFromChallengeWeVoteId(challengeWeVoteId);
const avatarBackgroundImage = normalizedImagePath('../img/global/svg-icons/avatar-generic.svg');
Expand All @@ -479,8 +480,8 @@ class ChallengeHomePage extends Component {
<meta name="robots" content="noindex" data-react-helmet="true" />
</Helmet>
<PageWrapper>
<MissingPoliticianMessageContainer>
<MissingPoliticianText>Democracy Challenge not found.</MissingPoliticianText>
<MissingChallengeMessageContainer>
<MissingChallengeText>Democracy Challenge not found.</MissingChallengeText>
<Button
classes={{ root: classes.buttonRoot }}
color="primary"
Expand All @@ -490,7 +491,7 @@ class ChallengeHomePage extends Component {
<PersonSearch classes={{ root: classes.buttonIconRoot }} location={window.location} />
See other challenges
</Button>
</MissingPoliticianMessageContainer>
</MissingChallengeMessageContainer>
</PageWrapper>
</PageContentContainer>
);
Expand Down Expand Up @@ -553,7 +554,7 @@ class ChallengeHomePage extends Component {
<MobileHeaderContentContainer>
<CandidateTopRow>
<Candidate
id={`challengeHomeImageAndName-${challengeWeVoteId}`}
id={`challengeHomeImageAndName-${challengeWeVoteIdForDisplay}`}
>
{/* Challenge Image */}
<Suspense fallback={<></>}>
Expand Down Expand Up @@ -604,19 +605,19 @@ class ChallengeHomePage extends Component {
{challengeDescriptionJsx}
</DelayedLoad>
)}
{!!(voterCanEditThisPolitician || voterSupportsThisPolitician) && (
{!!(voterCanEditThisChallenge || voterSupportsThisChallenge) && (
<IndicatorRow>
{voterCanEditThisPolitician && (
{voterCanEditThisChallenge && (
<IndicatorButtonWrapper>
<EditIndicator onClick={this.onPoliticianCampaignEditClick}>
Edit Politician
<EditIndicator onClick={this.onChallengeCampaignEditClick}>
Edit Challenge
</EditIndicator>
</IndicatorButtonWrapper>
)}
{voterSupportsThisPolitician && (
{voterSupportsThisChallenge && (
<IndicatorButtonWrapper>
<EditIndicator onClick={this.onPoliticianCampaignShareClick}>
Share Politician
<EditIndicator onClick={this.onChallengeCampaignShareClick}>
Share Challenge
</EditIndicator>
</IndicatorButtonWrapper>
)}
Expand Down Expand Up @@ -653,8 +654,8 @@ class ChallengeHomePage extends Component {
<ViewBallotButtonWrapper>
<Suspense fallback={<></>}>
<JoinChallengeButton
buttonText="Join Challenge"
challengeBasePath={this.getChallengeBasePath()}
challengeSEOFriendlyPath={challengeSEOFriendlyPathForDisplay}
challengeWeVoteId={challengeWeVoteIdForDisplay}
/>
</Suspense>
</ViewBallotButtonWrapper>
Expand Down Expand Up @@ -689,11 +690,11 @@ class ChallengeHomePage extends Component {
{/* </IndicatorButtonWrapper> */}
{/* </IndicatorRow> */}
{/* )} */}
{voterCanEditThisPolitician && (
{voterCanEditThisChallenge && (
<IndicatorRow>
<IndicatorButtonWrapper>
<EditIndicator onClick={this.onPoliticianCampaignEditClick}>
Edit This Politician
<EditIndicator onClick={this.onChallengeCampaignEditClick}>
Edit This Challenge
</EditIndicator>
</IndicatorButtonWrapper>
</IndicatorRow>
Expand Down Expand Up @@ -755,7 +756,10 @@ class ChallengeHomePage extends Component {
<SupportButtonPanel>
<CenteredDiv>
<Suspense fallback={<span>&nbsp;</span>}>
<JoinChallengeButton buttonText="Join Challenge" onClickFunction={this.goToBallot} />
<JoinChallengeButton
challengeSEOFriendlyPath={challengeSEOFriendlyPathForDisplay}
challengeWeVoteId={challengeWeVoteIdForDisplay}
/>
</Suspense>
</CenteredDiv>
</SupportButtonPanel>
Expand Down Expand Up @@ -826,14 +830,14 @@ const FriendsSectionWrapper = styled('div')`
const LeaderboardSectionWrapper = styled('div')`
`;

const MissingPoliticianMessageContainer = styled('div')`
const MissingChallengeMessageContainer = styled('div')`
padding: 3em 2em;
display: flex;
flex-flow: column;
align-items: center;
`;

const MissingPoliticianText = styled('p')(({ theme }) => (`
const MissingChallengeText = styled('p')(({ theme }) => (`
font-size: 24px;
text-align: center;
margin: 1em 2em 3em;
Expand Down
2 changes: 1 addition & 1 deletion src/js/common/pages/ChallengeInviteFriends/ChallengeInviteCustomizeMessage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@ class ChallengeInviteCustomizeMessage extends Component {
}

goToNextStep = () => {
historyPush(`${this.getChallengeBasePath()}copy-message`);
historyPush(`${this.getChallengeBasePath()}invite-friends`);
}

goToChallengeHome = () => {
Expand Down
Loading
Loading