Merge pull request #4228 from itcreativeusa/wv-659-open-modal-on-inpu…

…t-click

[WV-659] & [WV-660] VoterPositionEntryAndDisplay && VoterPositionEditNameAndPhotoModal

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>
     );
   }

src/js/components/Activity/ActivityPostAdd.jsx

@@ -1,9 +1,9 @@
+import React, { Component, Suspense } from 'react';
 import { Card, InputBase } from '@mui/material';
 import styled from 'styled-components';
 import withStyles from '@mui/styles/withStyles';
 import withTheme from '@mui/styles/withTheme';
 import PropTypes from 'prop-types';
-import React, { Component, Suspense } from 'react';
 import { isCordova } from '../../common/utils/isCordovaOrWebApp';
 import { renderLog } from '../../common/utils/logging';
 import VoterStore from '../../stores/VoterStore';

src/js/components/Activity/ActivityPostPublicDropdown.jsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Select, MenuItem, FormControl, Typography } from '@mui/material';
+import { withStyles } from '@mui/styles';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import DesignTokenColors from '../../common/components/Style/DesignTokenColors';
+
+const ActivityPostPublicDropdown = (props) => {
+  const { visibilityIsPublic, onVisibilityChange, classes } = props;
+
+  const handleVisibilityChange = (event) => {
+    const { value } = event.target;
+    onVisibilityChange(value === 'Public');
+  };
+
+  return (
+    <FormControl className={classes.formControl} aria-labelledby="opinion-visibility-label">
+      <div className={classes.container}>
+        <Typography
+          id="opinion-visibility-label"
+          className={classes.label}
+          component="label"
+        >
+          Opinion visible to:
+        </Typography>
+        <Select
+          value={visibilityIsPublic ? 'Public' : 'Friends Only'}
+          onChange={handleVisibilityChange}
+          className={classes.selectVisibility}
+          disableUnderline
+          IconComponent={ArrowDropDownIcon}
+          aria-label="Select visibility for your opinion"
+          MenuProps={{
+            classes: { paper: classes.menuPaper },
+          }}
+        >
+          <MenuItem value="Public" className={classes.menuItem}>
+            Public
+          </MenuItem>
+          <MenuItem value="Friends Only" className={classes.menuItem}>
+            My friends
+          </MenuItem>
+        </Select>
+      </div>
+    </FormControl>
+  );
+};
+
+ActivityPostPublicDropdown.propTypes = {
+  visibilityIsPublic: PropTypes.bool.isRequired,
+  onVisibilityChange: PropTypes.func.isRequired,
+  classes: PropTypes.object.isRequired,
+};
+
+const styles = (theme) => ({
+  formControl: {
+    width: '100%',
+  },
+  container: {
+    alignItems: 'center',
+    display: 'flex',
+  },
+  label: {
+    color: DesignTokenColors.neutralUI900,
+    fontFamily: 'Poppins',
+    fontSize: '13px',
+    fontWeight: '400',
+    lineHeight: '19.5px',
+    marginRight: '8px',
+    [theme.breakpoints.down('md')]: {
+      display: 'none',
+    },
+  },
+  selectVisibility: {
+    border: 'none',
+    boxShadow: 'none',
+    color: DesignTokenColors.neutralUI900,
+    fontSize: '16px',
+    fontWeight: '400',
+    lineHeight: '21.82px',
+    outline: 'none',
+    padding: 0,
+    '&:focus': {
+      outline: 'none',
+      boxShadow: 'none',
+    },
+    '& .MuiOutlinedInput-notchedOutline': {
+      border: 'none',
+    },
+    [theme.breakpoints.down('sm')]: {
+      padding: 0,
+    },
+    [theme.breakpoints.down('xs')]: {
+      padding: '0 32px 0 0',
+      fontSize: '14px',
+    },
+  },
+  menuItem: {
+    color: DesignTokenColors.neutralUI900,
+    fontSize: '16px',
+    fontWeight: '400',
+    lineHeight: '21.82px',
+    padding: '10px',
+    [theme.breakpoints.down('xs')]: {
+      fontSize: '14px',
+    },
+  },
+  menuPaper: {
+    '& .MuiMenu-list': {
+      padding: 0,
+    },
+  },
+  outlinedInputRoot: {
+    padding: 0,
+    '& .MuiSelect-select': {
+      padding: '0 !important',
+    },
+  },
+});
+
+export default withStyles(styles)(ActivityPostPublicDropdown);

