Merge branch 'develop' into WV-600

package.json

@@ -141,6 +141,7 @@
     "puppeteer": "^22.10.0",
     "react": "~17.0.2",
     "react-bootstrap": "^1.6.4",
+    "react-confetti": "^6.1.0",
     "react-copy-to-clipboard": "^5.0.3",
     "react-dom": "~17.0.2",
     "react-fullstory": "^1.4.0",

src/App.jsx

@@ -409,8 +409,10 @@ class App extends Component {
                   <Route path="/-/:custom_link_string" exact component={SharedItemLanding} />
                   <Route path="/-:shared_item_code/modal/share" exact component={SharedItemLanding} />
                   <Route path="/-:shared_item_code" exact component={SharedItemLanding} />
+                  <Route path="/-" exact><Ready /></Route>
                   <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 +739,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('-----------------------------')}

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
 }
 

src/js/actions/AnalyticsActions.js

@@ -82,6 +82,7 @@ import AppObservableStore from '../common/stores/AppObservableStore';
 // ACTION_ORGANIZATION_FOLLOW_DISLIKE = 79
 // ACTION_ORGANIZATION_STOP_DISLIKING = 80
 // ACTION_POLITICIAN_PAGE_VISIT = 81
+// ACTION_VIEW_SHARED_CHALLENGE = 82
 
 export default {
 

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,

src/js/common/actions/ChallengeInviteeActions.js

@@ -16,16 +16,18 @@ 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,
-        invitee_text_from_inviter: inviteTextFromInviter,
-        invitee_text_from_inviter_changed: inviteTextFromInviterChanged,
+        invite_text_from_inviter: inviteTextFromInviter,
+        invite_text_from_inviter_changed: inviteTextFromInviterChanged,
         invitee_url_code: inviteeUrlCode,
         invitee_url_code_changed: inviteeUrlCodeChanged,
       });

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,

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

