constructor (props) {

super(props);

this.state = {

hideHeader: false,

hideFooter: false,

showReadyLight: true,

enableFullStory: false,

};

this.setShowHeader = this.setShowHeader.bind(this);

this.setShowFooter = this.setShowFooter.bind(this);

this.setShowHeaderFooter = this.setShowHeaderFooter.bind(this); // Look more closely at this

this.setShowReadyHeavy = this.setShowReadyHeavy.bind(this);

this.bypass2FA = this.bypass2FA.bind(this);

this.localIsCordova();

}

// See https://reactjs.org/docs/error-boundaries.html

static getDerivedStateFromError (error) { // eslint-disable-line no-unused-vars

// Update state so the next render will show the fallback UI, We should have an "Oh snap" page

console.log('App caught error ', error);

return { hasError: true };

}

componentDidMount () {

this.appStateSubscription = messageService.getMessage().subscribe(() => this.onAppObservableStoreChange());

this.voterStoreListener = VoterStore.addListener(this.onVoterStoreChange.bind(this));

let { hostname } = window.location;

hostname = hostname || '';

initializejQuery(() => {

AppObservableStore.siteConfigurationRetrieve(hostname);

});

// console.log('href in App.js componentDidMount: ', window.location.href);

// console.log('normalizedHrefPage in App.js componentDidMount: ', normalizedHref());

const onWeVoteUS = (hostname && (hostname.toLowerCase() === 'wevote.us'));

const onMobileApp = false;

if ((onWeVoteUS || onMobileApp) && isWebApp()) {

if (webAppConfig.FULL_STORY_ORG) {

setTimeout(() => {

console.log('FullStory ENABLED');

this.setState({ enableFullStory: true });

}, 3000);

}

}

if (isAndroid()) { // December 12, 2023: All sorts of problems with sign-in with Facebook on Android, so disabling it here

webAppConfig.ENABLE_FACEBOOK = false; // This overrides the config setting for the entire Android app

}

if (webAppConfig.ENABLE_FACEBOOK) {

setTimeout(() => {

// Suspect that this isn't correct anymore: "We need to start this initialization early since there is a delay getting the FB object in place"

initializeFacebookSDK();

}, 2000);

}

if (!webAppConfig.ENABLE_TWITTER) {

webAppConfig.ENABLE_TWITTER = false; // Avoid crashes in Feb/March 2024 in case not in config.js

}

if (isCordova()) {

const size = isIOS() ? getIOSSizeString() : getAndroidSize();

console.log('Cordova: device model', window.device.model, ' size: ', size);

console.log('Cordova: Header, hasDynamicIsland', hasDynamicIsland());

}

this.bypass2FA();

}

componentDidUpdate (prevProps) {

if (prevProps.location.search !== this.props.location.search) {

this.bypass2FA();

}

}

componentDidCatch (error, info) {

// We should get this information to Amazon Cloud Watch

console.error('App caught error: ', `${error} with info: `, info);

}

componentWillUnmount () {

this.appStateSubscription.unsubscribe();

this.voterStoreListener.remove();

// removeCordovaListenersToken -- Do not remove this line!

}