src/js/components/PositionItem/VoterPositionEditNameAndPhotoModal.jsx

@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from 'react';
+import { Dialog, DialogTitle, DialogContent, IconButton } from '@mui/material';
+import { withStyles } from '@mui/styles';
+import PropTypes from 'prop-types';
+import { Close as CloseIcon } from '@mui/icons-material';
+import VoterStore from '../../stores/VoterStore';
+import SettingsProfilePicture from '../Settings/SettingsProfilePicture';
+import SettingsWidgetFirstLastName from '../Settings/SettingsWidgetFirstLastName';
+import SettingsWidgetOrganizationWebsite from '../Settings/SettingsWidgetOrganizationWebsite';
+import SettingsWidgetOrganizationDescription from '../Settings/SettingsWidgetOrganizationDescription';
+import SettingsWidgetAccountType from '../Settings/SettingsWidgetAccountType';
+import DesignTokenColors from '../../common/components/Style/DesignTokenColors';
+
+const VoterPositionEditNameAndPhotoModal = ({ show, toggleModal, classes }) => {
+  const [voter, setVoter] = useState(null);
+
+  useEffect(() => {
+    if (show) {
+      // Fetch voter data when modal is displayed
+      const voterData = VoterStore.getVoter();
+      setVoter(voterData);
+    }
+  }, [show]);
+
+  if (!voter) {
+    return null; // Prevent rendering until voter data is available
+  }
+
+  return (
+    <Dialog open={show} onClose={toggleModal} maxWidth="sm" fullWidth>
+      <DialogTitle>
+        Edit Profile
+        <IconButton
+          aria-label="close"
+          className={classes.closeButton}
+          onClick={toggleModal}
+        >
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
+      <DialogContent className={classes.modalContent}>
+        <p>
+          We are serious about protecting your information. We are a non-profit and will never sell your data.
+          {' '}
+          <a
+            href="/frequently-asked-questions"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={classes.a}
+          >
+            Frequently Asked Questions.
+          </a>
+        </p>
+        <div>
+          {/* Profile picture */}
+          <SettingsProfilePicture
+            voterPhotoUrl={voter.voter_photo_url_medium}
+            externalUniqueId="edit-profile-modal"
+          />
+
+          {/* First and last name */}
+          <SettingsWidgetFirstLastName
+            firstName={voter.first_name}
+            lastName={voter.last_name}
+            externalUniqueId="edit-profile-modal"
+          />
+
+          {/* Website */}
+          <SettingsWidgetOrganizationWebsite
+            organizationWebsite={voter.linked_organization_website}
+            externalUniqueId="edit-profile-modal"
+          />
+
+          {/* Organization description */}
+          <SettingsWidgetOrganizationDescription
+            organizationDescription={voter.linked_organization_description}
+            externalUniqueId="edit-profile-modal"
+          />
+
+          {/* Account type */}
+          <SettingsWidgetAccountType
+            accountType={voter.account_type}
+            externalUniqueId="edit-profile-modal"
+            closeEditFormOnChoice
+            showEditToggleOption
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+VoterPositionEditNameAndPhotoModal.propTypes = {
+  show: PropTypes.bool.isRequired,
+  toggleModal: PropTypes.func.isRequired,
+  classes: PropTypes.object.isRequired,
+};
+
+const styles = {
+  modalContent: {
+    padding: '20px',
+  },
+  a: {
+    color: DesignTokenColors.primary500,
+  },
+  closeButton: {
+    color: DesignTokenColors.neutral100,
+    position: 'absolute',
+    right: '8px',
+    top: '8px',
+  },
+};
+
+export default withStyles(styles)(VoterPositionEditNameAndPhotoModal);