@@ -143,7 +143,7 @@ const styles = () => ({
 
 export const CardForListRow = styled('div')`
   color: ${DesignTokenColors.neutral500};
-  font-size: 12px;
+  font-size: 14px;
   padding: 3px 0;
 `;
 

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

@@ -19,6 +19,7 @@ class JoinChallengeButton extends React.Component {
       challengeSEOFriendlyPath: '',
       challengeWeVoteId: '',
       goToNextStepAfterSignIn: false,
+      challengeInviteTextDefault: '',
       voterFirstName: '',
       voterIsSignedIn: false,
       voterPhotoUrlLarge: '',
@@ -43,10 +44,14 @@ class JoinChallengeButton extends React.Component {
     const { challengeSEOFriendlyPath: challengeSEOFriendlyPathFromProps, challengeWeVoteId: challengeWeVoteIdFromProps } = this.props;
     // console.log('onChallengeStoreChange challengeSEOFriendlyPathFromProps: ', challengeSEOFriendlyPathFromProps, ', challengeWeVoteIdFromProps: ', challengeWeVoteIdFromProps);
     const {
+      challengeInviteTextDefault,
       challengeSEOFriendlyPath,
       challengeWeVoteId,
     } = getChallengeValuesFromIdentifiers(challengeSEOFriendlyPathFromProps, challengeWeVoteIdFromProps);
     // console.log('onChallengeStoreChange AFTER getChallengeValuesFromIdentifiers challengeWeVoteId: ', challengeWeVoteId);
+    this.setState({
+      challengeInviteTextDefault,
+    });
     if (challengeSEOFriendlyPath) {
       this.setState({
         challengeSEOFriendlyPath,
@@ -115,7 +120,7 @@ class JoinChallengeButton extends React.Component {
   goToJoinChallenge = () => {
     const challengeBasePath = this.getChallengeBasePath();
     // console.log('goToJoinChallenge challengeBasePath: ', challengeBasePath);
-    const { challengeWeVoteId, voterFirstName, voterPhotoUrlLarge } = this.state;
+    const { challengeWeVoteId, challengeInviteTextDefault, voterFirstName, voterPhotoUrlLarge } = this.state;
     const upcomingGoogleCivicElectionId = VoterStore.electionId();
     const voterPlanCreatedForThisElection = ReadyStore.getVoterPlanTextForVoterByElectionId(upcomingGoogleCivicElectionId);
     // console.log('upcomingGoogleCivicElectionId: ', upcomingGoogleCivicElectionId, 'voterPlanCreatedForThisElection: ', voterPlanCreatedForThisElection);
@@ -133,7 +138,7 @@ class JoinChallengeButton extends React.Component {
       if (itemsAreMissing) {
         historyPush(joinChallengeNextStepPath);
       } else {
-        ChallengeParticipantActions.challengeParticipantSave(challengeWeVoteId);
+        ChallengeParticipantActions.challengeParticipantSave(challengeWeVoteId, challengeInviteTextDefault, true);
         AppObservableStore.setShowChallengeThanksForJoining(true);
         // Delay the redirect, so we have time to fire the above API call first
         this.timer = setTimeout(() => {

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

@@ -1,14 +1,14 @@
 import React, { Suspense } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import JoinedGreenCircle from '../../../../img/global/svg-icons/issues/joined-green-circle.svg';
-import InfoOutlineIcon from '../../../../img/global/svg-icons/issues/material-symbols-info-outline.svg';
+import JoinedGreenCircle from '../../../../img/global/svg-icons/joined-green-circle.svg';
+import InfoOutlineIcon from '../../../../img/global/svg-icons/material-symbols-info-outline.svg';
 import ChallengeStore from '../../stores/ChallengeStore';
 import DesignTokenColors from '../Style/DesignTokenColors';
 
 const ChallengeParticipantFirstRetrieveController = React.lazy(() => import(/* webpackChunkName: 'ChallengeParticipantFirstRetrieveController' */ '../ChallengeParticipant/ChallengeParticipantFirstRetrieveController'));
 
-function JoinedAndDaysLeft ({ challengeWeVoteId, style }) {
+function JoinedAndDaysLeft ({ challengeWeVoteId, borderSwitcher }) {
   // eslint-disable-next-line no-unused-vars
   const [daysLeft, setDaysLeft] = React.useState(0);
   const [voterIsChallengeParticipant, setVoterIsChallengeParticipant] = React.useState(false);
@@ -33,7 +33,7 @@ function JoinedAndDaysLeft ({ challengeWeVoteId, style }) {
   return (
     <InfoWrapper>
       {/* SVG, Joined, Dot, and Days Left */}
-      <JoinedInfoWrapper style={style}>
+      <JoinedInfoWrapper borderSwitcher={borderSwitcher}>
         {voterIsChallengeParticipant ? (
           <>
             <JoinedIcon src={JoinedGreenCircle} alt="Joined" />
@@ -57,11 +57,13 @@ function JoinedAndDaysLeft ({ challengeWeVoteId, style }) {
 }
 JoinedAndDaysLeft.propTypes = {
   challengeWeVoteId: PropTypes.string.isRequired,
-  style: PropTypes.object,
+  borderSwitcher: PropTypes.bool,
+};
+JoinedAndDaysLeft.defaultProps = {
+  borderSwitcher: true,  // Default true shows border around the joined and days left info
 };
 
 // Styled Components
-
 const InfoIcon = styled('img')`
   height: 17px;
   margin-right: 5px;
@@ -75,17 +77,19 @@ const InfoWrapper = styled('div')`
   width: 100%;
 `;
 
-const JoinedInfoWrapper = styled('div')`
+const JoinedInfoWrapper = styled('div', {
+  shouldForwardProp: (prop) => !['borderSwitcher'].includes(prop),
+})(({ borderSwitcher }) => `
   align-items: center;
   background-color: ${DesignTokenColors.whiteUI};
-  border: 1px solid ${DesignTokenColors.gray100};
+  border: ${borderSwitcher ? `1px solid ${DesignTokenColors.neutral100}` : 'none'};
   border-radius: 20px;
   display: flex;
   height: auto;
   justify-content: center;
   padding: 5px 10px;
   width: auto;
-`;
+`);
 
 const JoinedIcon = styled('img')`
   height: 17px;
@@ -94,20 +98,20 @@ const JoinedIcon = styled('img')`
 `;
 
 const JoinedText = styled('span')`
-  color: ${DesignTokenColors.gray900};
+  color: ${DesignTokenColors.neutral900};
   font-size: 13px;
   font-weight: 400;
 `;
 
 const DotSeparator = styled('span')`
-  color: ${DesignTokenColors.gray500};
+  color: ${DesignTokenColors.neutral500};
   font-size: 13px;
   font-weight: 400;
   margin: 0 5px;
 `;
 
 const DaysLeftText = styled('span')`
-  color: ${DesignTokenColors.gray900};
+  color: ${DesignTokenColors.neutral900};
   font-size: 13px;
   font-weight: 600;
   letter-spacing: -0.03em;