onAppObservableStoreChange () {

if (!AppObservableStore.getGoogleAnalyticsEnabled() && !AppObservableStore.getGoogleAnalyticsPending()) {

AppObservableStore.setGoogleAnalyticsPending(true);

setTimeout(() => {

const chosenTrackingId = AppObservableStore.getChosenGoogleAnalyticsTrackingID();

const weVoteTrackingId = webAppConfig.GOOGLE_ANALYTICS_TRACKING_ID === undefined ? '' : webAppConfig.GOOGLE_ANALYTICS_TRACKING_ID;

if (chosenTrackingId && weVoteTrackingId) {

console.log('Google Analytics (2) ENABLED');

ReactGA.initialize([

{

trackingId: chosenTrackingId,

},

{

trackingId: weVoteTrackingId,

},

]);

} else if (chosenTrackingId) {

console.log('Google Analytics Chosen ENABLED');

ReactGA.initialize(chosenTrackingId);

AppObservableStore.setGoogleAnalyticsEnabled(true);

AppObservableStore.setGoogleAnalyticsPending(false);

} else if (weVoteTrackingId) {

console.log('Google Analytics ENABLED');

ReactGA.initialize(weVoteTrackingId);

AppObservableStore.setGoogleAnalyticsEnabled(true);

AppObservableStore.setGoogleAnalyticsPending(false);

} else {

console.log('Google Analytics did not receive a trackingID, NOT ENABLED');

}

const voterWeVoteId = VoterStore.getVoterWeVoteId();

ReactGA.gtag('set', 'voter', {

weVoteId: voterWeVoteId,

});

const weVoteGTMId = webAppConfig.GOOGLE_ADS_TRACKING_ID === undefined ? '' : webAppConfig.GOOGLE_ADS_TRACKING_ID;

if (weVoteGTMId) {

const tagManagerArgs = {

gtmId: weVoteGTMId,

};

TagManager.initialize(tagManagerArgs);

}

}, 3000);

}

if (!AppObservableStore.getOpenReplayEnabled() && !AppObservableStore.getOpenReplayPending()) {

AppObservableStore.setOpenReplayPending(true);

setTimeout(() => {

// const chosenProjectKey = AppObservableStore.getChosenOpenReplayTrackingID();

const weVoteOpenReplayProjectKey = webAppConfig.OPEN_REPLAY_PROJECT_KEY;

const weVoteOpenReplayIngestPoint = webAppConfig.OPEN_REPLAY_INGEST_POINT;

// const openReplayProjectKey = chosenProjectKey || weVoteOpenReplayProjectKey;

const openReplayProjectKey = weVoteOpenReplayProjectKey || '';

const openReplayIngestPoint = weVoteOpenReplayIngestPoint || false;

let tracker;

if (openReplayProjectKey) {

console.log('OpenReplay ENABLED');

if (openReplayIngestPoint) {

tracker = new OpenReplay({

projectKey: openReplayProjectKey,

ingestPoint: openReplayIngestPoint,

resourceBaseHref: 'https://wevote.us/',

});

} else {

tracker = new OpenReplay({

projectKey: openReplayProjectKey,

resourceBaseHref: 'https://wevote.us/',

});

}

const voterWeVoteId = VoterStore.getVoterWeVoteId();

tracker.start({

userID: voterWeVoteId,

});

AppObservableStore.setOpenReplayTracker(tracker);

AppObservableStore.setOpenReplayEnabled(true);

AppObservableStore.setOpenReplayPending(false);

if (voterWeVoteId) {

AppObservableStore.setOpenReplayVoterWeVoteId(voterWeVoteId);

}

} else {

console.log('OpenReplay did not receive a projectKey, NOT ENABLED');

}

}, 3000);

}

}

onVoterStoreChange () {

historyPush(this.props.location.pathname);

}

setShowHeader (doShowHeader) {

this.setState({ hideHeader: !doShowHeader });

}

setShowFooter (doShowFooter) {

this.setState({ hideFooter: !doShowFooter });

}

setShowHeaderFooter (doShow) {

// console.log('setShowHeaderFooter -------------- doShow:', doShow);

this.setState({

hideHeader: !doShow,

hideFooter: !doShow,

});

}

setShowReadyHeavy () {

this.setState({ showReadyLight: false });

}

bypass2FA () {

const queryString = this.props.location.search;

const query = new URLSearchParams(queryString);

const cid = query.get('cid');

const voterDeviceId = VoterStore.voterDeviceId();

if (cid && cid !== voterDeviceId) {

VoterSessionActions.setVoterDeviceIdCookie(cid);

VoterActions.voterRetrieve();

}

}

localIsCordova () {

const { cordova } = window;

window.isCordovaGlobal = cordova !== undefined; // So now we set a global

return cordova !== undefined;

}

