Ask organizer modal implemented
This commit is contained in:
adilallo
@@ -0,0 +1,124 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* Figma: Community Rule System — Modal / Ask an Organizer (22078-587823)
|
||||
* File: agv0VBLiBlcnSAaiAORgPR, node 22078-587823
|
||||
*/
|
||||
|
||||
import { memo, useCallback, useEffect, useState, type FormEvent } from "react";
|
||||
import { AskOrganizerInquiryModalView } from "./AskOrganizerInquiryModal.view";
|
||||
import type { AskOrganizerInquiryModalProps } from "./AskOrganizerInquiryModal.types";
|
||||
import { ORGANIZER_INQUIRY_HONEYPOT_FIELD } from "../../../../lib/organizerInquiryConstants";
|
||||
import { useTranslation } from "../../../contexts/MessagesContext";
|
||||
|
||||
const AskOrganizerInquiryModalContainer = memo<AskOrganizerInquiryModalProps>(
|
||||
({ isOpen, onClose }) => {
|
||||
const t = useTranslation("modals.askOrganizerInquiry");
|
||||
const [email, setEmail] = useState("");
|
||||
const [message, setMessage] = useState("");
|
||||
const [honeypot, setHoneypot] = useState("");
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [success, setSuccess] = useState(false);
|
||||
const [formError, setFormError] = useState<string | null>(null);
|
||||
const [emailError, setEmailError] = useState(false);
|
||||
const [questionError, setQuestionError] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) {
|
||||
setEmail("");
|
||||
setMessage("");
|
||||
setHoneypot("");
|
||||
setSubmitting(false);
|
||||
setSuccess(false);
|
||||
setFormError(null);
|
||||
setEmailError(false);
|
||||
setQuestionError(false);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const onSubmit = useCallback(
|
||||
async (e: FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setFormError(null);
|
||||
setEmailError(false);
|
||||
setQuestionError(false);
|
||||
setSubmitting(true);
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/organizer-inquiry", {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
email,
|
||||
message,
|
||||
[ORGANIZER_INQUIRY_HONEYPOT_FIELD]: honeypot,
|
||||
}),
|
||||
});
|
||||
|
||||
const data: unknown = await res.json().catch(() => null);
|
||||
|
||||
if (res.ok) {
|
||||
setSuccess(true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (res.status === 429) {
|
||||
setFormError(t("rateLimitedError"));
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
data &&
|
||||
typeof data === "object" &&
|
||||
"error" in data &&
|
||||
data.error &&
|
||||
typeof data.error === "object" &&
|
||||
"message" in data.error &&
|
||||
typeof (data.error as { message: unknown }).message === "string"
|
||||
) {
|
||||
const msg = (data.error as { message: string }).message;
|
||||
const lower = msg.toLowerCase();
|
||||
if (lower.includes("email")) {
|
||||
setEmailError(true);
|
||||
}
|
||||
if (lower.includes("character") || lower.includes("question")) {
|
||||
setQuestionError(true);
|
||||
}
|
||||
setFormError(msg);
|
||||
return;
|
||||
}
|
||||
|
||||
setFormError(t("genericError"));
|
||||
} catch {
|
||||
setFormError(t("genericError"));
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
},
|
||||
[email, message, honeypot, t],
|
||||
);
|
||||
|
||||
return (
|
||||
<AskOrganizerInquiryModalView
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
email={email}
|
||||
message={message}
|
||||
honeypot={honeypot}
|
||||
submitting={submitting}
|
||||
success={success}
|
||||
formError={formError}
|
||||
emailError={emailError}
|
||||
questionError={questionError}
|
||||
onEmailChange={setEmail}
|
||||
onMessageChange={setMessage}
|
||||
onHoneypotChange={setHoneypot}
|
||||
onSubmit={onSubmit}
|
||||
/>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
AskOrganizerInquiryModalContainer.displayName = "AskOrganizerInquiryModal";
|
||||
|
||||
export default AskOrganizerInquiryModalContainer;
|
||||
@@ -0,0 +1,4 @@
|
||||
export interface AskOrganizerInquiryModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
@@ -0,0 +1,164 @@
|
||||
"use client";
|
||||
|
||||
import type { FormEvent } from "react";
|
||||
import Create from "../Create";
|
||||
import TextInput from "../../controls/TextInput";
|
||||
import TextArea from "../../controls/TextArea";
|
||||
import Button from "../../buttons/Button";
|
||||
import { useTranslation } from "../../../contexts/MessagesContext";
|
||||
import {
|
||||
ASK_ORGANIZER_INQUIRY_FORM_ID,
|
||||
ORGANIZER_INQUIRY_HONEYPOT_FIELD,
|
||||
} from "../../../../lib/organizerInquiryConstants";
|
||||
import type { AskOrganizerInquiryModalProps } from "./AskOrganizerInquiryModal.types";
|
||||
|
||||
export type AskOrganizerInquiryModalViewProps = AskOrganizerInquiryModalProps & {
|
||||
email: string;
|
||||
message: string;
|
||||
honeypot: string;
|
||||
submitting: boolean;
|
||||
success: boolean;
|
||||
formError: string | null;
|
||||
emailError: boolean;
|
||||
questionError: boolean;
|
||||
onEmailChange: (_v: string) => void;
|
||||
onMessageChange: (_v: string) => void;
|
||||
onHoneypotChange: (_v: string) => void;
|
||||
onSubmit: (_e: FormEvent<HTMLFormElement>) => void;
|
||||
};
|
||||
|
||||
/**
|
||||
* Figma: Community Rule System — Modal / Ask an Organizer (22078-587823)
|
||||
*/
|
||||
export function AskOrganizerInquiryModalView({
|
||||
isOpen,
|
||||
onClose,
|
||||
email,
|
||||
message,
|
||||
honeypot,
|
||||
submitting,
|
||||
success,
|
||||
formError,
|
||||
emailError,
|
||||
questionError,
|
||||
onEmailChange,
|
||||
onMessageChange,
|
||||
onHoneypotChange,
|
||||
onSubmit,
|
||||
}: AskOrganizerInquiryModalViewProps) {
|
||||
const t = useTranslation("modals.askOrganizerInquiry");
|
||||
|
||||
const footer = success ? (
|
||||
<div className="w-full px-1">
|
||||
<Button
|
||||
type="button"
|
||||
buttonType="filled"
|
||||
palette="default"
|
||||
size="large"
|
||||
className="w-full !justify-center"
|
||||
onClick={onClose}
|
||||
>
|
||||
{t("closeAfterSuccess")}
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-full px-1">
|
||||
<Button
|
||||
type="submit"
|
||||
form={ASK_ORGANIZER_INQUIRY_FORM_ID}
|
||||
buttonType="filled"
|
||||
palette="default"
|
||||
size="large"
|
||||
className="w-full !justify-center"
|
||||
disabled={submitting}
|
||||
>
|
||||
{t("submitButton")}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Create
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
title={t("title")}
|
||||
description={t("description")}
|
||||
showBackButton={false}
|
||||
showNextButton={false}
|
||||
stepper={false}
|
||||
ariaLabel={t("ariaDialog")}
|
||||
footerContent={footer}
|
||||
footerClassName="!h-auto min-h-[112px] shrink-0 flex flex-col justify-end pb-8 pt-3 px-4"
|
||||
>
|
||||
{success ? (
|
||||
<div className="flex flex-col gap-3 py-2">
|
||||
<p className="font-inter text-[18px] font-semibold leading-[24px] text-[var(--color-content-default-primary)]">
|
||||
{t("successTitle")}
|
||||
</p>
|
||||
<p className="font-inter text-[14px] leading-[20px] text-[var(--color-content-default-secondary)]">
|
||||
{t("successDescription")}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<form
|
||||
id={ASK_ORGANIZER_INQUIRY_FORM_ID}
|
||||
className="relative flex flex-col gap-6 pb-2"
|
||||
onSubmit={onSubmit}
|
||||
noValidate
|
||||
>
|
||||
{formError ? (
|
||||
<p
|
||||
role="alert"
|
||||
className="font-inter text-[14px] leading-[20px] text-[var(--color-border-default-negative-primary)]"
|
||||
>
|
||||
{formError}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<TextInput
|
||||
type="email"
|
||||
name="email"
|
||||
autoComplete="email"
|
||||
label={t("emailLabel")}
|
||||
placeholder={t("emailPlaceholder")}
|
||||
value={email}
|
||||
onChange={(e) => onEmailChange(e.target.value)}
|
||||
error={emailError}
|
||||
inputSize="medium"
|
||||
showHelpIcon={false}
|
||||
/>
|
||||
|
||||
<TextArea
|
||||
name="message"
|
||||
label={t("questionLabel")}
|
||||
placeholder={t("questionPlaceholder")}
|
||||
value={message}
|
||||
onChange={(e) => onMessageChange(e.target.value)}
|
||||
error={questionError}
|
||||
size="medium"
|
||||
appearance="embedded"
|
||||
rows={4}
|
||||
/>
|
||||
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute left-0 top-0 h-px w-px overflow-hidden opacity-0"
|
||||
>
|
||||
<label htmlFor={`${ASK_ORGANIZER_INQUIRY_FORM_ID}-${ORGANIZER_INQUIRY_HONEYPOT_FIELD}`}>
|
||||
{t("honeypotLabel")}
|
||||
</label>
|
||||
<input
|
||||
id={`${ASK_ORGANIZER_INQUIRY_FORM_ID}-${ORGANIZER_INQUIRY_HONEYPOT_FIELD}`}
|
||||
type="text"
|
||||
name={ORGANIZER_INQUIRY_HONEYPOT_FIELD}
|
||||
tabIndex={-1}
|
||||
autoComplete="off"
|
||||
value={honeypot}
|
||||
onChange={(e) => onHoneypotChange(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</Create>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
export { default } from "./AskOrganizerInquiryModal.container";
|
||||
export * from "./AskOrganizerInquiryModal.types";
|
||||
Reference in New Issue
Block a user