[WV-660]Enhance VoterPositionEditNameAndPhotoModal

- Updated modal structure to mirror SettingsProfile.jsx design
- Integrated components: SettingsProfilePicture, SettingsWidgetAccountType, SettingsWidgetFirstLastName, SettingsWidgetOrganizationDescription, and SettingsWidgetOrganizationWebsite
- Added styled-components for cleaner layout and responsiveness
- Fixed eslint issues across the file

src/js/components/PositionItem/VoterPositionEditNameAndPhotoModal.jsx

@@ -1,45 +1,35 @@
-import React, { useState } from 'react';
-import { Dialog, DialogTitle, DialogContent, Button, TextField, IconButton } from '@mui/material';
+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 [firstName, setFirstName] = useState('');
-  const [lastName, setLastName] = useState('');
-  const [website, setWebsite] = useState('');
-  const [description, setDescription] = useState('');
-  const [photo, setPhoto] = useState(null);
+  const [voter, setVoter] = useState(null);
 
-  const handlePhotoUpload = (event) => {
-    const file = event.target.files[0];
-    if (file && file.type.startsWith('image/')) {
-      const reader = new FileReader();
-      reader.onload = (e) => setPhoto(e.target.result);
-      reader.readAsDataURL(file);
-    } else {
-      alert('Please upload a valid image file.');
+  useEffect(() => {
+    if (show) {
+      // Fetch voter data when modal is displayed
+      const voterData = VoterStore.getVoter();
+      setVoter(voterData);
     }
-  };
+  }, [show]);
 
-  const handleSave = () => {
-    if (!firstName.trim() || !lastName.trim()) {
-      alert('First and Last name are required.');
-      return;
-    }
-    if (website && !website.startsWith('http')) {
-      alert('Please enter a valid URL starting with http or https.');
-      return;
-    }
-    // Add logic to save details
-    toggleModal();
-  };
+  if (!voter) {
+    return null; // Prevent rendering until voter data is available
+  }
 
   return (
     <Dialog open={show} onClose={toggleModal} maxWidth="sm" fullWidth>
       <DialogTitle>
-        Name & Photo Settings
+        Edit Profile
         <IconButton
           aria-label="close"
           className={classes.closeButton}
@@ -50,74 +40,51 @@ const VoterPositionEditNameAndPhotoModal = ({ show, toggleModal, classes }) => {
       </DialogTitle>
       <DialogContent className={classes.modalContent}>
         <p>
-          We are serious about protecting your information. We are non-profit and never sell information.
+          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}>
+          <a
+            href="/frequently-asked-questions"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={classes.a}
+          >
             Frequently Asked Questions.
           </a>
         </p>
-        <div className={classes.uploadSection}>
-          <div className={classes.profilePhoto}>
-            {photo ? <img src={photo} alt="Profile" style={{ width: '100%', borderRadius: '50%' }} /> : 'Upload'}
-          </div>
-          <input
-            type="file"
-            accept="image/*"
-            onChange={handlePhotoUpload}
-            style={{ display: 'none' }}
-            id="upload-photo"
+        <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
           />
-          <label htmlFor="upload-photo">
-            <Button variant="outlined" component="span">
-              Upload Profile Photo
-            </Button>
-          </label>
         </div>
-        <TextField
-          label="First Name"
-          value={firstName}
-          onChange={(e) => setFirstName(e.target.value)}
-          fullWidth
-          variant="outlined"
-          className={classes.formField}
-        />
-        <TextField
-          label="Last Name"
-          value={lastName}
-          onChange={(e) => setLastName(e.target.value)}
-          fullWidth
-          variant="outlined"
-          className={classes.formField}
-        />
-        <TextField
-          label="Name Shown with Endorsements"
-          value={`${firstName} ${lastName}`}
-          fullWidth
-          variant="outlined"
-          className={classes.formField}
-          disabled
-        />
-        <TextField
-          label="Your Website"
-          value={website}
-          onChange={(e) => setWebsite(e.target.value)}
-          fullWidth
-          variant="outlined"
-          className={classes.formField}
-        />
-        <TextField
-          label="Description Shown with Endorsements"
-          value={description}
-          onChange={(e) => setDescription(e.target.value)}
-          fullWidth
-          variant="outlined"
-          className={classes.formField}
-          multiline
-          rows={3}
-        />
-        <Button variant="contained" color="primary" onClick={handleSave} fullWidth>
-          Save
-        </Button>
       </DialogContent>
     </Dialog>
   );
@@ -128,33 +95,11 @@ VoterPositionEditNameAndPhotoModal.propTypes = {
   toggleModal: PropTypes.func.isRequired,
   classes: PropTypes.object.isRequired,
 };
+
 const styles = {
   modalContent: {
     padding: '20px',
   },
-  uploadSection: {
-    alignItems: 'center',
-    border: `3px dashed ${DesignTokenColors.neutral100}`,
-    borderRadius: '8px',
-    display: 'flex',
-    flexDirection: 'column',
-    marginBottom: '20px',
-    padding: '20px',
-  },
-  profilePhoto: {
-    alignItems: 'center',
-    backgroundColor: DesignTokenColors.neutral50,
-    borderRadius: '50%',
-    display: 'flex',
-    height: '80px',
-    justifyContent: 'center',
-    marginBottom: '10px',
-    width: '80px',
-  },
-  formField: {
-    color: DesignTokenColors.neutral100,
-    marginBottom: '15px',
-  },
   a: {
     color: DesignTokenColors.primary500,
   },
@@ -166,5 +111,4 @@ const styles = {
   },
 };
 
-
 export default withStyles(styles)(VoterPositionEditNameAndPhotoModal);