import React, { useEffect, useId, useRef, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { v4 as uuid } from "uuid";
import moment from "moment-timezone";
import { toast } from "react-toastify";
import {
ArrowUpTrayIcon,
MapPinIcon,
PhotoIcon,
VideoCameraIcon,
} from "@heroicons/react/24/outline";
import BreadCrumbs from "../Menu/BreadCrumbs";
import { useServvStore } from "../../store/useServvStore";
import PageWrapper from "../Pages/PageWrapper";
import PageContent from "../Containers/PageContent";
import PageActionButton from "../Controls/PageActionButton";
import NewRecurringControl from "../Controls/NewRecurringControl";
import NewDatePickerControl from "../Controls/NewDatePickerControl";
import EventTimeControl from "./EventTimeControl";
import NewEndDateControl from "./NewEndDateControl";
import RegistrantsStep from "./RegistrantsStep";
import useUnifiedEventForm from "./useUnifiedEventForm";
import { readDefaults, uses24HourClock } from "./eventFormData";
import {
RECURRENCE_TYPES,
recurrenceForType,
} from "../../utilities/recurrence";
import { COVER_IMAGE_ACCEPT, readCoverImage } from "./coverImage";
import GenerateDescription, {
generationFilters,
} from "./GenerateDescription";
import CreateFilterModal from "../Pages/Filters/CreateFilterModal";
import { useFilterLimits } from "../Pages/Filters/useFilterLimits";
import styles from "./UnifiedEventForm.module.scss";
import { recurringAllowed as canUseRecurring, multiTicketsAllowed } from "../../utilities/planLimits";
// The same chevron the breadcrumbs draw, turned a quarter to point at the
// menu it opens.
const MenuChevron = ({ open }) => (
);
const Section = ({ step, title, children }) => (
Step {step}
);
export default function UnifiedEventForm() {
const {
event,
patch,
settings,
loading,
saving,
error,
save,
saveDraft,
isNew,
id,
occurrence,
registrantsView,
recoverDraft,
dirty,
occurrences,
loadOccurrences,
} = useUnifiedEventForm();
const filters = useServvStore((s) => s.filtersList);
const stripe = useServvStore((s) => s.stripeConnected);
const zoom = useServvStore((s) => s.zoomConnected);
const calendar = useServvStore((s) => s.calendarConnected);
const calendarSynced = useServvStore((s) => s.calendarSynced);
const navigate = useNavigate();
// BrandingStep renders the Google Calendar toggle from `calendar`, and the
// dashboard bootstrap defers that read — this form can open before it ran,
// or on a reload that never passed through the dashboard at all.
useEffect(() => {
if (!calendarSynced) useServvStore.getState().syncCalendarAccount();
}, [calendarSynced]);
const formRef = useRef(null);
const [editingTicket, setEditingTicket] = useState(null);
const [imageError, setImageError] = useState("");
const [imageName, setImageName] = useState("");
const [imageBusy, setImageBusy] = useState(false);
const [generating, setGenerating] = useState(false);
const [meetingLinkTouched, setMeetingLinkTouched] = useState(false);
const [creatingFilter, setCreatingFilter] = useState(null);
const [occurrencesOpen, setOccurrencesOpen] = useState(false);
// Holds the navigation the confirm dialog will run if the edits are
// abandoned, so one dialog serves every way out of the form.
const [pendingLeave, setPendingLeave] = useState(null);
const occurrencesRef = useRef(null);
const meetingLinkRef = useRef(null);
const imageInputId = useId();
const confirmId = useId();
const meeting = event.meeting;
// image_content holds a freshly picked data URL, sent to the API as base64;
// featured_image_url is the cover already attached to the WordPress post.
const cover = event.image_content || event.featured_image_url || "";
const freePlan = Number(settings.current_plan?.id) === 1;
// A disabled option in a native select carries no explanation of its own, so
// the reason paid tickets are unavailable goes into the label.
const paidTicketNote = freePlan
? " (plan upgrade required)"
: !stripe
? " (connect Stripe)"
: "";
const recurringAllowed = canUseRecurring(settings.current_plan, event.location);
const defaults = readDefaults(settings);
// A filter kind the plan does not expose, or a store that has used up its
// allowance, cannot gain values from here either.
const { isLimitReached, isMembersLimitReached, filterCategories } = useFilterLimits(
settings,
filters,
);
const activeTickets = event.tickets.filter((t) => t.action !== "remove");
const activeTicket = activeTickets.find((t) => t.id === editingTicket);
const patchMeeting = (update) => patch({ meeting: update });
// The API numbers weekdays 1 Sunday through 7 Saturday, and a weekly
// recurrence has to start from a day: the event's own is the sensible one.
const startWeekday = () => {
const start = moment(meeting.startTime);
return start.isValid() ? start.day() + 1 : 1;
};
const provider = event.location === "zoom" ? "zoom" : "offline";
// Online and hybrid events are the two that carry a link of their own; an
// event saved without one reaches the widget as in-person, and attendees
// get a confirmation with nowhere to join.
const needsMeetingLink = ["custom", "hybrid"].includes(event.location);
const meetingLink = (event.custom_fields.custom_field_1_value || "").trim();
const meetingLinkMissing = needsMeetingLink && !meetingLink;
const recurring = Boolean(meeting.recurrence?.type);
const use24Hours = uses24HourClock(settings);
// Occurrence times arrive in UTC and are read in the event's own zone, the
// way every other time on this form is.
const occurrenceLabel = (start) =>
moment
.utc(start)
.tz(meeting.timezone || "UTC")
.format(use24Hours ? "MMM D, YYYY · HH:mm" : "MMM D, YYYY · h:mm A");
// Edits live only in this form until it is saved, so every way out of it
// asks first.
const leave = (go) => (dirty ? setPendingLeave(() => go) : go());
const openOccurrence = (occurrenceId) =>
leave(() =>
navigate(
`/events/${provider}/${id}?occurrence_id=${encodeURIComponent(
occurrenceId,
)}`,
),
);
const patchTicket = (id, update) =>
patch({
tickets: event.tickets.map((t) =>
t.id === id
? { ...t, ...update, action: t.persisted ? "update" : undefined }
: t,
),
});
// Picking Online or Hybrid puts the cursor in the link field. The ref starts
// out matching the loaded event, so opening a saved one steals no focus.
const meetingLinkFocused = useRef(needsMeetingLink);
useEffect(() => {
if (!needsMeetingLink) {
meetingLinkFocused.current = false;
return;
}
if (meetingLinkFocused.current) return;
meetingLinkFocused.current = true;
meetingLinkRef.current?.focus();
}, [needsMeetingLink]);
useEffect(() => {
if (!occurrencesOpen) return;
const close = (e) => {
if (e.type === "keydown" && e.key !== "Escape") return;
if (e.type === "mousedown" && occurrencesRef.current?.contains(e.target))
return;
setOccurrencesOpen(false);
};
document.addEventListener("mousedown", close);
document.addEventListener("keydown", close);
return () => {
document.removeEventListener("mousedown", close);
document.removeEventListener("keydown", close);
};
}, [occurrencesOpen]);
const addTicket = () => {
const ticket = {
id: uuid(),
title: "Standard",
type: "free",
quantity: Number(defaults.default_quantity) || 1,
price: 0,
};
patch({ tickets: [...event.tickets, ticket] });
setEditingTicket(ticket.id);
};
const publish = () => {
if (imageBusy) {
toast.warning("Wait for the cover image to finish processing.");
return;
}
if (generating) {
toast.warning("Wait for the description to finish generating.");
return;
}
if (meetingLinkMissing) {
setMeetingLinkTouched(true);
meetingLinkRef.current?.focus();
return;
}
if (formRef.current?.reportValidity()) save();
};
const updateStart = (part, value) => {
const [date = "", time = "00:00:00"] = (meeting.startTime || "").split("T");
patchMeeting({
startTime: part === "date" ? `${value}T${time}` : `${date}T${value}:00`,
});
};
// Reading and re-encoding is asynchronous, so publishing stays blocked until
// it finishes: otherwise the payload is built without image_content and the
// cover is dropped without any error.
const readImage = async (file) => {
if (!file) return;
setImageBusy(true);
setImageError("");
try {
patch({ image_content: await readCoverImage(file) });
setImageName(file.name);
} catch (failure) {
setImageError(failure.message || "Unable to read this image.");
} finally {
setImageBusy(false);
}
};
// What the chips below do on click, so a value created in the modal ends up
// selected the same way.
const selectFilterValue = (key, id) =>
patch({
filters: {
[key]:
key === "members"
? [...(event.filters.members || []), Number(id)]
: Number(id),
},
});
const filterCards = [
["location_id", "locations", "Location", "Where the event happens"],
[
"category_id",
"categories",
"Category",
"Groups events in the public list",
],
["members", "members", "Member", "Host shown to attendees"],
["language_id", "languages", "Language", "Language of the session"],
];
return (