Enhance mailing functionality and update UI titles

- Added `@bounced_email_key` output parameter in `BouncedEmailRepository.cs`.
- Updated dialog title in `BouncedEmailEdit.tsx` from "Add Bounced Email" to "Add Blocked Email".
- Refactored validation schema in `MailingEdit.tsx`, removing old code and adding new validation rules.
- Introduced `nameIsAvailable` and `getNextAvailableName` functions in `MailingEdit.tsx`.
- Integrated `setupData` context in `ActiveMailings.tsx`, `CancelledMailings.tsx`, `NewMailings.tsx`, and `ScheduledMailings.tsx` to refresh setup data during mailing operations.
This commit is contained in:
David Headrick 2025-05-29 15:16:39 -05:00
parent 0e099bfd07
commit 7faac8b448
7 changed files with 171 additions and 160 deletions

View File

@ -67,6 +67,7 @@ namespace Surge365.MassEmailReact.Infrastructure.Repositories
parameters.Add("@unsubscribe", bouncedEmail.Unsubscribe, DbType.Boolean);
parameters.Add("@entered_by_admin", bouncedEmail.EnteredByAdmin, DbType.Boolean);
parameters.Add("@success", dbType: DbType.Boolean, direction: ParameterDirection.Output);
parameters.Add("@bounced_email_key", dbType: DbType.Int32, direction: ParameterDirection.Output);
await conn.ExecuteAsync("mem_save_bounced_email", parameters, commandType: CommandType.StoredProcedure);

View File

