Merge remote-tracking branch 'upstream/develop' into develop

src/App.jsx

@@ -20,7 +20,6 @@ import { isCordova, isWebApp } from './js/common/utils/isCordovaOrWebApp';
 import { renderLog } from './js/common/utils/logging';
 import Header from './js/components/Navigation/Header';
 import HeaderBarSuspense from './js/components/Navigation/HeaderBarSuspense';
-import StorybookRedirect from './js/components/Widgets/StorybookRedirect';
 import webAppConfig from './js/config';
 import VoterStore from './js/stores/VoterStore';
 import initializeFacebookSDK from './js/utils/initializeFacebookSDK';
@@ -363,6 +362,12 @@ class App extends Component {
     The props.match.path shows exactly which route string from this file, was selected by the <Switch>
     */
 
+    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} />}
@@ -551,7 +556,6 @@ class App extends Component {
                   <Route path="/sign_in_email/:email_secret_key" component={SignInEmailProcess} />
                   <Route path="/setupaccount/:set_up_page" exact component={SetUpAccountRoot} />
                   <Route path="/setupaccount" exact><SetUpAccountRoot /></Route>
-                  <Route path="/storybook"><StorybookRedirect /></Route>
                   <Route path="/squads" exact><Squads /></Route>
                   <Route exact path="/start-a-campaign"><CampaignStartIntro /></Route>
                   <Route path="/terms" component={TermsOfService} />
@@ -707,7 +711,7 @@ const WeVoteBody = styled('div')`
   line-height: 1.4;
   margin: 0 auto;
   // max-width: 960px;
-  height: 100vw;
+  //height: 100vw;
   position: relative;
   z-index: 0;
   // this debug technique works!  ${() => console.log('-----------------------------')}

src/js/common/components/Campaign/CampaignListRoot.jsx

@@ -77,6 +77,17 @@ class CampaignListRoot extends Component {
     this.campaignStoreListener.remove();
   }
 
+  handleNumberOfResults (numberOfFilteredResults, numberOfSearchResults) {
+    // console.log('RepresentativeListRoot handleNumberOfResults numberOfFilteredResults:', numberOfFilteredResults, ', numberOfSearchResults:', numberOfSearchResults);
+    if (this.props.handleNumberOfResults) {
+      // Delay telling the parent component that the number of results has changed
+      // if (this.timer) clearTimeout(this.timer);
+      // this.timer = setTimeout(() => {
+      this.props.handleNumberOfResults(numberOfFilteredResults, numberOfSearchResults);
+      // }, 500);
+    }
+  }
+
   onCampaignSupporterStoreChange () {
     // We need to instantiate CampaignSupporterStore before we call campaignListRetrieve so that store gets filled with data
   }
@@ -358,6 +369,7 @@ class CampaignListRoot extends Component {
 }
 CampaignListRoot.propTypes = {
   classes: PropTypes.object,
+  handleNumberOfResults: PropTypes.func,
   hideCampaignsLinkedToPoliticians: PropTypes.bool,
   hideIfNoResults: PropTypes.bool,
   hideTitle: PropTypes.bool,

src/js/common/components/Settings/SettingsVerifySecretCode.jsx

@@ -535,9 +535,15 @@ class SettingsVerifySecretCode extends Component {
             <Title condensed={condensed}>Code Verification</Title>
             <Subtitle>A 6-digit code has been sent to</Subtitle>
             <PhoneSubtitle>{voterPhoneNumber || voterEmailAddress}</PhoneSubtitle>
-            <Subtitle>If you haven't received the code within 30 seconds, please verify the number you entered.</Subtitle>
-            {(voterEmailAddress) && (
+
+            {(voterEmailAddress) ? (
               <Subtitle>If you haven&apos;t received the code in 30 seconds, please check your spam folder and mark the email as &apos;Not Spam&apos;.</Subtitle>
+            ) : (
+              <>
+                {(voterPhoneNumber) && (
+                  <Subtitle>If you haven&apos;t received the code within 30 seconds, please verify the number you entered.</Subtitle>
+                )}
+              </>
             )}
             <InputContainer condensed={condensed}>
               <OutlinedInput

src/js/components/Ballot/BallotItemCompressed.jsx

@@ -10,7 +10,7 @@ export default class BallotItemCompressed extends PureComponent {
     const {
       ballotItemDisplayName, candidateList, candidatesToShowForSearchResults,
       isFirstBallotItem, isMeasure,
-      totalNumberOfBallotItems, weVoteId,
+      weVoteId,
     } = this.props;
     return (
       <div id={weVoteId}>
@@ -26,7 +26,6 @@ export default class BallotItemCompressed extends PureComponent {
             candidateList={candidateList}
             candidatesToShowForSearchResults={candidatesToShowForSearchResults}
             isFirstBallotItem={isFirstBallotItem}
-            totalNumberOfBallotItems={totalNumberOfBallotItems}
           />
         )}
       </div>
@@ -39,6 +38,5 @@ BallotItemCompressed.propTypes = {
   candidatesToShowForSearchResults: PropTypes.array,
   isFirstBallotItem: PropTypes.bool,
   isMeasure: PropTypes.bool,
-  totalNumberOfBallotItems: PropTypes.number,
   weVoteId: PropTypes.string.isRequired,
 };

src/js/components/Ballot/OfficeItemCompressed.jsx

@@ -31,7 +31,6 @@ const IssuesByBallotItemDisplayList = React.lazy(() => import(/* webpackChunkNam
 const ItemActionBar = React.lazy(() => import(/* webpackChunkName: 'ItemActionBar' */ '../Widgets/ItemActionBar/ItemActionBar'));
 const ShowMoreButtons = React.lazy(() => import(/* webpackChunkName: 'ShowMoreButtons' */ '../Widgets/ShowMoreButtons'));
 
-const SHOW_ALL_CANDIDATES_IF_FEWER_THAN_THIS_NUMBER_OF_BALLOT_ITEMS = 5;
 const NUMBER_OF_CANDIDATES_TO_DISPLAY = 3;
 
 // This is related to components/VoterGuide/VoterGuideOfficeItemCompressed
@@ -43,7 +42,6 @@ class OfficeItemCompressed extends Component {
     this.state = {
       candidateListLength: 0,
       candidateListForDisplay: [],
-      limitNumberOfCandidatesShownToThisNumber: NUMBER_OF_CANDIDATES_TO_DISPLAY,
       organizationWeVoteId: '',
       positionListFromFriendsHasBeenRetrievedOnce: {},
       positionListHasBeenRetrievedOnce: {},
@@ -199,14 +197,6 @@ class OfficeItemCompressed extends Component {
         let sortedCandidateList = {};
         if (candidateListForDisplay && candidateListForDisplay.length) {
           sortedCandidateList = sortCandidateList(candidateListForDisplay);
-          const { totalNumberOfBallotItems } = this.props;
-          const limitCandidatesShownBecauseMoreThanDefaultNumberOfBallotItems = (totalNumberOfBallotItems && totalNumberOfBallotItems > SHOW_ALL_CANDIDATES_IF_FEWER_THAN_THIS_NUMBER_OF_BALLOT_ITEMS);
-          if (!limitCandidatesShownBecauseMoreThanDefaultNumberOfBallotItems) {
-            // If the ballot is only show 5 ballot items, then don't limit the number of candidates we show
-            this.setState({
-              limitNumberOfCandidatesShownToThisNumber: candidateList.length,
-            });
-          }
         }
         this.setState({
           candidateListForDisplay: sortedCandidateList,
@@ -262,27 +252,43 @@ class OfficeItemCompressed extends Component {
     const { candidateList } = this.props;
     let { candidatesToShowForSearchResults } = this.props;
     candidatesToShowForSearchResults = candidatesToShowForSearchResults || [];
-    const { candidateListForDisplay, showAllCandidates } = this.state;
+    const { showAllCandidates } = this.state;
     const supportedCandidatesList = candidateList.filter((candidate) => candidatesToShowForSearchResults.includes(candidate.we_vote_id) || (SupportStore.getVoterSupportsByBallotItemWeVoteId(candidate.we_vote_id) && !candidate.withdrawn_from_election));
     const opposedCandidatesList = candidateList.filter((candidate) => candidatesToShowForSearchResults.includes(candidate.we_vote_id) || (SupportStore.getVoterOpposesByBallotItemWeVoteId(candidate.we_vote_id) && !candidate.withdrawn_from_election));
     const supportedAndOpposedCandidatesList = supportedCandidatesList.concat(opposedCandidatesList);
-    const candidatesToRender = (supportedCandidatesList.length && !showAllCandidates) ? supportedAndOpposedCandidatesList : candidateListForDisplay;
-    return candidatesToRender.length;
+    // console.log('OfficeItemCompressed getCandidatesToRenderCount candidatesToRender: ', candidatesToRender);
+    if (showAllCandidates) {
+      return candidateList.length;
+    } else if (supportedAndOpposedCandidatesList && supportedAndOpposedCandidatesList.length > 0) {
+      return supportedAndOpposedCandidatesList.length;
+    } else {
+      return NUMBER_OF_CANDIDATES_TO_DISPLAY;
+    }
   }
 
   // eslint-disable-next-line no-unused-vars
   generateCandidates = (officeWeVoteId) => {
     const { candidateList, externalUniqueId, isFirstBallotItem } = this.props;
     let { candidatesToShowForSearchResults } = this.props;
     candidatesToShowForSearchResults = candidatesToShowForSearchResults || [];
-    const { candidateListForDisplay, limitNumberOfCandidatesShownToThisNumber, showAllCandidates } = this.state;
+    const { candidateListForDisplay, showAllCandidates } = this.state; // limitNumberOfCandidatesShownToThisNumber
     // If voter has chosen 1+ candidates, only show those
     const supportedCandidatesList = candidateList.filter((candidate) => candidatesToShowForSearchResults.includes(candidate.we_vote_id) || (SupportStore.getVoterSupportsByBallotItemWeVoteId(candidate.we_vote_id) && !candidate.withdrawn_from_election));
     const opposedCandidatesList = candidateList.filter((candidate) => candidatesToShowForSearchResults.includes(candidate.we_vote_id) || (SupportStore.getVoterOpposesByBallotItemWeVoteId(candidate.we_vote_id) && !candidate.withdrawn_from_election));
     const supportedAndOpposedCandidatesList = supportedCandidatesList.concat(opposedCandidatesList);
     // If there are supported candidates, then limit what we show to supported and opposed candidates
-    const candidatesToRender = (supportedCandidatesList.length && !showAllCandidates) ? supportedAndOpposedCandidatesList : candidateListForDisplay;
-    const candidatesToRenderLength = candidatesToRender.length;
+    let candidatesToRender;
+    let limitNumberOfCandidatesShownToThisNumber;
+    if (showAllCandidates) {
+      candidatesToRender = candidateList;
+      limitNumberOfCandidatesShownToThisNumber = candidatesToRender.length;
+    } else if (supportedAndOpposedCandidatesList && supportedAndOpposedCandidatesList.length > 0) {
+      candidatesToRender = supportedAndOpposedCandidatesList;
+      limitNumberOfCandidatesShownToThisNumber = candidatesToRender.length;
+    } else {
+      candidatesToRender = candidateListForDisplay;
+      limitNumberOfCandidatesShownToThisNumber = NUMBER_OF_CANDIDATES_TO_DISPLAY;
+    }
     const hideItemActionBar = false;
     const hideCandidateDetails = false; // supportedCandidatesList.length;
     let candidateCount = 0;
@@ -450,7 +456,8 @@ class OfficeItemCompressed extends Component {
                     </PositionRowListOuterWrapper>
                   </CandidateContainer>
                 </BallotHorizontallyScrollingContainer>
-                {((candidateCount < candidatesToRenderLength) && (candidateCount < limitNumberOfCandidatesShownToThisNumber)) && (
+                {/* {((candidateCount < candidatesToRenderLength) && (candidateCount < limitNumberOfCandidatesShownToThisNumber)) && ( */}
+                {(candidateCount < limitNumberOfCandidatesShownToThisNumber) && (
                   <div>
                     <HrSeparator />
                   </div>
@@ -464,14 +471,12 @@ class OfficeItemCompressed extends Component {
 
   showAllCandidates () {
     this.setState({
-      limitNumberOfCandidatesShownToThisNumber: 99,
       showAllCandidates: true,
     });
   }
 
   showLessCandidates () {
     this.setState({
-      limitNumberOfCandidatesShownToThisNumber: NUMBER_OF_CANDIDATES_TO_DISPLAY,
       showAllCandidates: false,
     }, () => {
       this.targetRef.scrollIntoView({
@@ -513,9 +518,6 @@ class OfficeItemCompressed extends Component {
     const { isFirstBallotItem, officeWeVoteId } = this.props; // classes
     const { candidateListLength, showAllCandidates, totalNumberOfCandidates } = this.state;
     ballotItemDisplayName = toTitleCase(ballotItemDisplayName);
-    // const supportedCandidatesList = candidateList.filter((candidate) => (SupportStore.getVoterSupportsByBallotItemWeVoteId(candidate.we_vote_id) && !candidate.withdrawn_from_election));
-    // const thereIsAtLeastOneSupportedCandidate = supportedCandidatesList.length > 0;
-    // Even if voter has chosen 1+ candidates, show the "Show more" link
     const candidatesToRenderCount = this.getCandidatesToRenderCount();
     const moreCandidatesToDisplay = (candidatesToRenderCount < totalNumberOfCandidates);
     // console.log('ballotItemDisplayName:', ballotItemDisplayName, ', candidatesToRenderCount:', candidatesToRenderCount, ', totalNumberOfCandidates:', totalNumberOfCandidates, ', moreCandidatesToDisplay:', moreCandidatesToDisplay);
@@ -534,7 +536,7 @@ class OfficeItemCompressed extends Component {
           {ballotItemDisplayName}
         </OfficeNameH2>
         {/* *************************
-          Display either a) the candidates the voter supports, or b) the first several candidates running for this office
+          Display either a) the candidates the voter supports, or b) the first few candidates running for this office
           ************************* */}
         {this.generateCandidates(officeWeVoteId)}
 
@@ -574,7 +576,6 @@ OfficeItemCompressed.propTypes = {
   isFirstBallotItem: PropTypes.bool,
   organization: PropTypes.object,
   organizationWeVoteId: PropTypes.string,
-  totalNumberOfBallotItems: PropTypes.number,
 };
 
 const styles = (theme) => ({

src/js/components/CandidateListRoot/CandidateListRoot.jsx

@@ -104,6 +104,17 @@ class CandidateListRoot extends Component {
     this.candidateStoreListener.remove();
   }
 
+  handleNumberOfResults (numberOfFilteredResults, numberOfSearchResults) {
+    // console.log('RepresentativeListRoot handleNumberOfResults numberOfFilteredResults:', numberOfFilteredResults, ', numberOfSearchResults:', numberOfSearchResults);
+    if (this.props.handleNumberOfResults) {
+      // Delay telling the parent component that the number of results has changed
+      // if (this.timer) clearTimeout(this.timer);
+      // this.timer = setTimeout(() => {
+      this.props.handleNumberOfResults(numberOfFilteredResults, numberOfSearchResults);
+      // }, 500);
+    }
+  }
+
   onCandidateStoreChange () {
     this.onIncomingListChange();
   }
@@ -255,7 +266,7 @@ class CandidateListRoot extends Component {
     filteredList = filteredList.sort(this.orderByUltimateElectionDate);
     let searchResults = [];
     let hideDisplayBecauseNoSearchResults = false;
-    this.callbackToParentHideIfNoResults(false);
+    // this.callbackToParentHideIfNoResults(false);
     if (searchText && searchText.length > 0) {
       const searchTextLowercase = searchText.toLowerCase();
       // console.log('searchTextLowercase:', searchTextLowercase);
@@ -288,7 +299,7 @@ class CandidateListRoot extends Component {
         });
       if (searchResults.length === 0) {
         hideDisplayBecauseNoSearchResults = true;
-        this.callbackToParentHideIfNoResults(true);
+        // this.callbackToParentHideIfNoResults(true);
       }
       if (searchResults.length > 0) {
         // Only allow the first politician entry to be displayed (when there are multiple candidate entries for the same politician)
@@ -327,7 +338,7 @@ class CandidateListRoot extends Component {
       filteredList,
       hideDisplayBecauseNoSearchResults,
       timeStampOfChange: Date.now(),
-    });
+    }, () => { this.handleNumberOfResults(filteredList.length, searchResults.length); });
   }
 
   leftAndRightArrowSetState = (el) => {
@@ -351,9 +362,9 @@ class CandidateListRoot extends Component {
     });
   }
 
-  callbackToParentHideIfNoResults = (newValue) => {
-    this.props.onHideIfNoResultsChange(newValue);
-  }
+  // callbackToParentHideIfNoResults = (newValue) => {
+  //   this.props.onHideIfNoResultsChange(newValue);
+  // }
 
   render () {
     renderLog('CandidateListRoot');  // Set LOG_RENDER_EVENTS to log all renders
@@ -438,8 +449,8 @@ class CandidateListRoot extends Component {
 }
 CandidateListRoot.propTypes = {
   classes: PropTypes.object,
+  handleNumberOfResults: PropTypes.func,
   hideIfNoResults: PropTypes.bool,
-  onHideIfNoResultsChange: PropTypes.func,
   hideTitle: PropTypes.bool,
   incomingList: PropTypes.array,
   incomingListTimeStampOfChange: PropTypes.number,

src/js/components/Friends/AskFriendsModal.jsx

@@ -10,7 +10,7 @@ import withStyles from '@mui/styles/withStyles';
 import withTheme from '@mui/styles/withTheme';
 import PropTypes from 'prop-types';
 import React, { Component, Suspense } from 'react';
-import SearchBar from '../Search/SearchBar';
+import SearchBar2024 from '../Search/SearchBar2024';
 import FriendList from './FriendList';
 import FriendActions from '../../actions/FriendActions';
 import apiCalming from '../../common/utils/apiCalming';
@@ -22,6 +22,7 @@ import { ModalTitleType1 } from '../Style/ModalType1Styles';
 import BallotStore from '../../stores/BallotStore';
 import FriendStore from '../../stores/FriendStore';
 import sortFriendListByMutualFriends from '../../utils/friendFunctions';
+import NoSearchResult from '../Search/NoSearchResult';
 
 const MessageToFriendInputField = React.lazy(() => import(/* webpackChunkName: 'MessageToFriendInputField' */ './MessageToFriendInputField'));
 const SuggestedContacts = React.lazy(() => import(/* webpackChunkName: 'SuggestedContacts' */ './SuggestedContacts'));
@@ -177,7 +178,7 @@ class AskFriendsModal extends Component {
     const { location: { pathname } } = window;
     const {
       currentFriendListFilteredBySearch, electionDateInFutureFormatted,
-      electionDateIsToday, numberOfItemsToDisplay, searchFilterOn, searchTerm,
+      electionDateIsToday, numberOfItemsToDisplay, searchFilterOn,
       totalCurrentFriendListCount,
     } = this.state;
     let { currentFriendList } = this.state;
@@ -226,7 +227,7 @@ class AskFriendsModal extends Component {
           <div className="full-width">
             {totalCurrentFriendListCount > 10 && (
               <>
-                <SearchBar
+                <SearchBar2024
                   clearButton
                   searchButton
                   placeholder="Search by name"
@@ -239,11 +240,10 @@ class AskFriendsModal extends Component {
             )}
             <FriendListExternalWrapper>
               { (searchFilterOn && currentFriendList.length === 0) && (
-                <p>
-                  &quot;
-                  {searchTerm}
-                  &quot; not found
-                </p>
+              <NoSearchResult
+                title="No results found."
+                subtitle="Please double check and try again."
+              />
               )}
               <FriendList
                 electionDateInFutureFormatted={electionDateInFutureFormatted}

src/js/components/Friends/SuggestedContactListWithController.jsx

@@ -4,7 +4,7 @@ import React, { Suspense } from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import SuggestedContactList from './SuggestedContactList';
-import SearchBar from '../Search/SearchBar';
+import SearchBar2024 from '../Search/SearchBar2024';
 import VoterActions from '../../actions/VoterActions';
 import apiCalming from '../../common/utils/apiCalming';
 import { renderLog } from '../../common/utils/logging';
@@ -269,7 +269,7 @@ class SuggestedContactListWithController extends React.Component {
             )}
             {voterContactEmailListCount > 10 && (
               <>
-                <SearchBar
+                <SearchBar2024
                   clearButton
                   searchButton
                   placeholder="Search by name, email, city or state code"