@rxdrag/website-lib-core 0.0.50 → 0.0.51

package/src/react/components/ContactForm/index.tsx

@@ -1,351 +0,0 @@
-import { forwardRef, useState } from "react";
-import { Input } from "./Input";
-import { Submit } from "./Submit";
-import { Textarea } from "./Textarea";
-import clsx from "clsx";
-import { modal } from "../../../controller";
-
-/**
- * 简单的加密函数，用于生成防机器人的加密字段
- * @param value 需要加密的值
- * @returns 加密后的字符串
- */
-const encrypt = (value: string, formSalt: string): string => {
-  // 获取当前时间戳，精确到分钟级别（防止频繁变化）
-  const timestamp = Math.floor(Date.now() / (60 * 1000));
-
-  // 将时间戳与盐值和输入值组合
-  const dataToEncrypt = `${formSalt}:${timestamp}:${value}`;
-
-  // 使用简单的哈希算法
-  let hash = 0;
-  for (let i = 0; i < dataToEncrypt.length; i++) {
-    const char = dataToEncrypt.charCodeAt(i);
-    hash = (hash << 5) - hash + char;
-    hash = hash & hash; // 转换为32位整数
-  }
-
-  // 转换为16进制字符串并添加时间戳信息
-  return `${hash.toString(16)}_${timestamp}`;
-};
-
-/**
- * 验证加密字段是否有效
- * @param encryptedValue 加密后的字符串
- * @param originalValue 原始值（如蜜罐字段的值）
- * @param maxAgeMinutes 最大有效时间（分钟）
- * @returns 是否有效
- */
-export const verifyEncryption = (
-  formSalt: string,
-  encryptedValue: string = "",
-  originalValue: string = "",
-  maxAgeMinutes: number = 30
-): boolean => {
-  // 解析加密值
-  const parts = encryptedValue.split("_");
-  if (parts.length !== 2) {
-    return false; // 格式不正确
-  }
-
-  const [hashString, timestampString] = parts;
-  const timestamp = parseInt(timestampString, 10);
-
-  // 验证时间戳是否在有效期内
-  const currentTimestamp = Math.floor(Date.now() / (60 * 1000));
-  if (isNaN(timestamp) || currentTimestamp - timestamp > maxAgeMinutes) {
-    return false; // 时间戳无效或已过期
-  }
-
-  // 重新计算哈希值
-  const dataToEncrypt = `${formSalt}:${timestamp}:${originalValue}`;
-  let hash = 0;
-  for (let i = 0; i < dataToEncrypt.length; i++) {
-    const char = dataToEncrypt.charCodeAt(i);
-    hash = (hash << 5) - hash + char;
-    hash = hash & hash;
-  }
-
-  // 比较哈希值
-  return hashString === hash.toString(16);
-};
-
-export interface QuoteRequest {
-  name?: string;
-  email?: string;
-  company?: string;
-  message?: string;
-  fromCta?: string;
-  // 电话或者whatsapp
-  mobile?: string;
-  // 蜜罐字段，用于检测机器人
-  phone: string;
-  // 一个加密字段，用于防机器人，点击时附加一个加密的字符串
-  encryptedField?: string;
-}
-interface FormErrors {
-  name?: string;
-  email?: string;
-  message?: string;
-}
-
-export type ContactFormProps = {
-  submitAlign?: "left" | "center" | "right";
-  actionUrl?: string;
-  formSalt: string;
-  classNames?: {
-    submit?: string;
-    container?: string;
-  };
-  labels?: {
-    name?: string;
-    email?: string;
-    company?: string;
-    message?: string;
-    submit?: string;
-    mobile?: string;
-  };
-};
-
-export const ContactForm = forwardRef<HTMLDivElement, ContactFormProps>(
-  (props, ref) => {
-    const {
-      submitAlign = "right",
-      actionUrl = "/api/ask-for-quote",
-      formSalt,
-      labels = {},
-      classNames = {},
-    } = props;
-    const [formData, setFormData] = useState<QuoteRequest>({
-      name: "",
-      email: "",
-      company: "",
-      message: "",
-      phone: "", // 初始化蜜罐字段
-    });
-    const submitClassName = classNames.submit || "btn-primary";
-    const containerClassName = classNames.container || "gap-y-6";
-    // 错误状态
-    const [errors, setErrors] = useState<FormErrors>({});
-    const [submitting, setSubmitting] = useState(false);
-    const [submitStatus, setSubmitStatus] = useState<{
-      success?: boolean;
-      message?: string;
-    }>({});
-
-    // 处理输入变化
-    const handleChange = (
-      e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-    ) => {
-      const { name, value } = e.target;
-      setFormData((prev) => ({
-        ...prev,
-        [name]: value,
-      }));
-
-      setSubmitStatus({}); // 重置提交状态
-
-      // 清除对应字段的错误
-      if (errors[name as keyof FormErrors]) {
-        setErrors((prev) => ({
-          ...prev,
-          [name]: undefined,
-        }));
-      }
-    };
-    // 验证表单
-    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,
-            fromCta: modal.lastCta,
-            encryptedField: encrypt(formData.phone, formSalt),
-          }),
-          headers: {
-            "X-Request-URL": 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: "",
-          });
-          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",
-          containerClassName
-        )}
-      >
-        <Input
-          className="sm:col-span-1"
-          inputClassName="mt-2 block w-full rounded-md outline-none border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6"
-          label={labels?.name || "Your Name"}
-          labelClassName="block text-sm font-medium leading-6 text-gray-900"
-          name="name"
-          value={formData.name}
-          onChange={handleChange}
-          error={errors.name}
-        />
-        <Input
-          className="sm:col-span-1"
-          inputClassName="mt-2 block w-full rounded-md outline-none border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6"
-          label={(labels?.email || "Your Email") + " *"}
-          labelClassName="block text-sm font-medium leading-6 text-gray-900"
-          name="email"
-          required={true}
-          type="email"
-          value={formData.email}
-          onChange={handleChange}
-          error={errors.email}
-        />
-        <Input
-          className="sm:col-span-1"
-          inputClassName="mt-2 block w-full rounded-md outline-none border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6"
-          label={labels?.mobile || "Your tel"}
-          labelClassName="block text-sm font-medium leading-6 text-gray-900"
-          name="mobile"
-          required={true}
-          value={formData.mobile}
-          onChange={handleChange}
-        />
-        <Input
-          className="sm:col-span-1"
-          inputClassName="mt-2 block w-full rounded-md outline-none border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6"
-          label={labels?.company || "Company"}
-          labelClassName="block text-sm font-medium leading-6 text-gray-900"
-          name="company"
-          value={formData.company}
-          onChange={handleChange}
-        />
-        <Textarea
-          className="col-span-full"
-          label={(labels?.message || "Message") + " *"}
-          labelClassName="block text-sm font-medium leading-6 text-gray-900"
-          name="message"
-          required={true}
-          textareaClassName="mt-2 block w-full rounded-md outline-none border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6"
-          value={formData.message}
-          onChange={handleChange}
-          error={errors.message}
-        />
-        {/* 蜜罐字段 - 对用户隐藏但对机器人可见 */}
-        <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", {
-            "justify-start": submitAlign === "left",
-            "justify-center": submitAlign === "center",
-            "justify-end": submitAlign === "right",
-          })}
-        >
-          {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",
-              submitClassName
-            )}
-            title={labels?.submit || "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>
-            }
-            submitting={submitting}
-            onClick={handleClick}
-          />
-        </div>
-      </div>
-    );
-  }
-);