Merge pull request #4104 from DaleMcGrew/Dale_WebApp_Oct10b-2024

Inviting friend to Challenge now creates functioning SharedItem on back end. Consolidating font-color to main.css. Bulk update of "all of the" to "all the".
wevote · Oct 10, 2024 · 2e3d6a7 · 2e3d6a7
2 parents 4741754 + 48d4cca
commit 2e3d6a7
Show file tree

Hide file tree

Showing 31 changed files with 218 additions and 105 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -411,6 +411,7 @@ class App extends Component {
                   <Route path="/-:shared_item_code" exact component={SharedItemLanding} />
                   <Route exact path="/+/:challengeWeVoteId/" render={(props) => <ChallengeHomePage match={props.match} />} />
                   <Route exact path="/+/:challengeWeVoteId/edit" render={(props) => <ChallengeStartEditAll match={props.match} editExistingChallenge setShowHeaderFooter={this.setShowHeaderFooter} />} />
+                  <Route exact path="/:challengeSEOFriendlyPath/+/-:shared_item_code" 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} />} />
@@ -737,14 +738,14 @@ class App extends Component {
 }
 
 const WeVoteBody = styled('div')`
-  background-color: #fff; // rgb(235, 236, 238); // #fafafa;
-  color: #000;
+  // We rely on many of these from the body from main.css, including:
+  //background-color: #fff; // rgb(235, 236, 238); // #fafafa;
+  //color: #000;
+  //font-family: "Poppins", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  //line-height: 1.4;
+  // margin: 0 auto;
+
   display: block;
-  font-family: "Poppins", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  line-height: 1.4;
-  margin: 0 auto;
-  // max-width: 960px;
-  //height: 100vw;
   position: relative;
   z-index: 0;
   // this debug technique works!  ${() => console.log('-----------------------------')}

diff --git a/src/css/main.css b/src/css/main.css
@@ -59,8 +59,8 @@ body {
   font-style:normal;
   font-weight:normal;
   letter-spacing:.15px;
-  line-height:24px;
-  margin:0;
+  line-height: 1.4;
+  margin:0 auto;
   text-align:left
 }
 

diff --git a/...g/global/svg-icons/issues/rocket-ship.svg → src/img/global/svg-icons/rocket-ship.svg b/...g/global/svg-icons/issues/rocket-ship.svg → src/img/global/svg-icons/rocket-ship.svg
diff --git a/src/js/actions/ReadyActions.js b/src/js/actions/ReadyActions.js
@@ -2,7 +2,7 @@ import Dispatcher from '../common/dispatcher/Dispatcher';
 
 export default {
   voterPlansForVoterRetrieve (year = 0, month = 0, googleCivicElectionId = 0, stateCode = '') {
-    // Retrieve the click statistics for all of the items you have shared
+    // Retrieve the click statistics for all the items you have shared
     return Dispatcher.loadEndpoint('voterPlansForVoterRetrieve', {
       google_civic_election_id: googleCivicElectionId,
       month,

diff --git a/src/js/common/actions/ChallengeInviteeActions.js b/src/js/common/actions/ChallengeInviteeActions.js
@@ -16,11 +16,13 @@ export default {
       });
   },
 
-  challengeInviteeSave (challengeWeVoteId, inviteeId = 0, inviteeName = '', inviteeNameChanged = false, inviteTextFromInviter = '', inviteTextFromInviterChanged = false, inviteeUrlCode = '', inviteeUrlCodeChanged = false) {
+  challengeInviteeSave (challengeWeVoteId, destinationFullURL = '', googleCivicElectionId = 0, inviteeId = 0, inviteeName = '', inviteeNameChanged = false, inviteTextFromInviter = '', inviteTextFromInviterChanged = false, inviteeUrlCode = '', inviteeUrlCodeChanged = false) {
     // console.log('challengeInviteeSave called with challengeWeVoteId: ', challengeWeVoteId, ' and inviteeName: ', inviteeName);
     Dispatcher.loadEndpoint('challengeInviteeSave',
       {
         challenge_we_vote_id: challengeWeVoteId,
+        destination_full_url: destinationFullURL,
+        google_civic_election_id: googleCivicElectionId,
         invitee_id: inviteeId,
         invitee_name: inviteeName,
         invitee_name_changed: inviteeNameChanged,

diff --git a/src/js/common/actions/ShareActions.js b/src/js/common/actions/ShareActions.js
@@ -28,7 +28,7 @@ export default {
   },
 
   sharedItemListRetrieve (year = 0, month = 0, googleCivicElectionId = 0, stateCode = '') {
-    // Retrieve the click statistics for all of the items you have shared
+    // Retrieve the click statistics for all the items you have shared
     return Dispatcher.loadEndpoint('sharedItemListRetrieve', {
       google_civic_election_id: googleCivicElectionId,
       month,

diff --git a/src/js/common/components/Challenge/ThanksForViewingChallenge.jsx b/src/js/common/components/Challenge/ThanksForViewingChallenge.jsx
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import Confetti from 'react-confetti';
 import React, { useState, useEffect } from 'react';
 
-const ThanksForViewingChallenge = ({ challengeOwner }) => {
+const ThanksForViewingChallenge = ({ sharedByDisplayName }) => {
   const [isClosing, setIsClosing] = useState(false);
   const [showConfetti, setShowConfetti] = useState(false);
 
@@ -33,10 +33,18 @@ const ThanksForViewingChallenge = ({ challengeOwner }) => {
         <ThankYouMessageWrapper>
           <ThankYouMessage>
             {showConfetti && <Confetti />}
-            Thanks for confirming
-            the link from&nbsp;
-            {challengeOwner}
-            !
+            Thanks for checking out this challenge
+            {sharedByDisplayName && (
+              <>
+                {' '}
+                your friend
+                {' '}
+                {sharedByDisplayName}
+                {' '}
+                has shared with you
+              </>
+            )}
+            ! Join the challenge below.
           </ThankYouMessage>
           <CloseMessageIconWrapper>
             <IconButton
@@ -55,7 +63,7 @@ const ThanksForViewingChallenge = ({ challengeOwner }) => {
   );
 };
 ThanksForViewingChallenge.propTypes = {
-  challengeOwner: PropTypes.string.isRequired,
+  sharedByDisplayName: PropTypes.string,
 };
 
 const CloseMessageIconWrapper = styled.div`

