Merge branch 'develop' into develop

wevote · Dec 11, 2024 · ba888a4 · ba888a4
2 parents 3572328 + afe3df1
commit ba888a4
Show file tree

Hide file tree

Showing 84 changed files with 1,987 additions and 616 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -752,8 +752,8 @@ const WeVoteBody = styled('div')`
   //font-family: "Poppins", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
   //line-height: 1.4;
   // margin: 0 auto;
-
   display: block;
+  min-height: 100vh;
   position: relative;
   z-index: 0;
   // this debug technique works!  ${() => console.log('-----------------------------')}

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/CardForListBody.jsx b/src/js/common/components/CardForListBody.jsx
@@ -63,7 +63,7 @@ function CardForListBody (props) {
 
   // /////////////////////// START OF DISPLAY
   return (
-    <CandidateCardForListWrapper id={`cardForListBodyWrapper-${candidateWeVoteId}`} limitCardWidth={limitCardWidth}>
+    <CandidateCardForListWrapper id={`cardForListBodyWrapper-${candidateWeVoteId || politicianWeVoteId}`} limitCardWidth={limitCardWidth}>
       <OneCampaignOuterWrapper limitCardWidth={limitCardWidth}>
         <OneCampaignInnerWrapper
           hideCardMargins={hideCardMargins}

diff --git a/src/js/common/components/Challenge/ChallengeAbout.jsx b/src/js/common/components/Challenge/ChallengeAbout.jsx
@@ -15,9 +15,8 @@ import rocketShipNoThrust from '../../../../img/global/svg-icons/rocket-ship-no-
 
 function ChallengeAbout ({ challengeWeVoteId, showDaysLeft }) {
   renderLog('ChallengeAbout');
-  const [challengeCreator, setChallengeCreator] = React.useState('');
+  const [challengeOwners, setChallengeOwners] = 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('');
@@ -34,8 +33,7 @@ function ChallengeAbout ({ challengeWeVoteId, showDaysLeft }) {
       setChallengeParticipantCount(ChallengeStore.getNumberOfParticipantsInChallenge(challengeWeVoteId));
     }
     setDaysLeft(ChallengeStore.getDaysUntilChallengeEnds(challengeWeVoteId));
-    setChallengeCreator('Anusha P.');
-    setChallengeIsSupporting('John Smith');
+    setChallengeOwners(ChallengeStore.getChallengeOwnerList(challengeWeVoteId));
   };
   const onChallengeParticipantStoreChange = () => {
     if (challengeParticipantCount < ChallengeParticipantStore.getNumberOfParticipantsInChallenge(challengeWeVoteId)) {
@@ -75,13 +73,6 @@ function ChallengeAbout ({ challengeWeVoteId, showDaysLeft }) {
       )}
     </span>
   );
-  const challengeStarted = (
-    <span>
-      Challenge started by
-      {' '}
-      {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 = (
@@ -141,22 +132,22 @@ function ChallengeAbout ({ challengeWeVoteId, showDaysLeft }) {
         {showStartedBy && (
           <CardForListRow>
             <Suspense fallback={<></>}>
-              {challengeStarted && (
+              {challengeOwners && (
                 <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');
-                        });
-                      }}
+                      beforeInjection={(svg) => svg.setAttribute('style', { padding: '1px 1px 1px 0px' })}
                     />
                   </SvgImageWrapper>
-                  <ChallengeStartedDiv>{challengeStarted}</ChallengeStartedDiv>
+                  <ChallengeOwnersDiv>
+                    <ChallengeOwnersText>
+                      Challenge started by
+                      {' '}
+                      {challengeOwners.map((owner) => <ChallengeOwnersSpan key={owner.organization_we_vote_id}>{owner.organization_name}</ChallengeOwnersSpan>)}
+                    </ChallengeOwnersText>
+                  </ChallengeOwnersDiv>
                 </FlexDivLeft>
               )}
             </Suspense>
@@ -195,6 +186,7 @@ export const CardForListRow = styled('div')`
   color: ${DesignTokenColors.neutral500};
   font-size: 16px;
   padding: 3px 0;
+  margin-bottom: 3px;
 `;
 
 export const CardRowsWrapper = styled('div')`
@@ -205,7 +197,15 @@ const ChallengeAboutWrapper = styled('div')`
   white-space: normal;
 `;
 
-const ChallengeStartedDiv = styled('div')`
+const ChallengeOwnersDiv = styled('div')`
+`;
+
+const ChallengeOwnersText = styled('p')`
+`;
+
+const ChallengeOwnersSpan = styled('span')`
+  font-weight: 500;
+  color: ${DesignTokenColors.neutral600};
 `;
 
 export const FlexDivLeft = styled('div')`
@@ -242,6 +242,8 @@ export const FriendsInvitedDiv = styled('div')`
 `;
 
 const ShowDaysLeftText = styled('span')`
+  font-weight: 500;
+  color: ${DesignTokenColors.neutral600};
 `;
 
 export default withStyles(styles)(ChallengeAbout);
