[WV-659] & [WV-660] add two modals [TEAM REVIEW]

[WV-659] & [WV-660] add 2 modals [TEAM REVIEW] [WV-659] & [WV-660] add 2 modals [TEAM REVIEW] [WV-659] & [WV-660] add 2 modals [TEAM REVIEW] [WV-659] & [WV-660] add 2 modals [TEAM REVIEW] [WV-659] & [WV-660] add 2 modals [TEAM REVIEW] [WV-659] & [WV-660] add 2 modals [TEAM REVIEW] [WV-659] & [WV-660] add 2 modals [TEAM REVIEW]
wevote · Feb 6, 2025 · b6972a1 · b6972a1
1 parent 7c193c7
commit b6972a1
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 25 deletions.
diff --git a/src/js/common/components/Politician/PoliticianEndorsementsList.jsx b/src/js/common/components/Politician/PoliticianEndorsementsList.jsx
@@ -19,6 +19,7 @@ import {
   CampaignSubSectionTitleWrapper,
 } from '../Style/CampaignDetailsStyles';
 import PoliticianStore from '../../stores/PoliticianStore';
+import VoterPositionEntryAndDisplay2 from '../../../components/PositionItem/VoterPositionEntryAndDisplay';
 
 const STARTING_NUMBER_OF_POSITIONS_TO_DISPLAY = 2;
 const NUMBER_OF_POSITIONS_TO_ADD_WHEN_MORE_CLICKED = 10;
@@ -112,7 +113,7 @@ class PoliticianEndorsementsList extends Component {
   render () {
     renderLog('PoliticianEndorsementsList');  // Set LOG_RENDER_EVENTS to log all renders
     const { politicianWeVoteId, hideEncouragementToEndorse, showTitle } = this.props;
-    const { filteredPositionList, numberOfPositionsToDisplay, politicianName } = this.state;
+    const { filteredPositionList, numberOfPositionsToDisplay, politicianName, showOpinionModal } = this.state;
     // console.log('PoliticianEndorsementsList render numberOfPositionsToDisplay:', numberOfPositionsToDisplay);
     const showTitleAndPositionsToShow = showTitle && (filteredPositionList && filteredPositionList.length > 0);
     const listTitleHtml = showTitleAndPositionsToShow && (
@@ -178,6 +179,11 @@ class PoliticianEndorsementsList extends Component {
             />
           )}
         </LoadMoreItemsManuallyWrapper>
+        {/* Render the modal */}
+        <VoterPositionEntryAndDisplay2
+          show={showOpinionModal}
+          toggleModal={this.toggleOpinionModal}
+        />
       </PoliticianEndorsementsListWrapper>
     );
   }

diff --git a/src/js/components/Activity/ActivityPostAdd.jsx b/src/js/components/Activity/ActivityPostAdd.jsx
@@ -10,13 +10,13 @@ import VoterStore from '../../stores/VoterStore';
 import { avatarGeneric } from '../../utils/applicationUtils';
 import { cordovaNewsPaddingTop } from '../../utils/cordovaOffsets';
 
-const VoterPositionEntryAndDisplay = React.lazy(() => import(/* webpackChunkName: 'VoterPositionEntryAndDisplay' */ '../PositionItem/VoterPositionEntryAndDisplay'));
+const ActivityPostModal = React.lazy(() => import(/* webpackChunkName: 'ActivityPostModal' */ './ActivityPostModal'));
 
 class ActivityPostAdd extends Component {
   constructor (props) {
     super(props);
     this.state = {
-      showVoterPositionEntryAndDisplay: false,
+      showActivityPostModal: false,
       statementText: '',
     };
     this.updateStatementTextToBeSaved = this.updateStatementTextToBeSaved.bind(this);
@@ -62,11 +62,11 @@ class ActivityPostAdd extends Component {
     });
   }
 
