diff --git a/app/(app)/create/CreateFlowLayoutClient.tsx b/app/(app)/create/CreateFlowLayoutClient.tsx index 74f3e58..85e38c4 100644 --- a/app/(app)/create/CreateFlowLayoutClient.tsx +++ b/app/(app)/create/CreateFlowLayoutClient.tsx @@ -33,6 +33,7 @@ import { TEMPLATE_REVIEW_FROM_CREATE_FLOW_VALUE, } from "./utils/flowSteps"; import { + CREATE_FLOW_COMMUNITY_SAVE_FORM_ID, CREATE_FLOW_SYNC_DRAFT_QUERY, CREATE_FLOW_SYNC_DRAFT_VALUE, CREATE_ROUTES, @@ -482,12 +483,28 @@ function CreateFlowLayoutContent({ return () => window.clearTimeout(timeoutId); }, [currentStep, sessionResolved, sessionUser, openLogin]); - const handleCommunitySaveMagicLinkSubmit = useCallback(async () => { + const handleCommunitySaveMagicLinkSubmit = useCallback(async ( + formEl?: HTMLFormElement | null, + ) => { setCommunitySaveMagicLinkError(null); setCommunitySaveMagicLinkSuccess(false); - const raw = state.communitySaveEmail; - const trimmed = typeof raw === "string" ? raw.trim().toLowerCase() : ""; - if (!isValidCreateFlowSaveEmail(trimmed)) return; + const namedEmail = formEl?.elements.namedItem("email"); + const emailField = + namedEmail instanceof HTMLInputElement + ? namedEmail + : typeof document === "undefined" + ? null + : document.querySelector( + `input[name="email"][form="${CREATE_FLOW_COMMUNITY_SAVE_FORM_ID}"]`, + ); + if (emailField != null && !emailField.checkValidity()) { + emailField.reportValidity(); + return; + } + const raw = + emailField != null ? emailField.value : state.communitySaveEmail; + if (typeof raw !== "string" || !isValidCreateFlowSaveEmail(raw)) return; + const trimmed = raw.trim().toLowerCase(); setCommunitySaveMagicLinkSubmitting(true); try { @@ -770,6 +787,16 @@ function CreateFlowLayoutContent({ isCompletedStep ? "!bg-[var(--color-teal-teal50,#c9fef9)]" : "" }`.trim()} /> + {currentStep === "community-save" ? ( +
{ + e.preventDefault(); + void handleCommunitySaveMagicLinkSubmit(e.currentTarget); + }} + /> + ) : null}
@@ -841,6 +868,8 @@ function CreateFlowLayoutContent({ {footer.saveLater}