Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MPDX-7930 - Clean Up Styles on Fix Mailing Addresses #952

Merged
merged 6 commits into from
Jun 13, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
213 changes: 114 additions & 99 deletions src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,15 @@
CircularProgress,
Divider,
Grid,
NativeSelect,
MenuItem,
Select,
SelectChangeEvent,
Typography,
} from '@mui/material';
import { Trans, useTranslation } from 'react-i18next';
import { makeStyles } from 'tss-react/mui';
import theme from '../../../theme';
import NoData from '../NoData';
import { StyledInput } from '../StyledInput';
import AddressModal from './AddressModal';
import Contact from './Contact';
import {
Expand Down Expand Up @@ -49,15 +50,15 @@
display: 'flex',
justifyContent: 'center',
},
buttonBlue: {
backgroundColor: theme.palette.mpdxBlue.main,
paddingRight: theme.spacing(1.5),
color: 'white',
[theme.breakpoints.down('xs')]: {
marginTop: theme.spacing(1),
marginBottom: theme.spacing(2),

confirmAllButton: {
[theme.breakpoints.down('md')]: {
width: '100%',
maxWidth: '200px',
margin: `${theme.spacing(1)} auto 0`,
},
},

buttonIcon: {
marginRight: theme.spacing(1),
},
Expand All @@ -67,21 +68,23 @@
alignItems: 'center',
flexWrap: 'wrap',
marginTop: theme.spacing(1),
[theme.breakpoints.down('sm')]: {
justifyContent: 'center',
},
[theme.breakpoints.down('xs')]: {
flexDirection: 'column',
alignItems: 'start',
},
},
nativeSelect: {
select: {
minWidth: theme.spacing(20),
width: '10%',
marginLeft: theme.spacing(2),
marginRight: theme.spacing(2),
[theme.breakpoints.down('xs')]: {
marginLeft: theme.spacing(0),
marginRight: theme.spacing(0),
marginTop: theme.spacing(1),
marginBottom: theme.spacing(1),

[theme.breakpoints.down('md')]: {
width: '100%',
maxWidth: '200px',
margin: `${theme.spacing(1)} auto 0`,
},
},
}));
Expand All @@ -104,6 +107,8 @@
accountListId: string;
}

const sourceOptions = ['MPDX', 'DataServer'];

Check warning on line 110 in src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx#L110

Added line #L110 was not covered by tests

const FixSendNewsletter: React.FC<Props> = ({ accountListId }: Props) => {
const { classes } = useStyles();
const [modalState, setModalState] = useState({
Expand Down Expand Up @@ -143,98 +148,108 @@
}));
};