-  toggleVoterPositionEntryAndDisplay = () => {
-    const { showVoterPositionEntryAndDisplay } = this.state;
-    // console.log('toggleVoterPositionEntryAndDisplay showVoterPositionEntryAndDisplay:', showVoterPositionEntryAndDisplay);
+  toggleActivityPostModal = () => {
+    const { showActivityPostModal } = this.state;
+    // console.log('toggleActivityPostModal showActivityPostModal:', showActivityPostModal);
     this.setState({
-      showVoterPositionEntryAndDisplay: !showVoterPositionEntryAndDisplay,
+      showActivityPostModal: !showActivityPostModal,
     });
   }
 
@@ -80,7 +80,7 @@ class ActivityPostAdd extends Component {
     renderLog('ActivityPostAdd');  // Set LOG_RENDER_EVENTS to log all renders
     const { classes, externalUniqueId, activityTidbitWeVoteId } = this.props;
     const {
-      showVoterPositionEntryAndDisplay,
+      showActivityPostModal,
       voterPhotoUrlMedium, statementText,
     } = this.state;
 
@@ -137,19 +137,19 @@ class ActivityPostAdd extends Component {
               inputRef={(tag) => { this.textarea = tag; }}
               multiline
               name="statementText"
-              onClick={this.toggleVoterPositionEntryAndDisplay}
+              onClick={this.toggleActivityPostModal}
               onFocus={this.handleFocus}
               placeholder={statementPlaceholderText}
               rows="1"
             />
           </InnerFlexWrapper>
-          {showVoterPositionEntryAndDisplay && (
+          {showActivityPostModal && (
             <Suspense fallback={<></>}>
-              <VoterPositionEntryAndDisplay
+              <ActivityPostModal
                 activityTidbitWeVoteId={activityTidbitWeVoteId}
                 externalUniqueId={externalUniqueId}
-                show={showVoterPositionEntryAndDisplay}
-                toggleModal={this.toggleVoterPositionEntryAndDisplay}
+                show={showActivityPostModal}
+                toggleModal={this.toggleActivityPostModal}
               />
             </Suspense>
           )}

diff --git a/src/js/components/PositionItem/VoterPositionEntryAndDisplay.jsx b/src/js/components/PositionItem/VoterPositionEntryAndDisplay.jsx
@@ -4,7 +4,7 @@ import { withStyles } from '@mui/styles';
 import PropTypes from 'prop-types';
 import { Edit as EditIcon } from '@mui/icons-material';
 import ActivityActions from '../../actions/ActivityActions';
-import { prepareForCordovaKeyboard, restoreStylesAfterCordovaKeyboard } from '../../common/utils/cordovaUtils';
+import { prepareForCordovaKeyboard } from '../../common/utils/cordovaUtils';
 import { isAndroid } from '../../common/utils/isCordovaOrWebApp';
 import { renderLog } from '../../common/utils/logging';
 import ActivityStore from '../../stores/ActivityStore';
@@ -13,14 +13,14 @@ import { avatarGeneric } from '../../utils/applicationUtils';
 import ModalDisplayTemplateB, {
   templateBStyles, TextFieldDiv,
   TextFieldForm, TextFieldWrapper, VoterAvatarImg,
-  UserInfoWrapper, UserInfoText, UserName,
+  UserInfoWrapper, UserInfoText, UserName, OptionBlockWrapper, CommentContainer, InputBox,
 } from '../Widgets/ModalDisplayTemplateB';
 // import ActivityPostPublicToggle from '../Activity/ActivityPostPublicToggle';
 import ActivityPostPublicDropdown from '../Activity/ActivityPostPublicDropdown';
 import VoterPositionEditNameAndPhotoModal from './VoterPositionEditNameAndPhotoModal';
 
 const VoterPositionEntryAndDisplay = (props) => {
-  const { activityTidbitWeVoteId, classes, externalUniqueId, show, toggleModal } = props;
+  const { activityTidbitWeVoteId, classes, externalUniqueId, toggleModal } = props;
 
   // useState used for state variables
   const [visibilityIsPublic, setVisibilityIsPublic] = useState(false);
@@ -107,7 +107,38 @@ const VoterPositionEntryAndDisplay = (props) => {
   const dialogTitleText = activityTidbitIdCheck ? 'Create post' : 'Edit post';
   const statementPlaceholderText = 'What\'s on your mind?';
   const rowsToShow = isAndroid() ? 4 : 6;
+  const [showModal, setShowModal] = useState(false);
 
+  const toggleLocalModal = () => {
+    setShowModal((prev) => !prev); // Toggle the modal
+  };
+  const OpinionBlock = ({ onClick }) => (
+    <OptionBlockWrapper>
+      <CommentContainer>
+        <UserInfoWrapper>
+          <VoterAvatarImg
+            alt=""
+            src={voterPhotoUrlMedium || avatarGeneric()}
+          />
+          <EditIcon
+            onClick={handleEditModalOpen}
+            className={classes.styledEditIcon}
+          />
+        </UserInfoWrapper>
+        {/* Open modal when input is clicked */}
+        <InputBox
+          type="text"
+          placeholder="What's your opinion?"
+          onClick={onClick}
+          readOnly
+        />
+      </CommentContainer>
+    </OptionBlockWrapper>
+  );
+
+  OpinionBlock.propTypes = {
+    onClick: PropTypes.func.isRequired,
+  };
   const textFieldJSX = (
     <TextFieldWrapper>
       <TextFieldForm
@@ -182,7 +213,7 @@ const VoterPositionEntryAndDisplay = (props) => {
           classes={{ root: classes.saveButtonRoot }}
           type="submit"
           // disabled={!statementText} // Commented out to allow saving without statement
-          disabled={!selectedOpinion}
+          disabled={selectedOpinion === 'Neutral' && (!statementText || statementText.trim() === '')} // Disable if Neutral and no text
         >
           {activityTidbitIdCheck ? 'Add opinion' : 'Save Changes'}
         </Button>
@@ -194,16 +225,21 @@ const VoterPositionEntryAndDisplay = (props) => {
     <>
       <ModalDisplayTemplateB
         dialogTitleJSX={<>{dialogTitleText}</>}
-        show={show}
+        show={showModal}
         textFieldJSX={textFieldJSX}
-        toggleModal={toggleModal}
+        toggleModal={toggleLocalModal}
       />
       {isEditModalOpen && (
         <VoterPositionEditNameAndPhotoModal
           show={isEditModalOpen}
           toggleModal={handleEditModalClose}
         />
       )}
+      <OpinionBlock
+        onClick={toggleLocalModal}
+        voterPhotoUrlMedium={voterPhotoUrlMedium}
+        voterName={voterName}
+      />
     </>
   );
 };
@@ -212,7 +248,6 @@ VoterPositionEntryAndDisplay.propTypes = {
   activityTidbitWeVoteId: PropTypes.string,
   classes: PropTypes.object,
   externalUniqueId: PropTypes.string,
-  show: PropTypes.bool,
   toggleModal: PropTypes.func.isRequired,
 };
 

diff --git a/src/js/components/Widgets/ModalDisplayTemplateB.jsx b/src/js/components/Widgets/ModalDisplayTemplateB.jsx
@@ -1,5 +1,5 @@
 import { Close } from '@mui/icons-material';
-import { Dialog, DialogContent, DialogTitle, Divider, IconButton, Button, RadioGroup } from '@mui/material';
+import { Dialog, DialogContent, DialogTitle, Divider, IconButton, Button } from '@mui/material';
 import withStyles from '@mui/styles/withStyles';
 import withTheme from '@mui/styles/withTheme';
 import PropTypes from 'prop-types';
@@ -89,7 +89,7 @@ export const templateBStyles = (theme) => ({
     cursor: 'pointer',
     display: 'flex',
     fontSize: '24px',
-    margin: '25px 0 0 -20px',
+    margin: '19px 0 0 -20px',
     padding: '5px',
     position: 'relative',
   },
@@ -227,6 +227,7 @@ const DialogContentInnerWrapper = styled('div')`
   flex-direction: column;
   height: 100%;
   justify-content: space-between;
+  margin-top:25px;
    
   @media (max-width: 600px) {
     min-height: 48px;
@@ -293,19 +294,17 @@ const Title = styled('div')`
   }
 `;
 export const VoterAvatarImg = styled('img')`
-  border-radius: 6px;
+  border-radius: 50%;
   width: 43px;
   height: 43px;
   display: block;
-  margin-left: 14px;
   @media (max-width: 600px) {
   margin-left: 0px;
   }
 `;
 
 export const UserInfoWrapper = styled('div')`
   display: flex;
-  margin-top: 25px;
 `;
 
 export const UserInfoText = styled('div')`
@@ -353,5 +352,25 @@ export const OpinionButton = styled(Button)`
     background-color: ${(props) => (props.selected ? DesignTokenColors.primary600 : DesignTokenColors.primary50)};
   }
 `;
+export const OptionBlockWrapper = styled.div`
+margin-bottom: 10px;
+padding: 10px 0;
+`;
+export const CommentContainer = styled.div`
+  align-items: center;
+  background-color: ${DesignTokenColors.whiteUI};
+  border: 1px solid ${DesignTokenColors.neutralUI300};
+  border-radius: 16px;
+  display: flex;
+  padding: 8px 12px;
+`;
+export const InputBox = styled.input`
+border: none;
+color: ${DesignTokenColors.neutral900};
+flex-grow: 1;
+font-size: 14px;
+outline: none;
+padding: 5px;
+`;
 
 export default withTheme(withStyles(templateBStyles)(ModalDisplayTemplateB));