diff --git a/src/js/common/components/Challenge/ChallengesHomeFilter.jsx b/src/js/common/components/Challenge/ChallengesHomeFilter.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import styled from 'styled-components';
 import { renderLog } from '../../utils/logging';
-import SearchBar2024 from '../../../components/Search/SearchBar2024';
+import SearchBar2024 from '../Search/SearchBar2024';
 
 function ChallengesHomeFilter (props) {
   renderLog('ChallengesHomeFilter functional component');

diff --git a/src/js/common/components/Challenge/ExplanationContent.jsx b/src/js/common/components/Challenge/ExplanationContent.jsx
@@ -10,19 +10,30 @@ import {
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import DesignTokenColors from '../Style/DesignTokenColors';
 
-const ExplanationContent = () => (
+const ExplanationContent = ({
+  unfurlInviteFriends,
+  unfurlEarnPoints,
+  unfurlMission,
+  unfurlContestTerms,
+}) => (
   <PointsWrapper>
     <TitleSection>
       <Paragraph>
         At the end of a challenge, the participant who has the most points is ranked as #1 and wins the challenge.
       </Paragraph>
     </TitleSection>
-    <AccordionSection title="Invite friends to strengthen our democracy">
+    <AccordionSection
+      title="Invite friends to strengthen our democracy"
+      isOpen={unfurlInviteFriends}
+    >
       <Typography>
         Invite your friends to join you in this challenge and earn points together!
       </Typography>
     </AccordionSection>
-    <AccordionSection title="How to earn points to improve your ranking">
+    <AccordionSection
+      title="How to earn points to improve your ranking"
+      isOpen={unfurlEarnPoints}
+    >
       <StyledTable>
         <thead>
           <tr>
@@ -54,12 +65,18 @@ const ExplanationContent = () => (
         </tbody>
       </StyledTable>
     </AccordionSection>
-    <AccordionSection title="WeVote’s mission">
+    <AccordionSection
+      title="WeVote’s mission"
+      isOpen={unfurlMission}
+    >
       <Typography>
         WeVote is committed to increasing voter engagement and participation by providing tools that encourage people to join in our democracy.
       </Typography>
     </AccordionSection>
-    <AccordionSection title="Contest terms">
+    <AccordionSection
+      title="Contest terms"
+      isOpen={unfurlContestTerms}
+    >
       <StyledUnorderedList>
         <li>Sponsor: We Vote USA</li>
         <li>Eligibility: Open to residents of the USA who are 18 years or older.</li>
@@ -75,8 +92,8 @@ const ExplanationContent = () => (
   </PointsWrapper>
 );
 
-const AccordionSection = ({ title, children }) => (
-  <StyledAccordion>
+const AccordionSection = ({ title, children, isOpen }) => (
+  <StyledAccordion defaultExpanded={isOpen}>
     <StyledAccordionSummary expandIcon={<ExpandMoreIcon />}>
       <Typography variant="subtitle1">{title}</Typography>
     </StyledAccordionSummary>
@@ -87,9 +104,10 @@ const AccordionSection = ({ title, children }) => (
 AccordionSection.propTypes = {
   title: PropTypes.string.isRequired,
   children: PropTypes.node.isRequired,
+  isOpen: PropTypes.bool,
 };
 
-// Styled Components
+
 const PointsWrapper = styled('div')`
   display: flex;
   flex-direction: column;

diff --git a/src/js/common/components/Challenge/JoinChallengeAndLearnMoreButtons.jsx b/src/js/common/components/Challenge/JoinChallengeAndLearnMoreButtons.jsx
@@ -1,21 +1,21 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { Button } from '@mui/material';
 import withStyles from '@mui/styles/withStyles';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import JoinChallengeButton from './JoinChallengeButton'
+// import JoinChallengeButton from './JoinChallengeButton';
+
+const JoinChallengeButton = React.lazy(() => import(/* webpackChunkName: 'JoinChallengeButton' */ '../../components/Challenge/JoinChallengeButton'));
 
 const JoinChallengeAndLearnMoreButtons = ({ challengeWeVoteId, classes }) => {
   return (
     <JoinChallengeButtonWrapper>
-      <Button
-        classes={{ root: classes.joinChallengeButton }}
-        color="primary"
-        id={`challengeLearnMore-${challengeWeVoteId}`}
-        variant="contained"
-      >
-       Join Challenge
-      </Button>
+      <Suspense fallback={<></>}>
+        <JoinChallengeButton
+          // challengeSEOFriendlyPath={challengeSEOFriendlyPathForDisplay}
+          challengeWeVoteId={challengeWeVoteId}
+        />
+      </Suspense>
       <Button
         classes={{ root: classes.learnMoreButton }}
         color="secondary"

diff --git a/src/js/common/components/ChallengeInviteFriends/ViewInviteeDetails.jsx b/src/js/common/components/ChallengeInviteFriends/ViewInviteeDetails.jsx
@@ -3,7 +3,7 @@ import withStyles from '@mui/styles/withStyles';
 import withTheme from '@mui/styles/withTheme';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@mui/material';
+import { TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, DialogTitle } from '@mui/material';
 import DesignTokenColors from '../Style/DesignTokenColors';
 import ModalDisplayTemplateA, { templateAStyles, TextFieldWrapper } from '../../../components/Widgets/ModalDisplayTemplateA';
 import ChallengeInviteeStore from '../../stores/ChallengeInviteeStore';
@@ -50,7 +50,7 @@ const ViewInviteeDetails = ({ inviteeId, show, setShow, setAnchorEl }) => {
   const textFieldJSX = (
     <TableContainer components={Paper} sx={{ paddingBottom: '5px' }}>
       <TableWrapper>
-        <Table aria-label="simple table">
+        <StyledTable aria-label="simple table">
           <TableHead>
             <StyledTableRow>
               <StyledTableHeaderCell>STATUS</StyledTableHeaderCell>
@@ -77,14 +77,14 @@ const ViewInviteeDetails = ({ inviteeId, show, setShow, setAnchorEl }) => {
               <StyledTableBodyCellRight align="right">{inviteeData ? formatDate(inviteeData.date_challenge_joined, 'Challenge has not been joined') : 'Challenge has not been joined'}</StyledTableBodyCellRight>
             </StyledTableRow>
           </TableBody>
-        </Table>
+        </StyledTable>
       </TableWrapper>
     </TableContainer>
   );
 
   return (
     <ModalDisplayTemplateA
-      dialogTitleJSX={<TitleWrapper>{dialogTitleText}</TitleWrapper>}
+      dialogTitleJSX={<DialogTitle>{dialogTitleText}</DialogTitle>}
       textFieldJSX={textFieldJSX}
       show={show}
       tallMode
@@ -100,12 +100,24 @@ ViewInviteeDetails.propTypes = {
   uniqueExternalId: PropTypes.string,
 };
 
+const StyledTable = styled('table')`
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 8px;
+  border-radius: 8px;
+  overflow: hidden;
+`;
+
 const StyledTableHeaderCell = styled(TableCell)`
   color: ${DesignTokenColors.neutral900};
   font-size: 10px;
   font-weight: bold;
   font-family: inherit;
   padding: 8px 4px 4px 4px;
+  @media (max-width: 600px) {
+    font-size: 8px; /* Reduce font size for smaller screens */
+    padding: 4px; /* Adjust padding for smaller screens */
+  }
 `;
 
 const StyledTableRow = styled(TableRow)`
@@ -129,21 +141,12 @@ const StyledTableBodyCellRight = styled(TableCell)`
   padding-right: none;
 `;
 
-const TitleWrapper = styled('div')`
-  font-size: 16px;
-  font-weight: bold;
-  padding-bottom: 4px;
-  padding-left: 4px;
-  text-align: center;
-  font-family: inherit;
-`;
-
 const TableWrapper = styled('div')`
-  border-top: 1px solid ${DesignTokenColors.neutral100};
   margin-top: 4px; /* Adjust to give space below the title */
   margin-bottom: 4px;
-  min-width: 300px;
-  overflow-x: auto;
+  min-width: 100%;
+  max-width: 100%;
+  overflow-x: hidden;
 `;
 
 export default withTheme(withStyles(templateAStyles)(ViewInviteeDetails));
diff --git a/src/js/common/components/ChallengeParticipantListRoot/ChallengeParticipantListRoot.jsx b/src/js/common/components/ChallengeParticipantListRoot/ChallengeParticipantListRoot.jsx
@@ -5,7 +5,7 @@ import { Button } from '@mui/material';
 import { withStyles } from '@mui/styles';
 import DesignTokenColors from '../Style/DesignTokenColors';
 import ChallengeParticipantList from './ChallengeParticipantList';
-import SearchBar2024 from '../../../components/Search/SearchBar2024';
+import SearchBar2024 from '../Search/SearchBar2024';
 import AppObservableStore, { messageService } from '../../stores/AppObservableStore';
 import ChallengeParticipantStore from '../../stores/ChallengeParticipantStore';
 import FirstChallengeParticipantListController from './FirstChallengeParticipantListController';

diff --git a/src/js/common/components/FAQBody.jsx b/src/js/common/components/FAQBody.jsx
@@ -5,7 +5,7 @@ import { isCordova, isWebApp } from '../utils/isCordovaOrWebApp';
 import { renderLog } from '../utils/logging';
 import ToolBar from './Widgets/ToolBar';
 import webAppConfig from '../../config';
-import { Video, PlayerContainer } from '../../components/Welcome/headerWelcomeStyles';
+import { Video, PlayerContainer } from './Style/VideoStyles';
 
 
 const OpenExternalWebSite = React.lazy(() => import(/* webpackChunkName: 'OpenExternalWebSite' */ './Widgets/OpenExternalWebSite'));