From d7370bd6399d4afdb12eeec8b8c6a8fb693ead4a Mon Sep 17 00:00:00 2001
From: dalemcgrew <DaleMcGrew@yahoo.com>
Date: Thu, 26 Sep 2024 10:48:53 -0700
Subject: [PATCH] Joining a challenge now works. Inviting an invitee works as
 well. Updates to ChallengeHeaderSimple. Should be able to publish a challenge
 without a photo now.

---
 .../Challenge/JoinChallengeButton.jsx         |  23 ++-
 .../InviteFriendToChallengeInput.jsx          |   2 +-
 .../ChallengeCardForListBody.jsx              |  83 +++++----
 .../ChallengeListRoot/ChallengeCardList.jsx   |  10 +-
 .../ChallengeParticipantList.jsx              |   7 +-
 .../ChallengeParticipantListRoot.jsx          |   4 +-
 .../Navigation/ChallengeHeaderSimple.jsx      |  30 ++--
 .../components/Style/ChallengeCardStyles.jsx  | 170 ++++++++++++++++++
 .../pages/Challenge/ChallengeHomePage.jsx     |  32 +---
 .../ChallengeInviteCustomizeMessage.jsx       |   4 +-
 .../ChallengeInviteFriends.jsx                |   3 +-
 .../ChallengeInviteFriendsJoin.jsx            |  40 ++---
 .../ChallengeStart/ChallengeStartPreview.jsx  |   9 +-
 13 files changed, 290 insertions(+), 127 deletions(-)
 create mode 100644 src/js/common/components/Style/ChallengeCardStyles.jsx

diff --git a/src/js/common/components/Challenge/JoinChallengeButton.jsx b/src/js/common/components/Challenge/JoinChallengeButton.jsx
index 191266926..f8825b1d9 100644
--- a/src/js/common/components/Challenge/JoinChallengeButton.jsx
+++ b/src/js/common/components/Challenge/JoinChallengeButton.jsx
@@ -7,6 +7,7 @@ import historyPush from '../../utils/historyPush';
 import { renderLog } from '../../utils/logging';
 import AppObservableStore from '../../stores/AppObservableStore';
 import ChallengeStore from '../../stores/ChallengeStore';
+import ChallengeParticipantActions from '../../actions/ChallengeParticipantActions';
 import ReadyStore from '../../../stores/ReadyStore';
 import VoterStore from '../../../stores/VoterStore';
 import { getChallengeValuesFromIdentifiers } from '../../utils/challengeUtils';
@@ -50,7 +51,7 @@ class JoinChallengeButton extends React.Component {
       this.setState({
         challengeSEOFriendlyPath,
       });
-    } else {
+    } else if (challengeSEOFriendlyPathFromProps) {
       this.setState({
         challengeSEOFriendlyPath: challengeSEOFriendlyPathFromProps,
       });
@@ -64,7 +65,7 @@ class JoinChallengeButton extends React.Component {
         // voterCanEditThisChallenge,
         voterIsChallengeParticipant,
       });