render () {

renderLog('App');

const { hideHeader, showReadyLight, enableFullStory } = this.state;

const isNotWeVoteMarketingSite = !isWeVoteMarketingSite();

// const firstVisit = !cookies.getItem('voter_device_id');

const loadingPageHtml = (

<div id="loading-screen">

<div style={{ display: 'flex', position: 'fixed', height: '100vh', width: '100vw', top: 0, left: 0, backgroundColor: '#fff', justifyContent: 'center', alignItems: 'center', fontSize: '20px', color: '#2E3C5D', flexDirection: 'column', fontFamily: '\'Source Sans Pro\', sans-serif', textAlign: 'center' }}>

<h1 style={{ fontFamily: '\'Source Sans Pro\', sans-serif', fontSize: '32px', fontWeight: 'normal', color: '#2E3C5D' }}>Loading your ballot...</h1>

<div style={{ margin: '0 15px', textAlign: 'center' }}>Thank you for being a voter!</div>

</div>

</div>

);

if (isWebApp()) {

// console.log('WebApp: href in App.js render: ', window.location.href);

} else {

console.log('Cordova: href hash in App.js render: ', window.location.hash);

}

/*

if (window.location.href.endsWith('/storybook')) {

const destinationHref = `${window.location.href}-static/index.html?path=/docs/design-system--docs`;

console.log('Storybook redirect from: ', window.location.href, ' to: ', destinationHref);

window.location.href = destinationHref;

}

return (

<>

{enableFullStory && <FullStory org={webAppConfig.FULL_STORY_ORG} />}

<StyledEngineProvider injectFirst>

<ThemeProvider theme={muiTheme}>

{/* March 2022: We used to have two themeproviders here, one for material-ui, and one for styled-components, but the two are combined in V5 MUI */}

<WeVoteBody>

{/* DO NOT put SnackNotifier or anything else that is non-essential here (to keep it out of the main chunk). */}

<Suspense fallback={<HeaderBarSuspense />}>

<Header hideHeader={hideHeader} params={{ }} pathname={normalizedHref()} />

</Suspense>

<Suspense fallback={<LoadingWheelComp />}>

<Switch>

<Route path="/" exact>

{() => {

if (showReadyLight) {

return <ReadyLight showReadyHeavy={this.setShowReadyHeavy} />;

} else {

return <Route render={() => <Redirect to="/ready" />} />;

}

}}

</Route>

<Route path="/-/:custom_link_string" exact component={SharedItemLanding} />

<Route path="/-:shared_item_code/modal/share" exact component={SharedItemLanding} />

<Route path="/-:shared_item_code" exact component={SharedItemLanding} />

<Route exact path="/+/:challengeWeVoteId/" render={(props) => <ChallengeHomePage match={props.match} />} />

<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/+/customize-message" render={(props) => <ChallengeInviteCustomizeMessage 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} />} />

<Route exact path="/:campaignSEOFriendlyPath/-/share-campaign-with-one-friend" render={(props) => <CampaignSupportShare match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} showShareCampaignWithOneFriend />} />

<Route path="/about" exact><About /></Route>

<Route path="/add-candidate-for-extension" component={AddCandidateForExtension} />

<Route path="/applesigninprocess" component={AppleSignInProcess} />

<Route path="/ballot" exact component={Ballot} />

<Route path="/ballot/election/:google_civic_election_id" exact component={Ballot} />

<Route path="/ballot/election/:google_civic_election_id/modal/:modal_to_show" exact component={Ballot} />

<Route path="/ballot/election/:google_civic_election_id/modal/:modal_to_show/:shared_item_code" component={Ballot} />

<Route path="/ballot/id/:ballot_returned_we_vote_id" exact component={Ballot} />

<Route path="/ballot/id/:ballot_returned_we_vote_id/modal/:modal_to_show" exact component={Ballot} />

<Route path="/ballot/id/:ballot_returned_we_vote_id/modal/:modal_to_show/:shared_item_code" component={Ballot} />

<Route path="/ballot/modal/:modal_to_show/:shared_item_code" component={Ballot} />

<Route path="/ballot/modal/:modal_to_show" exact component={Ballot} />

<Route path="/ballot/vote" component={Vote} />

<Route path="/ballot?voter_refresh_timer_on=:voter_refresh_timer_on" component={Ballot} />

<Route path="/ballot/:ballot_location_shortcut/modal/:modal_to_show/:shared_item_code" component={Ballot} />

<Route path="/ballot/:ballot_location_shortcut/modal/:modal_to_show" exact component={Ballot} />

<Route path="/ballot/:ballot_location_shortcut" exact component={Ballot} />

<Route exact path="/c/:campaignSEOFriendlyPath" render={(props) => <CampaignDetailsPage match={props.match} />} />

