Merge branch 'develop' into WV-594-TEAM-REVIEW

fdiazq · Oct 22, 2024 · 6440365 · 6440365
2 parents 03f4225 + 902cb6f
commit 6440365
Show file tree

Hide file tree

Showing 38 changed files with 12,525 additions and 8,910 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -129,7 +129,7 @@
     "fs-extra": "^10.0.0",
     "gapi-script": "github:wevote/gapi-script",
     "glob": "^9.0.0",
-    "iframe-resizer-react": "^1.1.0",
+    "iframe-resizer-react": "1.1.0",
     "jquery": "^3.7.1",
     "keymirror": "~0.1.1",
     "lodash-es": "^4.17.21",
@@ -153,6 +153,7 @@
     "react-helmet-async": "^1.3.0",
     "react-phone-number-input": "^3.4.3",
     "react-player": "^2.16.0",
+    "react-rewards": "^2.0.4",
     "react-router-dom": "^5.3.4",
     "react-router-dom-v5-compat": "^6.23.1",
     "react-share": "^4.4.1",

diff --git a/src/img/global/svg-icons/rocket-ship-no-thrust.svg b/src/img/global/svg-icons/rocket-ship-no-thrust.svg
diff --git a/src/js/common/components/Challenge/ChallengeAbout.jsx b/src/js/common/components/Challenge/ChallengeAbout.jsx
@@ -2,19 +2,26 @@ import withStyles from '@mui/styles/withStyles';
 import { EventOutlined, CampaignOutlined, EmojiEventsOutlined } from '@mui/icons-material';
 import PropTypes from 'prop-types';
 import React, { Suspense } from 'react';
+import { ReactSVG } from 'react-svg';
 import styled from 'styled-components';
 import DesignTokenColors from '../Style/DesignTokenColors';
 import { renderLog } from '../../utils/logging';
 import ChallengeParticipantStore from '../../stores/ChallengeParticipantStore';
 import ChallengeStore from '../../stores/ChallengeStore';
 import AppObservableStore, { messageService } from '../../stores/AppObservableStore';
