diff --git a/src/App.jsx b/src/App.jsx index b17ce63ee..de2f94143 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -413,9 +413,9 @@ class App extends Component { } /> } /> } /> - } /> } /> - } /> + } /> + } /> } /> } /> } /> diff --git a/src/js/common/components/Challenge/JoinChallengeButton.jsx b/src/js/common/components/Challenge/JoinChallengeButton.jsx index 3a9d5830d..7081a8446 100644 --- a/src/js/common/components/Challenge/JoinChallengeButton.jsx +++ b/src/js/common/components/Challenge/JoinChallengeButton.jsx @@ -5,15 +5,20 @@ 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, }; } @@ -21,12 +26,50 @@ class JoinChallengeButton extends React.Component { // 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(); @@ -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, @@ -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 ( ); } } JoinChallengeButton.propTypes = { - buttonText: PropTypes.string, - challengeBasePath: PropTypes.string, + challengeSEOFriendlyPath: PropTypes.string, + challengeWeVoteId: PropTypes.string, }; const JoinChallengeButtonWrapper = styled('div')` diff --git a/src/js/common/components/Style/ScrollingStyles.jsx b/src/js/common/components/Style/ScrollingStyles.jsx index d05571286..943c930c5 100644 --- a/src/js/common/components/Style/ScrollingStyles.jsx +++ b/src/js/common/components/Style/ScrollingStyles.jsx @@ -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 */ @@ -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));' : ''} ); @@ -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 */ diff --git a/src/js/common/pages/Challenge/ChallengeHomePage.jsx b/src/js/common/pages/Challenge/ChallengeHomePage.jsx index d93f4246b..9e0f56e70 100644 --- a/src/js/common/pages/Challenge/ChallengeHomePage.jsx +++ b/src/js/common/pages/Challenge/ChallengeHomePage.jsx @@ -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); } @@ -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; } @@ -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'); @@ -479,8 +480,8 @@ class ChallengeHomePage extends Component { - - Democracy Challenge not found. + + Democracy Challenge not found. - + ); @@ -553,7 +554,7 @@ class ChallengeHomePage extends Component { {/* Challenge Image */} }> @@ -604,19 +605,19 @@ class ChallengeHomePage extends Component { {challengeDescriptionJsx} )} - {!!(voterCanEditThisPolitician || voterSupportsThisPolitician) && ( + {!!(voterCanEditThisChallenge || voterSupportsThisChallenge) && ( - {voterCanEditThisPolitician && ( + {voterCanEditThisChallenge && ( - - Edit Politician + + Edit Challenge )} - {voterSupportsThisPolitician && ( + {voterSupportsThisChallenge && ( - - Share Politician + + Share Challenge )} @@ -653,8 +654,8 @@ class ChallengeHomePage extends Component { }> @@ -689,11 +690,11 @@ class ChallengeHomePage extends Component { {/* */} {/* */} {/* )} */} - {voterCanEditThisPolitician && ( + {voterCanEditThisChallenge && ( - - Edit This Politician + + Edit This Challenge @@ -755,7 +756,10 @@ class ChallengeHomePage extends Component {  }> - + @@ -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; diff --git a/src/js/common/pages/ChallengeInviteFriends/ChallengeInviteCustomizeMessage.jsx b/src/js/common/pages/ChallengeInviteFriends/ChallengeInviteCustomizeMessage.jsx index be1c0b4c1..88e3b763b 100644 --- a/src/js/common/pages/ChallengeInviteFriends/ChallengeInviteCustomizeMessage.jsx +++ b/src/js/common/pages/ChallengeInviteFriends/ChallengeInviteCustomizeMessage.jsx @@ -184,7 +184,7 @@ class ChallengeInviteCustomizeMessage extends Component { } goToNextStep = () => { - historyPush(`${this.getChallengeBasePath()}copy-message`); + historyPush(`${this.getChallengeBasePath()}invite-friends`); } goToChallengeHome = () => { diff --git a/src/js/common/pages/ChallengeStart/ChallengeStartEditAll.jsx b/src/js/common/pages/ChallengeStart/ChallengeStartEditAll.jsx index 1d6a9c275..ea4bc4345 100644 --- a/src/js/common/pages/ChallengeStart/ChallengeStartEditAll.jsx +++ b/src/js/common/pages/ChallengeStart/ChallengeStartEditAll.jsx @@ -163,9 +163,9 @@ class ChallengeStartEditAll extends Component { ChallengeStartActions.challengeEditAllReset(); const { challengeWeVoteId, challengeSEOFriendlyPath } = this.state; if (challengeSEOFriendlyPath) { - historyPush(`/c/${challengeSEOFriendlyPath}`); + historyPush(`/${challengeSEOFriendlyPath}/+/`); } else { - historyPush(`/id/${challengeWeVoteId}`); + historyPush(`/+/${challengeWeVoteId}`); } } else { historyPush('/start-a-challenge-preview'); @@ -207,9 +207,9 @@ class ChallengeStartEditAll extends Component { if (editExistingChallenge) { const { challengeSEOFriendlyPath } = this.state; if (challengeSEOFriendlyPath) { - historyPush(`/c/${challengeSEOFriendlyPath}`); + historyPush(`/${challengeSEOFriendlyPath}/+/`); } else { - historyPush(`/id/${challengeWeVoteId}`); + historyPush(`/+/${challengeWeVoteId}`); } } else { historyPush('/start-a-challenge-preview'); @@ -227,7 +227,11 @@ class ChallengeStartEditAll extends Component { return (
 }> - + diff --git a/src/js/stores/VoterStore.js b/src/js/stores/VoterStore.js index 2e6b3b8c4..06d878653 100644 --- a/src/js/stores/VoterStore.js +++ b/src/js/stores/VoterStore.js @@ -1253,7 +1253,7 @@ class VoterStore extends ReduceStore { }, }; - case 'voterUpdate': + case 'voterUpdate': // Formerly voterDeleteAccount if (action.res.success && action.res.voter_deleted) { revisedState = state; revisedState = { ...revisedState, diff --git a/src/js/utils/applicationUtils.js b/src/js/utils/applicationUtils.js index 31984595b..0a82a8285 100644 --- a/src/js/utils/applicationUtils.js +++ b/src/js/utils/applicationUtils.js @@ -221,7 +221,7 @@ export function getApplicationViewBooleans (pathname) { pathnameLowerCase.startsWith('/value/') || stringContains('/b/btdo', pathnameLowerCase) || stringContains('/btcand/', pathnameLowerCase) || - stringContains('/+/copy-message', pathnameLowerCase) || + stringContains('/+/invite-friends', pathnameLowerCase) || stringContains('/+/customize-message', pathnameLowerCase) || stringContains('/+/join-challenge', pathnameLowerCase) || stringContains('/settings/positions', pathnameLowerCase)) {