<Route exact path="/c/:campaignSEOFriendlyPath/comments" render={(props) => <CampaignCommentsPage match={props.match} />} />

<Route exact path="/c/:campaignSEOFriendlyPath/i-will-share-campaign" render={(props) => <CampaignSupportShare match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} iWillShare />} />

<Route exact path="/c/:campaignSEOFriendlyPath/complete-your-profile-for-news-item" render={(props) => <CompleteYourProfileMobile match={props.match} createNewsItem setShowHeaderFooter={this.setShowHeaderFooter} />} />

<Route exact path="/c/:campaignSEOFriendlyPath/complete-your-support-for-this-campaign" render={(props) => <CompleteYourProfileMobile match={props.match} supportCampaign setShowHeaderFooter={this.setShowHeaderFooter} />} />

<Route exact path="/c/:campaignSEOFriendlyPath/pay-to-promote" render={(props) => <CampaignSupportPayToPromote match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} />} />

<Route exact path="/c/:campaignSEOFriendlyPath/pay-to-promote-process" render={(props) => <CampaignSupportPayToPromoteProcess match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} />} />

<Route exact path="/c/:campaignSEOFriendlyPath/recommended-campaigns" render={(props) => <CampaignRecommendedCampaigns match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} />} />

<Route exact path="/c/:campaignSEOFriendlyPath/share-campaign" render={(props) => <CampaignSupportShare match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} />} />

<Route exact path="/c/:campaignSEOFriendlyPath/share-campaign-with-one-friend" render={(props) => <CampaignSupportShare match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} showShareCampaignWithOneFriend />} />

<Route exact path="/c/:campaignSEOFriendlyPath/super-sharing-add-email-contacts" render={(props) => <SuperSharingAddContacts email match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} />} />

<Route exact path="/c/:campaignSEOFriendlyPath/super-sharing-add-sms-contacts" render={(props) => <SuperSharingAddContacts sms match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} />} />

<Route exact path="/c/:campaignSEOFriendlyPath/super-sharing-campaign-email" render={(props) => <SuperSharingIntro email match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} />} />

<Route exact path="/c/:campaignSEOFriendlyPath/super-sharing-campaign-sms" render={(props) => <SuperSharingIntro match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} sms />} />

<Route exact path="/c/:campaignSEOFriendlyPath/super-sharing-choose-email-recipients" render={(props) => <SuperSharingChooseRecipients match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} />} />

<Route exact path="/c/:campaignSEOFriendlyPath/super-sharing-compose-email" render={(props) => <SuperSharingComposeEmailMessage match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} />} />

<Route exact path="/c/:campaignSEOFriendlyPath/super-sharing-send-email" render={(props) => <SuperSharingSendEmail match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} />} />

<Route exact path="/c/:campaignSEOFriendlyPath/u/:campaignXNewsItemWeVoteId" render={(props) => <CampaignNewsItemDetailsPage match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} />} />

<Route exact path="/c/:campaignSEOFriendlyPath/u-preview/:campaignXNewsItemWeVoteId" render={(props) => <CampaignNewsItemDetailsPage inPreviewMode match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} />} />

<Route exact path="/c/:campaignSEOFriendlyPath/updates" render={(props) => <CampaignUpdatesPage match={props.match} />} />

<Route exact path="/c/:campaignSEOFriendlyPath/why-do-you-support" render={(props) => <CampaignSupportEndorsement match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} />} />

<Route path="/:state_candidates_phrase/cs/"

exact

render={(props) => (

<Suspense fallback={<>{loadingPageHtml}</>}>

<CampaignsHomeLoader match={props.match} />

</Suspense>

)}

/>

<Route path="/cs/" exact component={CampaignsHomeLoader} />

<Route path="/candidatelist/" exact component={CampaignsHomeLoader} />

<Route path="/candidate-for-extension" component={CandidateForExtension} />

<Route path="/candidate/:candidate_we_vote_id/b/:back_to_variable/modal/:modal_to_show" exact component={Candidate} />

<Route path="/candidate/:candidate_we_vote_id/b/:back_to_variable/modal/:modal_to_show/:shared_item_code" exact component={Candidate} />