-    } else {
+    } else if (challengeWeVoteIdFromProps) {
       voterIsChallengeParticipant = ChallengeStore.getVoterIsChallengeParticipant(challengeWeVoteIdFromProps);
       this.setState({
         challengeWeVoteId: challengeWeVoteIdFromProps,
@@ -114,14 +115,12 @@ class JoinChallengeButton extends React.Component {
   goToJoinChallenge = () => {
     const challengeBasePath = this.getChallengeBasePath();
     // console.log('goToJoinChallenge challengeBasePath: ', challengeBasePath);
-    const { voterFirstName, voterPhotoUrlLarge } = this.state;
+    const { challengeWeVoteId, voterFirstName, voterPhotoUrlLarge } = this.state;
     const upcomingGoogleCivicElectionId = VoterStore.electionId();
     const voterPlanCreatedForThisElection = ReadyStore.getVoterPlanTextForVoterByElectionId(upcomingGoogleCivicElectionId);
-    console.log('upcomingGoogleCivicElectionId: ', upcomingGoogleCivicElectionId, 'voterPlanCreatedForThisElection: ', voterPlanCreatedForThisElection);
-    const itemsAreMissing = !(voterFirstName) || !(voterPhotoUrlLarge) || !(voterPlanCreatedForThisElection); // Temporarily assume we have something we need from voter
+    // console.log('upcomingGoogleCivicElectionId: ', upcomingGoogleCivicElectionId, 'voterPlanCreatedForThisElection: ', voterPlanCreatedForThisElection);
+    const itemsAreMissing = !(voterFirstName) || !(voterPhotoUrlLarge) || (upcomingGoogleCivicElectionId && !(voterPlanCreatedForThisElection));
     if (VoterStore.getVoterIsSignedIn()) {
-      // TODO: Make API call that joins this challenge
-
       let joinChallengeNextStepPath = '';
       if (itemsAreMissing) {
         joinChallengeNextStepPath = `${challengeBasePath}join-challenge`;
@@ -131,7 +130,15 @@ class JoinChallengeButton extends React.Component {
       const { location: { pathname: currentPathname } } = window;
       AppObservableStore.setSetUpAccountBackLinkPath(currentPathname);
       AppObservableStore.setSetUpAccountEntryPath(joinChallengeNextStepPath);
-      historyPush(joinChallengeNextStepPath);
+      if (itemsAreMissing) {
+        historyPush(joinChallengeNextStepPath);
+      } else {
+        ChallengeParticipantActions.challengeParticipantSave(challengeWeVoteId);
+        // Delay the redirect, so we have time to fire the above API call first
+        this.timer = setTimeout(() => {
+          historyPush(joinChallengeNextStepPath);
+        }, 500);
+      }
     } else {
       this.setState({
         goToNextStepAfterSignIn: true,
diff --git a/src/js/common/components/ChallengeInviteeListRoot/InviteFriendToChallengeInput.jsx b/src/js/common/components/ChallengeInviteeListRoot/InviteFriendToChallengeInput.jsx
index dd2229ec9..577e87b7a 100755
--- a/src/js/common/components/ChallengeInviteeListRoot/InviteFriendToChallengeInput.jsx
+++ b/src/js/common/components/ChallengeInviteeListRoot/InviteFriendToChallengeInput.jsx
@@ -40,7 +40,7 @@ const InviteFriendToChallengeInput = ({ classes, challengeWeVoteId, externalUniq
           <Button
             classes={{ root: classes.buttonDesktop }}
             color="primary"
-            id="joinChallengeNow"
+            id="inviteToChallengeNow"
             onClick={() => ChallengeInviteeActions.challengeInviteeSave(challengeWeVoteId, friendName)}
             variant="contained"
           >
diff --git a/src/js/common/components/ChallengeListRoot/ChallengeCardForListBody.jsx b/src/js/common/components/ChallengeListRoot/ChallengeCardForListBody.jsx
index 678009b24..a2949c5b8 100644
--- a/src/js/common/components/ChallengeListRoot/ChallengeCardForListBody.jsx
+++ b/src/js/common/components/ChallengeListRoot/ChallengeCardForListBody.jsx
@@ -9,23 +9,18 @@ import { renderLog } from '../../utils/logging';
 // import numberWithCommas from '../../utils/numberWithCommas';
 // import ChallengeOwnersList from '../ChallengeInviteeListRoot/ChallengeOwnersList';
 import {
-  CampaignActionButtonsWrapper,
-  CampaignImageDesktop, CampaignImageDesktopPlaceholder,
-  CampaignImageMobile, CampaignImageMobilePlaceholder,
-  CampaignImagePlaceholderText,
-  // CampaignPoliticianImageDesktop, CampaignPoliticianImageMobile,
-  CandidateCardForListWrapper, OneCampaignDescription,
-  OneCampaignInnerWrapper, OneCampaignOuterWrapper,
-  OneCampaignPhotoDesktopColumn, OneCampaignPhotoWrapperMobile,
-  OneCampaignTextColumn, OneCampaignTitleLink, SupportersActionLink,
-  SupportersCount, SupportersWrapper, TitleAndTextWrapper,
-} from '../Style/CampaignCardStyles';
-import { BlockedIndicator, BlockedReason, DraftModeIndicator, EditIndicator, ElectionInPast, IndicatorDefaultButtonWrapper, IndicatorButtonWrapper, IndicatorRow } from '../Style/CampaignIndicatorStyles';
+  ChallengeImageDesktop, ChallengeImageDesktopPlaceholder,
+  ChallengeImageMobile, ChallengeImageMobilePlaceholder,
+  ChallengeImagePlaceholderText,
+  CandidateCardForListWrapper,
+  OneChallengeInnerWrapper, OneChallengeOuterWrapper,
+  OneChallengePhotoDesktopColumn, OneChallengePhotoWrapperMobile,
+  OneChallengeTextColumn, OneChallengeTitleLink, TitleAndTextWrapper,
+} from '../Style/ChallengeCardStyles';
+import { DraftModeIndicator, IndicatorDefaultButtonWrapper, IndicatorRow } from '../Style/CampaignIndicatorStyles';
 import DesignTokenColors from '../Style/DesignTokenColors';
 import SvgImage from '../Widgets/SvgImage';
 
-const SupportButtonBeforeCompletionScreen = React.lazy(() => import(/* webpackChunkName: 'SupportButtonBeforeCompletionScreen' */ '../CampaignSupport/SupportButtonBeforeCompletionScreen'));
-
 // React functional component example
 function ChallengeCardForListBody (props) {
   renderLog('ChallengeCardForListBody');  // Set LOG_RENDER_EVENTS to log all renders
@@ -42,21 +37,21 @@ function ChallengeCardForListBody (props) {
   // /////////////////////// START OF DISPLAY
   return (
     <CandidateCardForListWrapper limitCardWidth={limitCardWidth}>
-      <OneCampaignOuterWrapper limitCardWidth={limitCardWidth}>
-        <OneCampaignInnerWrapper
+      <OneChallengeOuterWrapper limitCardWidth={limitCardWidth}>
+        <OneChallengeInnerWrapper
           hideCardMargins={hideCardMargins}
           useVerticalCard={limitCardWidth || useVerticalCard || isMobileScreenSize()}
         >
-          <OneCampaignTextColumn hideCardMargins={hideCardMargins}>
+          <OneChallengeTextColumn hideCardMargins={hideCardMargins}>
             <TitleAndTextWrapper hideCardMargins={hideCardMargins}>
-              <OneCampaignTitleLink>
+              <OneChallengeTitleLink>
                 <Link
                   id="challengeCardDisplayName"
                   to={onChallengeClickLink()}
                 >
                   {challengeTitle}
                 </Link>
-              </OneCampaignTitleLink>
+              </OneChallengeTitleLink>
               {/*
               <SupportersWrapper>
                 <SupportersCount>
@@ -82,7 +77,7 @@ function ChallengeCardForListBody (props) {
                   </SupportersActionLink>
                 )}
               </SupportersWrapper>
-              <OneCampaignDescription
+              <OneChallengeDescription
                 className="u-cursor--pointer"
                 id="challengeCardDescription"
                 onClick={onChallengeClick}
@@ -96,7 +91,7 @@ function ChallengeCardForListBody (props) {
                     {challengeDescription}
                   </div>
                 </TruncateMarkup>
-              </OneCampaignDescription>
+              </OneChallengeDescription>
               */}
               {/*
               <ChallengeOwnersWrapper>
@@ -163,6 +158,7 @@ function ChallengeCardForListBody (props) {
                 </IndicatorButtonWrapper>
               )}
               */}
+              {/*
               {voterCanEditThisChallenge && (
                 <IndicatorButtonWrapper>
                   <EditIndicator onClick={onChallengeEditClick}>
@@ -175,6 +171,7 @@ function ChallengeCardForListBody (props) {
                   </EditIndicator>
                 </IndicatorButtonWrapper>
               )}
+              */}
               {/*
               {(challengeSupported && !inDraftMode) && (
                 <IndicatorButtonWrapper>
@@ -190,18 +187,18 @@ function ChallengeCardForListBody (props) {
               )}
             */}
             </IndicatorRow>
-          </OneCampaignTextColumn>
-          <OneCampaignPhotoWrapperMobile
+          </OneChallengeTextColumn>
+          <OneChallengePhotoWrapperMobile
             className="u-cursor--pointer u-show-mobile"
             onClick={onChallengeClick}
           >
             {photoLargeUrl ? (
-              <CampaignImageMobilePlaceholder
+              <ChallengeImageMobilePlaceholder
                 id="cimp4"
                 profileImageBackgroundColor={profileImageBackgroundColor}
                 useVerticalCard={useVerticalCard}
               >
-                <CampaignImageMobile
+                <ChallengeImageMobile
                   alt=""
                   src={photoLargeUrl}
                   style={useVerticalCard ? {
@@ -209,9 +206,9 @@ function ChallengeCardForListBody (props) {
                     borderTop: `1px solid ${DesignTokenColors.neutralUI100}`,
                   } : {}}
                 />
-              </CampaignImageMobilePlaceholder>
+              </ChallengeImageMobilePlaceholder>
             ) : (
-              <CampaignImageMobilePlaceholder
+              <ChallengeImageMobilePlaceholder
                 id="cimp2"
                 profileImageBackgroundColor={profileImageBackgroundColor}
                 useVerticalCard={useVerticalCard}
@@ -225,14 +222,14 @@ function ChallengeCardForListBody (props) {
                     marginBottom="-10px"
                     opacity="0.33"
                   />
-                  <CampaignImagePlaceholderText>
+                  <ChallengeImagePlaceholderText>
                     No image available.
-                  </CampaignImagePlaceholderText>
+                  </ChallengeImagePlaceholderText>
                 </SvgWatermarkWrapper>
-              </CampaignImageMobilePlaceholder>
+              </ChallengeImageMobilePlaceholder>
             )}
-          </OneCampaignPhotoWrapperMobile>
-          <OneCampaignPhotoDesktopColumn
+          </OneChallengePhotoWrapperMobile>
+          <OneChallengePhotoDesktopColumn
             className="u-cursor--pointer u-show-desktop-tablet"
             hideCardMargins={hideCardMargins}
             id={`${tagIdBaseName}PhotoDesktop`}
@@ -244,13 +241,13 @@ function ChallengeCardForListBody (props) {
             {photoLargeUrl ? (
               <>
                 {useVerticalCard ? (
-                  <CampaignImageDesktopPlaceholder
+                  <ChallengeImageDesktopPlaceholder
                     id="cidp4"
                     limitCardWidth={limitCardWidth}
                     profileImageBackgroundColor={profileImageBackgroundColor}
                     useVerticalCard={useVerticalCard}
                   >
-                    <CampaignImageDesktop
+                    <ChallengeImageDesktop
                       src={photoLargeUrl}
                       alt=""
                       style={useVerticalCard ? {
@@ -260,19 +257,19 @@ function ChallengeCardForListBody (props) {
                       width={limitCardWidth ? '257px' : '320px'}
                       height={limitCardWidth ? '157px' : '168px'}
                     />
-                  </CampaignImageDesktopPlaceholder>
+                  </ChallengeImageDesktopPlaceholder>
                 ) : (
-                  <CampaignImageDesktop src={photoLargeUrl} alt="" width="117px" height="117px" />
+                  <ChallengeImageDesktop src={photoLargeUrl} alt="" width="117px" height="117px" />
                 )}
               </>
             ) : (
-              <CampaignImageDesktopPlaceholder
+              <ChallengeImageDesktopPlaceholder
                 id="cidp5"
                 limitCardWidth={limitCardWidth}
                 profileImageBackgroundColor={profileImageBackgroundColor}
                 useVerticalCard={useVerticalCard}
               >
-                <CampaignImagePlaceholderText>
+                <ChallengeImagePlaceholderText>
                   <SvgImage
                     applyFillColor
                     color={DesignTokenColors.neutralUI300}
@@ -282,12 +279,12 @@ function ChallengeCardForListBody (props) {
                     opacity="0.33"
                   />
                   No image available.
-                </CampaignImagePlaceholderText>
-              </CampaignImageDesktopPlaceholder>
+                </ChallengeImagePlaceholderText>
+              </ChallengeImageDesktopPlaceholder>
             )}
-          </OneCampaignPhotoDesktopColumn>
-        </OneCampaignInnerWrapper>
-      </OneCampaignOuterWrapper>
+          </OneChallengePhotoDesktopColumn>
+        </OneChallengeInnerWrapper>
+      </OneChallengeOuterWrapper>
     </CandidateCardForListWrapper>
   );
 }
diff --git a/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx b/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx
index 17f2a8352..d9ae0757f 100644
--- a/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx
+++ b/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import withStyles from '@mui/styles/withStyles';
 import PropTypes from 'prop-types';
 import React, { Component, Suspense } from 'react';
-import { CampaignsNotAvailableToShow, ListWrapper, LoadMoreItemsManuallyWrapper, StartACampaignWrapper } from '../Style/CampaignCardStyles';
+import { ChallengesNotAvailableToShow, ListWrapper, LoadMoreItemsManuallyWrapper } from '../Style/ChallengeCardStyles';
 import isMobileScreenSize from '../../utils/isMobileScreenSize';
 import { renderLog } from '../../utils/logging';
 import ChallengeCardForList from './ChallengeCardForList';
@@ -146,7 +146,7 @@ class ChallengeCardList extends Component {
           })}
           {/*
           {!!(numberDisplayed && (searchText || showAllEndorsements || showThisYear || showUpcomingEndorsements)) && (
-            <StartACampaignWrapper>
+            <StartAChallengeWrapper>
               <Link className="u-link-color" to="/start-a-challenge">
                 Start a challenge
                 {(searchText && searchText.length > 0) && (
@@ -160,7 +160,7 @@ class ChallengeCardList extends Component {
                   </>
                 )}
               </Link>
-            </StartACampaignWrapper>
+            </StartAChallengeWrapper>
           )}
           */}
           {!!(challengeList &&
@@ -179,7 +179,7 @@ class ChallengeCardList extends Component {
           <DelayedLoad loadingTextLeftAlign showLoadingText waitBeforeShow={2000}>
             <div>
               {!(numberDisplayed) && (
-                <CampaignsNotAvailableToShow>
+                <ChallengesNotAvailableToShow>
                   No challenges match.
                   {/*
                   {!!(searchText || showAllEndorsements || showThisYear || showUpcomingEndorsements) && (
@@ -202,7 +202,7 @@ class ChallengeCardList extends Component {
                     </>
                   )}
                   */}
-                </CampaignsNotAvailableToShow>
+                </ChallengesNotAvailableToShow>
               )}
             </div>
           </DelayedLoad>
diff --git a/src/js/common/components/ChallengeParticipantListRoot/ChallengeParticipantList.jsx b/src/js/common/components/ChallengeParticipantListRoot/ChallengeParticipantList.jsx
index 7b000aa7d..7bfc8299b 100644
--- a/src/js/common/components/ChallengeParticipantListRoot/ChallengeParticipantList.jsx
+++ b/src/js/common/components/ChallengeParticipantListRoot/ChallengeParticipantList.jsx
@@ -5,12 +5,12 @@ import styled from 'styled-components';
 import ChallengeParticipantListItem from './ChallengeParticipantListItem';
 import VoterStore from '../../../stores/VoterStore';
 
-const ChallengeParticipantList = ({ participantList }) => {
+const ChallengeParticipantList = ({ participantList, uniqueExternalId }) => {
   const [voterWeVoteID, setVoterWeVoteID] = React.useState('');
 
   const handleVoterStoreChange = () => {
     const voterID = VoterStore.getVoterWeVoteId();
-    console.log('Fetching voterWeVoteID:', voterID);
+    // console.log('Fetching voterWeVoteID:', voterID);
     setVoterWeVoteID(voterID);
   };
 
@@ -26,7 +26,7 @@ const ChallengeParticipantList = ({ participantList }) => {
     <LeaderboardListContainer>
       {participantList.map((participant) => (
         <ChallengeParticipantListItem
-          key={`participantKey-${participant.voter_we_vote_id}`}
+          key={`participantKey-${participant.voter_we_vote_id}-${uniqueExternalId}`}
           participant={participant}
           isCurrentUser={participant.voter_we_vote_id === voterWeVoteID}
         />
@@ -36,6 +36,7 @@ const ChallengeParticipantList = ({ participantList }) => {
 };
 ChallengeParticipantList.propTypes = {
   participantList: PropTypes.array,
+  uniqueExternalId: PropTypes.string,
 };
 
 const LeaderboardListContainer = styled.div`
diff --git a/src/js/common/components/ChallengeParticipantListRoot/ChallengeParticipantListRoot.jsx b/src/js/common/components/ChallengeParticipantListRoot/ChallengeParticipantListRoot.jsx
index 27be21d3c..8b15e40a1 100644
--- a/src/js/common/components/ChallengeParticipantListRoot/ChallengeParticipantListRoot.jsx
+++ b/src/js/common/components/ChallengeParticipantListRoot/ChallengeParticipantListRoot.jsx
@@ -48,7 +48,7 @@ function searchFunction () {
 }
 
 
-const ChallengeParticipantListRoot = ({ challengeWeVoteId, classes }) => {
+const ChallengeParticipantListRoot = ({ challengeWeVoteId, classes, uniqueExternalId }) => {
   // eslint-disable-next-line no-unused-vars
   const [latestParticipants, setLatestParticipants] = React.useState([]);
 
@@ -124,6 +124,7 @@ const ChallengeParticipantListRoot = ({ challengeWeVoteId, classes }) => {
       <ChallengeParticipantList
         // participantList={latestParticipants}
         participantList={participantListDummyData}
+        uniqueExternalId={uniqueExternalId}
       />
       <Suspense fallback={<></>}>
         <FirstChallengeParticipantListController challengeWeVoteId={challengeWeVoteId} searchText="SEARCH TEXT HERE" />
@@ -136,6 +137,7 @@ ChallengeParticipantListRoot.propTypes = {
   // clearSearchFunction: PropTypes.func.isRequired,
   // searchFunction: PropTypes.func.isRequired,
   challengeWeVoteId: PropTypes.string,
+  uniqueExternalId: PropTypes.string,
 };
 
 const styles = () => ({
diff --git a/src/js/common/components/Navigation/ChallengeHeaderSimple.jsx b/src/js/common/components/Navigation/ChallengeHeaderSimple.jsx
index a267998cd..7d1ad6360 100644
--- a/src/js/common/components/Navigation/ChallengeHeaderSimple.jsx
+++ b/src/js/common/components/Navigation/ChallengeHeaderSimple.jsx
@@ -23,9 +23,7 @@ const ImageHandler = React.lazy(() => import(/* webpackChunkName: 'ImageHandler'
 // React functional component example
 function ChallengeHeaderSimple(props) {
   renderLog('ChallengeHeaderSimple');  // Set LOG_RENDER_EVENTS to log all renders
-  const { challengeTitle, challengeWeVoteId, classes, imageUrlLarge, goToChallengeHome } = props;
-  const avatarBackgroundImage = normalizedImagePath('../img/global/svg-icons/avatar-generic.svg');
-  const avatarCompressed = 'card-main__avatar-compressed';
+  const { challengeTitle, challengeWeVoteId, classes, challengePhotoLargeUrl, goToChallengeHome } = props;
 
   return (
     <ChallengeHeaderSimpleOuterContainer id="politicianHeaderContainer">
@@ -35,17 +33,10 @@ function ChallengeHeaderSimple(props) {
             <ChallengePhotoAndTitle
               id={`officeItemCompressedCandidateImageAndName-${challengeWeVoteId}`}
             >
-              {/* Candidate Image */}
-              <Suspense fallback={<></>}>
-                <ImageHandler
-                  className={avatarCompressed}
-                  sizeClassName="icon-candidate-small u-push--sm "
-                  imageUrl={imageUrlLarge}
-                  alt=""
-                  kind_of_ballot_item="CANDIDATE"
-                  style={{ backgroundImage: { avatarBackgroundImage } }}
-                />
-              </Suspense>
+              {/* Challenge Image */}
+              {challengePhotoLargeUrl && (
+                <ChallengeImageMedium src={challengePhotoLargeUrl} />
+              )}
               {/* Title of the Challenge */}
               <CandidateNameAndPartyWrapper>
                 <ChallengeNameH4>
@@ -87,7 +78,7 @@ ChallengeHeaderSimple.propTypes = {
   challengeTitle: PropTypes.string,
   challengeWeVoteId: PropTypes.string,
   classes: PropTypes.object,
-  imageUrlLarge: PropTypes.string,
+  challengePhotoLargeUrl: PropTypes.string,
 };
 
 const styles = () => ({
@@ -136,6 +127,15 @@ const ChallengeHeaderSimpleInnerContainer = styled('div')`
   width: 100%;
 `;
 
+const ChallengeImageMedium = styled('img')(({ theme }) => (`
+  border-radius: 12px;
+  height: 64px;
+  margin-right: 10px;
+  ${theme.breakpoints.up('sm')} {
+    height: 100px;
+  }
+`));
+
 const ChallengeNameH4 = styled('div')`
   font-weight: 400;
   font-size: 20px;
diff --git a/src/js/common/components/Style/ChallengeCardStyles.jsx b/src/js/common/components/Style/ChallengeCardStyles.jsx
new file mode 100644
index 000000000..631881dbb
--- /dev/null
+++ b/src/js/common/components/Style/ChallengeCardStyles.jsx
@@ -0,0 +1,170 @@
+import styled, { css } from 'styled-components';
+import DesignTokenColors from './DesignTokenColors';
+
+export const CandidateCardForListWrapper = styled('div', {
+  shouldForwardProp: (prop) => !['limitCardWidth'].includes(prop),
+})(({ limitCardWidth }) => (`
+  ${limitCardWidth ? 'width: 315px;' : ''}
+  white-space: normal;
+`));
+
+export const ChallengesNotAvailableToShow = styled('div')(({ theme }) => (`
+  color: #555;
+  // font-size: 18px;
+  text-align: left;
+  // margin: 0 2em 6em;
+  // ${theme.breakpoints.down('md')} {
+  //   font-size: 16px;
+  //   margin: 0 1em 5em;
+  // }
+`));
+
+export const ChallengeImageDesktopSharedStyles = css`
+  cursor: pointer;
+  margin: 0;
+`;
+
+export const ChallengeImageDesktopPlaceholder = styled('div', {
+  shouldForwardProp: (prop) => !['limitCardWidth', 'profileImageBackgroundColor', 'useVerticalCard'].includes(prop),
+})(({ limitCardWidth, profileImageBackgroundColor, useVerticalCard }) => (`
+  align-items: center;
+  background-color: ${profileImageBackgroundColor ||  DesignTokenColors.neutralUI50};
+  ${useVerticalCard ? `border: 1px solid ${DesignTokenColors.neutralUI100};` : ''}
+  ${useVerticalCard ? 'border-radius: 12px;' : ''}
+  display: flex;
+  ${limitCardWidth ? 'height: 157px;' : `${useVerticalCard ? 'height: 200px;' : 'height: 117px;'}`}
+  ${limitCardWidth ? 'min-height: 157px;' : `${useVerticalCard ? 'min-height: 200px;' : 'min-height: 117px;'}`}
+  justify-content: center;
+  ${limitCardWidth ? 'width: 300px;' : `${useVerticalCard ? 'width: 100%;' : 'width: 224px;'}`}
+  ${ChallengeImageDesktopSharedStyles}
+`));
+
+export const ChallengeImageDesktop = styled('img', {
+  shouldForwardProp: (prop) => !['limitCardWidth'].includes(prop),
+})(({ limitCardWidth }) => (`
+  // We don't want to set height/width here because this component is also used for very large versions of this image
+  // ${limitCardWidth ? 'height: 157px;' : 'height: 117px;'}
+  // ${limitCardWidth ? 'width: 300px;' : 'width: 224px;'}
+  ${ChallengeImageDesktopSharedStyles}
+`));
+
+export const ChallengeImageMobileSharedStyles = css`
+  cursor: pointer;
+  margin: 0;
+  max-width: 100%;
+`;
+
+export const ChallengeImageMobilePlaceholder = styled('div', {
+  shouldForwardProp: (prop) => !['profileImageBackgroundColor', 'useVerticalCard'].includes(prop),
+})(({ profileImageBackgroundColor, useVerticalCard }) => (`
+  align-items: center;
+  background-color: ${profileImageBackgroundColor || DesignTokenColors.neutralUI50};
+  ${useVerticalCard ? `border: 1px solid ${DesignTokenColors.neutralUI100};` : ''}
+  ${useVerticalCard ? 'border-radius: 12px;' : ''}
+  display: flex;
+  height: 157px;
+  justify-content: center;
+  max-height: 157px;
+  min-height: 157px;
+  ${ChallengeImageMobileSharedStyles}
+`));
+
+export const ChallengeImagePlaceholderText = styled('div')`
+  color: ${DesignTokenColors.neutralUI400};
+  margin-top: 0;
+`;
+
+export const ChallengeImageMobile = styled('img')`
+  max-height: 157px;
+  ${ChallengeImageMobileSharedStyles}
+`;
+
+export const ListWrapper = styled('div', {
+  shouldForwardProp: (prop) => !['useVerticalCard'].includes(prop),
+})(({ useVerticalCard }) => (`
+  display: flex;
+  ${useVerticalCard ? 'flex-direction: row;' : 'flex-direction: column;'}
+`));
+
+export const LoadMoreItemsManuallyWrapper = styled('div')`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  margin-bottom: 0;
+  min-width: 300px;
+  @media print{
+    display: none;
+  }
+`;
+
+// https://css-tricks.com/snippets/css/css-box-shadow/
+export const OneChallengeInnerWrapper = styled('div', {
+  shouldForwardProp: (prop) => !['hideCardMargins', 'useVerticalCard'].includes(prop),
+})(({ hideCardMargins, useVerticalCard }) => (`
+  // background-color: #fff;
+  ${useVerticalCard ? 'border-radius: 12px;' : ''}
+  ${hideCardMargins ? '' : 'box-shadow: 0 0 80px -16px rgba(46,55,77,.3);'}
+  display: flex;
+  ${useVerticalCard ? 'flex-direction: column-reverse;' : 'flex-direction: row;'}
+  ${useVerticalCard ? 'justify-content: flex-start;' : 'justify-content: space-between;'}
+  ${hideCardMargins ? '' : '&:hover { box-shadow: 0 20px 50px -16px rgba(46,55,77,.7); }'}
+`));
+
+export const OneChallengeOuterWrapper = styled('div', {
+  shouldForwardProp: (prop) => !['limitCardWidth'].includes(prop),
+})(({ limitCardWidth }) => (`
+  ${limitCardWidth ? 'margin-right: 15px;' : ''} // margin-bottom: 15px;
+  ${limitCardWidth ? 'height: 400px;' : ''}
+`));
+
+export const OneChallengePhotoDesktopColumn = styled('div', {
+  shouldForwardProp: (prop) => !['limitCardWidth', 'profileImageBackgroundColor', 'useVerticalCard'].includes(prop),
+})(({ hideCardMargins, limitCardWidth, profileImageBackgroundColor, useVerticalCard }) => (`
+  align-items: center;
+  ${profileImageBackgroundColor ? `background-color: ${profileImageBackgroundColor};` : 'background-color: #fff;'}
+  // ${useVerticalCard ? `border: 1px solid ${DesignTokenColors.neutralUI100};` : ''}
+  ${useVerticalCard ? 'border-radius: 12px;' : ''}
+  display: flex;
+  ${limitCardWidth ? 'height: 157px;' : `${useVerticalCard ? 'height: 200px;' : 'height: 117px;'}`}
+  justify-content: center;
+  ${useVerticalCard ? '' : 'margin-left: 15px;'}
+  ${useVerticalCard ? `${hideCardMargins ? 'margin: 0 0 6px 0;' : 'margin: 10px 10px 6px 10px;'}` : 'margin-bottom: 0; margin-top: 0;'}
+  ${limitCardWidth ? 'width: 276px;' : `${useVerticalCard ? '' : 'width: 224px;'}`}
+`));
+
+export const OneChallengePhotoWrapperMobile = styled('div')(({ theme }) => (`
+  border-radius: 12px;
+  cursor: pointer;
+  margin-bottom: 8px;
+  margin-top: 8px;
+  height: 157px;
+  min-height: 157px;
+  max-height: 157px;
+  ${theme.breakpoints.down('xs')} {
+    margin-top: 0;
+    min-height: auto;
+    width: 100%;
+  }
+`));
+
+export const OneChallengeTextColumn = styled('div', {
+  shouldForwardProp: (prop) => !['hideCardMargins'].includes(prop),
+})(({ hideCardMargins }) => (`
+  ${hideCardMargins ? 'padding: 0 0 10px 0;' : 'padding: 0 10px;'}
+`));
+
+export const OneChallengeTitleLink = styled('h1')(({ theme }) => (`
+  font-size: 22px;
+  margin: 0;
+  margin-bottom: 4px;
+  ${theme.breakpoints.down('sm')} {
+    // margin-bottom: 4px;
+  }
+`));
+
+export const TitleAndTextWrapper = styled('div', {
+  shouldForwardProp: (prop) => !['hideCardMargins'].includes(prop),
+})(({ hideCardMargins }) => (`
+  ${hideCardMargins ? '' : 'height: 60px;'}
+`));
diff --git a/src/js/common/pages/Challenge/ChallengeHomePage.jsx b/src/js/common/pages/Challenge/ChallengeHomePage.jsx
index 51a7c6b39..c12beb1d1 100644
--- a/src/js/common/pages/Challenge/ChallengeHomePage.jsx
+++ b/src/js/common/pages/Challenge/ChallengeHomePage.jsx
@@ -11,7 +11,6 @@ import ChallengeInviteFriendsTopNavigation from '../../components/Navigation/Cha
 import DesignTokenColors from '../../components/Style/DesignTokenColors';
 import { PageContentContainer } from '../../../components/Style/pageLayoutStyles';
 import webAppConfig from '../../../config';
-// import AnalyticsActions from '../../../actions/AnalyticsActions';
 import BallotActions from '../../../actions/BallotActions';
 import ChallengeParticipantStore from '../../stores/ChallengeParticipantStore';
 import ChallengeStore from '../../stores/ChallengeStore';
@@ -24,9 +23,6 @@ import {
   CommentsListWrapper, DetailsSectionDesktopTablet, DetailsSectionMobile, SupportButtonFooterWrapperAboveFooterButtons, SupportButtonPanel,
 } from '../../components/Style/CampaignDetailsStyles';
 import { EditIndicator, IndicatorButtonWrapper, IndicatorRow } from '../../components/Style/CampaignIndicatorStyles';
-import {
-  SectionTitleSimple,
-} from '../../components/Style/PoliticianDetailsStyles';
 import { PageWrapper } from '../../components/Style/stepDisplayStyles';
 import DelayedLoad from '../../components/Widgets/DelayedLoad';
 import LinkToAdminTools from '../../components/Widgets/LinkToAdminTools';
@@ -506,9 +502,6 @@ class ChallengeHomePage extends Component {
     const challengeDescriptionJsx = (
       <CampaignDescription>
         <AboutAndEditFlex>
-          <SectionTitleSimple>
-            About
-          </SectionTitleSimple>
           <div>
             <Suspense fallback={<span>&nbsp;</span>}>
               <UpdateChallengeInformation challengeTitle={challengeTitle} />
@@ -593,7 +586,10 @@ class ChallengeHomePage extends Component {
               <>
                 {tabSelectedChosen === 'leaderboard' ? (
                   <LeaderboardSectionWrapper>
-                    <ChallengeParticipantListRoot challengeWeVoteId={challengeWeVoteIdForDisplay} />
+                    <ChallengeParticipantListRoot
+                      challengeWeVoteId={challengeWeVoteIdForDisplay}
+                      uniqueExternalId="mobile"
+                    />
                   </LeaderboardSectionWrapper>
                 ) : (
                   <AboutSectionWrapper>
@@ -640,11 +636,6 @@ class ChallengeHomePage extends Component {
                 {challengeDescription && (
                   <DelayedLoad waitBeforeShow={250}>
                     <CampaignDescription>
-                      <AboutAndEditFlex>
-                        <SectionTitleSimple>
-                          About
-                        </SectionTitleSimple>
-                      </AboutAndEditFlex>
                       <ReadMore numberOfLines={6} textToDisplay={challengeDescription} />
                     </CampaignDescription>
                   </DelayedLoad>
@@ -662,16 +653,6 @@ class ChallengeHomePage extends Component {
                   {challengeDataFound && (
                     <DelayedLoad waitBeforeShow={250}>
                       <CampaignDescriptionDesktop>
-                        <AboutAndEditFlex>
-                          <SectionTitleSimple>
-                            About
-                          </SectionTitleSimple>
-                          <div>
-                            <Suspense fallback={<span>&nbsp;</span>}>
-                              <UpdateChallengeInformation politicianName={challengeTitle} />
-                            </Suspense>
-                          </div>
-                        </AboutAndEditFlex>
                         {challengeDescription ? (
                           <ReadMore numberOfLines={6} textToDisplay={challengeDescription} />
                         ) : (
@@ -717,7 +698,10 @@ class ChallengeHomePage extends Component {
                   </FriendsSectionWrapper>
                 ) : (
                   <LeaderboardSectionWrapper>
-                    <ChallengeParticipantListRoot challengeWeVoteId={challengeWeVoteIdForDisplay} />
+                    <ChallengeParticipantListRoot
+                      challengeWeVoteId={challengeWeVoteIdForDisplay}
+                      uniqueExternalId="desktop"
+                    />
                   </LeaderboardSectionWrapper>
                 )}
                 {/* {commentListTeaserHtml} */}
diff --git a/src/js/common/pages/ChallengeInviteFriends/ChallengeInviteCustomizeMessage.jsx b/src/js/common/pages/ChallengeInviteFriends/ChallengeInviteCustomizeMessage.jsx
index 8c5126b0d..54a13e077 100644
--- a/src/js/common/pages/ChallengeInviteFriends/ChallengeInviteCustomizeMessage.jsx
+++ b/src/js/common/pages/ChallengeInviteFriends/ChallengeInviteCustomizeMessage.jsx
@@ -235,9 +235,8 @@ class ChallengeInviteCustomizeMessage extends Component {
     renderLog('ChallengeInviteCustomizeMessage');  // Set LOG_RENDER_EVENTS to log all renders
     const { classes } = this.props;
     const {
-      challengeSEOFriendlyPath, challengeTitle,
+      challengePhotoLargeUrl, challengeSEOFriendlyPath, challengeTitle,
       challengeWeVoteId, chosenWebsiteName,
-      voterPhotoUrlLarge,
     } = this.state;
     const htmlTitle = `Why do you support ${challengeTitle}? - ${chosenWebsiteName}`;
     return (
@@ -248,6 +247,7 @@ class ChallengeInviteCustomizeMessage extends Component {
         </Helmet>
         <ChallengeHeaderSimple
           challengeBasePath={this.getChallengeBasePath()}
+          challengePhotoLargeUrl={challengePhotoLargeUrl}
           challengeTitle={challengeTitle}
           challengeWeVoteId={challengeWeVoteId}
           goToChallengeHome={this.goToChallengeHome}
diff --git a/src/js/common/pages/ChallengeInviteFriends/ChallengeInviteFriends.jsx b/src/js/common/pages/ChallengeInviteFriends/ChallengeInviteFriends.jsx
index 4de4a56c5..8ebb85f2c 100644
--- a/src/js/common/pages/ChallengeInviteFriends/ChallengeInviteFriends.jsx
+++ b/src/js/common/pages/ChallengeInviteFriends/ChallengeInviteFriends.jsx
@@ -237,7 +237,7 @@ class ChallengeInviteFriends extends Component {
   render () {
     renderLog('ChallengeInviteFriends');  // Set LOG_RENDER_EVENTS to log all renders
     const {
-      challengeSEOFriendlyPath, challengeTitle,
+      challengePhotoLargeUrl, challengeSEOFriendlyPath, challengeTitle,
       challengeWeVoteId, chosenWebsiteName,
     } = this.state;
     const htmlTitle = `Invite your friends - ${chosenWebsiteName}`;
@@ -249,6 +249,7 @@ class ChallengeInviteFriends extends Component {
         </Helmet>
         <ChallengeHeaderSimple
           challengeBasePath={this.getChallengeBasePath()}
+          challengePhotoLargeUrl={challengePhotoLargeUrl}
           challengeTitle={challengeTitle}
           challengeWeVoteId={challengeWeVoteId}
           goToChallengeHome={this.goToChallengeHome}
diff --git a/src/js/common/pages/ChallengeInviteFriends/ChallengeInviteFriendsJoin.jsx b/src/js/common/pages/ChallengeInviteFriends/ChallengeInviteFriendsJoin.jsx
index 97df833f1..274f6e6ce 100644
--- a/src/js/common/pages/ChallengeInviteFriends/ChallengeInviteFriendsJoin.jsx
+++ b/src/js/common/pages/ChallengeInviteFriends/ChallengeInviteFriendsJoin.jsx
@@ -21,7 +21,7 @@ import commonMuiStyles from '../../components/Style/commonMuiStyles';
 import { ContentInnerWrapperDefault, ContentOuterWrapperDefault, PageWrapperDefault } from '../../components/Style/PageWrapperStyles';
 import AppObservableStore, { messageService } from '../../stores/AppObservableStore';
 import ChallengeStore from '../../stores/ChallengeStore';
-import ChallengeParticipantStore from '../../stores/ChallengeParticipantStore';
+// import ChallengeParticipantStore from '../../stores/ChallengeParticipantStore';
 import { getChallengeValuesFromIdentifiers, retrieveChallengeFromIdentifiersIfNeeded } from '../../utils/challengeUtils';
 import historyPush from '../../utils/historyPush';
 import initializejQuery from '../../utils/initializejQuery';
@@ -32,7 +32,6 @@ import apiCalming from '../../utils/apiCalming';
 import SettingsWidgetFirstLastName from '../../../components/Settings/SettingsWidgetFirstLastName';
 
 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'));
 
 
@@ -209,7 +208,7 @@ class ChallengeInviteFriendsJoin extends Component {
 
   joinChallengeNowSubmitPart2 = () => {
     const { challengeWeVoteId } = this.state;
-    // console.log('ChallengeInviteFriendsJoin, joinChallengeNowSubmitPart2, challengeWeVoteId:', challengeWeVoteId);
+    console.log('ChallengeInviteFriendsJoin, joinChallengeNowSubmitPart2, challengeWeVoteId:', challengeWeVoteId);
     if (challengeWeVoteId) {
       // const participantEndorsementQueuedToSave = ChallengeParticipantStore.getSupporterEndorsementQueuedToSave();
       // const participantEndorsementQueuedToSaveSet = ChallengeParticipantStore.getSupporterEndorsementQueuedToSaveSet();
@@ -231,6 +230,7 @@ class ChallengeInviteFriendsJoin extends Component {
       // }
       const voterPhotoQueuedToSave = VoterStore.getVoterPhotoQueuedToSave();
       const voterPhotoQueuedToSaveSet = VoterStore.getVoterPhotoQueuedToSaveSet();
+      console.log('ChallengeInviteFriendsJoin, voterPhotoQueuedToSave:', voterPhotoQueuedToSave, ', voterPhotoQueuedToSaveSet:', voterPhotoQueuedToSaveSet);
       if (voterPhotoQueuedToSaveSet) {
         initializejQuery(() => {
           VoterActions.voterPhotoSave(voterPhotoQueuedToSave, voterPhotoQueuedToSaveSet);
@@ -252,11 +252,12 @@ class ChallengeInviteFriendsJoin extends Component {
     renderLog('ChallengeInviteFriendsJoin');  // Set LOG_RENDER_EVENTS to log all renders
     const { classes } = this.props;
     const {
-      challengeSEOFriendlyPath, challengeTitle,
+      challengePhotoLargeUrl, challengeSEOFriendlyPath, challengeTitle,
       challengeWeVoteId, chosenWebsiteName,
-      triggerVotingPlanSave, voterPhotoUrlLarge,
+      triggerVotingPlanSave,
     } = this.state;
     const htmlTitle = `Join now: ${challengeTitle}? - ${chosenWebsiteName}`;
+    const pigsCanFly = false;
     return (
       <div>
         <Helmet>
@@ -265,6 +266,7 @@ class ChallengeInviteFriendsJoin extends Component {
         </Helmet>
         <ChallengeHeaderSimple
           challengeBasePath={this.getChallengeBasePath()}
+          challengePhotoLargeUrl={challengePhotoLargeUrl}
           challengeTitle={challengeTitle}
           challengeWeVoteId={challengeWeVoteId}
           goToChallengeHome={this.goToChallengeHome}
@@ -311,17 +313,19 @@ class ChallengeInviteFriendsJoin extends Component {
                   {/* </VisibleToPublicCheckboxWrapper> */}
                 </CampaignSupportSection>
               </CampaignSupportSectionWrapper>
-              <CampaignSupportSectionWrapper>
-                <CampaignSupportSection>
-                  <ChallengeH2>
-                    3. Why you will vote
-                    {' '}
-                    <HeaderAddendum>
-                      (optional, visible to all)
-                    </HeaderAddendum>
-                  </ChallengeH2>
-                </CampaignSupportSection>
-              </CampaignSupportSectionWrapper>
+              {pigsCanFly && (
+                <CampaignSupportSectionWrapper>
+                  <CampaignSupportSection>
+                    <ChallengeH2>
+                      3. Why you will vote
+                      {' '}
+                      <HeaderAddendum>
+                        (optional, visible to all)
+                      </HeaderAddendum>
+                    </ChallengeH2>
+                  </CampaignSupportSection>
+                </CampaignSupportSectionWrapper>
+              )}
             </ContentInnerWrapperDefault>
           </ContentOuterWrapperDefault>
         </PageWrapperDefault>
@@ -410,8 +414,4 @@ const StackedDiv = styled('div')`
   max-width: 620px;
 `;
 
-const VisibleToPublicCheckboxWrapper = styled('div')`
-  min-height: 25px;
-`;
-
 export default withStyles(commonMuiStyles)(ChallengeInviteFriendsJoin);
diff --git a/src/js/common/pages/ChallengeStart/ChallengeStartPreview.jsx b/src/js/common/pages/ChallengeStart/ChallengeStartPreview.jsx
index 8bd8a308d..690fce93e 100644
--- a/src/js/common/pages/ChallengeStart/ChallengeStartPreview.jsx
+++ b/src/js/common/pages/ChallengeStart/ChallengeStartPreview.jsx
@@ -64,8 +64,9 @@ class ChallengeStartPreview extends Component {
     const challengeTitle = ChallengeStartStore.getChallengeTitle();
     const step1Completed = ChallengeStartStore.challengeTitleExists();
     const step2Completed = ChallengeStartStore.challengeDescriptionExists();
-    const step3Completed = ChallengeStartStore.challengePhotoExists();
-    const readyToPublish = step1Completed && step2Completed && step3Completed;
+    // const step3Completed = ChallengeStartStore.challengePhotoExists();
+    // const readyToPublish = step1Completed && step2Completed && step3Completed;
+    const readyToPublish = step1Completed && step2Completed;
     this.setState({
       challengeDescription,
       challengePhotoLargeUrl,
@@ -96,7 +97,7 @@ class ChallengeStartPreview extends Component {
       // Mark the challenge as published
       const challengeWeVoteId = '';
       ChallengeStartActions.inDraftModeSave(challengeWeVoteId, false);
-      historyPush('/profile/started');
+      historyPush(`/+/${challengeWeVoteId}`);
     }
   }
 
@@ -115,7 +116,7 @@ class ChallengeStartPreview extends Component {
     // Mark the challenge as published
     const challengeWeVoteId = '';
     ChallengeStartActions.inDraftModeSave(challengeWeVoteId, false);
-    historyPush('/profile/started');
+    historyPush(`/+/${challengeWeVoteId}`);
   }
 
   render () {