From 4265b3522ea78e1858379ae10ccad0c509b7d215 Mon Sep 17 00:00:00 2001 From: dalemcgrew Date: Thu, 5 Sep 2024 11:00:11 -0700 Subject: [PATCH] Split out VoterPlan from VoterPlanModal. Made adjustments to PositionRowListCompressed styles. --- .../Challenge/JoinChallengeButton.jsx | 3 +- .../ChallengeSupport/ChallengeSupportJoin.jsx | 212 +++--- .../Ballot/PositionRowListCompressed.jsx | 20 +- src/js/components/Ready/VoterPlan.jsx | 654 ++++++++++++++++++ src/js/components/Ready/VoterPlanModal.jsx | 315 +-------- 5 files changed, 766 insertions(+), 438 deletions(-) create mode 100644 src/js/components/Ready/VoterPlan.jsx diff --git a/src/js/common/components/Challenge/JoinChallengeButton.jsx b/src/js/common/components/Challenge/JoinChallengeButton.jsx index fc067f931..3a9d5830d 100644 --- a/src/js/common/components/Challenge/JoinChallengeButton.jsx +++ b/src/js/common/components/Challenge/JoinChallengeButton.jsx @@ -47,9 +47,10 @@ class JoinChallengeButton extends React.Component { const { challengeBasePath } = this.props; 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 = ''; - if (!voterFirstName) { + if (!voterFirstName || itemsAreMissing) { setUpAccountEntryPath = `${challengeBasePath}join-challenge`; } else { setUpAccountEntryPath = `${challengeBasePath}customize-message`; diff --git a/src/js/common/pages/ChallengeSupport/ChallengeSupportJoin.jsx b/src/js/common/pages/ChallengeSupport/ChallengeSupportJoin.jsx index 1c5dbabc3..fdd1ec6c8 100644 --- a/src/js/common/pages/ChallengeSupport/ChallengeSupportJoin.jsx +++ b/src/js/common/pages/ChallengeSupport/ChallengeSupportJoin.jsx @@ -8,25 +8,23 @@ import styled from 'styled-components'; import VoterActions from '../../../actions/VoterActions'; import webAppConfig from '../../../config'; import VoterStore from '../../../stores/VoterStore'; -import CampaignSupporterActions from '../../actions/CampaignSupporterActions'; -import CampaignEndorsementInputField from '../../components/CampaignSupport/CampaignEndorsementInputField'; -import CampaignSupportSteps from '../../components/Navigation/CampaignSupportSteps'; +import ChallengeSupporterActions from '../../actions/ChallengeSupporterActions'; import VoterPhotoUpload from '../../components/Settings/VoterPhotoUpload'; +import VoterPlan from '../../../components/Ready/VoterPlan'; import { AdviceBox, AdviceBoxText, AdviceBoxTitle, AdviceBoxWrapper } from '../../components/Style/adviceBoxStyles'; -import { CampaignImage, CampaignProcessStepIntroductionText, CampaignProcessStepTitle } from '../../components/Style/CampaignProcessStyles'; -import { CampaignSupportDesktopButtonPanel, CampaignSupportDesktopButtonWrapper, CampaignSupportImageWrapper, CampaignSupportImageWrapperText, CampaignSupportMobileButtonPanel, CampaignSupportMobileButtonWrapper, CampaignSupportSection, CampaignSupportSectionWrapper, SkipForNowButtonPanel, SkipForNowButtonWrapper } from '../../components/Style/CampaignSupportStyles'; +import { CampaignProcessStepIntroductionText, CampaignProcessStepTitle } from '../../components/Style/CampaignProcessStyles'; +import { CampaignSupportDesktopButtonPanel, CampaignSupportDesktopButtonWrapper, CampaignSupportMobileButtonPanel, CampaignSupportMobileButtonWrapper, CampaignSupportSection, CampaignSupportSectionWrapper, SkipForNowButtonPanel, SkipForNowButtonWrapper } from '../../components/Style/CampaignSupportStyles'; import commonMuiStyles from '../../components/Style/commonMuiStyles'; import { ContentInnerWrapperDefault, ContentOuterWrapperDefault, PageWrapperDefault } from '../../components/Style/PageWrapperStyles'; import AppObservableStore, { messageService } from '../../stores/AppObservableStore'; -import CampaignStore from '../../stores/CampaignStore'; -import CampaignSupporterStore from '../../stores/CampaignSupporterStore'; -import { getCampaignXValuesFromIdentifiers, retrieveCampaignXFromIdentifiersIfNeeded } from '../../utils/campaignUtils'; +import ChallengeStore from '../../stores/ChallengeStore'; +import ChallengeSupporterStore from '../../stores/ChallengeSupporterStore'; +import { getChallengeValuesFromIdentifiers, retrieveChallengeFromIdentifiersIfNeeded } from '../../utils/challengeUtils'; import historyPush from '../../utils/historyPush'; import initializejQuery from '../../utils/initializejQuery'; import { renderLog } from '../../utils/logging'; -import politicianListToSentenceString from '../../utils/politicianListToSentenceString'; -const CampaignRetrieveController = React.lazy(() => import(/* webpackChunkName: 'CampaignRetrieveController' */ '../../components/Campaign/CampaignRetrieveController')); +const ChallengeRetrieveController = React.lazy(() => import(/* webpackChunkName: 'ChallengeRetrieveController' */ '../../components/Challenge/ChallengeRetrieveController')); const VisibleToPublicCheckbox = React.lazy(() => import(/* webpackChunkName: 'VisibleToPublicCheckbox' */ '../../components/CampaignSupport/VisibleToPublicCheckbox')); const VoterFirstRetrieveController = loadable(() => import(/* webpackChunkName: 'VoterFirstRetrieveController' */ '../../components/Settings/VoterFirstRetrieveController')); @@ -35,10 +33,10 @@ class ChallengeSupportJoin extends Component { constructor (props) { super(props); this.state = { - campaignPhotoLargeUrl: '', - campaignSEOFriendlyPath: '', - campaignTitle: '', - campaignXWeVoteId: '', + challengePhotoLargeUrl: '', + challengeSEOFriendlyPath: '', + challengeTitle: '', + challengeWeVoteId: '', chosenWebsiteName: '', linkedPoliticianWeVoteId: '', payToPromoteStepTurnedOn: true, @@ -51,54 +49,54 @@ class ChallengeSupportJoin extends Component { this.props.setShowHeaderFooter(false); this.onAppObservableStoreChange(); this.appStateSubscription = messageService.getMessage().subscribe(() => this.onAppObservableStoreChange()); - this.onCampaignStoreChange(); - this.campaignStoreListener = CampaignStore.addListener(this.onCampaignStoreChange.bind(this)); + this.onChallengeStoreChange(); + this.challengeStoreListener = ChallengeStore.addListener(this.onChallengeStoreChange.bind(this)); this.onVoterStoreChange(); this.voterStoreListener = VoterStore.addListener(this.onVoterStoreChange.bind(this)); const { match: { params } } = this.props; - const { campaignSEOFriendlyPath: campaignSEOFriendlyPathFromParams, campaignXWeVoteId: campaignXWeVoteIdFromParams } = params; - // console.log('componentDidMount campaignSEOFriendlyPathFromParams: ', campaignSEOFriendlyPathFromParams, ', campaignXWeVoteIdFromParams: ', campaignXWeVoteIdFromParams); + const { challengeSEOFriendlyPath: challengeSEOFriendlyPathFromParams, challengeWeVoteId: challengeWeVoteIdFromParams } = params; + // console.log('componentDidMount challengeSEOFriendlyPathFromParams: ', challengeSEOFriendlyPathFromParams, ', challengeWeVoteIdFromParams: ', challengeWeVoteIdFromParams); const { - campaignPhotoLargeUrl, - campaignSEOFriendlyPath, - campaignXPoliticianList, - campaignXWeVoteId, + challengePhotoLargeUrl, + challengeSEOFriendlyPath, + challengePoliticianList, + challengeWeVoteId, linkedPoliticianWeVoteId, weVoteHostedProfileImageUrlLarge, - } = getCampaignXValuesFromIdentifiers(campaignSEOFriendlyPathFromParams, campaignXWeVoteIdFromParams); + } = getChallengeValuesFromIdentifiers(challengeSEOFriendlyPathFromParams, challengeWeVoteIdFromParams); this.setState({ - campaignPhotoLargeUrl, - campaignXPoliticianList, + challengePhotoLargeUrl, + challengePoliticianList, linkedPoliticianWeVoteId, weVoteHostedProfileImageUrlLarge, }); - if (campaignSEOFriendlyPath) { + if (challengeSEOFriendlyPath) { this.setState({ - campaignSEOFriendlyPath, + challengeSEOFriendlyPath, }); - } else if (campaignSEOFriendlyPathFromParams) { + } else if (challengeSEOFriendlyPathFromParams) { this.setState({ - campaignSEOFriendlyPath: campaignSEOFriendlyPathFromParams, + challengeSEOFriendlyPath: challengeSEOFriendlyPathFromParams, }); } - if (campaignXWeVoteId) { + if (challengeWeVoteId) { this.setState({ - campaignXWeVoteId, + challengeWeVoteId, }); - } else if (campaignXWeVoteIdFromParams) { + } else if (challengeWeVoteIdFromParams) { this.setState({ - campaignXWeVoteId: campaignXWeVoteIdFromParams, + challengeWeVoteId: challengeWeVoteIdFromParams, }); } // Take the "calculated" identifiers and retrieve if missing - retrieveCampaignXFromIdentifiersIfNeeded(campaignSEOFriendlyPath, campaignXWeVoteId); + retrieveChallengeFromIdentifiersIfNeeded(challengeSEOFriendlyPath, challengeWeVoteId); window.scrollTo(0, 0); } componentWillUnmount () { this.props.setShowHeaderFooter(true); this.appStateSubscription.unsubscribe(); - this.campaignStoreListener.remove(); + this.challengeStoreListener.remove(); this.voterStoreListener.remove(); } @@ -113,42 +111,42 @@ class ChallengeSupportJoin extends Component { }); } - onCampaignStoreChange () { + onChallengeStoreChange () { const { match: { params } } = this.props; - const { campaignSEOFriendlyPath: campaignSEOFriendlyPathFromParams, campaignXWeVoteId: campaignXWeVoteIdFromParams } = params; - // console.log('onCampaignStoreChange campaignSEOFriendlyPathFromParams: ', campaignSEOFriendlyPathFromParams, ', campaignXWeVoteIdFromParams: ', campaignXWeVoteIdFromParams); + const { challengeSEOFriendlyPath: challengeSEOFriendlyPathFromParams, challengeWeVoteId: challengeWeVoteIdFromParams } = params; + // console.log('onChallengeStoreChange challengeSEOFriendlyPathFromParams: ', challengeSEOFriendlyPathFromParams, ', challengeWeVoteIdFromParams: ', challengeWeVoteIdFromParams); const { - campaignPhotoLargeUrl, - campaignSEOFriendlyPath, - campaignTitle, - campaignXPoliticianList, - campaignXWeVoteId, + challengePhotoLargeUrl, + challengeSEOFriendlyPath, + challengeTitle, + challengePoliticianList, + challengeWeVoteId, linkedPoliticianWeVoteId, weVoteHostedProfileImageUrlLarge, - } = getCampaignXValuesFromIdentifiers(campaignSEOFriendlyPathFromParams, campaignXWeVoteIdFromParams); + } = getChallengeValuesFromIdentifiers(challengeSEOFriendlyPathFromParams, challengeWeVoteIdFromParams); this.setState({ - campaignPhotoLargeUrl, - campaignTitle, - campaignXPoliticianList, + challengePhotoLargeUrl, + challengeTitle, + challengePoliticianList, linkedPoliticianWeVoteId, weVoteHostedProfileImageUrlLarge, }); - if (campaignSEOFriendlyPath) { + if (challengeSEOFriendlyPath) { this.setState({ - campaignSEOFriendlyPath, + challengeSEOFriendlyPath, }); - } else if (campaignSEOFriendlyPathFromParams) { + } else if (challengeSEOFriendlyPathFromParams) { this.setState({ - campaignSEOFriendlyPath: campaignSEOFriendlyPathFromParams, + challengeSEOFriendlyPath: challengeSEOFriendlyPathFromParams, }); } - if (campaignXWeVoteId) { + if (challengeWeVoteId) { this.setState({ - campaignXWeVoteId, + challengeWeVoteId, }); - } else if (campaignXWeVoteIdFromParams) { + } else if (challengeWeVoteIdFromParams) { this.setState({ - campaignXWeVoteId: campaignXWeVoteIdFromParams, + challengeWeVoteId: challengeWeVoteIdFromParams, }); } } @@ -160,15 +158,15 @@ class ChallengeSupportJoin extends Component { }); } - getCampaignXBasePath = () => { - const { campaignSEOFriendlyPath, campaignXWeVoteId } = this.state; - let campaignBasePath; - if (campaignSEOFriendlyPath) { - campaignBasePath = `/c/${campaignSEOFriendlyPath}/`; + getChallengeBasePath = () => { + const { challengeSEOFriendlyPath, challengeWeVoteId } = this.state; + let challengeBasePath; + if (challengeSEOFriendlyPath) { + challengeBasePath = `/c/${challengeSEOFriendlyPath}/`; } else { - campaignBasePath = `/id/${campaignXWeVoteId}/`; + challengeBasePath = `/id/${challengeWeVoteId}/`; } - return campaignBasePath; + return challengeBasePath; } getPoliticianBasePath = () => { @@ -179,8 +177,8 @@ class ChallengeSupportJoin extends Component { } else if (linkedPoliticianWeVoteId) { politicianBasePath = `/${linkedPoliticianWeVoteId}/p/`; } else { - // console.log('CampaignRecommendedCampaigns getPoliticianBasePath, failed to get politicianBasePath'); - politicianBasePath = this.getCampaignXBasePath(); + // console.log('ChallengeRecommendedChallenges getPoliticianBasePath, failed to get politicianBasePath'); + politicianBasePath = this.getChallengeBasePath(); } return politicianBasePath; } @@ -188,36 +186,36 @@ class ChallengeSupportJoin extends Component { goToNextStep = () => { const { payToPromoteStepTurnedOn } = this.state; if (payToPromoteStepTurnedOn) { - historyPush(`${this.getCampaignXBasePath()}pay-to-promote`); + historyPush(`${this.getChallengeBasePath()}pay-to-promote`); } else { - historyPush(`${this.getCampaignXBasePath()}share-campaign`); + historyPush(`${this.getChallengeBasePath()}share-challenge`); } } submitSkipForNow = () => { initializejQuery(() => { - CampaignSupporterActions.supporterEndorsementQueuedToSave(undefined); + ChallengeSupporterActions.supporterEndorsementQueuedToSave(undefined); }); this.goToNextStep(); } submitSupporterEndorsement = () => { - const { campaignXWeVoteId } = this.state; - if (campaignXWeVoteId) { - const supporterEndorsementQueuedToSave = CampaignSupporterStore.getSupporterEndorsementQueuedToSave(); - const supporterEndorsementQueuedToSaveSet = CampaignSupporterStore.getSupporterEndorsementQueuedToSaveSet(); - let visibleToPublic = CampaignSupporterStore.getVisibleToPublic(); - const visibleToPublicChanged = CampaignSupporterStore.getVisibleToPublicQueuedToSaveSet(); + const { challengeWeVoteId } = this.state; + if (challengeWeVoteId) { + const supporterEndorsementQueuedToSave = ChallengeSupporterStore.getSupporterEndorsementQueuedToSave(); + const supporterEndorsementQueuedToSaveSet = ChallengeSupporterStore.getSupporterEndorsementQueuedToSaveSet(); + let visibleToPublic = ChallengeSupporterStore.getVisibleToPublic(); + const visibleToPublicChanged = ChallengeSupporterStore.getVisibleToPublicQueuedToSaveSet(); if (visibleToPublicChanged) { // If it has changed, use new value - visibleToPublic = CampaignSupporterStore.getVisibleToPublicQueuedToSave(); + visibleToPublic = ChallengeSupporterStore.getVisibleToPublicQueuedToSave(); } if (supporterEndorsementQueuedToSaveSet || visibleToPublicChanged) { // console.log('ChallengeSupportJoin, supporterEndorsementQueuedToSave:', supporterEndorsementQueuedToSave); const saveVisibleToPublic = true; initializejQuery(() => { - CampaignSupporterActions.supporterEndorsementSave(campaignXWeVoteId, supporterEndorsementQueuedToSave, visibleToPublic, saveVisibleToPublic); // campaignSupporterSave - CampaignSupporterActions.supporterEndorsementQueuedToSave(undefined); + ChallengeSupporterActions.supporterEndorsementSave(challengeWeVoteId, supporterEndorsementQueuedToSave, visibleToPublic, saveVisibleToPublic); // challengeSupporterSave + ChallengeSupporterActions.supporterEndorsementQueuedToSave(undefined); }); } const voterPhotoQueuedToSave = VoterStore.getVoterPhotoQueuedToSave(); @@ -236,16 +234,11 @@ class ChallengeSupportJoin extends Component { renderLog('ChallengeSupportJoin'); // Set LOG_RENDER_EVENTS to log all renders const { classes } = this.props; const { - campaignPhotoLargeUrl, campaignSEOFriendlyPath, campaignTitle, - campaignXPoliticianList, campaignXWeVoteId, chosenWebsiteName, - voterPhotoUrlLarge, weVoteHostedProfileImageUrlLarge, + challengeSEOFriendlyPath, challengeTitle, + challengeWeVoteId, chosenWebsiteName, + voterPhotoUrlLarge, } = this.state; - const htmlTitle = `Why do you support ${campaignTitle}? - ${chosenWebsiteName}`; - let numberOfPoliticians = 0; - if (campaignXPoliticianList && campaignXPoliticianList.length) { - numberOfPoliticians = campaignXPoliticianList.length; - } - const politicianListSentenceString = politicianListToSentenceString(campaignXPoliticianList); + const htmlTitle = `Why do you support ${challengeTitle}? - ${chosenWebsiteName}`; return (
@@ -255,50 +248,33 @@ class ChallengeSupportJoin extends Component { - - - {(campaignPhotoLargeUrl || weVoteHostedProfileImageUrlLarge) ? ( - <> - {campaignPhotoLargeUrl ? ( - - ) : ( - - )} - - ) : ( - - {campaignTitle} - - )} - + */} - Why do you support - {' '} - {numberOfPoliticians > 1 ? ( - <>these candidates? - ) : ( - <>this candidate? - )} + To join this challenge, share how you will vote — then ask your friends to join. + {/* - People are more likely to support this campaign if it’s clear why you care. Explain how + People are more likely to support this challenge if it’s clear why you care. Explain how {' '} {politicianListSentenceString} {' '} winning will impact you, your family, or your community. + */} - + { !voterPhotoUrlLarge && }  }> - + @@ -310,7 +286,7 @@ class ChallengeSupportJoin extends Component { onClick={this.submitSupporterEndorsement} variant="contained" > - Save and continue + Join Challenge now @@ -323,7 +299,7 @@ class ChallengeSupportJoin extends Component { onClick={this.submitSupporterEndorsement} variant="contained" > - Save and continue + Join Challenge now @@ -351,7 +327,7 @@ class ChallengeSupportJoin extends Component { Make it personal - Voters are more likely to sign and support this campaign if it’s clear why you care. + Voters are more likely to sign and support this challenge if it’s clear why you care.   @@ -364,6 +340,7 @@ class ChallengeSupportJoin extends Component { + {/* + )} + /> + + + +
+ + ) : ( + . + )} + + + {voterPlanText} + + + {nextReleaseFeaturesEnabled && ( + + How will I remember to do this? + + + )} + label="I added this to my calendar." + /> + + + + )} + label="Please text me a reminder at:" + /> + {/* */} + + + + + + {/* */} + + )} + label="Please email me a reminder at:" + /> + {/* */} + + + + + + )} + + ); + } +} +VoterPlan.propTypes = { + classes: PropTypes.object, + toggleFunction: PropTypes.func.isRequired, +}; + +const styles = (theme) => ({ + dialogPaper: { + marginTop: hasIPhoneNotch() ? 68 : 48, + '@media (min-width: 576px)': { + maxWidth: '600px', + width: '90%', + height: 'fit-content', + margin: '0 auto', + minWidth: 0, + minHeight: 0, + transitionDuration: '.25s', + }, + minWidth: '100%', + maxWidth: '100%', + width: '100%', + minHeight: hasIPhoneNotch() ? '84%' : '90%', + maxHeight: hasIPhoneNotch() ? '84%' : '90%', + height: hasIPhoneNotch() ? '84%' : '90%', + margin: '0 auto', + }, + dialogContent: { + padding: '0 24px 26px', + background: '#f7f7f7', + display: 'flex', + justifyContent: 'center', + }, + closeButton: { + marginLeft: 'auto', + }, + closeButtonAbsolute: { + position: 'absolute', + right: 14, + top: 14, + }, + selectDefault: { + position: 'relative', + background: '#e8e8e8 !important', + border: 'none', + borderBottom: '1px solid rgba(0, 0, 0, 0.5)', + color: '#2E3C5D', + fontSize: 16, + fontWeight: 'bold', + padding: '0 0 0 0', + marginLeft: '0px', + width: 'fit-content !important', + // padding: '10px 26px 10px 12px', + // Use the system font instead of the default Roboto font. + fontFamily: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + ].join(','), + '&:focus': { + background: '#00000030 !important', + }, + }, + selectInput: { + paddingBottom: '1px', + paddingLeft: '6px', + }, + paperInputForm: { + padding: '0 0 0 .7rem', + display: 'flex', + alignItems: 'center', + width: '100%', + boxShadow: 'none', + border: '2px solid #e8e8e8', + }, + saveButton: { + height: 'fit-content', + marginLeft: 8, + margin: 0, + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + }, + inputBase: { + flex: 1, + [theme.breakpoints.up('sm')]: { + width: 210, + }, + [theme.breakpoints.up('md')]: { + width: 250, + }, + }, + formControlLabel: { + marginBottom: 4, + marginTop: 10, + }, +}); + +const AddToMyCalendarWrapper = styled('div')` +`; + +const CreatePlanWrapper = styled('div')` + line-height: 2; +`; + +const HowWillIRememberWrapper = styled('div')` +`; + +const EmailReminderWrapper = styled('div')` +`; + +const TextReminderWrapper = styled('div')` +`; + +const VoterPlanWrapper = styled('div')` +`; + +const VoterPlanPreview = styled('div')` + padding: 8px; + background: #e8e8e8; + font-size: 16px; + border-radius: 5px; + margin-top: 32px; +`; + +const Bold = styled('h3')` + font-weight: bold; + font-size: 18px; +`; + +const InternalFormWrapper = styled('div')` + display: flex; + justify-content: center; + margin-top: 4px; +`; + +export default withTheme(withStyles(styles)(VoterPlan)); diff --git a/src/js/components/Ready/VoterPlanModal.jsx b/src/js/components/Ready/VoterPlanModal.jsx index ef4f22896..0e533d0ec 100644 --- a/src/js/components/Ready/VoterPlanModal.jsx +++ b/src/js/components/Ready/VoterPlanModal.jsx @@ -1,23 +1,20 @@ -import { Close, EditLocation } from '@mui/icons-material'; -import { Button, Checkbox, Dialog, DialogContent, FormControlLabel, IconButton, InputBase, Paper, Select } from '@mui/material'; +import { Close } from '@mui/icons-material'; +import { Button, Dialog, DialogContent, IconButton } from '@mui/material'; import withStyles from '@mui/styles/withStyles'; import withTheme from '@mui/styles/withTheme'; import PropTypes from 'prop-types'; -import React, { Component, Suspense } from 'react'; +import React, { Component } from 'react'; import styled from 'styled-components'; +import VoterPlan from './VoterPlan'; import AnalyticsActions from '../../actions/AnalyticsActions'; import ReadyActions from '../../actions/ReadyActions'; import { hasIPhoneNotch } from '../../common/utils/cordovaUtils'; import { formatDateToMonthDayYear } from '../../common/utils/dateFormat'; import { renderLog } from '../../common/utils/logging'; -import webAppConfig from '../../config'; import BallotStore from '../../stores/BallotStore'; import ReadyStore from '../../stores/ReadyStore'; import VoterStore from '../../stores/VoterStore'; -const OpenExternalWebSite = React.lazy(() => import(/* webpackChunkName: 'OpenExternalWebSite' */ '../../common/components/Widgets/OpenExternalWebSite')); -const nextReleaseFeaturesEnabled = webAppConfig.ENABLE_NEXT_RELEASE_FEATURES === undefined ? false : webAppConfig.ENABLE_NEXT_RELEASE_FEATURES; - class VoterPlanModal extends Component { constructor (props) { super(props); @@ -43,11 +40,6 @@ class VoterPlanModal extends Component { }; this.closeVoterPlanModal = this.closeVoterPlanModal.bind(this); - this.handleVotingRoughDateChange = this.handleVotingRoughDateChange.bind(this); - this.handleVotingRoughDateClick = this.handleVotingRoughDateClick.bind(this); - this.handleApproximateTimeChange = this.handleApproximateTimeChange.bind(this); - this.handleModeOfTransportChange = this.handleModeOfTransportChange.bind(this); - this.handleLocationToDeliverBallotChange = this.handleLocationToDeliverBallotChange.bind(this); } componentDidMount () { @@ -131,32 +123,6 @@ class VoterPlanModal extends Component { this.readyStoreListener.remove(); } - - handleVotingLocationAddressChange = (event) => { - this.setState({ votingLocationAddress: event.target.value }); - }; - - handleLocationToDeliverBallotChange (event) { - this.setState({ locationToDeliverBallot: event.target.value }); - } - - handleModeOfTransportChange (event) { - this.setState({ modeOfTransport: event.target.value }); - } - - handleApproximateTimeChange (event) { - this.setState({ approximateTime: event.target.value }); - } - - handleVotingRoughDateChange (event) { - this.setState({ votingRoughDate: event.target.value }); - } - - handleVotingRoughDateClick (event) { - console.log(event.target.value); - this.setState({ votingRoughDate: event.target.value }); - } - onBallotStoreChange () { const ballotElectionDate = BallotStore.currentBallotElectionDate; if (ballotElectionDate) { @@ -270,13 +236,9 @@ class VoterPlanModal extends Component { const { classes } = this.props; const { location: { pathname } } = window; const { - approximateTime, electionDateMonthYear, locationToDeliverBallot, modeOfTransport, - savedVoterPlanFound, voterPlanChangedLocally, votingLocationAddress, votingRoughDate, + savedVoterPlanFound, voterPlanChangedLocally, } = this.state; - const getPollingLocationUrl = 'https://gttp.votinginfoproject.org/'; - const voterPlanText = this.generateVoterPlanText(); const showSaveButton = voterPlanChangedLocally || !savedVoterPlanFound; - const pigsCanFly = false; return ( -
- - {(electionDateMonthYear) && ( - - My upcoming election day is - {' '} - {electionDateMonthYear} - . - {' '} - - )} - - {' '} - around - {' '} - - {' '} - I will - {' '} - {' '} - - {' '} - with my ballot to my - {' '} - {' '} - - {(pigsCanFly && ((locationToDeliverBallot === 'polling place') || (locationToDeliverBallot === 'voting center'))) ? ( - - {' '} - at: - {' '} -
- - - - - }> - -
- Find -
-
- {(locationToDeliverBallot === 'polling place') && 'Find Polling Location'} - {(locationToDeliverBallot === 'voting center') && 'Find Voting Center'} -
- - )} - /> - - - -
- - ) : ( - . - )} - - - {voterPlanText} - - - {nextReleaseFeaturesEnabled && ( - - How will I remember to do this? - - - )} - label="I added this to my calendar." - /> - - - - )} - label="Please text me a reminder at:" - /> - {/* */} - - - - - - {/* */} - - )} - label="Please email me a reminder at:" - /> - {/* */} - - - - - - )} -
+