<Route path="/candidate/:candidate_we_vote_id/b/:back_to_variable" exact component={Candidate} />

<Route path="/candidate/:candidate_we_vote_id/b/:back_to_variable/" exact component={Candidate} />

<Route path="/candidate/:candidate_we_vote_id/modal/:modal_to_show/:shared_item_code" component={Candidate} />

<Route path="/candidate/:candidate_we_vote_id/modal/:modal_to_show" exact component={Candidate} />

<Route path="/candidate/:candidate_we_vote_id/:back_to_variable/:organization_we_vote_id" exact component={OrganizationVoterGuideCandidate} />

<Route path="/candidate/:candidate_we_vote_id/:organization_we_vote_id" exact component={OrganizationVoterGuideCandidate} />

<Route path="/candidate/:candidate_we_vote_id" exact component={Candidate} />

<Route path="/challenges/" exact component={ChallengesHomeLoader} />

<Route path="/donate" component={(isNotWeVoteMarketingSite || this.localIsCordova()) ? ReadyRedirect : Donate} />

<Route path="/facebook_invitable_friends" component={FacebookInvitableFriends} />

<Route path="/findfriends/:set_up_page" exact component={FindFriendsRoot} />

<Route path="/findfriends" exact><FindFriendsRoot /></Route>

<Route path="/friends" exact component={Friends} />

<Route path="/friends/:tabItem" exact component={Friends} />

<Route path="/for-campaigns" component={isNotWeVoteMarketingSite ? ReadyRedirect : (props) => <WelcomeForCampaigns {...props} pathname="/for-campaigns" />} />

<Route path="/for-organizations" component={isNotWeVoteMarketingSite ? ReadyRedirect : (props) => <WelcomeForOrganizations {...props} pathname="/for-organizations" />} />

<Route path="/how/:category_string" component={isNotWeVoteMarketingSite ? ReadyRedirect : HowItWorks} />

<Route path="/how" exact component={isNotWeVoteMarketingSite ? ReadyRedirect : HowItWorks} />

<Route exact path="/id/:campaignXWeVoteId" render={(props) => <CampaignDetailsPage match={props.match} />} />

<Route exact path="/id/:campaignXWeVoteId/comments" render={(props) => <CampaignCommentsPage match={props.match} />} />

<Route exact path="/id/:campaignXWeVoteId/i-will-share-campaign" render={(props) => <CampaignSupportShare match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} iWillShare />} />

<Route exact path="/id/:campaignXWeVoteId/complete-your-profile-for-news-item" render={(props) => <CompleteYourProfileMobile match={props.match} createNewsItem setShowHeaderFooter={this.setShowHeaderFooter} />} />

<Route exact path="/id/:campaignXWeVoteId/complete-your-support-for-this-campaign" render={(props) => <CompleteYourProfileMobile match={props.match} supportCampaign setShowHeaderFooter={this.setShowHeaderFooter} />} />

<Route exact path="/id/:campaignXWeVoteId/pay-to-promote" render={(props) => <CampaignSupportPayToPromote match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} />} />

<Route exact path="/id/:campaignXWeVoteId/pay-to-promote-process" render={(props) => <CampaignSupportPayToPromoteProcess match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} />} />

<Route exact path="/id/:campaignXWeVoteId/recommended-campaigns" render={(props) => <CampaignRecommendedCampaigns match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} />} />

<Route exact path="/id/:campaignXWeVoteId/share-campaign" render={(props) => <CampaignSupportShare match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} />} />

<Route exact path="/id/:campaignXWeVoteId/share-campaign-with-one-friend" render={(props) => <CampaignSupportShare match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} showShareCampaignWithOneFriend />} />

<Route exact path="/id/:campaignXWeVoteId/u/:campaignXNewsItemWeVoteId" render={(props) => <CampaignNewsItemDetailsPage match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} />} />

<Route exact path="/id/:campaignXWeVoteId/u-preview/:campaignXNewsItemWeVoteId" render={(props) => <CampaignNewsItemDetailsPage inPreviewMode match={props.match} setShowHeaderFooter={this.setShowHeaderFooter} />} />

<Route exact path="/id/:campaignXWeVoteId/updates" render={(props) => <CampaignUpdatesPage match={props.match} />} />