@ -95,7 +95,7 @@ const BouncedEmailEdit = ({ open, bouncedEmail, onClose, onSave }: BouncedEmailE
return (
<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
<DialogTitle>{isNew ? "Add Bounced Email" : "Edit Bounced Email"}</DialogTitle>
<DialogTitle>{isNew ? "Add Blocked Email" : "Edit Blocked Email"}</DialogTitle>
<DialogContent>
<TextField
{...register("emailAddress")}

View File

@ -67,6 +67,75 @@ const recurringTypeOptions = [
{ code: 'W', name: 'Weekly' },
];
const MailingEdit = ({ open, mailing, onClose, onSave }: MailingEditProps) => {
const customFetch = useCustomFetch();
const isNew = !mailing || mailing.id === 0;
const setupData: SetupData = useSetupData();
const [approved, setApproved] = useState<boolean>(false);
const [recurring, setRecurring] = useState<boolean>(false);
const [scheduleForLater, setScheduleForLater] = useState<boolean>(false);
const [testEmailListId, setTestEmailListId] = useState<number | null>(null);
const [emails, setEmails] = useState<string[]>([]); // State for email array
const [templateViewerOpen, setTemplateViewerOpen] = useState<boolean>(false);
const [currentTemplate, setCurrentTemplate] = useState<Template | null>(null);
const [TargetSampleModalOpen, setTargetSampleModalOpen] = useState<boolean>(false);
const [currentTarget, setCurrentTarget] = useState<Target | null>(null);
const [targetSample, setTargetSample] = useState<TargetSample | null>(null);
const [targetSampleLoading, setTargetSampleLoading] = useState(false);
const defaultMailing: Mailing = {
id: 0,
name: "",
description: "",
templateId: 0,
targetId: 0,
statusCode: "ED",
scheduleDate: null,
sentDate: null,
sessionActivityId: null,
recurringTypeCode: null,
recurringStartDate: null,
template: {
id: 0,
mailingId: 0,
name: "",
domainId: 0,
description: "",
htmlBody: "",
subject: "",
toName: "",
fromName: "",
fromEmail: "",
replyToEmail: "",
clickTracking: false,
openTracking: false,
categoryXml: ""
},
target: {
id: 0,
mailingId: 0,
serverId: 0,
name: "",
databaseName: "",
viewName: "",
filterQuery: "",
allowWriteBack: false,
}
,
};
const nameIsAvailable = async (id: number, name: string) => {
const response = await customFetch(`/api/mailings/available?${id > 0 ? "id=" + id + "&" : ""}name=${name}`);
const data = await response.json();
return data.available;
};
const getNextAvailableName = async (id: number, name: string) => {
const response = await customFetch(`/api/mailings/nextavailablename?${id > 0 ? "id=" + id + "&" : ""}name=${name}`);
const data = await response.json();
return data.name;
};
const schema = yup.object().shape({
id: yup.number().nullable(),
name: yup.string().required("Name is required")
@ -174,74 +243,6 @@ const schema = yup.object().shape({
}).nullable(),
});
const nameIsAvailable = async (id: number, name: string) => {
const response = await customFetch(`/api/mailings/available?${id > 0 ? "id=" + id + "&" : ""}name=${name}`);
const data = await response.json();
return data.available;
};
const getNextAvailableName = async (id: number, name: string) => {
const response = await customFetch(`/api/mailings/nextavailablename?${id > 0 ? "id=" + id + "&" : ""}name=${name}`);
const data = await response.json();
return data.name;
};
const defaultMailing: Mailing = {
id: 0,
name: "",
description: "",
templateId: 0,
targetId: 0,
statusCode: "ED",
scheduleDate: null,
sentDate: null,
sessionActivityId: null,
recurringTypeCode: null,
recurringStartDate: null,
template: {
id: 0,
mailingId: 0,
name: "",
domainId: 0,
description: "",
htmlBody: "",
subject: "",
toName: "",
fromName: "",
fromEmail: "",
replyToEmail: "",
clickTracking: false,
openTracking: false,
categoryXml: ""
},
target: {
id: 0,
mailingId: 0,
serverId: 0,
name: "",
databaseName: "",
viewName: "",
filterQuery: "",
allowWriteBack: false,
}
,
};
const MailingEdit = ({ open, mailing, onClose, onSave }: MailingEditProps) => {
const customFetch = useCustomFetch();
const isNew = !mailing || mailing.id === 0;
const setupData: SetupData = useSetupData();
const [approved, setApproved] = useState<boolean>(false);
const [recurring, setRecurring] = useState<boolean>(false);
const [scheduleForLater, setScheduleForLater] = useState<boolean>(false);
const [testEmailListId, setTestEmailListId] = useState<number | null>(null);
const [emails, setEmails] = useState<string[]>([]); // State for email array
const [templateViewerOpen, setTemplateViewerOpen] = useState<boolean>(false);
const [currentTemplate, setCurrentTemplate] = useState<Template | null>(null);
const [TargetSampleModalOpen, setTargetSampleModalOpen] = useState<boolean>(false);
const [currentTarget, setCurrentTarget] = useState<Target | null>(null);
const [targetSample, setTargetSample] = useState<TargetSample | null>(null);
const [targetSampleLoading, setTargetSampleLoading] = useState(false);
const { register, trigger, control, handleSubmit, reset, setValue, formState: { errors } } = useForm<Mailing>({
mode: "onBlur",
defaultValues: {
@ -253,6 +254,7 @@ const MailingEdit = ({ open, mailing, onClose, onSave }: MailingEditProps) => {
const [loading, setLoading] = useState(false);
useEffect(() => {
const initializeMailingEdit = async () => {
if (open) {

View File

@ -1,4 +1,5 @@
import { useState, useRef, useEffect } from 'react';
import { useSetupData, SetupData } from "@/context/SetupDataContext";
import RefreshIcon from '@mui/icons-material/Refresh';
import Switch from '@mui/material/Switch';
import { List, Card, CardContent, Typography, Box, useTheme, useMediaQuery, CircularProgress, IconButton, FormControlLabel } from '@mui/material';
@ -9,6 +10,7 @@ import { useCustomFetch } from "@/utils/customFetch";
function ActiveMailings() {
const customFetch = useCustomFetch();
const theme = useTheme();
const setupData: SetupData = useSetupData();
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
const gridContainerRef = useRef<HTMLDivElement | null>(null);
@ -40,6 +42,7 @@ function ActiveMailings() {
isFetchingRef.current = true;
setMailingsLoading(true);
setupData.reloadSetupData();
try {
const response = await customFetch("/api/mailings/status/SD/stats");
const statsData = await response.json();

View File

@ -53,6 +53,7 @@ function CancelledMailings() {
const reloadMailings = async () => {
setMailingsLoading(true);
setupData.reloadSetupData();
const mailingsResponse = await customFetch("/api/mailings/status/c");
const mailingsData = await mailingsResponse.json();
if (mailingsData) {

View File

@ -57,6 +57,7 @@ function NewMailings() {
const reloadMailings = async () => {
setMailingsLoading(true);
setupData.reloadSetupData();
const mailingsResponse = await customFetch("/api/mailings/status/ed");
const mailingsData = await mailingsResponse.json();

View File

@ -1,4 +1,5 @@
import { useState, useRef, useEffect } from 'react';
import { useSetupData, SetupData } from "@/context/SetupDataContext";
import VisibilityIcon from '@mui/icons-material/Visibility';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import CancelIcon from '@mui/icons-material/Cancel';
@ -14,6 +15,7 @@ import { useCustomFetch } from "@/utils/customFetch";
function ScheduleMailings() {
const customFetch = useCustomFetch();
const theme = useTheme();
const setupData: SetupData = useSetupData();
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
const gridContainerRef = useRef<HTMLDivElement | null>(null);
@ -81,6 +83,7 @@ function ScheduleMailings() {
const reloadMailings = async () => {
setMailingsLoading(true);
setupData.reloadSetupData();
const mailingsResponse = await customFetch("/api/mailings/status/sc"); // Adjust endpoint as needed
const mailingsData = await mailingsResponse.json();
if (mailingsData) {