const handleSourceChange = (
event: React.ChangeEvent<HTMLSelectElement>,
): void => {
const handleSourceChange = (event: SelectChangeEvent<string>): void => {

Check warning on line 151 in src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx#L151

Added line #L151 was not covered by tests
setDefaultSource(event.target.value);
};

const totalContacts = data?.contacts?.nodes?.length || 0;

//TODO: Make navbar selectId = "fixSendNewsletter" when other branch gets merged

return (
<Box className={classes.outer} data-testid="Home">
{!loading && data ? (
<Grid container className={classes.container}>
<Grid item xs={12}>
<Typography variant="h4">{t('Fix Mailing Addresses')}</Typography>
<Divider className={classes.divider} />
</Grid>
{data.contacts?.nodes.length > 0 ? (
<>
<Grid item xs={12}>
<Box className={classes.descriptionBox}>
<Typography>
<strong>
{t('You have {{amount}} mailing addresses to confirm.', {
amount: data?.contacts.nodes.length,
})}
</strong>
</Typography>
<Typography>
{t(
'Choose below which mailing address will be set as primary. Primary mailing addresses will be used for Newsletter exports.',
)}
</Typography>
<Box className={classes.defaultBox}>
<Typography>{t('Default Primary Source:')}</Typography>

<NativeSelect
input={<StyledInput />}
className={classes.nativeSelect}
value={defaultSource}
onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
handleSourceChange(event)
}
>
<option value="MPDX">MPDX</option>
<option value="DataServer">DataServer</option>
</NativeSelect>
<Button className={classes.buttonBlue}>
<Icon
path={mdiCheckboxMarkedCircle}
size={0.8}
className={classes.buttonIcon}
/>
{t('Confirm {{amount}} as {{source}}', {
amount: data?.contacts.nodes.length,
source: defaultSource,
})}
</Button>
<Grid container className={classes.container}>
<Grid item xs={12}>
<Typography variant="h4">{t('Fix Mailing Addresses')}</Typography>
<Divider className={classes.divider} />
</Grid>

{loading && !data && (
<CircularProgress style={{ marginTop: theme.spacing(3) }} />

Check warning on line 168 in src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx#L168

Added line #L168 was not covered by tests
)}

{!loading && data && (
<React.Fragment>

Check warning on line 172 in src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx#L172

Added line #L172 was not covered by tests
{!totalContacts && <NoData tool="fixMailingAddresses" />}
{totalContacts && (
<>

Check warning on line 175 in src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx#L175

Added line #L175 was not covered by tests
<Grid item xs={12}>
<Box className={classes.descriptionBox}>
<Typography>
<strong>
{t(
'You have {{amount}} mailing addresses to confirm.',
{
amount: totalContacts,
},
)}
</strong>
</Typography>
<Typography>
{t(
'Choose below which mailing address will be set as primary. Primary mailing addresses will be used for Newsletter exports.',
)}
</Typography>
<Box className={classes.defaultBox}>
<Typography>{t('Default Primary Source:')}</Typography>

<Select
dr-bizz marked this conversation as resolved.
Show resolved Hide resolved
className={classes.select}
value={defaultSource}
onChange={handleSourceChange}
>
{sourceOptions.map((source) => (
<MenuItem key={source} value={source}>

Check warning on line 202 in src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx#L202

Added line #L202 was not covered by tests
{source}
</MenuItem>
))}
</Select>
<Button
variant="contained"
className={classes.confirmAllButton}
>
<Icon
path={mdiCheckboxMarkedCircle}
size={0.8}
className={classes.buttonIcon}
/>
{t('Confirm {{amount}} as {{source}}', {
amount: totalContacts,
source: defaultSource,
})}
</Button>
</Box>
</Box>
</Box>
</Grid>
<Grid item xs={12}>
{data.contacts.nodes.map((contact) => (
<Contact
id={contact.id}
name={contact.name}
status={contact.status || ''}
key={contact.id}
addresses={contact.addresses.nodes}
openFunction={handleOpen}
/>
))}
</Grid>
<Grid item xs={12}>
<Box className={classes.footer}>
<Typography>
<Trans
defaults="Showing <bold>{{value}}</bold> of <bold>{{value}}</bold>"
shouldUnescape
values={{ value: data?.contacts.nodes.length }}
components={{ bold: <strong /> }}
</Grid>
<Grid item xs={12}>
{data.contacts.nodes.map((contact) => (
<Contact

Check warning on line 226 in src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx#L226

Added line #L226 was not covered by tests
id={contact.id}
name={contact.name}
status={contact.status || ''}
key={contact.id}
addresses={contact.addresses.nodes}
openFunction={handleOpen}
/>
</Typography>
</Box>
</Grid>
</>
) : (
<NoData tool="fixMailingAddresses" />
)}
</Grid>
) : (
<CircularProgress style={{ marginTop: theme.spacing(3) }} />
)}
))}
</Grid>
<Grid item xs={12}>
<Box className={classes.footer}>
<Typography>
<Trans
defaults="Showing <bold>{{value}}</bold> of <bold>{{value}}</bold>"
shouldUnescape
values={{ value: totalContacts }}
components={{ bold: <strong /> }}
/>
</Typography>
</Box>
</Grid>
</>
)}
</React.Fragment>
)}
</Grid>
<AddressModal
modalState={modalState}
handleClose={handleClose}
Expand Down
Loading