Fixed some spacing (from 4 space tabs to 2 space tabs) in YourRankOutOf. Converted some identical ids to unique. Passed variables through to ExplanationContent.

src/js/common/components/Challenge/ExplanationContent.jsx

@@ -91,6 +91,12 @@ const ExplanationContent = ({
     </AccordionSection>
   </PointsWrapper>
 );
+ExplanationContent.propTypes = {
+  unfurlInviteFriends: PropTypes.bool,
+  unfurlEarnPoints: PropTypes.bool,
+  unfurlMission: PropTypes.bool,
+  unfurlContestTerms: PropTypes.bool,
+};
 
 const AccordionSection = ({ title, children, isOpen }) => (
   <StyledAccordion defaultExpanded={isOpen}>
@@ -100,11 +106,10 @@ const AccordionSection = ({ title, children, isOpen }) => (
     <AccordionDetails>{children}</AccordionDetails>
   </StyledAccordion>
 );
-
 AccordionSection.propTypes = {
-  title: PropTypes.string.isRequired,
   children: PropTypes.node.isRequired,
   isOpen: PropTypes.bool,
+  title: PropTypes.string.isRequired,
 };
 
 

src/js/common/components/Challenge/PointsExplanationModal.jsx

@@ -19,15 +19,22 @@ class PointsExplanationModal extends Component {
 
   render () {
     renderLog('PointsExplanationModalModal');
-    const { show, toggleModal } = this.props;
+    const { show, toggleModal, unfurlContestTerms, unfurlEarnPoints, unfurlInviteFriends, unfurlMission } = this.props;
 
     // need to replace hardcode with props
     const dialogTitleText = 'About challenges and WeVote';
 
     return (
       <ModalDisplayTemplateA
         dialogTitleJSX={<DialogTitle>{dialogTitleText}</DialogTitle>}
-        textFieldJSX={<ExplanationContent />}
+        textFieldJSX={(
+          <ExplanationContent
+            unfurlContestTerms={unfurlContestTerms}
+            unfurlEarnPoints={unfurlEarnPoints}
+            unfurlInviteFriends={unfurlInviteFriends}
+            unfurlMission={unfurlMission}
+          />
+        )}
         show={show}
         tallMode
         toggleModal={toggleModal}
@@ -38,6 +45,10 @@ class PointsExplanationModal extends Component {
 PointsExplanationModal.propTypes = {
   show: PropTypes.bool.isRequired,
   toggleModal: PropTypes.func.isRequired,
+  unfurlContestTerms: PropTypes.bool,
+  unfurlEarnPoints: PropTypes.bool,
+  unfurlInviteFriends: PropTypes.bool,
+  unfurlMission: PropTypes.bool,
 };
 
 

src/js/common/components/Challenge/YourRankOutOf.jsx

@@ -1,87 +1,89 @@
+import { InfoOutlined } from '@mui/icons-material';
 import React, { PureComponent, Suspense } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import DesignTokenColors from '../Style/DesignTokenColors';
-import { InfoOutlined } from '@mui/icons-material';
 
 const PointsExplanationModal = React.lazy(() => import(/* webpackChunkName: 'PointsExplanationModal' */ './PointsExplanationModal')); // eslint-disable-line import/no-cycle
 
 class YourRankOutOf extends PureComponent {
-    constructor (props) {
-      super(props);
-      this.state = {
-        pointsExplanationModalOpen: false,
-        moreInfoIconHovered: false,
-      };
-    }
-
-    openPointsExplanationModal = () => {
-        this.setState({
-          pointsExplanationModalOpen: true,
-        });
+  constructor (props) {
+    super(props);
+    this.state = {
+      pointsExplanationModalOpen: false,
+      moreInfoIconHovered: false,
     };
+  }
+
+  openPointsExplanationModal = () => {
+    this.setState({
+      pointsExplanationModalOpen: true,
+    });
+  };
 
-    toggleYourRankFunction = () => {
-        const { pointsExplanationModalOpen } = this.state;
-        this.setState({
-          pointsExplanationModalOpen: !pointsExplanationModalOpen,
-        });
-      };
+  toggleYourRankFunction = () => {
+    const { pointsExplanationModalOpen } = this.state;
+    this.setState({
+      pointsExplanationModalOpen: !pointsExplanationModalOpen,
+    });
+  };
 
-    handleMoreInfoIconHover = () => {
-        this.setState({
-          moreInfoIconHovered: true,
-        });
-    }
+  handleMoreInfoIconHover = () => {
+    this.setState({
+      moreInfoIconHovered: true,
+    });
+  }
 
-    handleMoreInfoIconLeave = () => {
-        this.setState({
-          moreInfoIconHovered: false,
-        });
-    }
+  handleMoreInfoIconLeave = () => {
+    this.setState({
+      moreInfoIconHovered: false,
+    });
+  }
 
 
-    render() {
-        const { rankOfVoter, participantsCount } = this.props;
-        const { pointsExplanationModalOpen, moreInfoIconHovered } = this.state;
+  render() {
+    const { rankOfVoter, participantsCount } = this.props;
+    const { pointsExplanationModalOpen, moreInfoIconHovered } = this.state;
 
-        return (
-            <RankContainer>
-            <RankText>You&apos;re</RankText>
-            {' '}
-            <RankNumber>
-              #
-              {rankOfVoter}
-            </RankNumber>
-            {' '}
-            <RankDetails>
-              (of
-              {' '}
-              {participantsCount}
-              )
-            </RankDetails>
-            {' '}
-            <InfoOutlined
-                style={{ color: moreInfoIconHovered ? DesignTokenColors.primary500 : DesignTokenColors.neutral600, cursor: 'pointer' }}
-                onMouseEnter={() => this.handleMoreInfoIconHover()}
-                onMouseLeave={() => this.handleMoreInfoIconLeave()}
-                onClick={() => this.openPointsExplanationModal()}
+    return (
+      <RankContainer>
+        <RankText>You&apos;re</RankText>
+        {' '}
+        <RankNumber>
+          #
+          {rankOfVoter}
+        </RankNumber>
+        {' '}
+        <RankDetails>
+          (of
+          {' '}
+          {participantsCount}
+          )
+        </RankDetails>
+        {' '}
+        <InfoOutlined
+          style={{ color: moreInfoIconHovered ? DesignTokenColors.primary500 : DesignTokenColors.neutral600, cursor: 'pointer' }}
+          onMouseEnter={() => this.handleMoreInfoIconHover()}
+          onMouseLeave={() => this.handleMoreInfoIconLeave()}
+          onClick={() => this.openPointsExplanationModal()}
+        />
+        {pointsExplanationModalOpen && (
+          <Suspense fallback={<div>Loading...</div>}>
+            <PointsExplanationModal
+              show={this.state.pointsExplanationModalOpen}
+              toggleModal={this.toggleYourRankFunction}
+              unfurlEarnPoints
             />
-            {pointsExplanationModalOpen && (
-                <Suspense fallback={<div>Loading...</div>}>
-                    <PointsExplanationModal
-                        show={this.state.pointsExplanationModalOpen}
-                        toggleModal={this.toggleYourRankFunction}/>
-                </Suspense>
-            )}
-          </RankContainer>
-        );
-    }
+          </Suspense>
+        )}
+      </RankContainer>
+    );
+  }
 }
 
 YourRankOutOf.propTypes = {
-    rankOfVoter: PropTypes.number.isRequired,
-    participantsCount: PropTypes.number.isRequired,
+  rankOfVoter: PropTypes.number.isRequired,
+  participantsCount: PropTypes.number.isRequired,
 };
 
 // Styles
@@ -104,4 +106,4 @@ const RankDetails = styled.span`
   color: ${DesignTokenColors.neutral600};  /* Subdued color for "(of 6441)" */
 `;
 
-export default YourRankOutOf;
+export default YourRankOutOf;

src/js/common/components/Navigation/ChallengeHeaderSimple.jsx

@@ -16,7 +16,7 @@ function ChallengeHeaderSimple (props) {
   renderLog('ChallengeHeaderSimple');  // Set LOG_RENDER_EVENTS to log all renders
   const { challengeTitle, challengeWeVoteId, classes, challengePhotoLargeUrl, goToChallengeHome, hideCloseIcon } = props;
   return (
-    <ChallengeHeaderSimpleOuterContainer id="politicianHeaderContainer">
+    <ChallengeHeaderSimpleOuterContainer id="challengeHeaderSimpleContainer">
       <ChallengeHeaderSimpleInnerContainer>
         <ChallengeHeaderSimpleContentContainer>
           <ChallengeTitleRow>

src/js/common/components/Politician/PoliticianEndorsementsList.jsx

@@ -11,7 +11,7 @@ import {
   orderByWrittenComment,
   limitToOnePositionPerSpeaker,
 } from '../../utils/orderByPositionFunctions';
-import VoterPositionEntryAndDisplay from '../PositionItem/VoterPositionEntryAndDisplay';
+// import VoterPositionEntryAndDisplayJohnMook from '../PositionItem/VoterPositionEntryAndDisplay';
 import LoadMoreItemsManually from '../Widgets/LoadMoreItemsManually';
 import PoliticianEndorsementForList from './PoliticianEndorsementForList';
 import {
@@ -150,7 +150,8 @@ class PoliticianEndorsementsList extends Component {
     return (
       <PoliticianEndorsementsListWrapper>
         {listTitleHtml}
-        <VoterPositionEntryAndDisplay />
+        {/* WV-532 This component forces open the width of the entire product, so commenting out for now. */}
+        {/* <VoterPositionEntryAndDisplayJohnMook /> */}
         <div>
           {filteredPositionList.map((position) => {
             // console.log('PoliticianEndorsementList position:', position);

src/js/common/pages/Politician/PoliticianDetailsPage.jsx

@@ -631,8 +631,8 @@ class PoliticianDetailsPage extends Component {
   render () {
     renderLog('PoliticianDetailsPage');  // Set LOG_RENDER_EVENTS to log all renders
 
-    const { politicianStateParsedFromURLBeforeLoad } = this.state; // reaname variable state calculated from URL to be used when page is still loading. 
-    const { politicianNameParsedFromURLBeforeLoad } = this.state; // reaname variable name calculated from URL to be used when page is still loading.
+    const { politicianStateParsedFromURLBeforeLoad } = this.state; // State calculated from URL to be used when page is still loading.
+    const { politicianNameParsedFromURLBeforeLoad } = this.state; // Politician name calculated from URL to be used when page is still loading.
     const { classes } = this.props;
     const { match: { params } } = this.props;
     const { politicianSEOFriendlyPath: politicianSEOFriendlyPathFromUrl } = params;
@@ -943,7 +943,7 @@ class PoliticianDetailsPage extends Component {
         </Helmet>
         <PageWrapper>
           <DetailsSectionMobile className="u-show-mobile">
-            <MobileHeaderOuterContainer id="politicianHeaderContainer" scrolledDown={scrolledDown}>
+            <MobileHeaderOuterContainer id="politicianDetailsHeaderContainer" scrolledDown={scrolledDown}>
               <MobileHeaderInnerContainer>
                 <MobileHeaderContentContainer>
                   <CandidateTopRow>

src/js/components/Ballot/BallotTitleHeader.jsx

@@ -116,7 +116,7 @@ class BallotTitleHeader extends Component {
       electionName, nextNationalElectionDateMDY, originalTextAddress, originalTextState,
       substitutedAddress, substitutedState, textForMapSearch,
     } = this.state;
-    console.log('BallotTitleHeader daysUntilElection:', daysUntilElection);
+    // console.log('BallotTitleHeader daysUntilElection:', daysUntilElection);
     const electionNameContainsWordElection = stringContains('election', electionName.toLowerCase());
     const stateTextUsed = substitutedState || originalTextState || '';
     const electionNameContainsState = stringContains(stateTextUsed.toLowerCase(), electionName.toLowerCase());

src/js/components/VoterGuide/OrganizationModal.jsx

@@ -379,7 +379,7 @@ class OrganizationModal extends Component {
             </IconButton>
           </div>
         </CloseDrawerIconWrapper>
-        <DrawerHeaderOuterContainer id="politicianHeaderContainer" scrolledDown={scrolledDown}>
+        <DrawerHeaderOuterContainer id="organizationModalHeaderContainer" scrolledDown={scrolledDown}>
           <DrawerHeaderInnerContainer>
             <CandidateTopRow>
               <Candidate