diff --git a/src/components/Contacts/ContactDetails/ContactDetailsTab/Mailing/EditContactAddressModal/EditContactAddressModal.tsx b/src/components/Contacts/ContactDetails/ContactDetailsTab/Mailing/EditContactAddressModal/EditContactAddressModal.tsx index 713f77eea..9b6af14a0 100644 --- a/src/components/Contacts/ContactDetails/ContactDetailsTab/Mailing/EditContactAddressModal/EditContactAddressModal.tsx +++ b/src/components/Contacts/ContactDetails/ContactDetailsTab/Mailing/EditContactAddressModal/EditContactAddressModal.tsx @@ -68,7 +68,7 @@ interface EditContactAddressModalProps { accountListId: string; address: ContactMailingFragment['addresses']['nodes'][0]; contactId: string; - handleClose: () => void; + handleClose: (deletedAddress: boolean) => void; } export const EditContactAddressModal: React.FC< @@ -115,7 +115,7 @@ export const EditContactAddressModal: React.FC< enqueueSnackbar(t('Address updated successfully'), { variant: 'success', }); - handleClose(); + handleClose(false); }; const deleteContactAddress = async (): Promise => { @@ -158,10 +158,11 @@ export const EditContactAddressModal: React.FC< }, }); } - handleClose(); + handleClose(true); }; - const editingDisabled = address.source === 'Siebel'; + const editingDisabled = + address.source === 'Siebel' || address.source === 'DataServer'; const { data: emailData } = useDonationServicesEmailQuery({ variables: { accountListId, @@ -171,7 +172,11 @@ export const EditContactAddressModal: React.FC< }); return ( - + handleClose(false)} + > {editingDisabled && ( - - - {t('This address is provided by Donation Services')} - -

- {t( - 'The address that syncs with Donation Services cannot be edited here. Please email Donation Services with the updated address, or you can create a new address and select it as your primary mailing address.', + {address.source === 'Siebel' && ( + + + {t('This address is provided by Donation Services')} + +

+ {t( + 'The address that syncs with Donation Services cannot be edited here. Please email Donation Services with the updated address, or you can create a new address and select it as your primary mailing address.', + )} +

+ {emailData && ( +

+ + {t('Email Donation Services here')} + +

)} -

- {emailData && ( +
+ )} + {address.source === 'DataServer' && ( + + + {t('This address is provided by your organization.')} +

- - {t('Email Donation Services here')} - + {t( + 'The address that syncs with your organization’s donations cannot be edited here. Please email your donation department with the updated address, or you can create a new address and select it as your primary mailing address.', + )}

- )} -
+ + )}
)} @@ -391,8 +410,13 @@ export const EditContactAddressModal: React.FC< - {address && } - + {address && !editingDisabled && ( + + )} + handleClose(false)} + disabled={isSubmitting} + /> {(updating || deleting || settingPrimaryAddress) && ( diff --git a/src/components/Tool/FixMailingAddresses/AddressModal.tsx b/src/components/Tool/FixMailingAddresses/AddressModal.tsx deleted file mode 100644 index c62e7963b..000000000 --- a/src/components/Tool/FixMailingAddresses/AddressModal.tsx +++ /dev/null @@ -1,369 +0,0 @@ -import React from 'react'; -import { mdiCloseThick, mdiInformation, mdiMap } from '@mdi/js'; -import Icon from '@mdi/react'; -import { - Box, - Card, - CardActions, - CardContent, - CardHeader, - Checkbox, - Grid, - IconButton, - Modal, - NativeSelect, - TextField, - Typography, -} from '@mui/material'; -import clsx from 'clsx'; -import { useTranslation } from 'react-i18next'; -import { makeStyles } from 'tss-react/mui'; -import { - CancelButton, - SubmitButton, -} from 'src/components/common/Modal/ActionButtons/ActionButtons'; -import theme from '../../../theme'; -import { StyledInput } from '../StyledInput'; -import { ContactAddressFragment } from './GetInvalidAddresses.generated'; - -const useStyles = makeStyles()(() => ({ - modal: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - overflow: 'auto', - }, - paddingX: { - paddingLeft: theme.spacing(1), - paddingRight: theme.spacing(1), - }, - paddingY: { - paddingBottom: theme.spacing(2), - }, - blue: { - color: 'white', - backgroundColor: theme.palette.mpdxBlue.main, - }, - iconButton: { - position: 'absolute', - top: -theme.spacing(2), - right: -theme.spacing(2), - }, - headerBox: { - padding: 0, - position: 'relative', - }, - mapBox: { - marginTop: theme.spacing(1), - height: 200, - width: '100%', - backgroundColor: theme.palette.cruGrayDark.main, - }, - widthFull: { - width: '100%', - }, - cardContent: { - paddingLeft: theme.spacing(1), - paddingRight: theme.spacing(1), - paddingTop: 0, - paddingBottom: 0, - border: 'none', - outline: 'none', - }, - infoBox: { - border: `1px solid ${theme.palette.mpdxBlue.main}`, - backgroundColor: theme.palette.cruGrayLight.main, - color: theme.palette.mpdxBlue.main, - marginLeft: theme.spacing(1), - marginRight: theme.spacing(1), - marginBottom: theme.spacing(2), - padding: theme.spacing(2), - }, - infoMain: { - display: 'flex', - fontWeight: 600, - marginBottom: theme.spacing(1), - }, -})); - -interface Props { - modalState: { - open: boolean; - address: ContactAddressFragment; - }; - handleClose: () => void; - handleChange: ( - event: - | React.ChangeEvent - | React.ChangeEvent, - props: string, - ) => void; -} - -const AddressModal: React.FC = ({ - modalState, - handleClose, - handleChange, -}) => { - const { classes } = useStyles(); - const { t } = useTranslation(); - - const disableAll = !modalState.address.source.includes('MPDX'); - - return ( - - - - - - - {modalState.address.id === 'new' - ? 'Add Address' - : 'Edit Address'} - - - - - - - - - } - /> - - {disableAll && ( - - - - This address is provided by your organization. - - - The address that syncs with your organization’s donations - cannot be edited here. Please email your donation department - with the updated address, or you can create a new address - and select it as your primary mailing address. - - - )} - - - ) => - handleChange(event, 'street') - } - disabled={disableAll} - /> - - - } - disabled={disableAll} - onChange={( - event: React.ChangeEvent< - HTMLSelectElement & HTMLInputElement - >, - ) => handleChange(event, 'location')} - className={classes.widthFull} - > - - - - - - - - - - - - ) => - handleChange(event, 'city') - } - /> - - - ) => - handleChange(event, 'state') - } - /> - - - ) => - handleChange(event, 'postalCode') - } - /> - - - ) => - handleChange(event, 'country') - } - /> - - - ) => - handleChange(event, 'region') - } - /> - - - ) => - handleChange(event, 'metroArea') - } - /> - - - - ) => - handleChange(event, 'historic') - } - /> - - Address no longer valid - - - - - - - - - {/*TODO: make "newAddress" field in address false so it says "edit" instead of "add" */} - Save - - - - - - - ); -}; - -export default AddressModal; diff --git a/src/components/Tool/FixMailingAddresses/Contact.tsx b/src/components/Tool/FixMailingAddresses/Contact.tsx index fcfe665b6..8a0bd1eda 100644 --- a/src/components/Tool/FixMailingAddresses/Contact.tsx +++ b/src/components/Tool/FixMailingAddresses/Contact.tsx @@ -89,18 +89,21 @@ const useStyles = makeStyles()(() => ({ })); interface Props { - id?: string; + id: string; name: string; status: string; addresses: ContactAddressFragment[]; - openFunction: (address: ContactAddressFragment) => void; + openEditAddressModal: (address: ContactAddressFragment, id: string) => void; + openNewAddressModal: (address: ContactAddressFragment, id: string) => void; } const Contact: React.FC = ({ + id, name, status, addresses, - openFunction, + openEditAddressModal, + openNewAddressModal, }) => { const { t } = useTranslation(); const locale = useLocale(); @@ -194,7 +197,7 @@ const Contact: React.FC = ({ classes.paddingL2, classes.hoverHighlight, )} - onClick={() => openFunction(address)} + onClick={() => openEditAddressModal(address, id)} > @@ -238,7 +241,7 @@ const Contact: React.FC = ({ )} > openFunction(newAddress)} + onClick={() => openNewAddressModal(newAddress, id)} className={classes.address} /> diff --git a/src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx b/src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx index 03eaf814d..841b655b2 100644 --- a/src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx +++ b/src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx @@ -14,9 +14,9 @@ import { } from '@mui/material'; import { Trans, useTranslation } from 'react-i18next'; import { makeStyles } from 'tss-react/mui'; +import { EditContactAddressModal } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/Mailing/EditContactAddressModal/EditContactAddressModal'; import theme from '../../../theme'; import NoData from '../NoData'; -import AddressModal from './AddressModal'; import Contact from './Contact'; import { ContactAddressFragment, @@ -50,7 +50,6 @@ const useStyles = makeStyles()(() => ({ display: 'flex', justifyContent: 'center', }, - confirmAllButton: { [theme.breakpoints.down('md')]: { width: '100%', @@ -58,7 +57,6 @@ const useStyles = makeStyles()(() => ({ margin: `${theme.spacing(1)} auto 0`, }, }, - buttonIcon: { marginRight: theme.spacing(1), }, @@ -114,38 +112,26 @@ const FixSendNewsletter: React.FC = ({ accountListId }: Props) => { const [modalState, setModalState] = useState({ open: false, address: emptyAddress, + contactId: '', }); const { t } = useTranslation(); const [defaultSource, setDefaultSource] = useState('MPDX'); - const { data, loading } = useInvalidAddressesQuery({ + const { data, loading, refetch } = useInvalidAddressesQuery({ variables: { accountListId }, }); - const handleOpen = (address: ContactAddressFragment): void => { - setModalState({ open: true, address: address }); - }; - - const handleClose = (): void => { - setModalState({ open: false, address: emptyAddress }); + const handleOpen = ( + address: ContactAddressFragment, + contactId: string, + ): void => { + setModalState({ open: true, address, contactId }); }; - const handleChange = ( - event: - | React.ChangeEvent - | React.ChangeEvent, - props: string, - ): void => { - const tempAddress = modalState.address; // Error prevention, can remove later - setModalState((prevState) => ({ - ...prevState, - address: { - ...tempAddress, - [props]: - event.target.name === 'checkbox' - ? event.target.checked - : event.target.value, - }, - })); + const handleClose = (deleteAddress: boolean): void => { + if (deleteAddress) { + refetch(); + } + setModalState({ open: false, address: emptyAddress, contactId: '' }); }; const handleSourceChange = (event: SelectChangeEvent): void => { @@ -229,7 +215,8 @@ const FixSendNewsletter: React.FC = ({ accountListId }: Props) => { status={contact.status || ''} key={contact.id} addresses={contact.addresses.nodes} - openFunction={handleOpen} + openEditAddressModal={handleOpen} + openNewAddressModal={handleOpen} /> ))} @@ -250,11 +237,14 @@ const FixSendNewsletter: React.FC = ({ accountListId }: Props) => { )} - + {modalState.open && ( + + )} ); };