diff --git a/src/js/common/components/ChallengeInviteFriends/InviteFriendToChallengeInput.jsx b/src/js/common/components/ChallengeInviteFriends/InviteFriendToChallengeInput.jsx
@@ -17,6 +17,8 @@ const InviteFriendToChallengeInput = ({ classes, challengeWeVoteId, externalUniq
   renderLog('InviteFriendToChallengeInputBox');  // Set LOG_RENDER_EVENTS to log all renders
   const [challengeInviteTextDefault, setChallengeInviteTextDefault] = React.useState('');
   const [challengeTitle, setChallengeTitle] = React.useState('');
+  const [destinationFullURL, setDestinationFullURL] = React.useState('');
+  const [googleCivicElectionId, setGoogleCivicElectionId] = React.useState(0);
   const [inviteCopiedMessageOn, setInviteCopiedMessageOn] = React.useState(false);
   const [inviteeName, setInviteeName] = React.useState('');
   const [inviterName, setInviterName] = React.useState('');
@@ -31,9 +33,11 @@ const InviteFriendToChallengeInput = ({ classes, challengeWeVoteId, externalUniq
     inviteTextToSendTemp1 += inviterFirstName ? `, this is ${inviterFirstName}. ` : ', ';
     const inviteTextToSendTemp2 = inviteTextForFriends || challengeInviteTextDefault;
     const inviteeUrlCode = ChallengeInviteeStore.getNextInviteeUrlCode();
-    const urlToSendTemp = `${ChallengeStore.getSiteUrl(challengeWeVoteId)}/++/${inviteeUrlCode}`;
+    const urlToSendTemp = `${ChallengeStore.getSiteUrl(challengeWeVoteId)}/-${inviteeUrlCode}`;
     const inviteTextToSendTemp3 = `${inviteTextToSendTemp1}${inviteTextToSendTemp2} ${urlToSendTemp}`;
     setInviteTextToSend(inviteTextToSendTemp3);
+    const SEOFriendlyPath = ChallengeStore.getChallengeSEOFriendlyPathByWeVoteId(challengeWeVoteId);
+    setDestinationFullURL(`${ChallengeStore.getSiteUrl(challengeWeVoteId)}/${SEOFriendlyPath}/+/`);
     // setUrlToSend(urlToSendTemp);
   }
 
@@ -46,13 +50,21 @@ const InviteFriendToChallengeInput = ({ classes, challengeWeVoteId, externalUniq
 
   const handleShare = async () => {
     const inviteeUrlCode = ChallengeInviteeStore.getNextInviteeUrlCode();
-    ChallengeInviteeActions.challengeInviteeSave(challengeWeVoteId, 0, inviteeName, true, inviteTextToSend, true, inviteeUrlCode, true);
+    ChallengeInviteeActions.challengeInviteeSave(
+      challengeWeVoteId,
+      destinationFullURL,
+      googleCivicElectionId,
+      0,
+      inviteeName, true,
+      inviteTextToSend, true,
+      inviteeUrlCode, true,
+    );
     setInviteCopiedMessageOn(true);
     setTimeout(() => {
       console.log('handleShare setTimeout fired');
       setInviteCopiedMessageOn(false);
       resetForm();
-    }, 1000);
+    }, 2000);
     if (navigator.share) {
       try {
         await navigator.share({
@@ -84,30 +96,37 @@ const InviteFriendToChallengeInput = ({ classes, challengeWeVoteId, externalUniq
     };
 
     const onChallengeParticipantStoreChange = () => {
-      setInviterName(VoterStore.getFirstName());
       setInviteTextForFriends(ChallengeParticipantStore.getInviteTextForFriends(challengeWeVoteId));
       prepareInviteTextToSend();
     };
 
     const onChallengeStoreChange = () => {
-      setInviterName(VoterStore.getFirstName());
       setChallengeInviteTextDefault(ChallengeStore.getChallengeInviteTextDefaultByWeVoteId(challengeWeVoteId));
       setChallengeTitle(ChallengeStore.getChallengeTitleByWeVoteId(challengeWeVoteId));
       prepareInviteTextToSend();
     };
 
+    const onVoterStoreChange = () => {
+      setGoogleCivicElectionId(VoterStore.electionId());
+      setInviterName(VoterStore.getFirstName());
+      prepareInviteTextToSend();
+    };
+
     // console.log('Fetching participants for:', challengeWeVoteId);
     const challengeInviteeStoreListener = ChallengeInviteeStore.addListener(onChallengeInviteeStoreChange);
     onChallengeParticipantStoreChange();
     const challengeParticipantStoreListener = ChallengeParticipantStore.addListener(onChallengeParticipantStoreChange);
     onChallengeParticipantStoreChange();
     const challengeStoreListener = ChallengeStore.addListener(onChallengeStoreChange);
     onChallengeStoreChange();
+    const voterStoreListener = VoterStore.addListener(onVoterStoreChange);
+    onVoterStoreChange();
 
     return () => {
       challengeInviteeStoreListener.remove();
       challengeParticipantStoreListener.remove();
       challengeStoreListener.remove();
+      voterStoreListener.remove();
     };
   }, [challengeWeVoteId]);
 

diff --git a/src/js/common/components/ChallengeInviteeListRoot/ChallengeInviteeListRoot.jsx b/src/js/common/components/ChallengeInviteeListRoot/ChallengeInviteeListRoot.jsx
@@ -7,7 +7,7 @@ import FirstChallengeInviteeListController from './FirstChallengeInviteeListCont
 import AppObservableStore, { messageService } from '../../stores/AppObservableStore';
 import ChallengeInviteeStore from '../../stores/ChallengeInviteeStore';
 import DesignTokenColors from '../Style/DesignTokenColors';
-import ChallengeParticipantStore from "../../stores/ChallengeParticipantStore";
+import ChallengeParticipantStore from '../../stores/ChallengeParticipantStore';
 
 const ChallengeParticipantFirstRetrieveController = React.lazy(() => import(/* webpackChunkName: 'ChallengeParticipantFirstRetrieveController' */ '../ChallengeParticipant/ChallengeParticipantFirstRetrieveController'));
 

diff --git a/src/js/common/components/ChallengeInviteeListRoot/InviteAgainButton.jsx b/src/js/common/components/ChallengeInviteeListRoot/InviteAgainButton.jsx
@@ -107,7 +107,7 @@ const InviteAgainButton = ({ classes, challengeWeVoteId, challengeInviteeId }) =
     }
     // console.log('challengeInviteTextDefault: ', challengeInviteTextDefault);
     const inviteeUrlCode = ChallengeInviteeStore.getNextInviteeUrlCode();
-    const urlToSendTemp = `${ChallengeStore.getSiteUrl(challengeWeVoteId)}/++/${inviteeUrlCode}`;
+    const urlToSendTemp = `${ChallengeStore.getSiteUrl(challengeWeVoteId)}/-${inviteeUrlCode}`;
     const inviteTextToSendTemp3 = `${inviteTextToSendTemp1}${inviteTextToSendTemp2} ${urlToSendTemp}`;
     setInviteTextToSend(inviteTextToSendTemp3);
     // setUrlToSend(urlToSendTemp);

diff --git a/src/js/common/components/Navigation/ChallengeInviteSteps.jsx b/src/js/common/components/Navigation/ChallengeInviteSteps.jsx
@@ -39,6 +39,12 @@ class ChallengeInviteSteps extends React.Component {
     return 1;
   };
 
+  // Check if a step is active based on the current step number
+  // isStepActive = (stepNumber) => this.props.currentStep === stepNumber;
+
+  // Set a step as active when clicked
+  isStepActive = (stepNumber) => this.state.activeStep === stepNumber;
+
   // Get the path for the challenge
   getChallengeBasePath = () => {
     const { challengeSEOFriendlyPath, challengeWeVoteId } = this.props;
@@ -51,9 +57,6 @@ class ChallengeInviteSteps extends React.Component {
     return challengeBasePath;
   };
 
-  // Set a step as active when clicked
-  isStepActive = (stepNumber) => this.state.activeStep === stepNumber;
-
   // Update the active step when the link is clicked
   handleStepClick = (stepNumber) => {
     this.setState({ activeStep: stepNumber });
@@ -146,6 +149,7 @@ class ChallengeInviteSteps extends React.Component {
 }
 
 ChallengeInviteSteps.propTypes = {
+  currentStep: PropTypes.number.isRequired,
   challengeSEOFriendlyPath: PropTypes.string,
   challengeWeVoteId: PropTypes.string,
   location: PropTypes.object.isRequired,

diff --git a/src/js/common/components/PrivacyBody.jsx b/src/js/common/components/PrivacyBody.jsx
@@ -171,7 +171,7 @@ export default class PrivacyBody extends Component {
               </tr>
               <tr>
                 <TdColumn1>Who you Follow on Twitter</TdColumn1>
-                <TdColumn2>When you sign in with Twitter, all of the Twitter accounts you follow on Twitter which have endorsements stored in WeVote, are displayed on your profile</TdColumn2>
+                <TdColumn2>When you sign in with Twitter, all the Twitter accounts you follow on Twitter which have endorsements stored in WeVote, are displayed on your profile</TdColumn2>
                 <TdColumn3>Yes</TdColumn3>
                 <TdColumn4>No</TdColumn4>
               </tr>

diff --git a/src/js/common/components/Settings/CompleteYourProfile.jsx b/src/js/common/components/Settings/CompleteYourProfile.jsx
@@ -296,7 +296,7 @@ class CompleteYourProfile extends Component {
       } else {
         buttonText = 'Help them win';
       }
-      introductionText = <span>Leading up to election day, WeVote.US will remind you to vote for all of the candidates you support. We keep your email secure and confidential.</span>;
+      introductionText = <span>Leading up to election day, WeVote.US will remind you to vote for all the candidates you support. We keep your email secure and confidential.</span>;
     } else if (supportCampaignOnCampaignHome) {
       if (voterCanVoteForPoliticianInCampaign) {
         buttonText = 'Support with my vote';

diff --git a/src/js/common/pages/Challenge/ChallengeHomePage.jsx b/src/js/common/pages/Challenge/ChallengeHomePage.jsx
@@ -44,6 +44,7 @@ import ChallengeAbout from '../../components/Challenge/ChallengeAbout';
 import ChallengeParticipantListRoot from '../../components/ChallengeParticipantListRoot/ChallengeParticipantListRoot';
 import ChallengeInviteeListRoot from '../../components/ChallengeInviteeListRoot/ChallengeInviteeListRoot';
 import ThanksForViewingChallenge from '../../components/Challenge/ThanksForViewingChallenge'
+import ShareStore from '../../stores/ShareStore';
 
 const ChallengeCardForList = React.lazy(() => import(/* webpackChunkName: 'ChallengeCardForList' */ '../../components/ChallengeListRoot/ChallengeCardForList'));
 // const ChallengeCommentsList = React.lazy(() => import(/* webpackChunkName: 'ChallengeCommentsList' */ '../../components/Challenge/ChallengeCommentsList'));
@@ -108,6 +109,7 @@ class ChallengeHomePage extends Component {
       challengeWeVoteIdForDisplay: '', // Value for challenge already received
       sharingStepCompleted: false,
       step2Completed: false,
+      thanksForViewingChallengeOn: false,
       voterCanEditThisChallenge: false,
     };
     // this.onScroll = this.onScroll.bind(this);
@@ -116,7 +118,11 @@ class ChallengeHomePage extends Component {
   componentDidMount () {
     // console.log('ChallengeHomePage componentDidMount');
     const { match: { params } } = this.props;
-    const { challengeSEOFriendlyPath: challengeSEOFriendlyPathFromUrl, challengeWeVoteId } = params;
+    const {
+      challengeSEOFriendlyPath: challengeSEOFriendlyPathFromUrl,
+      challengeWeVoteId,
+      shared_item_code: sharedItemCodeIncoming,
+    } = params;
     // console.log('ChallengeHomePage componentDidMount tabSelected: ', tabSelected);
     // console.log('componentDidMount challengeSEOFriendlyPathFromUrl: ', challengeSEOFriendlyPathFromUrl, ', challengeWeVoteId: ', challengeWeVoteId);
     this.onAppObservableStoreChange();
@@ -162,6 +168,20 @@ class ChallengeHomePage extends Component {
       }
     }, 5000);  // April 19, 2021: Tuned to keep performance above 83.  LCP at 597ms
 
+    // If we came in through a sharedItem link and then redirected to this page, fetch the shared item details
+    const sharedItem = ShareStore.getSharedItemByCode(sharedItemCodeIncoming);
+    // console.log('sharedItem:', sharedItem);
+    if (sharedItem && sharedItem.shared_by_display_name) {
+      const {
+        shared_by_display_name: sharedByDisplayName,
+        // shared_by_first_name: sharedByFirstName,
+      } = sharedItem;
+      this.setState({
+        sharedByDisplayName,
+        thanksForViewingChallengeOn: true,
+      });
+    }
+
     // console.log('componentDidMount triggerSEOPathRedirect: ', triggerSEOPathRedirect, ', challengeSEOFriendlyPathFromObject: ', challengeSEOFriendlyPathFromObject);
     if (triggerSEOPathRedirect && challengeSEOFriendlyPathFromObject) {
       historyPush(`/${challengeSEOFriendlyPathFromObject}/+/`, true);
@@ -453,12 +473,9 @@ class ChallengeHomePage extends Component {
       challengeDataFound, challengeDataNotFound,
       challengeDescription, challengeDescriptionLimited, challengeImageUrlLarge,
       challengeSEOFriendlyPath, challengeSEOFriendlyPathForDisplay,
-      challengeTitle,
-      challengeWeVoteIdForDisplay,
-      scrolledDown,
-      voterCanEditThisChallenge,
-      voterIsChallengeParticipant,
-      voterWeVoteId,
+      challengeTitle, challengeWeVoteIdForDisplay,
+      scrolledDown, sharedByDisplayName, thanksForViewingChallengeOn,
+      voterCanEditThisChallenge, voterIsChallengeParticipant, voterWeVoteId,
     } = this.state;
     // console.log('ChallengeHomePage render challengeSEOFriendlyPath: ', challengeSEOFriendlyPath, ', challengeSEOFriendlyPathForDisplay: ', challengeSEOFriendlyPathForDisplay);
     const challengeAdminEditUrl = `${webAppConfig.WE_VOTE_SERVER_ROOT_URL}challenge/${challengeWeVoteId}/summary`;
@@ -520,10 +537,11 @@ class ChallengeHomePage extends Component {
     );
     return (
       <PageContentContainer>
-        <ThanksForViewingChallenge
-           userName="User Name"
-           challengeOwner="David"
-        />
+        {thanksForViewingChallengeOn && (
+          <ThanksForViewingChallenge
+             sharedByDisplayName={sharedByDisplayName}
+          />
+        )}
         <Suspense fallback={<span>&nbsp;</span>}>
           <ChallengeRetrieveController
             challengeSEOFriendlyPath={challengeSEOFriendlyPath}

diff --git a/src/js/common/pages/ChallengeInviteFriends/ChallengeInviteCustomizeMessage.jsx b/src/js/common/pages/ChallengeInviteFriends/ChallengeInviteCustomizeMessage.jsx
@@ -170,6 +170,7 @@ class ChallengeInviteCustomizeMessage extends Component {
     } = this.state;
     const htmlTitle = `Customize the message to your friends for ${challengeTitle}? - ${chosenWebsiteName}`;
     const footerNextButtonOn = false;
+    const voterFirstName = VoterStore.getFirstName();
     return (
       <div>
         <Helmet>
@@ -200,7 +201,15 @@ class ChallengeInviteCustomizeMessage extends Component {
           <ContentOuterWrapperDefault>
             <ContentInnerWrapperDefault>
               <CampaignProcessStepIntroductionText>
-                Hi [your friend&apos;s name], it&apos;s David.
+                Hi [your friend&apos;s name]
+                {voterFirstName && (
+                  <>
+                    , it&apos;s
+                    {' '}
+                    {voterFirstName}
+                  </>
+                )}
+                .
               </CampaignProcessStepIntroductionText>
               <CampaignSupportSectionWrapper marginTopOff>
                 <CampaignSupportSection marginBottomOff>