@revova/hydrogen 1.0.0 → 1.0.2

package/dist/index.cjs

@@ -42,6 +42,7 @@ __export(index_exports, {
   SocialProofPopup: () => SocialProofPopup,
   StarRating: () => StarRating,
   TrustBadge: () => TrustBadge,
+  apiFetch: () => apiFetch,
   useForm: () => useForm,
   useHelpfulVote: () => useHelpfulVote,
   useQnA: () => useQnA,
@@ -56,8 +57,25 @@ var import_react4 = require("react");
 
 // src/hooks/useReviews.ts
 var import_react = require("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,
@@ -66,24 +84,20 @@ function useReviews({
 }) {
   const [page, setPage] = (0, import_react.useState)(initialPage);
   const [sort, setSort] = (0, import_react.useState)(initialSort);
-  const [state, setState] = (0, import_react.useState)({
-    data: null,
-    loading: true,
-    error: null
-  });
+  const [state, setState] = (0, import_react.useState)({ data: null, loading: true, error: null });
   const [tick, setTick] = (0, import_react.useState)(0);
   const refetch = (0, import_react.useCallback)(() => setTick((t) => t + 1), []);
   (0, import_react.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) => {
@@ -95,15 +109,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
@@ -154,44 +161,28 @@ var import_react3 = require("react");
 
 // src/hooks/useSubmitReview.ts
 var import_react2 = require("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] = (0, import_react2.useState)(INITIAL_STATE);
   const submit = (0, import_react2.useCallback)(
     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 = (0, import_react2.useCallback)(() => setState(INITIAL_STATE), []);
   return { ...state, submit, reset };
@@ -479,8 +470,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] = (0, import_react3.useState)({});
   const [email, setEmail] = (0, import_react3.useState)("");
   const starField = form.fields.find((f) => f.type === "STAR_RATING");
@@ -587,7 +578,9 @@ function ReviewForm({ proxyUrl, productId, form, onSuccess, className }) {
 // src/components/ReviewWidget.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function ReviewWidget({
-  proxyUrl,
+  apiUrl,
+  shop,
+  apiToken,
   productId,
   locale,
   pageSize = 10,
@@ -595,9 +588,10 @@ function ReviewWidget({
   starColor,
   className
 }) {
+  const creds = { apiUrl, shop, apiToken };
   const [showingForm, setShowingForm] = (0, import_react4.useState)(false);
   const { data, loading, error, setPage, setSort, currentPage, currentSort } = useReviews({
-    proxyUrl,
+    ...creds,
     productId,
     limit: pageSize,
     ...locale !== void 0 ? { locale } : {}
@@ -632,7 +626,7 @@ function ReviewWidget({
     showingForm && form && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       ReviewForm,
       {
-        proxyUrl,
+        ...creds,
         productId,
         form,
         onSuccess: () => setShowingForm(false)
@@ -688,16 +682,11 @@ function ReviewWidget({
 
 // src/hooks/useWidgetGlobals.ts
 var import_react5 = require("react");
-function useWidgetGlobals({ proxyUrl, limit = 20 }) {
-  const [state, setState] = (0, import_react5.useState)({
-    data: null,
-    loading: true,
-    error: null
-  });
+function useWidgetGlobals({ apiUrl, shop, apiToken, limit = 20 }) {
+  const [state, setState] = (0, import_react5.useState)({ data: null, loading: true, error: null });
   (0, import_react5.useEffect)(() => {
     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) => {
@@ -709,14 +698,14 @@ function useWidgetGlobals({ proxyUrl, limit = 20 }) {
     return () => {
       cancelled = true;
     };
-  }, [proxyUrl, limit]);
+  }, [apiUrl, shop, apiToken, limit]);
   return state;
 }
 
 // src/components/ReviewCount.tsx
 var import_jsx_runtime4 = require("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__ */ (0, import_jsx_runtime4.jsxs)("span", { className, style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
@@ -734,14 +723,16 @@ function ReviewCount({ proxyUrl, starColor, starSize, className }) {
 var import_react6 = __toESM(require("react"), 1);
 var import_jsx_runtime5 = require("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] = (0, import_react6.useState)(0);
   const reviews = data?.reviews ?? [];
   import_react6.default.useEffect(() => {
@@ -789,13 +780,15 @@ function ReviewCarousel({
 var import_react7 = require("react");
 var import_jsx_runtime6 = require("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] = (0, import_react7.useState)(null);
   const items = (data?.reviews ?? []).filter((r) => r.image).map((r) => ({ url: r.image, review: r })).slice(0, limit);
   if (loading) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className, children: "Loading gallery\u2026" });
@@ -912,7 +905,8 @@ var import_react9 = require("react");
 // src/hooks/useQnA.ts
 var import_react8 = require("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] = (0, import_react8.useState)(initialPage);
   const [tick, setTick] = (0, import_react8.useState)(0);
   const [state, setState] = (0, import_react8.useState)({ data: null, loading: true, error: null });
@@ -921,8 +915,7 @@ function useQnA({ proxyUrl, productId, page: initialPage = 1, sort = "recent" })
   (0, import_react8.useEffect)(() => {
     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) => {
@@ -934,15 +927,11 @@ function useQnA({ proxyUrl, productId, page: initialPage = 1, sort = "recent" })
     return () => {
       cancelled = true;
     };
-  }, [proxyUrl, productId, page, sort, tick]);
-  const submitQuestion = (0, import_react8.useCallback)(async (payload) => {
+  }, [apiUrl, shop, apiToken, productId, page, sort, tick]);
+  const postQnA = (0, import_react8.useCallback)(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})` });
@@ -953,35 +942,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 = (0, import_react8.useCallback)(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 = (0, import_react8.useCallback)(() => 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
 var import_jsx_runtime7 = require("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] = (0, import_react9.useState)(false);
@@ -1073,14 +1054,16 @@ function QnAWidget({ proxyUrl, productId, className }) {
 var import_react10 = require("react");
 var import_jsx_runtime8 = require("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] = (0, import_react10.useState)(null);
   const [visible, setVisible] = (0, import_react10.useState)(false);
   const [dismissed, setDismissed] = (0, import_react10.useState)(false);
@@ -1182,13 +1165,15 @@ function SocialProofPopup({
 var import_react11 = require("react");
 var import_jsx_runtime9 = require("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 = (0, import_react11.useRef)(null);
   const reviews = data?.reviews ?? [];
   if (loading || reviews.length === 0) return null;
@@ -1249,7 +1234,9 @@ function ReviewTicker({
 var import_react12 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function FloatingReviewsTab({
-  proxyUrl,
+  apiUrl,
+  shop,
+  apiToken,
   label = "Reviews",
   position = "right",
   color = "#111827",
@@ -1257,7 +1244,7 @@ function FloatingReviewsTab({
   starColor,
   className
 }) {
-  const { data } = useWidgetGlobals({ proxyUrl, limit });
+  const { data } = useWidgetGlobals({ apiUrl, shop, apiToken, limit });
   const [open, setOpen] = (0, import_react12.useState)(false);
   const reviews = data?.reviews ?? [];
   const stats = data?.stats;
@@ -1334,8 +1321,8 @@ function FloatingReviewsTab({
 
 // src/components/TrustBadge.tsx
 var import_jsx_runtime11 = require("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;
@@ -1412,43 +1399,41 @@ var import_react14 = require("react");
 
 // src/hooks/useForm.ts
 var import_react13 = require("react");
-function useForm(proxyUrl, productId) {
+function useForm(creds, productId) {
   const [state, setState] = (0, import_react13.useState)({ form: null, loading: true, error: null });
   (0, import_react13.useEffect)(() => {
     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
 var import_jsx_runtime12 = require("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] = (0, import_react14.useState)(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__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
@@ -1526,7 +1511,7 @@ function FloatingReviewButton({
               /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 ReviewForm,
                 {
-                  proxyUrl,
+                  ...creds,
                   productId,
                   form,
                   onSuccess: () => setOpen(false)
@@ -1542,7 +1527,7 @@ function FloatingReviewButton({
 
 // src/hooks/useHelpfulVote.ts
 var import_react15 = require("react");
-function useHelpfulVote(proxyUrl) {
+function useHelpfulVote(creds) {
   const [loading, setLoading] = (0, import_react15.useState)(false);
   const [voted, setVoted] = (0, import_react15.useState)(false);
   const vote = (0, import_react15.useCallback)(
@@ -1550,9 +1535,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);
@@ -1560,7 +1544,7 @@ function useHelpfulVote(proxyUrl) {
         setLoading(false);
       }
     },
-    [proxyUrl, voted, loading]
+    [creds, voted, loading]
   );
   return { vote, loading, voted };
 }
@@ -1578,6 +1562,7 @@ function useHelpfulVote(proxyUrl) {
   SocialProofPopup,
   StarRating,
   TrustBadge,
+  apiFetch,
   useForm,
   useHelpfulVote,
   useQnA,