@rxdrag/website-lib-react 0.0.7 → 0.0.8

package/src/components/ContactForm/ContactForm.tsx

@@ -1,296 +0,0 @@
-import React, { forwardRef, useState } from "react";
-import { Submit } from "./Submit";
-import { type UploadedFile } from "./FileUpload2";
-import clsx from "clsx";
-import { encrypt } from "./funcs";
-import { ContactFormProps, QuoteRequest } from "./types";
-import { getControl, getFileUpload } from "./factory";
-
-interface FormErrors {
-  name?: string;
-  email?: string;
-  message?: string;
-}
-
-export const ContactForm = forwardRef<HTMLDivElement, ContactFormProps>(
-  (props, ref) => {
-    const {
-      submit,
-      actionUrl = "/api/ask-for-quote",
-      formSalt,
-      fields = [],
-      className,
-      classNames,
-      fromCta,
-      ...rest
-    } = props;
-    const [formData, setFormData] = useState<QuoteRequest>({
-      name: "",
-      email: "",
-      company: "",
-      message: "",
-      phone: "", // 初始化蜜罐字段
-      attachments: [], // 附件 ID 列表
-    });
-    // 错误状态
-    const [errors, setErrors] = useState<FormErrors>({});
-    const [submitting, setSubmitting] = useState(false);
-    const [isUploading, setIsUploading] = useState(false);
-    const [submitStatus, setSubmitStatus] = useState<{
-      success?: boolean;
-      message?: string;
-    }>({});
-    const lastCta =
-      typeof window === "undefined"
-        ? undefined
-        : (window as Window & { lastCta?: string }).lastCta;
-
-    // 处理输入变化
-    const handleChange = (
-      e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-      isExtends?: boolean
-    ) => {
-      const { name, value } = e.target;
-      if (isExtends) {
-        setFormData((prev) => ({
-          ...prev,
-          extents: {
-            ...(prev.extends || {}),
-            [name]: value,
-          },
-        }));
-      } else {
-        setFormData((prev) => ({
-          ...prev,
-          [name]: value,
-        }));
-      }
-
-      setSubmitStatus({}); // 重置提交状态
-
-      // 清除对应字段的错误
-      if (errors[name as keyof FormErrors]) {
-        setErrors((prev) => ({
-          ...prev,
-          [name]: undefined,
-        }));
-      }
-    };
-
-    // 处理文件上传变化（单文件）
-    const handleFileChange = (fileInfo: UploadedFile | null) => {
-      setFormData((prev) => ({
-        ...prev,
-        attachments: fileInfo ? [fileInfo] : [], // 存储完整的文件信息
-      }));
-    };
-
-    // 处理文件上传状态变化
-    const handleFileUploadStateChange = (uploading: boolean) => {
-      setIsUploading(uploading);
-    };
-    // 验证表单
-    const validateForm = (): boolean => {
-      const newErrors: FormErrors = {};
-
-      // if (!formData.name?.trim()) {
-      //   newErrors.name = "Please enter your name";
-      // }
-
-      if (!formData.email?.trim()) {
-        newErrors.email = "Please enter your email";
-      } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
-        newErrors.email = "Please enter a valid email address";
-      }
-
-      if (!formData.message?.trim()) {
-        newErrors.message = "Please enter your message";
-      }
-
-      // 检查蜜罐字段 - 如果填写了则表示是机器人
-      if (formData.phone) {
-        // 悄悄失败，不显示错误信息
-        console.log("Honeypot triggered - likely spam submission");
-        return false;
-      }
-
-      setErrors(newErrors);
-      return Object.keys(newErrors).length === 0;
-    };
-
-    const handleClick = async (event: React.MouseEvent) => {
-      event.preventDefault(); // 阻止表单默认提交行为
-
-      // 验证表单
-      if (!validateForm()) {
-        return; // 如果验证失败，不继续提交
-      }
-
-      try {
-        setSubmitting(true);
-        setSubmitStatus({}); // 重置提交状态
-        const response = await fetch(actionUrl, {
-          method: "POST",
-          body: JSON.stringify({
-            ...formData,
-            //TODO:后面改成从window 或者传入
-            fromCta: fromCta || lastCta,
-            encryptedField: encrypt(formData.phone, formSalt),
-          }),
-          headers: {
-            "X-Request-URL":
-              typeof window === "undefined" ? "" : window.location.href,
-            "Content-Type": "application/json",
-          },
-        });
-
-        if (!response.ok) {
-          throw new Error(`Server responded with status: ${response.status}`);
-        }
-
-        const result = await response.json();
-
-        setSubmitStatus({
-          success: result.success,
-          message: result.message,
-        });
-
-        if (result.success) {
-          // 重置表单
-          setFormData({
-            name: "",
-            email: "",
-            company: "",
-            message: "",
-            phone: "",
-            attachments: [],
-          });
-          if (typeof window !== "undefined") {
-            window.location.href = "/thanks";
-          }
-        }
-      } catch (error) {
-        // 如果出现错误，打印错误信息
-        console.error("Form submission error:", error);
-        setSubmitStatus({
-          success: false,
-          message:
-            error instanceof Error
-              ? `Error: ${error.message}`
-              : "Failed to submit the form. Please try again later.",
-        });
-      } finally {
-        setSubmitting(false);
-      }
-    };
-
-    return (
-      <div
-        ref={ref}
-        className={clsx(
-          "py-4 grid max-w-2xl grid-cols-1 gap-x-6 sm:grid-cols-2 w-full",
-          className || "gap-y-6"
-        )}
-        {...rest}
-      >
-        {fields.map((field, index) => {
-          const {
-            controlName,
-            feildStyle,
-            isExtends,
-            name,
-            className,
-            inputClassName,
-            labelClassName,
-            ...rest
-          } = field;
-
-          // FileUpload 组件特殊处理
-          if (controlName === "FileUpload") {
-            const FileUploadControl = getFileUpload(feildStyle);
-            return (
-              <FileUploadControl
-                key={name || index}
-                name={name || "attachments"}
-                formSalt={formSalt}
-                className={clsx(classNames?.inputContainer, className)}
-                inputClassName={clsx(classNames?.input, inputClassName)}
-                labelClassName={clsx(classNames?.label, labelClassName)}
-                maxSize={3 * 1024 * 1024}
-                onChange={handleFileChange}
-                onUploadStateChange={handleFileUploadStateChange}
-                placeholder="Click to select file"
-                uploadingText="Uploading..."
-                selectedText="Selected: {name}"
-                accept="*/*"
-                {...rest}
-              />
-            );
-          }
-
-          // 普通输入控件
-          const Control = getControl(controlName, feildStyle);
-          return (
-            <Control
-              key={name || index}
-              name={name}
-              className={clsx(classNames?.inputContainer, className)}
-              labelClassName={clsx(classNames?.label, labelClassName)}
-              inputClassName={clsx(classNames?.input, inputClassName)}
-              requiredClassName={classNames?.required}
-              value={formData[name as keyof QuoteRequest] as string}
-              onChange={(e) => handleChange(e, isExtends)}
-              error={errors[name as keyof FormErrors]}
-              {...rest}
-            />
-          );
-        })}
-
-        {/* 蜜罐字段 - 对用户隐藏但对机器人可见 */}
-        <div style={{ display: "none" }}>
-          <input
-            type="text"
-            name="phone"
-            value={formData.phone}
-            onChange={handleChange}
-            tabIndex={-1}
-            autoComplete="off"
-          />
-        </div>
-        <div
-          className={clsx(
-            "col-span-full flex items-center gap-x-6 px-0 py-2",
-            submit?.containerClassName
-          )}
-        >
-          {submitStatus.message && !submitStatus.success && (
-            <div
-              className={`text-sm ${
-                submitStatus.success ? "text-green-600" : "text-red-600"
-              }`}
-            >
-              {submitStatus.message}
-            </div>
-          )}
-          <Submit
-            className={clsx(
-              "flex gap-2 items-center relative shadow-sm btn btn-lg nowrap",
-              submit?.className || "btn-primary"
-            )}
-            title={submit?.title || "Send Message"}
-            spinner={
-              <div className="left-8 flex items-center justify-center">
-                <div className="animate-spin rounded-full h-5 w-5 border-t-2 border-b-2 border-white" />
-              </div>
-            }
-            rawHtml={submit?.rawHtml}
-            needClasses={submit?.needClasses}
-            submitting={submitting}
-            disabled={submitting || isUploading}
-            onClick={handleClick}
-          />
-        </div>
-      </div>
-    );
-  }
-);