@rxdrag/website-lib-core 0.0.50 → 0.0.52

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

@@ -0,0 +1,286 @@
+import { forwardRef, useState } from "react";
+import { Submit } from "./Submit";
+import { type UploadedFile } from "./FileUpload";
+import clsx from "clsx";
+import { modal } from "../../../controller";
+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,
+    } = 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 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,
+            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: "",
+            attachments: [],
+          });
+          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",
+          className || "gap-y-6"
+        )}
+      >
+        {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>
+    );
+  }
+);

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

@@ -0,0 +1,430 @@
+import clsx from "clsx";
+import { forwardRef, useRef, useState, useEffect } from "react";
+
+/**
+ * Simple encryption function for generating anti-bot encrypted fields
+ */
+const generateEncryption = (formSalt: string, value: 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;
+  }
+
+  return `${hash.toString(16)}_${timestamp}`;
+};
+
+export type UploadedFile = {
+  id: string;
+  name: string;
+  size: number;
+  url: string; // OSS public URL
+};
+
+export type FileUploadProps = {
+  label: string;
+  name: string;
+  required?: boolean;
+  className?: string;
+  labelClassName?: string;
+  inputClassName?: string;
+  accept?: string;
+  onChange?: (fileInfo: UploadedFile | null) => void;
+  onUploadStateChange?: (isUploading: boolean) => void;
+  error?: string;
+  placeholder?: string;
+  uploadingText?: string;
+  selectedText?: string;
+  formSalt?: string; // 加密盐
+  maxSize?: number; // 最大文件大小（字节），默认 5MB
+};
+
+export const FileUpload = forwardRef<HTMLInputElement, FileUploadProps>(
+  (props, ref) => {
+    const {
+      label,
+      name,
+      required,
+      className,
+      labelClassName,
+      inputClassName,
+      accept = "*/*",
+      onChange,
+      onUploadStateChange,
+      error,
+      placeholder = "Click to select file",
+      uploadingText = "Uploading...",
+      selectedText = "Selected: {name}",
+      formSalt = "default-salt",
+      maxSize = 5 * 1024 * 1024,
+      ...rest
+    } = props;
+
+    const [uploadedFile, setUploadedFile] = useState<UploadedFile | null>(null);
+    const [isUploading, setIsUploading] = useState(false);
+    const [uploadError, setUploadError] = useState<string>("");
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const labelRef = useRef<HTMLLabelElement>(null);
+    const [paddingLeft, setPaddingLeft] = useState("3.5rem");
+    const abortControllerRef = useRef<AbortController | null>(null);
+
+    useEffect(() => {
+      if (labelRef.current) {
+        const width = labelRef.current.getBoundingClientRect().width;
+        setPaddingLeft(`${width + 16}px`);
+      }
+    }, [label]);
+
+    // Upload single file
+    const uploadFile = async (
+      file: File,
+      signal: AbortSignal
+    ): Promise<UploadedFile> => {
+      // Validate file size
+      if (file.size > maxSize) {
+        throw new Error(
+          `File ${file.name} exceeds maximum size limit of ${
+            maxSize / 1024 / 1024
+          }MB`
+        );
+      }
+
+      // Generate encrypted field with honeypot value
+      const honeypot = "";
+      const encryptedField = generateEncryption(formSalt, honeypot);
+
+      // 1. Get upload credentials
+      const credentialsResponse = await fetch("/api/get-upload-credentials", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          fileName: file.name,
+          fileSize: file.size,
+          fileType: file.type,
+          mediaType: "document", // Request document type credentials (usually R2)
+          encryptedField,
+          honeypot,
+        }),
+        signal,
+      });
+
+      if (!credentialsResponse.ok) {
+        const errorData = await credentialsResponse.json();
+        throw new Error(
+          errorData.message || "Failed to get upload credentials"
+        );
+      }
+
+      const credentialsData = await credentialsResponse.json();
+
+      if (!credentialsData.success) {
+        throw new Error(
+          credentialsData.message || "Failed to get upload credentials"
+        );
+      }
+
+      // Extract upload information from response
+      const { credentials, mediaType } = credentialsData;
+      const uploadUrl = credentials?.uploadUrl;
+      const platform = credentials?.platform;
+
+      if (!uploadUrl) {
+        throw new Error("Failed to get upload URL");
+      }
+
+      // 2. Upload to cloud storage
+
+      let uploadResponse: Response;
+
+      // Use different upload methods based on platform type
+      if (platform === "cloudflare_images") {
+        // Cloudflare Images uses FormData + POST
+        const formData = new FormData();
+        formData.append("file", file);
+
+        uploadResponse = await fetch(uploadUrl, {
+          method: "POST",
+          body: formData,
+          signal,
+        });
+      } else {
+        // Other platforms use PUT (e.g., pre-signed URLs)
+        uploadResponse = await fetch(uploadUrl, {
+          method: "PUT",
+          headers: {
+            "Content-Type": file.type,
+          },
+          body: file,
+          signal,
+        });
+      }
+
+      if (!uploadResponse.ok) {
+        throw new Error(
+          `File upload failed: ${uploadResponse.status} ${uploadResponse.statusText}`
+        );
+      }
+
+      // Get resource identifier after upload
+      let resourceId: string;
+      let publicUrl: string;
+
+      if (platform === "cloudflare_images") {
+        // Cloudflare Images returns JSON, extract result.id
+        const uploadResult = await uploadResponse.json();
+        resourceId = uploadResult?.result?.id || uploadUrl;
+        // Construct Cloudflare Images public URL
+        // Format: https://imagedelivery.net/{account_hash}/{image_id}/public
+        const accountHash = uploadUrl.split("/")[3]; // Extract from upload URL
+        publicUrl = `https://imagedelivery.net/${accountHash}/${resourceId}/public`;
+      } else if (platform === "cloudflare_r2") {
+        // Cloudflare R2: uploadUrl is already the public URL (pre-signed or public bucket URL)
+        resourceId = uploadUrl.split("/").pop() || uploadUrl; // Extract filename from URL
+        publicUrl = uploadUrl; // Use the upload URL as public URL
+      } else {
+        // Other platforms use uploadUrl as resource identifier
+        resourceId = uploadUrl;
+        publicUrl = uploadUrl;
+      }
+
+      // 3. Insert Media object into database
+      const mediaPayload = {
+        name: file.name,
+        size: file.size,
+        mimeType: file.type,
+        mediaType,
+        resourceUrl: resourceId,
+        storageType: platform || "cloudflare_images",
+        encryptedField,
+        honeypot,
+      };
+
+      const createMediaResponse = await fetch("/api/create-media", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(mediaPayload),
+        signal,
+      });
+
+      if (!createMediaResponse.ok) {
+        const errorData = await createMediaResponse.json();
+        throw new Error(errorData.message || "Failed to create Media object");
+      }
+
+      const mediaData = await createMediaResponse.json();
+
+      if (!mediaData.success) {
+        throw new Error(mediaData.message || "Failed to create Media object");
+      }
+
+      // Return uploaded file information
+      return {
+        id: mediaData.mediaId,
+        name: file.name,
+        size: file.size,
+        url: publicUrl, // Use public URL instead of resource ID
+      };
+    };
+
+    const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = e.target.files;
+
+      if (!files || files.length === 0) return;
+
+      const file = files[0]; // Only take the first file
+
+      // Create new AbortController
+      const abortController = new AbortController();
+      abortControllerRef.current = abortController;
+
+      setIsUploading(true);
+      onUploadStateChange?.(true); // 通知父组件开始上传
+      setUploadError("");
+
+      try {
+        // Validate file size
+        if (file.size > maxSize) {
+          throw new Error(
+            `File ${file.name} exceeds ${maxSize / 1024 / 1024}MB limit`
+          );
+        }
+
+        // Upload file
+        const uploadedFileData = await uploadFile(file, abortController.signal);
+        setUploadedFile(uploadedFileData);
+        onChange?.(uploadedFileData); // Pass complete file info
+      } catch (error) {
+        // Don't show error if user cancelled
+        if (error instanceof Error && error.name === "AbortError") {
+          console.log("User cancelled upload");
+        } else {
+          console.error("File upload failed:", error);
+          setUploadError(
+            error instanceof Error ? error.message : "File upload failed"
+          );
+        }
+      } finally {
+        setIsUploading(false);
+        onUploadStateChange?.(false); // 通知父组件上传结束
+        abortControllerRef.current = null;
+        // Clear input to allow re-selecting the same file
+        if (fileInputRef.current) {
+          fileInputRef.current.value = "";
+        }
+      }
+    };
+
+    const handleClick = () => {
+      // Don't allow selection if uploading or file already exists
+      if (isUploading || uploadedFile) return;
+      fileInputRef.current?.click();
+    };
+
+    const handleRemoveFile = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      setUploadedFile(null);
+      onChange?.(null); // Pass null when file is removed
+      setUploadError("");
+    };
+
+    const handleCancelUpload = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+    };
+
+    const getDisplayText = () => {
+      if (isUploading) return uploadingText;
+      if (uploadedFile) {
+        return selectedText.replace("{name}", uploadedFile.name);
+      }
+      return placeholder;
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={clsx("relative w-full", className)}
+        {...rest}
+      >
+        <label
+          ref={labelRef}
+          htmlFor={name}
+          className={clsx(
+            "absolute left-3 top-1/2 -translate-y-1/2 mt-1 text-gray-600 text-sm pointer-events-none whitespace-nowrap z-10",
+            labelClassName
+          )}
+        >
+          {label}
+        </label>
+
+        {/* Hidden file input */}
+        <input
+          ref={fileInputRef}
+          type="file"
+          id={name}
+          name={name}
+          required={required}
+          accept={accept}
+          onChange={handleFileChange}
+          disabled={!!uploadedFile}
+          className="hidden"
+        />
+
+        {/* Simulated input box upload area */}
+        <div
+          onClick={handleClick}
+          className={clsx(
+            "w-full pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-300 bg-transparent transition-colors duration-200 flex items-center justify-start min-h-[2.5rem]",
+            isUploading || uploadedFile
+              ? "cursor-not-allowed opacity-75"
+              : "cursor-pointer hover:bg-white",
+            inputClassName
+          )}
+          style={{ paddingLeft }}
+        >
+          <span
+            className={clsx(
+              "pl-6 text-sm font-medium flex-1 mr-4",
+              uploadedFile ? "text-gray-900" : "text-gray-600"
+            )}
+          >
+            {getDisplayText()}
+          </span>
+          {isUploading ? (
+            <button
+              type="button"
+              onClick={handleCancelUpload}
+              className="ml-2 p-1 hover:bg-gray-100 rounded-full transition-colors flex-shrink-0 flex items-center gap-1"
+              title="Cancel upload"
+            >
+              <div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-primary-500" />
+              <svg
+                className="w-3 h-3 text-gray-500"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+          ) : uploadedFile ? (
+            <button
+              type="button"
+              onClick={handleRemoveFile}
+              className="ml-2 p-1 hover:bg-red-100 rounded-full transition-colors flex-shrink-0"
+              title="Delete file"
+            >
+              <svg
+                className="w-4 h-4 text-red-500"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+          ) : (
+            <svg
+              className="w-5 h-5 text-gray-400 flex-shrink-0"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+              />
+            </svg>
+          )}
+        </div>
+
+        {/* Display error message */}
+        {(error || uploadError) && (
+          <p className="text-red-500 mt-1 text-sm">{error || uploadError}</p>
+        )}
+      </div>
+    );
+  }
+);