@businessflow/reviews 1.0.0

package/dist/react/index.mjs

@@ -0,0 +1,1355 @@
+// src/react/hooks/useReviewSubmission.ts
+import { useState as useState2, useCallback as useCallback2 } from "react";
+
+// src/client/validation.ts
+var DEFAULT_REVIEW_VALIDATION_RULES = {
+  reviewerName: [
+    { type: "required", message: "Name is required" },
+    { type: "minLength", value: 2, message: "Name must be at least 2 characters" },
+    { type: "maxLength", value: 100, message: "Name must be less than 100 characters" }
+  ],
+  reviewerEmail: [
+    { type: "required", message: "Email is required" },
+    { type: "email", message: "Please enter a valid email address" }
+  ],
+  rating: [
+    { type: "required", message: "Rating is required" },
+    { type: "rating", message: "Please select a rating between 1 and 5 stars" }
+  ],
+  content: [
+    { type: "maxLength", value: 2e3, message: "Review content must be less than 2000 characters" }
+  ],
+  reviewerTitle: [
+    { type: "maxLength", value: 100, message: "Title must be less than 100 characters" }
+  ],
+  reviewerCompany: [
+    { type: "maxLength", value: 100, message: "Company name must be less than 100 characters" }
+  ]
+};
+function validateField(value, rules) {
+  for (const rule of rules) {
+    switch (rule.type) {
+      case "required":
+        if (!value || typeof value === "string" && value.trim().length === 0) {
+          return rule.message || "This field is required";
+        }
+        break;
+      case "email":
+        if (value && typeof value === "string") {
+          const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+          if (!emailRegex.test(value.trim())) {
+            return rule.message || "Please enter a valid email address";
+          }
+        }
+        break;
+      case "rating":
+        if (typeof value === "number") {
+          if (value < 1 || value > 5 || !Number.isInteger(value)) {
+            return rule.message || "Rating must be between 1 and 5 stars";
+          }
+        } else if (value !== void 0 && value !== null) {
+          return rule.message || "Rating must be a number between 1 and 5";
+        }
+        break;
+      case "minLength":
+        if (value && typeof value === "string" && typeof rule.value === "number") {
+          if (value.trim().length < rule.value) {
+            return rule.message || `Must be at least ${rule.value} characters`;
+          }
+        }
+        break;
+      case "maxLength":
+        if (value && typeof value === "string" && typeof rule.value === "number") {
+          if (value.trim().length > rule.value) {
+            return rule.message || `Must be less than ${rule.value} characters`;
+          }
+        }
+        break;
+      case "pattern":
+        if (value && typeof value === "string" && typeof rule.value === "string") {
+          const regex = new RegExp(rule.value);
+          if (!regex.test(value)) {
+            return rule.message || "Invalid format";
+          }
+        }
+        break;
+      case "custom":
+        if (rule.validator) {
+          const result = rule.validator(value);
+          if (result !== true) {
+            return typeof result === "string" ? result : rule.message || "Validation failed";
+          }
+        }
+        break;
+    }
+  }
+  return null;
+}
+function validateReviewData(data, customRules) {
+  const errors = {};
+  const rules = { ...DEFAULT_REVIEW_VALIDATION_RULES, ...customRules };
+  Object.entries(rules).forEach(([field, fieldRules]) => {
+    const value = data[field];
+    const error = validateField(value, fieldRules);
+    if (error) {
+      errors[field] = error;
+    }
+  });
+  return Object.keys(errors).length > 0 ? errors : null;
+}
+function sanitizeReviewData(data) {
+  const sanitized = {
+    reviewerName: typeof data.reviewerName === "string" ? data.reviewerName.trim() : "",
+    reviewerEmail: typeof data.reviewerEmail === "string" ? data.reviewerEmail.trim().toLowerCase() : "",
+    rating: data.rating
+  };
+  if (data.reviewerTitle && typeof data.reviewerTitle === "string" && data.reviewerTitle.trim()) {
+    sanitized.reviewerTitle = data.reviewerTitle.trim();
+  }
+  if (data.reviewerCompany && typeof data.reviewerCompany === "string" && data.reviewerCompany.trim()) {
+    sanitized.reviewerCompany = data.reviewerCompany.trim();
+  }
+  if (data.content && typeof data.content === "string" && data.content.trim()) {
+    sanitized.content = data.content.trim();
+  }
+  Object.keys(data).forEach((key) => {
+    if (!["reviewerName", "reviewerEmail", "rating", "reviewerTitle", "reviewerCompany", "content"].includes(key)) {
+      sanitized[key] = data[key];
+    }
+  });
+  return sanitized;
+}
+
+// src/client/client.ts
+var logDebug = (context, data) => {
+  if (typeof process !== "undefined" && process.env?.NODE_ENV === "development") {
+    console.log(`[ReviewClient] ${context}`, data ? ":" : "");
+    if (data) {
+      console.log(`[ReviewClient] Data:`, data);
+    }
+  }
+};
+var logError = (context, error, additionalData) => {
+  if (typeof process !== "undefined" && process.env?.NODE_ENV === "development") {
+    console.error(`[ReviewClient] ${context}:`, error);
+    if (additionalData) {
+      console.error(`[ReviewClient] Additional data:`, additionalData);
+    }
+  }
+};
+var DEFAULT_ERROR_MESSAGES = {
+  SUBMISSION_FAILED: "Failed to submit review",
+  FETCH_FAILED: "Failed to fetch reviews",
+  SERVER_ERROR: "Server error. Please try again.",
+  NETWORK_ERROR: "Network error. Please check your connection.",
+  GENERAL_ERROR: "An unexpected error occurred"
+};
+var ReviewClient = class {
+  // 30 seconds
+  constructor(config) {
+    this.maxRetries = 3;
+    this.timeout = 3e4;
+    this.fetchConfig = config.fetchConfig;
+    this.submitConfig = config.submitConfig;
+    if (config.maxRetries !== void 0) this.maxRetries = config.maxRetries;
+    if (config.timeout !== void 0) this.timeout = config.timeout;
+  }
+  /**
+   * Fetch reviews with retry logic
+   */
+  async fetchReviews(params, retryCount = 0) {
+    if (!this.fetchConfig) {
+      throw new Error("Fetch configuration not provided");
+    }
+    const maxRetries = this.fetchConfig.maxRetries ?? this.maxRetries;
+    const timeout = this.fetchConfig.timeout ?? this.timeout;
+    const retryDelay = Math.min(1e3 * Math.pow(2, retryCount), 5e3);
+    try {
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), timeout);
+      const queryParams = new URLSearchParams();
+      const mergedParams = { ...this.fetchConfig.params, ...params };
+      Object.entries(mergedParams).forEach(([key, value]) => {
+        if (value !== void 0 && value !== null) {
+          queryParams.append(key, String(value));
+        }
+      });
+      const url = `${this.fetchConfig.endpoint}?${queryParams.toString()}`;
+      logError("Fetching reviews", null, { url, params: mergedParams, retryCount });
+      const response = await fetch(url, {
+        method: this.fetchConfig.method || "GET",
+        headers: {
+          "Content-Type": "application/json",
+          "Accept": "application/json",
+          ...this.fetchConfig.headers
+        },
+        signal: controller.signal
+      });
+      clearTimeout(timeoutId);
+      if (!response.ok) {
+        const errorDetails = {
+          status: response.status,
+          statusText: response.statusText,
+          url: response.url
+        };
+        logError("API response error", null, errorDetails);
+        if (response.status >= 500) {
+          const error = new Error(DEFAULT_ERROR_MESSAGES.SERVER_ERROR);
+          error.retryable = true;
+          throw error;
+        } else {
+          throw new Error(`${DEFAULT_ERROR_MESSAGES.FETCH_FAILED}: HTTP ${response.status}`);
+        }
+      }
+      let responseData;
+      try {
+        responseData = await response.json();
+      } catch (parseError) {
+        logError("Failed to parse response", parseError);
+        throw new Error("Invalid response format from server");
+      }
+      const reviews = this.fetchConfig.transformResponse ? this.fetchConfig.transformResponse(responseData) : Array.isArray(responseData) ? responseData : [];
+      logDebug("Reviews fetched successfully", { count: reviews.length });
+      return reviews;
+    } catch (error) {
+      logError("Review fetch error", error, { retryCount, maxRetries });
+      if (error instanceof Error && error.name === "AbortError") {
+        const timeoutError = new Error("Request timeout. Please try again.");
+        timeoutError.retryable = true;
+        throw timeoutError;
+      }
+      if (error instanceof TypeError && (error.message.includes("fetch") || error.message.includes("network") || error.message.includes("Failed to fetch"))) {
+        const networkError = new Error(DEFAULT_ERROR_MESSAGES.NETWORK_ERROR);
+        networkError.retryable = true;
+        throw networkError;
+      }
+      const isRetryable = error.retryable === true;
+      if (isRetryable && retryCount < maxRetries) {
+        logDebug(`Retrying in ${retryDelay}ms`, { retryCount: retryCount + 1 });
+        await new Promise((resolve) => setTimeout(resolve, retryDelay));
+        return this.fetchReviews(params, retryCount + 1);
+      }
+      if (this.fetchConfig.onError && error instanceof Error) {
+        this.fetchConfig.onError(error);
+      }
+      if (error instanceof Error) {
+        throw error;
+      }
+      throw new Error(DEFAULT_ERROR_MESSAGES.GENERAL_ERROR);
+    }
+  }
+  /**
+   * Submit a review with retry logic
+   */
+  async submitReview(reviewData, retryCount = 0) {
+    if (!this.submitConfig) {
+      throw new Error("Submit configuration not provided");
+    }
+    const maxRetries = this.submitConfig.maxRetries ?? this.maxRetries;
+    const timeout = this.submitConfig.timeout ?? this.timeout;
+    const retryDelay = Math.min(1e3 * Math.pow(2, retryCount), 5e3);
+    try {
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), timeout);
+      const requestData = this.submitConfig.transformRequest ? this.submitConfig.transformRequest(reviewData) : reviewData;
+      logDebug("Submitting review", {
+        endpoint: this.submitConfig.endpoint,
+        retryCount,
+        reviewData: { ...reviewData, RecaptchaToken: reviewData.RecaptchaToken ? "[REDACTED]" : void 0 }
+      });
+      const response = await fetch(this.submitConfig.endpoint, {
+        method: this.submitConfig.method || "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Accept": "application/json",
+          ...this.submitConfig.headers
+        },
+        body: JSON.stringify(requestData),
+        signal: controller.signal
+      });
+      clearTimeout(timeoutId);
+      if (!response.ok) {
+        const errorDetails = {
+          status: response.status,
+          statusText: response.statusText,
+          url: response.url
+        };
+        logError("API response error", null, errorDetails);
+        if (response.status >= 400 && response.status < 500) {
+          let errorText = "Client error";
+          try {
+            errorText = await response.text();
+          } catch (parseError) {
+            logError("Failed to parse error response", parseError);
+          }
+          throw new Error(`${DEFAULT_ERROR_MESSAGES.SUBMISSION_FAILED}: ${errorText}`);
+        } else if (response.status >= 500) {
+          const error = new Error(DEFAULT_ERROR_MESSAGES.SERVER_ERROR);
+          error.retryable = true;
+          throw error;
+        } else {
+          throw new Error(`${DEFAULT_ERROR_MESSAGES.SUBMISSION_FAILED}: HTTP ${response.status}`);
+        }
+      }
+      let responseData;
+      try {
+        responseData = await response.json();
+      } catch (parseError) {
+        logError("Failed to parse successful response", parseError);
+        throw new Error("Invalid response format from server");
+      }
+      const finalResponse = this.submitConfig.transformResponse ? this.submitConfig.transformResponse(responseData) : {
+        success: true,
+        message: responseData.message || "Review submitted successfully",
+        reviewId: responseData.reviewId || responseData.id,
+        status: responseData.status,
+        data: responseData
+      };
+      logDebug("Review submitted successfully", { reviewId: finalResponse.reviewId });
+      if (this.submitConfig.onSuccess) {
+        this.submitConfig.onSuccess(finalResponse);
+      }
+      return finalResponse;
+    } catch (error) {
+      logError("Review submission error", error, { retryCount, maxRetries });
+      if (error instanceof Error && error.name === "AbortError") {
+        const timeoutError = new Error("Request timeout. Please try again.");
+        timeoutError.retryable = true;
+        throw timeoutError;
+      }
+      if (error instanceof TypeError && (error.message.includes("fetch") || error.message.includes("network") || error.message.includes("Failed to fetch"))) {
+        const networkError = new Error(DEFAULT_ERROR_MESSAGES.NETWORK_ERROR);
+        networkError.retryable = true;
+        throw networkError;
+      }
+      const isRetryable = error.retryable === true;
+      if (isRetryable && retryCount < maxRetries) {
+        logDebug(`Retrying in ${retryDelay}ms`, { retryCount: retryCount + 1 });
+        await new Promise((resolve) => setTimeout(resolve, retryDelay));
+        return this.submitReview(reviewData, retryCount + 1);
+      }
+      if (this.submitConfig.onError && error instanceof Error) {
+        this.submitConfig.onError(error);
+      }
+      if (error instanceof Error) {
+        throw error;
+      }
+      throw new Error(DEFAULT_ERROR_MESSAGES.GENERAL_ERROR);
+    }
+  }
+  /**
+   * Update configuration
+   */
+  updateConfig(config) {
+    if (config.fetchConfig) {
+      this.fetchConfig = { ...this.fetchConfig, ...config.fetchConfig };
+    }
+    if (config.submitConfig) {
+      this.submitConfig = { ...this.submitConfig, ...config.submitConfig };
+    }
+  }
+};
+
+// src/react/hooks/useRecaptcha.ts
+import { useCallback, useEffect, useState } from "react";
+var RECAPTCHA_SCRIPT_ID = "recaptcha-script";
+var MAX_RETRIES = 3;
+var RETRY_DELAY = 1e3;
+var useRecaptcha = (config) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [error, setError] = useState(null);
+  const { siteKey, action = "submit" } = config;
+  useEffect(() => {
+    if (!siteKey) {
+      const errorMsg = "reCAPTCHA site key is not configured";
+      console.error(errorMsg);
+      setError(errorMsg);
+      return;
+    }
+    if (window.grecaptcha) {
+      setIsLoaded(true);
+      setError(null);
+      return;
+    }
+    if (document.getElementById(RECAPTCHA_SCRIPT_ID)) {
+      return;
+    }
+    const loadRecaptchaScript = () => {
+      const script = document.createElement("script");
+      script.id = RECAPTCHA_SCRIPT_ID;
+      script.src = `https://www.google.com/recaptcha/api.js?render=${siteKey}`;
+      script.async = true;
+      script.defer = true;
+      script.onload = () => {
+        if (window.grecaptcha) {
+          window.grecaptcha.ready(() => {
+            setIsLoaded(true);
+            setError(null);
+          });
+        }
+      };
+      script.onerror = () => {
+        const errorMsg = "Failed to load reCAPTCHA script";
+        setError(errorMsg);
+        setIsLoaded(false);
+      };
+      document.head.appendChild(script);
+    };
+    loadRecaptchaScript();
+    return () => {
+      const script = document.getElementById(RECAPTCHA_SCRIPT_ID);
+      if (script) {
+        document.head.removeChild(script);
+      }
+    };
+  }, [siteKey]);
+  const executeRecaptcha = useCallback(async () => {
+    if (!siteKey) {
+      throw new Error("reCAPTCHA site key is not configured");
+    }
+    if (!isLoaded || !window.grecaptcha) {
+      throw new Error("reCAPTCHA is not loaded");
+    }
+    const executeWithRetry = async (attempt = 1) => {
+      try {
+        return await window.grecaptcha.execute(siteKey, { action });
+      } catch (error2) {
+        const recaptchaError = error2;
+        if (attempt < MAX_RETRIES) {
+          await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY * attempt));
+          return executeWithRetry(attempt + 1);
+        }
+        throw new Error(`reCAPTCHA execution failed after ${MAX_RETRIES} attempts: ${recaptchaError.message}`);
+      }
+    };
+    return executeWithRetry();
+  }, [siteKey, action, isLoaded]);
+  return {
+    executeRecaptcha,
+    isLoaded: isLoaded && !error,
+    error
+  };
+};
+
+// src/react/hooks/useReviewSubmission.ts
+var DEFAULT_FORM_DATA = {
+  reviewerName: "",
+  reviewerEmail: "",
+  rating: 0
+};
+var DEFAULT_STATE = {
+  isSubmitting: false,
+  isSuccess: false,
+  error: null,
+  retryCount: 0,
+  canRetry: false,
+  lastSubmissionTime: null
+};
+var DEFAULT_ERROR_MESSAGES2 = {
+  SUBMISSION_FAILED: "Failed to submit review",
+  SERVER_ERROR: "Server error. Please try again.",
+  NETWORK_ERROR: "Network error. Please check your connection.",
+  RECAPTCHA_FAILED: "Security verification failed. Please try again.",
+  RECAPTCHA_UNAVAILABLE: "Security verification is unavailable. Please refresh the page.",
+  GENERAL_ERROR: "An unexpected error occurred",
+  RETRY_LIMIT_EXCEEDED: "Maximum retry attempts reached. Please try again later."
+};
+var useReviewSubmission = (config) => {
+  const [formData, setFormData] = useState2(DEFAULT_FORM_DATA);
+  const [errors, setErrors] = useState2({});
+  const [state, setState] = useState2(DEFAULT_STATE);
+  const [client, setClient] = useState2(null);
+  const maxRetries = config.maxRetries || 3;
+  const recaptchaConfig = config.recaptcha ? { siteKey: config.recaptcha.siteKey, action: config.recaptcha.action || "review" } : null;
+  const recaptcha = recaptchaConfig ? useRecaptcha(recaptchaConfig) : null;
+  useState2(() => {
+    if (config.endpoint || config.onSubmit) {
+      const newClient = new ReviewClient({
+        submitConfig: {
+          endpoint: config.endpoint || "/api/reviews/submit",
+          onSuccess: config.onSuccess,
+          onError: config.onError,
+          transformRequest: (data) => {
+            const transformedData = { ...data };
+            return transformedData;
+          }
+        }
+      });
+      setClient(newClient);
+    }
+  });
+  const handleChange = useCallback2((field, value) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value
+    }));
+    const newErrors = { ...errors };
+    delete newErrors[field];
+    setErrors(newErrors);
+    if (state.isSuccess) {
+      setState((prev) => ({
+        ...prev,
+        isSuccess: false,
+        error: null,
+        canRetry: false
+      }));
+    }
+  }, [state.isSuccess]);
+  const validateForm = useCallback2(() => {
+    const customRules = config.fields ? Object.entries(config.fields).reduce((acc, [field, fieldConfig]) => {
+      if (fieldConfig?.validation) {
+        acc[field] = fieldConfig.validation;
+      }
+      return acc;
+    }, {}) : void 0;
+    const validationErrors = validateReviewData(formData, customRules);
+    if (validationErrors) {
+      setErrors(validationErrors);
+      return false;
+    }
+    setErrors({});
+    return true;
+  }, [formData, config.fields]);
+  const performSubmission = useCallback2(async (isRetry = false) => {
+    const submissionStartTime = Date.now();
+    setState((prev) => ({
+      ...prev,
+      isSubmitting: true,
+      isSuccess: false,
+      error: null,
+      canRetry: false,
+      lastSubmissionTime: submissionStartTime
+    }));
+    try {
+      let recaptchaToken;
+      if (recaptcha) {
+        try {
+          recaptchaToken = await recaptcha.executeRecaptcha();
+        } catch (recaptchaError) {
+          throw new Error(DEFAULT_ERROR_MESSAGES2.RECAPTCHA_FAILED);
+        }
+      }
+      const sanitizedData = sanitizeReviewData(formData);
+      const submissionData = recaptchaToken ? { ...sanitizedData, RecaptchaToken: recaptchaToken } : sanitizedData;
+      let response;
+      if (config.onSubmit) {
+        response = await config.onSubmit(submissionData);
+      } else if (client) {
+        response = await client.submitReview(submissionData);
+      } else {
+        throw new Error("No submission method configured");
+      }
+      if (response.success) {
+        setState((prev) => ({
+          ...prev,
+          isSubmitting: false,
+          isSuccess: true,
+          error: null,
+          canRetry: false,
+          retryCount: 0
+        }));
+        setErrors({});
+        if (config.onSuccess) {
+          config.onSuccess(response);
+        }
+      } else {
+        throw new Error(response.message || DEFAULT_ERROR_MESSAGES2.SUBMISSION_FAILED);
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : DEFAULT_ERROR_MESSAGES2.GENERAL_ERROR;
+      const canRetry = state.retryCount < maxRetries && (errorMessage.includes("Network error") || errorMessage.includes("Server error") || errorMessage.includes("timeout") || errorMessage.includes("reCAPTCHA"));
+      setState((prev) => ({
+        ...prev,
+        isSubmitting: false,
+        isSuccess: false,
+        error: errorMessage,
+        canRetry,
+        retryCount: isRetry ? prev.retryCount + 1 : prev.retryCount
+      }));
+      setErrors({ general: errorMessage });
+      if (config.onError && error instanceof Error) {
+        config.onError(error);
+      }
+    }
+  }, [formData, state.retryCount, maxRetries, recaptcha, client, config]);
+  const handleSubmit = useCallback2(async () => {
+    if (state.isSubmitting) return;
+    if (!validateForm()) return;
+    if (recaptcha && !recaptcha.isLoaded) {
+      setErrors({ general: DEFAULT_ERROR_MESSAGES2.RECAPTCHA_UNAVAILABLE });
+      return;
+    }
+    setState((prev) => ({ ...prev, retryCount: 0 }));
+    await performSubmission(false);
+  }, [state.isSubmitting, validateForm, recaptcha, performSubmission]);
+  const handleRetry = useCallback2(async () => {
+    if (state.isSubmitting || !state.canRetry) return;
+    if (state.retryCount >= maxRetries) {
+      setState((prev) => ({
+        ...prev,
+        error: DEFAULT_ERROR_MESSAGES2.RETRY_LIMIT_EXCEEDED,
+        canRetry: false
+      }));
+      setErrors({ general: DEFAULT_ERROR_MESSAGES2.RETRY_LIMIT_EXCEEDED });
+      return;
+    }
+    await performSubmission(true);
+  }, [state.isSubmitting, state.canRetry, state.retryCount, maxRetries, performSubmission]);
+  const resetForm = useCallback2(() => {
+    setFormData(DEFAULT_FORM_DATA);
+    setErrors({});
+    setState(DEFAULT_STATE);
+  }, []);
+  return {
+    formData,
+    errors,
+    state,
+    handleChange,
+    handleSubmit,
+    handleRetry,
+    resetForm,
+    client
+  };
+};
+
+// src/react/components/StarRating.tsx
+import { jsx } from "react/jsx-runtime";
+var StarRating = ({
+  rating,
+  maxRating = 5,
+  editable = false,
+  onChange,
+  size = "medium",
+  className = ""
+}) => {
+  const handleStarClick = (starRating) => {
+    if (editable && onChange) {
+      onChange(starRating);
+    }
+  };
+  const handleKeyDown = (event, starRating) => {
+    if (editable && onChange && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      onChange(starRating);
+    }
+  };
+  const renderStar = (starIndex) => {
+    const filled = starIndex <= rating;
+    const starClasses = [
+      "star",
+      size,
+      filled ? "filled" : "empty",
+      editable ? "editable" : "readonly"
+    ].join(" ");
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: starClasses,
+        onClick: () => handleStarClick(starIndex),
+        onKeyDown: (e) => handleKeyDown(e, starIndex),
+        role: editable ? "button" : void 0,
+        tabIndex: editable ? 0 : void 0,
+        "aria-label": `${starIndex} star${starIndex !== 1 ? "s" : ""}`,
+        children: filled ? "\u2605" : "\u2606"
+      },
+      starIndex
+    );
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `star-rating ${className}`,
+      role: "img",
+      "aria-label": `${rating} out of ${maxRating} stars`,
+      children: Array.from({ length: maxRating }, (_, index) => renderStar(index + 1))
+    }
+  );
+};
+var defaultStarRatingStyles = `
+  .star-rating {
+    display: inline-flex;
+    gap: 2px;
+  }
+
+  .star {
+    display: inline-block;
+    cursor: default;
+    user-select: none;
+    transition: color 0.2s ease;
+  }
+
+  .star.editable {
+    cursor: pointer;
+  }
+
+  .star.editable:hover {
+    transform: scale(1.1);
+  }
+
+  .star.editable:focus {
+    outline: 2px solid #3b82f6;
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+
+  .star.small {
+    font-size: 1rem;
+  }
+
+  .star.medium {
+    font-size: 1.5rem;
+  }
+
+  .star.large {
+    font-size: 2rem;
+  }
+
+  .star.filled {
+    color: #fbbf24;
+  }
+
+  .star.empty {
+    color: #d1d5db;
+  }
+
+  .star.editable.empty:hover {
+    color: #fbbf24;
+  }
+`;
+
+// src/react/components/ReviewForm.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var ReviewForm = ({
+  className = "",
+  children,
+  renderField,
+  renderSubmitButton,
+  renderSuccess,
+  renderError,
+  ...config
+}) => {
+  const {
+    formData,
+    errors,
+    state,
+    handleChange,
+    handleSubmit,
+    handleRetry,
+    resetForm
+  } = useReviewSubmission(config);
+  const defaultFields = {
+    reviewerName: { show: true, required: true, label: "Your Name", type: "text", placeholder: "Enter your name" },
+    reviewerEmail: { show: true, required: true, label: "Email", type: "email", placeholder: "Enter your email" },
+    reviewerTitle: { show: false, required: false, label: "Job Title", type: "text", placeholder: "Enter your job title" },
+    reviewerCompany: { show: false, required: false, label: "Company", type: "text", placeholder: "Enter your company" },
+    rating: { show: true, required: true, label: "Rating", type: "rating", placeholder: void 0 },
+    content: { show: true, required: false, label: "Review", type: "textarea", placeholder: "Write your review" }
+  };
+  const fields = { ...defaultFields, ...config.fields || {} };
+  const handleFieldChange = (field) => (e) => {
+    const value = e && e.target ? e.target.value : e;
+    handleChange(field, value);
+  };
+  const onSubmit = (e) => {
+    e.preventDefault();
+    handleSubmit();
+  };
+  if (state.isSuccess) {
+    if (renderSuccess) {
+      return /* @__PURE__ */ jsx2("div", { className, children: renderSuccess("Your review has been submitted successfully!") });
+    }
+    return /* @__PURE__ */ jsxs("div", { className: `success-message ${className}`, children: [
+      /* @__PURE__ */ jsx2("h3", { children: "Thank you for your review!" }),
+      /* @__PURE__ */ jsx2("p", { children: "Your review has been submitted successfully and is pending approval." }),
+      /* @__PURE__ */ jsx2("button", { type: "button", onClick: resetForm, children: "Submit another review" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("form", { className: `review-form ${className}`, onSubmit, noValidate: true, children: [
+    Object.entries(fields).map(([fieldName, fieldConfig]) => {
+      if (!fieldConfig?.show) return null;
+      const field = fieldName;
+      const value = formData[field] || (field === "rating" ? 0 : "");
+      const error = errors[field];
+      if (renderField) {
+        return /* @__PURE__ */ jsx2("div", { children: renderField({
+          name: field,
+          label: fieldConfig.label || fieldName,
+          value,
+          type: fieldConfig.type || "text",
+          required: fieldConfig.required || false,
+          placeholder: fieldConfig.placeholder,
+          error,
+          onChange: (newValue) => handleChange(field, newValue)
+        }) }, fieldName);
+      }
+      return /* @__PURE__ */ jsxs("div", { className: "form-field", children: [
+        /* @__PURE__ */ jsxs("label", { htmlFor: fieldName, className: "form-label", children: [
+          fieldConfig.label || fieldName,
+          fieldConfig.required && /* @__PURE__ */ jsx2("span", { className: "required", children: "*" })
+        ] }),
+        fieldConfig.type === "rating" ? /* @__PURE__ */ jsxs("div", { className: "rating-field", children: [
+          /* @__PURE__ */ jsx2(
+            StarRating,
+            {
+              rating: value,
+              editable: !state.isSubmitting,
+              onChange: (rating) => handleChange(field, rating),
+              size: "large"
+            }
+          ),
+          /* @__PURE__ */ jsx2("span", { className: "rating-label", children: value === 0 ? "Select a rating" : `${value} star${value !== 1 ? "s" : ""}` })
+        ] }) : fieldConfig.type === "textarea" ? /* @__PURE__ */ jsx2(
+          "textarea",
+          {
+            id: fieldName,
+            name: fieldName,
+            value,
+            onChange: handleFieldChange(field),
+            placeholder: fieldConfig.placeholder,
+            required: fieldConfig.required,
+            className: `form-input ${error ? "error" : ""}`,
+            rows: 4,
+            disabled: state.isSubmitting
+          }
+        ) : /* @__PURE__ */ jsx2(
+          "input",
+          {
+            id: fieldName,
+            name: fieldName,
+            type: fieldConfig.type || "text",
+            value,
+            onChange: handleFieldChange(field),
+            placeholder: fieldConfig.placeholder,
+            required: fieldConfig.required,
+            className: `form-input ${error ? "error" : ""}`,
+            disabled: state.isSubmitting
+          }
+        ),
+        error && /* @__PURE__ */ jsx2("span", { className: "form-error", children: error })
+      ] }, fieldName);
+    }),
+    state.error && /* @__PURE__ */ jsx2("div", { className: "form-error general-error", children: renderError ? renderError(state.error, state.canRetry, handleRetry) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx2("p", { children: state.error }),
+      state.canRetry && /* @__PURE__ */ jsx2("button", { type: "button", onClick: handleRetry, disabled: state.isSubmitting, children: "Try Again" })
+    ] }) }),
+    /* @__PURE__ */ jsx2("div", { className: "form-actions", children: renderSubmitButton ? renderSubmitButton({
+      isSubmitting: state.isSubmitting,
+      isDisabled: state.isSubmitting || Object.keys(errors).length > 0,
+      onClick: handleSubmit
+    }) : /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "submit",
+        disabled: state.isSubmitting,
+        className: `submit-button ${state.isSubmitting ? "submitting" : ""}`,
+        children: state.isSubmitting ? "Submitting Review..." : "Submit Review"
+      }
+    ) }),
+    children
+  ] });
+};
+var defaultReviewFormStyles = `
+  .review-form .form-field {
+    margin-bottom: 1rem;
+  }
+
+  .review-form .form-label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-weight: 500;
+  }
+
+  .review-form .required {
+    color: #e53e3e;
+    margin-left: 0.25rem;
+  }
+
+  .review-form .form-input {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid #d1d5db;
+    border-radius: 4px;
+    font-size: 1rem;
+    transition: border-color 0.2s;
+  }
+
+  .review-form .form-input:focus {
+    outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  }
+
+  .review-form .form-input.error {
+    border-color: #e53e3e;
+  }
+
+  .review-form .rating-field {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .review-form .rating-label {
+    font-size: 0.875rem;
+    color: #6b7280;
+  }
+
+  .review-form .form-error {
+    color: #e53e3e;
+    font-size: 0.875rem;
+    margin-top: 0.25rem;
+    display: block;
+  }
+
+  .review-form .general-error {
+    background-color: #fee2e2;
+    border: 1px solid #fecaca;
+    border-radius: 4px;
+    padding: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  .review-form .general-error p {
+    margin: 0 0 0.5rem 0;
+  }
+
+  .review-form .general-error button {
+    background-color: #ef4444;
+    color: white;
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .review-form .submit-button {
+    background-color: #3b82f6;
+    color: white;
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 4px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    width: 100%;
+  }
+
+  .review-form .submit-button:hover:not(:disabled) {
+    background-color: #2563eb;
+  }
+
+  .review-form .submit-button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .success-message {
+    text-align: center;
+    padding: 2rem 1rem;
+    background-color: #f0fdf4;
+    border: 1px solid #bbf7d0;
+    border-radius: 8px;
+  }
+
+  .success-message h3 {
+    color: #059669;
+    margin-bottom: 1rem;
+  }
+
+  .success-message button {
+    background-color: #6b7280;
+    color: white;
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-top: 1rem;
+  }
+`;
+
+// src/react/hooks/useTestimonials.ts
+import { useState as useState3, useEffect as useEffect2, useCallback as useCallback3 } from "react";
+var useTestimonials = (config) => {
+  const {
+    fetchConfig,
+    limit = 10,
+    featured,
+    minRating,
+    autoRefresh = false,
+    refreshInterval = 6e4,
+    // 1 minute
+    maxRetries = 3
+  } = config;
+  const [state, setState] = useState3({
+    testimonials: [],
+    isLoading: false,
+    error: null,
+    retryCount: 0,
+    canRetry: false,
+    lastFetchTime: null
+  });
+  const [client] = useState3(() => new ReviewClient({
+    fetchConfig,
+    maxRetries
+  }));
+  const performFetch = useCallback3(async (isRetry = false) => {
+    const fetchStartTime = Date.now();
+    setState((prev) => ({
+      ...prev,
+      isLoading: true,
+      error: null,
+      canRetry: false,
+      lastFetchTime: fetchStartTime,
+      retryCount: isRetry ? prev.retryCount + 1 : 0
+    }));
+    try {
+      const fetchParams = {
+        limit,
+        featured,
+        minRating
+      };
+      const testimonials = await client.fetchReviews(fetchParams);
+      setState((prev) => ({
+        ...prev,
+        testimonials,
+        isLoading: false,
+        error: null,
+        canRetry: false,
+        retryCount: 0
+        // Reset on successful fetch
+      }));
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : "Failed to load testimonials";
+      const isRetryableError = error instanceof Error && error.retryable === true;
+      const canRetryAgain = isRetryableError && state.retryCount < maxRetries;
+      setState((prev) => ({
+        ...prev,
+        isLoading: false,
+        error: errorMessage,
+        canRetry: canRetryAgain
+      }));
+    }
+  }, [client, limit, featured, minRating, maxRetries, state.retryCount]);
+  const refetch = useCallback3(async () => {
+    await performFetch(false);
+  }, [performFetch]);
+  const handleRetry = useCallback3(async () => {
+    if (state.canRetry) {
+      await performFetch(true);
+    }
+  }, [performFetch, state.canRetry]);
+  useEffect2(() => {
+    refetch();
+  }, [refetch]);
+  useEffect2(() => {
+    if (!autoRefresh || refreshInterval <= 0) return;
+    const interval = setInterval(() => {
+      if (!state.isLoading) {
+        refetch();
+      }
+    }, refreshInterval);
+    return () => clearInterval(interval);
+  }, [autoRefresh, refreshInterval, state.isLoading, refetch]);
+  return {
+    testimonials: state.testimonials,
+    isLoading: state.isLoading,
+    error: state.error,
+    retryCount: state.retryCount,
+    canRetry: state.canRetry,
+    refetch,
+    handleRetry
+  };
+};
+
+// src/react/components/TestimonialsSection.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var TestimonialsSection = ({
+  fetchConfig,
+  limit = 6,
+  showRating = true,
+  showDate = false,
+  showAvatar = false,
+  showCompany = true,
+  showTitle = true,
+  layout = "grid",
+  columns = 3,
+  autoRefresh = false,
+  refreshInterval = 6e4,
+  styling = {},
+  className = "",
+  renderTestimonial,
+  renderLoading,
+  renderError,
+  renderEmpty
+}) => {
+  const {
+    testimonials,
+    isLoading,
+    error,
+    canRetry,
+    handleRetry
+  } = useTestimonials({
+    fetchConfig,
+    limit,
+    featured: true,
+    autoRefresh,
+    refreshInterval
+  });
+  if (isLoading && testimonials.length === 0) {
+    if (renderLoading) {
+      return /* @__PURE__ */ jsx3("div", { className, children: renderLoading() });
+    }
+    return /* @__PURE__ */ jsx3("div", { className: `testimonials-section loading ${className}`, children: /* @__PURE__ */ jsx3("div", { className: "loading-spinner", children: "Loading testimonials..." }) });
+  }
+  if (error && testimonials.length === 0) {
+    if (renderError) {
+      return /* @__PURE__ */ jsx3("div", { className, children: renderError(error, canRetry, handleRetry) });
+    }
+    return /* @__PURE__ */ jsx3("div", { className: `testimonials-section error ${className}`, children: /* @__PURE__ */ jsxs2("div", { className: "error-message", children: [
+      /* @__PURE__ */ jsx3("p", { children: error }),
+      canRetry && /* @__PURE__ */ jsx3("button", { onClick: handleRetry, className: "retry-button", children: "Try Again" })
+    ] }) });
+  }
+  if (testimonials.length === 0) {
+    if (renderEmpty) {
+      return /* @__PURE__ */ jsx3("div", { className, children: renderEmpty() });
+    }
+    return /* @__PURE__ */ jsx3("div", { className: `testimonials-section empty ${className}`, children: /* @__PURE__ */ jsx3("p", { children: "No testimonials available at this time." }) });
+  }
+  const formatDate = (dateString) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    });
+  };
+  const defaultRenderTestimonial = (testimonial) => /* @__PURE__ */ jsxs2("div", { className: `testimonial-card ${styling.cardClassName || ""}`, children: [
+    /* @__PURE__ */ jsxs2("div", { className: `testimonial-header ${styling.headerClassName || ""}`, children: [
+      /* @__PURE__ */ jsxs2("div", { className: "reviewer-info", children: [
+        showAvatar && testimonial.reviewerAvatar && /* @__PURE__ */ jsx3(
+          "img",
+          {
+            src: testimonial.reviewerAvatar,
+            alt: `${testimonial.reviewerName} avatar`,
+            className: "reviewer-avatar"
+          }
+        ),
+        /* @__PURE__ */ jsxs2("div", { className: "reviewer-details", children: [
+          /* @__PURE__ */ jsx3("h4", { className: "reviewer-name", children: testimonial.reviewerName }),
+          showTitle && testimonial.reviewerTitle && /* @__PURE__ */ jsx3("p", { className: "reviewer-title", children: testimonial.reviewerTitle }),
+          showCompany && testimonial.reviewerCompany && /* @__PURE__ */ jsx3("p", { className: "reviewer-company", children: testimonial.reviewerCompany })
+        ] })
+      ] }),
+      showRating && /* @__PURE__ */ jsx3("div", { className: `rating ${styling.ratingClassName || ""}`, children: /* @__PURE__ */ jsx3(StarRating, { rating: testimonial.rating, size: "small" }) })
+    ] }),
+    testimonial.content && /* @__PURE__ */ jsx3("div", { className: `testimonial-content ${styling.contentClassName || ""}`, children: /* @__PURE__ */ jsxs2("blockquote", { children: [
+      '"',
+      testimonial.content,
+      '"'
+    ] }) }),
+    showDate && /* @__PURE__ */ jsx3("div", { className: "testimonial-date", children: formatDate(testimonial.createdAt) })
+  ] }, testimonial.id);
+  const layoutClasses = {
+    grid: `testimonials-grid columns-${columns}`,
+    list: "testimonials-list",
+    slider: "testimonials-slider"
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: `testimonials-section ${layout} ${styling.containerClassName || ""} ${className}`, children: [
+    /* @__PURE__ */ jsx3("div", { className: `testimonials-container ${layoutClasses[layout]}`, children: testimonials.map(
+      (testimonial) => renderTestimonial ? renderTestimonial(testimonial) : defaultRenderTestimonial(testimonial)
+    ) }),
+    isLoading && testimonials.length > 0 && /* @__PURE__ */ jsx3("div", { className: "refresh-indicator", children: "Refreshing..." })
+  ] });
+};
+var defaultTestimonialsStyles = `
+  .testimonials-section {
+    width: 100%;
+  }
+
+  .testimonials-grid {
+    display: grid;
+    gap: 1.5rem;
+  }
+
+  .testimonials-grid.columns-1 {
+    grid-template-columns: 1fr;
+  }
+
+  .testimonials-grid.columns-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .testimonials-grid.columns-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .testimonials-grid.columns-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  @media (max-width: 768px) {
+    .testimonials-grid.columns-3,
+    .testimonials-grid.columns-4 {
+      grid-template-columns: 1fr;
+    }
+    
+    .testimonials-grid.columns-2 {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @media (max-width: 1024px) and (min-width: 769px) {
+    .testimonials-grid.columns-3,
+    .testimonials-grid.columns-4 {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  .testimonials-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .testimonials-slider {
+    display: flex;
+    overflow-x: auto;
+    gap: 1.5rem;
+    padding-bottom: 1rem;
+    scrollbar-width: thin;
+  }
+
+  .testimonials-slider::-webkit-scrollbar {
+    height: 8px;
+  }
+
+  .testimonials-slider::-webkit-scrollbar-track {
+    background: #f1f5f9;
+    border-radius: 4px;
+  }
+
+  .testimonials-slider::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 4px;
+  }
+
+  .testimonials-slider .testimonial-card {
+    flex: 0 0 300px;
+  }
+
+  .testimonial-card {
+    background: white;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    padding: 1.5rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    transition: box-shadow 0.2s ease;
+  }
+
+  .testimonial-card:hover {
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+
+  .testimonial-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+  }
+
+  .reviewer-info {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+  }
+
+  .reviewer-avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+
+  .reviewer-name {
+    margin: 0 0 0.25rem 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #1f2937;
+  }
+
+  .reviewer-title,
+  .reviewer-company {
+    margin: 0;
+    font-size: 0.875rem;
+    color: #6b7280;
+  }
+
+  .testimonial-content {
+    margin-bottom: 1rem;
+  }
+
+  .testimonial-content blockquote {
+    margin: 0;
+    font-style: italic;
+    color: #374151;
+    line-height: 1.6;
+  }
+
+  .testimonial-date {
+    font-size: 0.75rem;
+    color: #9ca3af;
+    text-align: right;
+  }
+
+  .loading-spinner {
+    text-align: center;
+    padding: 3rem;
+    color: #6b7280;
+  }
+
+  .error-message {
+    text-align: center;
+    padding: 3rem;
+    color: #ef4444;
+  }
+
+  .retry-button {
+    background-color: #3b82f6;
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-top: 1rem;
+  }
+
+  .retry-button:hover {
+    background-color: #2563eb;
+  }
+
+  .refresh-indicator {
+    text-align: center;
+    padding: 1rem;
+    font-size: 0.875rem;
+    color: #6b7280;
+  }
+
+  .empty {
+    text-align: center;
+    padding: 3rem;
+    color: #6b7280;
+  }
+`;
+export {
+  ReviewForm,
+  StarRating,
+  TestimonialsSection,
+  defaultReviewFormStyles,
+  defaultStarRatingStyles,
+  defaultTestimonialsStyles,
+  useRecaptcha,
+  useReviewSubmission,
+  useTestimonials
+};
+//# sourceMappingURL=index.mjs.map