@revova/hydrogen 1.0.0 → 1.0.2

package/dist/index.js

@@ -3,8 +3,25 @@ import { useState as useState4 } from "react";
 
 // src/hooks/useReviews.ts
 import { useEffect, useState, useCallback } from "react";
+
+// src/utils.ts
+function apiFetch({ apiUrl, shop, apiToken }, path, params, init) {
+  const searchParams = new URLSearchParams({ shop, ...params });
+  return fetch(`${apiUrl}${path}?${searchParams}`, {
+    ...init,
+    headers: {
+      Authorization: `Bearer ${apiToken}`,
+      "Content-Type": "application/json",
+      ...init?.headers ?? {}
+    }
+  });
+}
+
+// src/hooks/useReviews.ts
 function useReviews({
-  proxyUrl,
+  apiUrl,
+  shop,
+  apiToken,
   productId,
   page: initialPage = 1,
   limit = 10,
@@ -13,24 +30,20 @@ function useReviews({
 }) {
   const [page, setPage] = useState(initialPage);
   const [sort, setSort] = useState(initialSort);
-  const [state, setState] = useState({
-    data: null,
-    loading: true,
-    error: null
-  });
+  const [state, setState] = useState({ data: null, loading: true, error: null });
   const [tick, setTick] = useState(0);
   const refetch = useCallback(() => setTick((t) => t + 1), []);
   useEffect(() => {
     let cancelled = false;
     setState((s) => ({ ...s, loading: true, error: null }));
-    const params = new URLSearchParams({
+    const params = {
       productId,
       page: String(page),
       limit: String(limit),
       sort,
       ...locale ? { locale } : {}
-    });
-    fetch(`${proxyUrl}/reviews?${params.toString()}`).then((res) => {
+    };
+    apiFetch({ apiUrl, shop, apiToken }, "/api/reviews", params).then((res) => {
       if (!res.ok) throw new Error(`Revova: reviews fetch failed (${res.status})`);
       return res.json();
     }).then((data) => {
@@ -42,15 +55,8 @@ function useReviews({
     return () => {
       cancelled = true;
     };
-  }, [proxyUrl, productId, page, limit, sort, locale, tick]);
-  return {
-    ...state,
-    refetch,
-    setPage,
-    setSort,
-    currentPage: page,
-    currentSort: sort
-  };
+  }, [apiUrl, shop, apiToken, productId, page, limit, sort, locale, tick]);
+  return { ...state, refetch, setPage, setSort, currentPage: page, currentSort: sort };
 }
 
 // src/components/StarRating.tsx
@@ -101,44 +107,28 @@ import { useState as useState3 } from "react";
 
 // src/hooks/useSubmitReview.ts
 import { useState as useState2, useCallback as useCallback2 } from "react";
-var INITIAL_STATE = {
-  submitting: false,
-  success: false,
-  error: null,
-  result: null
-};
-function useSubmitReview(proxyUrl) {
+var INITIAL_STATE = { submitting: false, success: false, error: null, result: null };
+function useSubmitReview(creds) {
   const [state, setState] = useState2(INITIAL_STATE);
   const submit = useCallback2(
     async (payload) => {
       setState({ submitting: true, success: false, error: null, result: null });
       try {
-        const res = await fetch(`${proxyUrl}/reviews`, {
+        const res = await apiFetch(creds, "/api/reviews", {}, {
           method: "POST",
-          headers: { "Content-Type": "application/json" },
           body: JSON.stringify(payload)
         });
         const json = await res.json();
         if (!res.ok) {
-          setState({
-            submitting: false,
-            success: false,
-            error: json.error ?? `Submission failed (${res.status})`,
-            result: null
-          });
+          setState({ submitting: false, success: false, error: json.error ?? `Submission failed (${res.status})`, result: null });
           return;
         }
         setState({ submitting: false, success: true, error: null, result: json });
       } catch (err) {
-        setState({
-          submitting: false,
-          success: false,
-          error: err instanceof Error ? err.message : "An unexpected error occurred.",
-          result: null
-        });
+        setState({ submitting: false, success: false, error: err instanceof Error ? err.message : "An unexpected error occurred.", result: null });
       }
     },
-    [proxyUrl]
+    [creds]
   );
   const reset = useCallback2(() => setState(INITIAL_STATE), []);
   return { ...state, submit, reset };
@@ -426,8 +416,8 @@ function FieldRenderer(props) {
       return null;
   }
 }
-function ReviewForm({ proxyUrl, productId, form, onSuccess, className }) {
-  const { submit, submitting, success, error, result } = useSubmitReview(proxyUrl);
+function ReviewForm({ apiUrl, shop, apiToken, productId, form, onSuccess, className }) {
+  const { submit, submitting, success, error, result } = useSubmitReview({ apiUrl, shop, apiToken });
   const [answers, setAnswers] = useState3({});
   const [email, setEmail] = useState3("");
   const starField = form.fields.find((f) => f.type === "STAR_RATING");
@@ -534,7 +524,9 @@ function ReviewForm({ proxyUrl, productId, form, onSuccess, className }) {
 // src/components/ReviewWidget.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function ReviewWidget({
-  proxyUrl,
+  apiUrl,
+  shop,
+  apiToken,
   productId,
   locale,
   pageSize = 10,
@@ -542,9 +534,10 @@ function ReviewWidget({
   starColor,
   className
 }) {
+  const creds = { apiUrl, shop, apiToken };
   const [showingForm, setShowingForm] = useState4(false);
   const { data, loading, error, setPage, setSort, currentPage, currentSort } = useReviews({
-    proxyUrl,
+    ...creds,
     productId,
     limit: pageSize,
     ...locale !== void 0 ? { locale } : {}
@@ -579,7 +572,7 @@ function ReviewWidget({
     showingForm && form && /* @__PURE__ */ jsx3("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ jsx3(
       ReviewForm,
       {
-        proxyUrl,
+        ...creds,
         productId,
         form,
         onSuccess: () => setShowingForm(false)
@@ -635,16 +628,11 @@ function ReviewWidget({
 
 // src/hooks/useWidgetGlobals.ts
 import { useEffect as useEffect2, useState as useState5 } from "react";
-function useWidgetGlobals({ proxyUrl, limit = 20 }) {
-  const [state, setState] = useState5({
-    data: null,
-    loading: true,
-    error: null
-  });
+function useWidgetGlobals({ apiUrl, shop, apiToken, limit = 20 }) {
+  const [state, setState] = useState5({ data: null, loading: true, error: null });
   useEffect2(() => {
     let cancelled = false;
-    const params = new URLSearchParams({ limit: String(limit) });
-    fetch(`${proxyUrl}/widget-globals?${params.toString()}`).then((res) => {
+    apiFetch({ apiUrl, shop, apiToken }, "/api/widget-globals", { limit: String(limit) }).then((res) => {
       if (!res.ok) throw new Error(`Revova: widget-globals fetch failed (${res.status})`);
       return res.json();
     }).then((data) => {
@@ -656,14 +644,14 @@ function useWidgetGlobals({ proxyUrl, limit = 20 }) {
     return () => {
       cancelled = true;
     };
-  }, [proxyUrl, limit]);
+  }, [apiUrl, shop, apiToken, limit]);
   return state;
 }
 
 // src/components/ReviewCount.tsx
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function ReviewCount({ proxyUrl, starColor, starSize, className }) {
-  const { data, loading } = useWidgetGlobals({ proxyUrl });
+function ReviewCount({ apiUrl, shop, apiToken, starColor, starSize, className }) {
+  const { data, loading } = useWidgetGlobals({ apiUrl, shop, apiToken });
   if (loading || !data?.stats?.averageRating) return null;
   const avg = parseFloat(data.stats.averageRating);
   return /* @__PURE__ */ jsxs4("span", { className, style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
@@ -681,14 +669,16 @@ function ReviewCount({ proxyUrl, starColor, starSize, className }) {
 import React3, { useState as useState6 } from "react";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function ReviewCarousel({
-  proxyUrl,
+  apiUrl,
+  shop,
+  apiToken,
   limit = 10,
   autoPlay = true,
   intervalMs = 4e3,
   starColor,
   className
 }) {
-  const { data, loading } = useWidgetGlobals({ proxyUrl, limit });
+  const { data, loading } = useWidgetGlobals({ apiUrl, shop, apiToken, limit });
   const [index, setIndex] = useState6(0);
   const reviews = data?.reviews ?? [];
   React3.useEffect(() => {
@@ -736,13 +726,15 @@ function ReviewCarousel({
 import { useState as useState7 } from "react";
 import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function ReviewGallery({
-  proxyUrl,
+  apiUrl,
+  shop,
+  apiToken,
   limit = 20,
   columns = 3,
   starColor,
   className
 }) {
-  const { data, loading } = useWidgetGlobals({ proxyUrl, limit });
+  const { data, loading } = useWidgetGlobals({ apiUrl, shop, apiToken, limit });
   const [lightbox, setLightbox] = useState7(null);
   const items = (data?.reviews ?? []).filter((r) => r.image).map((r) => ({ url: r.image, review: r })).slice(0, limit);
   if (loading) return /* @__PURE__ */ jsx6("div", { className, children: "Loading gallery\u2026" });
@@ -859,7 +851,8 @@ import { useState as useState9 } from "react";
 // src/hooks/useQnA.ts
 import { useEffect as useEffect3, useState as useState8, useCallback as useCallback3 } from "react";
 var INITIAL_SUBMIT = { submitting: false, success: false, error: null };
-function useQnA({ proxyUrl, productId, page: initialPage = 1, sort = "recent" }) {
+function useQnA({ apiUrl, shop, apiToken, productId, page: initialPage = 1, sort = "recent" }) {
+  const creds = { apiUrl, shop, apiToken };
   const [page, setPage] = useState8(initialPage);
   const [tick, setTick] = useState8(0);
   const [state, setState] = useState8({ data: null, loading: true, error: null });
@@ -868,8 +861,7 @@ function useQnA({ proxyUrl, productId, page: initialPage = 1, sort = "recent" })
   useEffect3(() => {
     let cancelled = false;
     setState((s) => ({ ...s, loading: true, error: null }));
-    const params = new URLSearchParams({ productId, page: String(page), sort });
-    fetch(`${proxyUrl}/qna?${params.toString()}`).then((res) => {
+    apiFetch(creds, "/api/qna", { productId, page: String(page), sort }).then((res) => {
       if (!res.ok) throw new Error(`Revova: qna fetch failed (${res.status})`);
       return res.json();
     }).then((data) => {
@@ -881,15 +873,11 @@ function useQnA({ proxyUrl, productId, page: initialPage = 1, sort = "recent" })
     return () => {
       cancelled = true;
     };
-  }, [proxyUrl, productId, page, sort, tick]);
-  const submitQuestion = useCallback3(async (payload) => {
+  }, [apiUrl, shop, apiToken, productId, page, sort, tick]);
+  const postQnA = useCallback3(async (payload) => {
     setSubmitState({ submitting: true, success: false, error: null });
     try {
-      const res = await fetch(`${proxyUrl}/qna`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(payload)
-      });
+      const res = await apiFetch(creds, "/api/qna", {}, { method: "POST", body: JSON.stringify(payload) });
       const json = await res.json();
       if (!res.ok) {
         setSubmitState({ submitting: false, success: false, error: json.error ?? `Failed (${res.status})` });
@@ -900,35 +888,27 @@ function useQnA({ proxyUrl, productId, page: initialPage = 1, sort = "recent" })
     } catch (err) {
       setSubmitState({ submitting: false, success: false, error: err instanceof Error ? err.message : "An error occurred." });
     }
-  }, [proxyUrl, refetch]);
-  const submitAnswer = useCallback3(async (payload) => {
-    setSubmitState({ submitting: true, success: false, error: null });
-    try {
-      const res = await fetch(`${proxyUrl}/qna`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(payload)
-      });
-      const json = await res.json();
-      if (!res.ok) {
-        setSubmitState({ submitting: false, success: false, error: json.error ?? `Failed (${res.status})` });
-        return;
-      }
-      setSubmitState({ submitting: false, success: true, error: null });
-      refetch();
-    } catch (err) {
-      setSubmitState({ submitting: false, success: false, error: err instanceof Error ? err.message : "An error occurred." });
-    }
-  }, [proxyUrl, refetch]);
+  }, [apiUrl, shop, apiToken, refetch]);
   const resetSubmit = useCallback3(() => setSubmitState(INITIAL_SUBMIT), []);
-  return { ...state, setPage, currentPage: page, refetch, submitQuestion, submitAnswer, submitState, resetSubmit };
+  return {
+    ...state,
+    setPage,
+    currentPage: page,
+    refetch,
+    submitQuestion: postQnA,
+    submitAnswer: postQnA,
+    submitState,
+    resetSubmit
+  };
 }
 
 // src/components/QnAWidget.tsx
 import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
-function QnAWidget({ proxyUrl, productId, className }) {
+function QnAWidget({ apiUrl, shop, apiToken, productId, className }) {
   const { data, loading, error, setPage, currentPage, submitQuestion, submitState, resetSubmit } = useQnA({
-    proxyUrl,
+    apiUrl,
+    shop,
+    apiToken,
     productId
   });
   const [showForm, setShowForm] = useState9(false);
@@ -1020,14 +1000,16 @@ function QnAWidget({ proxyUrl, productId, className }) {
 import { useEffect as useEffect4, useState as useState10 } from "react";
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function SocialProofPopup({
-  proxyUrl,
+  apiUrl,
+  shop,
+  apiToken,
   position = "bottom-left",
   intervalMs = 8e3,
   displayMs = 5e3,
   starColor,
   className
 }) {
-  const { data } = useWidgetGlobals({ proxyUrl });
+  const { data } = useWidgetGlobals({ apiUrl, shop, apiToken });
   const [current, setCurrent] = useState10(null);
   const [visible, setVisible] = useState10(false);
   const [dismissed, setDismissed] = useState10(false);
@@ -1129,13 +1111,15 @@ function SocialProofPopup({
 import { useRef } from "react";
 import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function ReviewTicker({
-  proxyUrl,
+  apiUrl,
+  shop,
+  apiToken,
   limit = 20,
   speedSeconds = 30,
   starColor,
   className
 }) {
-  const { data, loading } = useWidgetGlobals({ proxyUrl, limit });
+  const { data, loading } = useWidgetGlobals({ apiUrl, shop, apiToken, limit });
   const trackRef = useRef(null);
   const reviews = data?.reviews ?? [];
   if (loading || reviews.length === 0) return null;
@@ -1196,7 +1180,9 @@ function ReviewTicker({
 import { useState as useState11 } from "react";
 import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 function FloatingReviewsTab({
-  proxyUrl,
+  apiUrl,
+  shop,
+  apiToken,
   label = "Reviews",
   position = "right",
   color = "#111827",
@@ -1204,7 +1190,7 @@ function FloatingReviewsTab({
   starColor,
   className
 }) {
-  const { data } = useWidgetGlobals({ proxyUrl, limit });
+  const { data } = useWidgetGlobals({ apiUrl, shop, apiToken, limit });
   const [open, setOpen] = useState11(false);
   const reviews = data?.reviews ?? [];
   const stats = data?.stats;
@@ -1281,8 +1267,8 @@ function FloatingReviewsTab({
 
 // src/components/TrustBadge.tsx
 import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
-function TrustBadge({ proxyUrl, style: badgeStyle = "pill", starColor, className }) {
-  const { data, loading } = useWidgetGlobals({ proxyUrl });
+function TrustBadge({ apiUrl, shop, apiToken, style: badgeStyle = "pill", starColor, className }) {
+  const { data, loading } = useWidgetGlobals({ apiUrl, shop, apiToken });
   if (loading || !data?.stats?.averageRating) return null;
   const avg = parseFloat(data.stats.averageRating);
   const count = data.stats.totalReviews;
@@ -1359,43 +1345,41 @@ import { useState as useState13 } from "react";
 
 // src/hooks/useForm.ts
 import { useEffect as useEffect5, useState as useState12 } from "react";
-function useForm(proxyUrl, productId) {
+function useForm(creds, productId) {
   const [state, setState] = useState12({ form: null, loading: true, error: null });
   useEffect5(() => {
     let cancelled = false;
-    const params = new URLSearchParams({ productId, limit: "1", page: "1" });
-    fetch(`${proxyUrl}/reviews?${params.toString()}`).then((res) => {
+    apiFetch(creds, "/api/reviews", { productId, limit: "1", page: "1" }).then((res) => {
       if (!res.ok) throw new Error(`Revova: form fetch failed (${res.status})`);
       return res.json();
     }).then(({ form }) => {
       if (!cancelled) setState({ form, loading: false, error: null });
     }).catch((err) => {
       if (!cancelled)
-        setState({
-          form: null,
-          loading: false,
-          error: err instanceof Error ? err : new Error(String(err))
-        });
+        setState({ form: null, loading: false, error: err instanceof Error ? err : new Error(String(err)) });
     });
     return () => {
       cancelled = true;
     };
-  }, [proxyUrl, productId]);
+  }, [creds.apiUrl, creds.shop, creds.apiToken, productId]);
   return state;
 }
 
 // src/components/FloatingReviewButton.tsx
 import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 function FloatingReviewButton({
-  proxyUrl,
+  apiUrl,
+  shop,
+  apiToken,
   productId,
   text = "Write a Review",
   color = "#111827",
   position = "bottom-right",
   className
 }) {
+  const creds = { apiUrl, shop, apiToken };
   const [open, setOpen] = useState13(false);
-  const { form, loading } = useForm(proxyUrl, productId);
+  const { form, loading } = useForm(creds, productId);
   const posStyle = position === "bottom-right" ? { bottom: 24, right: 24 } : { bottom: 24, left: 24 };
   if (!loading && !form) return null;
   return /* @__PURE__ */ jsxs12(Fragment5, { children: [
@@ -1473,7 +1457,7 @@ function FloatingReviewButton({
               /* @__PURE__ */ jsx12(
                 ReviewForm,
                 {
-                  proxyUrl,
+                  ...creds,
                   productId,
                   form,
                   onSuccess: () => setOpen(false)
@@ -1489,7 +1473,7 @@ function FloatingReviewButton({
 
 // src/hooks/useHelpfulVote.ts
 import { useState as useState14, useCallback as useCallback4 } from "react";
-function useHelpfulVote(proxyUrl) {
+function useHelpfulVote(creds) {
   const [loading, setLoading] = useState14(false);
   const [voted, setVoted] = useState14(false);
   const vote = useCallback4(
@@ -1497,9 +1481,8 @@ function useHelpfulVote(proxyUrl) {
       if (voted || loading) return;
       setLoading(true);
       try {
-        await fetch(`${proxyUrl}/helpful`, {
+        await apiFetch(creds, "/api/helpful", {}, {
           method: "POST",
-          headers: { "Content-Type": "application/json" },
           body: JSON.stringify(payload)
         });
         setVoted(true);
@@ -1507,7 +1490,7 @@ function useHelpfulVote(proxyUrl) {
         setLoading(false);
       }
     },
-    [proxyUrl, voted, loading]
+    [creds, voted, loading]
   );
   return { vote, loading, voted };
 }
@@ -1524,6 +1507,7 @@ export {
   SocialProofPopup,
   StarRating,
   TrustBadge,
+  apiFetch,
   useForm,
   useHelpfulVote,
   useQnA,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revova/hydrogen",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Official Revova review widgets for Shopify Hydrogen storefronts",
   "author": "Revova",
   "license": "MIT",