+import normalizedImagePath from '../../utils/normalizedImagePath';
+
+import rocketShipNoThrust from '../../../../img/global/svg-icons/rocket-ship-no-thrust.svg';
 
 function ChallengeAbout ({ challengeWeVoteId }) {
   renderLog('ChallengeAbout');
+  const [challengeCreator, setChallengeCreator] = React.useState('');
   const [challengeInviteesCount, setChallengeInviteesCount] = React.useState(0);
+  const [challengeIsSupporting, setChallengeIsSupporting] = React.useState('');
   const [challengeParticipantCount, setChallengeParticipantCount] = React.useState(0);
   const [daysLeft, setDaysLeft] = React.useState(0);
   const [participantNameWithHighestRank, setParticipantNameWithHighestRank] = React.useState('');
+  const [showDaysLeft, setShowDaysLeft] = React.useState(true);
 
   const onAppObservableStoreChange = () => {
     setParticipantNameWithHighestRank(AppObservableStore.getChallengeParticipantNameWithHighestRankByChallengeWeVoteId(challengeWeVoteId));
@@ -28,6 +35,8 @@ function ChallengeAbout ({ challengeWeVoteId }) {
       setChallengeParticipantCount(ChallengeStore.getNumberOfParticipantsInChallenge(challengeWeVoteId));
     }
     setDaysLeft(ChallengeStore.getDaysUntilChallengeEnds(challengeWeVoteId));
+    setChallengeCreator('Anusha P.');
+    setChallengeIsSupporting('John Smith');
   };
   const onChallengeParticipantStoreChange = () => {
     if (challengeParticipantCount < ChallengeParticipantStore.getNumberOfParticipantsInChallenge(challengeWeVoteId)) {
@@ -55,25 +64,33 @@ function ChallengeAbout ({ challengeWeVoteId }) {
     <span>
       {/* Jan 20, 24 - Sep 10, 24 · */}
       Ends Nov 5, 2024
+      {showDaysLeft && (
+        <ShowDaysLeftText>
+          {' '}
+          ·
+          {' '}
+          {daysLeft}
+          {' '}
+          days left
+        </ShowDaysLeftText>
+      )}
+
+    </span>
+  );
+  const challengeStarted = (
+    <span>
+      Challenge started by
       {' '}
-      ·
-      {' '}
-      <strong>
-        {daysLeft}
-        {' '}
-        days left
-      </strong>
+      {challengeCreator}
     </span>
   );
   const remindFriends = 'Remind as many friends as you can about the date of the election, and let them know you will be voting.';
   const currentLeader = `Current leader: ${participantNameWithHighestRank}`;
   const friendsInvited = (
     <span>
-      <strong>
-        {challengeInviteesCount}
-        {' '}
-        friends invited
-      </strong>
+      {challengeInviteesCount}
+      {' '}
+      friends invited
       {' '}
       by
       {' '}
@@ -83,43 +100,68 @@ function ChallengeAbout ({ challengeWeVoteId }) {
     </span>
   );
 
+  const showStartedBy = false;
   return (
     <ChallengeAboutWrapper>
       <CardRowsWrapper>
-        {challengeDates && (
-          <CardForListRow>
-            <FlexDivLeft>
-              <SvgImageWrapper>
-                <EventOutlined />
-              </SvgImageWrapper>
-              <ChallengeDatesDiv>{challengeDates}</ChallengeDatesDiv>
-            </FlexDivLeft>
-          </CardForListRow>
-        )}
         <CardForListRow>
           <Suspense fallback={<></>}>
             {remindFriends && (
               <FlexDivLeft>
                 <SvgImageWrapper>
-                  <CampaignOutlined />
+                  <CampaignOutlinedStyled />
                 </SvgImageWrapper>
                 <RemindFriendsDiv>{remindFriends}</RemindFriendsDiv>
               </FlexDivLeft>
             )}
           </Suspense>
         </CardForListRow>
+        {challengeDates && (
+          <CardForListRow>
+            <FlexDivLeft>
+              <SvgImageWrapper>
+                <EventOutlinedStyled />
+              </SvgImageWrapper>
+              <ChallengeDatesDiv>{challengeDates}</ChallengeDatesDiv>
+            </FlexDivLeft>
+          </CardForListRow>
+        )}
+        {showStartedBy && (
+          <CardForListRow>
+            <Suspense fallback={<></>}>
+              {challengeStarted && (
+                <FlexDivLeft>
+                  <SvgImageWrapper style={{ paddingTop: '3px' }}>
+                    <ReactSVG
+                      src={normalizedImagePath(rocketShipNoThrust)}
+                      alt="Rocket Ship"
+                      beforeInjection={(svg) => {
+                        // Fill property applied to the path element, not SVG element. querySelector to grab the path element and set the attribute.
+                        svg.querySelectorAll('path').forEach((path) => {
+                          path.setAttribute('fill', 'none');
+                          path.setAttribute('stroke', '#606060');
+                        });
+                      }}
+                    />
+                  </SvgImageWrapper>
+                  <ChallengeStartedDiv>{challengeStarted}</ChallengeStartedDiv>
+                </FlexDivLeft>
+              )}
+            </Suspense>
+          </CardForListRow>
+        )}
         <CardForListRow>
           <Suspense fallback={<></>}>
             {friendsInvited && (
               <FlexDivLeft>
                 <SvgImageWrapper>
-                  <EmojiEventsOutlined />
+                  <EmojiEventsOutlinedStyled />
                 </SvgImageWrapper>
                 <ChallengeLeaderWrapper>
+                  <FriendsInvitedDiv>{friendsInvited}</FriendsInvitedDiv>
                   {!!(participantNameWithHighestRank) && (
                     <CurrentLeaderDiv>{currentLeader}</CurrentLeaderDiv>
                   )}
-                  <FriendsInvitedDiv>{friendsInvited}</FriendsInvitedDiv>
                 </ChallengeLeaderWrapper>
               </FlexDivLeft>
             )}
@@ -141,9 +183,21 @@ const styles = () => ({
   },
 });
 
+export const CampaignOutlinedStyled = styled(CampaignOutlined)`
+  font-size: 30px;
+`;
+
+export const EmojiEventsOutlinedStyled = styled(EmojiEventsOutlined)`
+  margin-top: 2px;
+`;
+
+export const EventOutlinedStyled = styled(EventOutlined)`
+  font-size: 25px;
+`;
+
 export const CardForListRow = styled('div')`
   color: ${DesignTokenColors.neutral500};
-  font-size: 14px;
+  font-size: 16px;
   padding: 3px 0;
 `;
 
@@ -155,23 +209,31 @@ const ChallengeAboutWrapper = styled('div')`
   white-space: normal;
 `;
 
+const ChallengeStartedDiv = styled('div')`
+`;
+
 export const FlexDivLeft = styled('div')`
   align-items: flex-start;
   display: flex;
   justify-content: start;
 `;
 
 export const SvgImageWrapper = styled('div')`
-  max-width: 25px;
-  min-width: 25px;
-  width: 25px;
-  margin-right: 15px;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  max-width: 35px;
+  min-width: 35px;
+  width: 35px;
+  margin-right: 5px;
+  margin-top: -4px;
 `;
 
 export const ChallengeDatesDiv = styled('div')`
 `;
 
 export const RemindFriendsDiv = styled('div')`
+  font-weight: 600;
 `;
 
 export const ChallengeLeaderWrapper = styled('div')`
@@ -183,4 +245,7 @@ export const CurrentLeaderDiv = styled('div')`
 export const FriendsInvitedDiv = styled('div')`
 `;
 
+const ShowDaysLeftText = styled('span')`
+`;
+
 export default withStyles(styles)(ChallengeAbout);
diff --git a/src/js/common/components/Challenge/JoinedAndDaysLeft.jsx b/src/js/common/components/Challenge/JoinedAndDaysLeft.jsx
@@ -13,16 +13,14 @@ function JoinedAndDaysLeft ({ challengeWeVoteId, borderSwitcher }) {
   const [daysLeft, setDaysLeft] = React.useState(0);
   const [voterIsChallengeParticipant, setVoterIsChallengeParticipant] = React.useState(false);
 
-  React.useEffect(() => {
-    // console.log('Fetching participants for:', challengeWeVoteId);
-
-    const onChallengeStoreChange = () => {
-      const daysToChallengeEnds = ChallengeStore.getDaysUntilChallengeEnds(challengeWeVoteId);
-      // console.log('Days to challenge ends:', daysToChallengeEnds);
-      setDaysLeft(daysToChallengeEnds);
-      setVoterIsChallengeParticipant(ChallengeStore.getVoterIsChallengeParticipant(challengeWeVoteId));
-    };
+  const onChallengeStoreChange = () => {
+    const daysToChallengeEnds = ChallengeStore.getDaysUntilChallengeEnds(challengeWeVoteId);
+    // console.log('Days to challenge ends:', daysToChallengeEnds);
+    setDaysLeft(daysToChallengeEnds);
+    setVoterIsChallengeParticipant(ChallengeStore.getVoterIsChallengeParticipant(challengeWeVoteId));
+  };
 
+  React.useEffect(() => {
     const challengeStoreListener = ChallengeStore.addListener(onChallengeStoreChange);
     onChallengeStoreChange();