@revova/hydrogen 1.0.0 → 1.0.1

package/README.md

@@ -11,42 +11,126 @@ npm install @revova/hydrogen
 ## Requirements
 
 - React 18+
-- Shopify Hydrogen storefront with the Revova app installed
+- Shopify Hydrogen storefront with the Revova app installed on the store
 
 ---
 
-## Quick Start
+## How it works
+
+Revova uses Shopify's built-in **App Proxy**. When the Revova app is installed on a store, Shopify automatically registers the route `/apps/revova` on the `myshopify.com` domain.
 
-The `proxyUrl` is always `/apps/revova` — Shopify's App Proxy routes requests to your Revova backend automatically. No API keys needed in the storefront.
+In Hydrogen, your storefront runs on its own domain (Oxygen, Vercel, etc.), so you must pass the **absolute** proxy URL — not a relative path.
+
+```
+https://yourstore.myshopify.com/apps/revova
+```
+
+No API keys. No CORS config. Shopify handles all of it.
 
 ---
 
-## Components
+## Setup (Hydrogen)
 
-### `<ReviewWidget>`
+### 1 — Install the Revova app on your Shopify store
 
-Full review list with pagination, sorting, and an inline submission form.
+Same as any merchant. The App Proxy is registered automatically on install.
+
+### 2 — Expose your store domain in the Hydrogen environment
+
+```env
+# .env
+PUBLIC_STORE_DOMAIN=yourstore.myshopify.com
+```
+
+Hydrogen exposes this through `context.env` in loaders:
+
+```ts
+// app/root.tsx or any route loader
+export async function loader({ context }: LoaderArgs) {
+  return {
+    storeDomain: context.env.PUBLIC_STORE_DOMAIN,
+  };
+}
+```
+
+### 3 — Pass `storeDomain` (or `proxyUrl`) to any component
+
+Every component accepts either prop — use whichever is more convenient:
 
 ```tsx
-import { ReviewWidget } from '@revova/hydrogen';
+// Recommended — convenience shorthand
+<ReviewWidget storeDomain={storeDomain} productId={product.id} />
+
+// Explicit — same result
+<ReviewWidget
+  proxyUrl={`https://${storeDomain}/apps/revova`}
+  productId={product.id}
+/>
+```
+
+---
+
+## Quick Start
+
+```tsx
+// app/routes/products.$handle.tsx
+import { ReviewWidget, FloatingReviewButton } from '@revova/hydrogen';
+
+export async function loader({ context, params }: LoaderArgs) {
+  const product = await getProduct(params.handle);
+  return {
+    product,
+    storeDomain: context.env.PUBLIC_STORE_DOMAIN,
+  };
+}
 
 export default function ProductPage() {
-  const { product } = useLoaderData<typeof loader>();
+  const { product, storeDomain } = useLoaderData<typeof loader>();
 
   return (
-    <ReviewWidget
-      proxyUrl="/apps/revova"
-      productId={product.id}
-    />
+    <>
+      <h1>{product.title}</h1>
+
+      <ReviewWidget
+        storeDomain={storeDomain}
+        productId={product.id}
+      />
+
+      <FloatingReviewButton
+        storeDomain={storeDomain}
+        productId={product.id}
+      />
+    </>
   );
 }
 ```
 
-**Props**
+---
+
+## Components
+
+All components accept either `storeDomain` **or** `proxyUrl` — never both.
+
+### `<ReviewWidget>`
+
+Full review list with pagination, sorting, and an inline submission form.
+
+```tsx
+import { ReviewWidget } from '@revova/hydrogen';
+
+<ReviewWidget
+  storeDomain={storeDomain}
+  productId={product.id}
+  pageSize={10}
+  showForm
+  locale="fr"
+/>
+```
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `proxyUrl` | `string` | — | App proxy base URL (`/apps/revova`) |
+| `storeDomain` | `string` | — | Your `myshopify.com` domain (e.g. `yourstore.myshopify.com`) |
+| `proxyUrl` | `string` | — | Explicit proxy URL — use instead of `storeDomain` if preferred |
 | `productId` | `string` | — | Shopify product GID |
 | `locale` | `string` | — | Locale code for translated reviews (e.g. `fr`) |
 | `pageSize` | `number` | `10` | Reviews per page |
@@ -65,14 +149,14 @@ import { ReviewForm } from '@revova/hydrogen';
 
 // `form` comes from the ReviewsResponse returned by useReviews
 <ReviewForm
-  proxyUrl="/apps/revova"
+  storeDomain={storeDomain}
   productId={product.id}
   form={data.form}
   onSuccess={() => console.log('submitted')}
 />
 ```
 
-**Props:** `proxyUrl`, `productId`, `form` (required — `ResolvedForm` from loader), `onSuccess?`, `className?`
+**Props:** `storeDomain` or `proxyUrl`, `productId`, `form` (required — `ResolvedForm` from loader), `onSuccess?`, `className?`
 
 ---
 
@@ -92,16 +176,15 @@ import { StarRating } from '@revova/hydrogen';
 
 ### `<ReviewCount>`
 
-Aggregate rating + review count badge. Fetches from `widget-globals`.
+Aggregate rating + review count badge. Great for product cards and PDP headers.
 
 ```tsx
 import { ReviewCount } from '@revova/hydrogen';
 
-// On a product card or PDP header
-<ReviewCount proxyUrl="/apps/revova" starSize={14} />
+<ReviewCount storeDomain={storeDomain} starSize={14} />
 ```
 
-**Props:** `proxyUrl`, `starColor?`, `starSize?`, `className?`
+**Props:** `storeDomain` or `proxyUrl`, `starColor?`, `starSize?`, `className?`
 
 ---
 
@@ -113,14 +196,14 @@ Auto-advancing carousel of recent reviews. Includes previous/next arrows and dot
 import { ReviewCarousel } from '@revova/hydrogen';
 
 <ReviewCarousel
-  proxyUrl="/apps/revova"
+  storeDomain={storeDomain}
   limit={10}
   autoPlay
   intervalMs={4000}
 />
 ```
 
-**Props:** `proxyUrl`, `limit?` (default 10), `autoPlay?` (default `true`), `intervalMs?` (default 4000), `starColor?`, `className?`
+**Props:** `storeDomain` or `proxyUrl`, `limit?` (default 10), `autoPlay?` (default `true`), `intervalMs?` (default 4000), `starColor?`, `className?`
 
 ---
 
@@ -132,13 +215,13 @@ Masonry photo grid of reviews that have images. Clicking any photo opens a light
 import { ReviewGallery } from '@revova/hydrogen';
 
 <ReviewGallery
-  proxyUrl="/apps/revova"
+  storeDomain={storeDomain}
   columns={3}
   limit={20}
 />
 ```
 
-**Props:** `proxyUrl`, `limit?` (default 20), `columns?` (default 3), `starColor?`, `className?`
+**Props:** `storeDomain` or `proxyUrl`, `limit?` (default 20), `columns?` (default 3), `starColor?`, `className?`
 
 ---
 
@@ -150,12 +233,12 @@ Product Q&A — lists questions with answers and includes an ask-a-question form
 import { QnAWidget } from '@revova/hydrogen';
 
 <QnAWidget
-  proxyUrl="/apps/revova"
+  storeDomain={storeDomain}
   productId={product.id}
 />
 ```
 
-**Props:** `proxyUrl`, `productId`, `className?`
+**Props:** `storeDomain` or `proxyUrl`, `productId`, `className?`
 
 ---
 
@@ -167,16 +250,16 @@ Aggregate rating badge in three styles: `pill` (default), `inline`, or `card`.
 import { TrustBadge } from '@revova/hydrogen';
 
 // Pill — great for footers, headers
-<TrustBadge proxyUrl="/apps/revova" style="pill" />
+<TrustBadge storeDomain={storeDomain} style="pill" />
 
 // Card — great for landing pages
-<TrustBadge proxyUrl="/apps/revova" style="card" />
+<TrustBadge storeDomain={storeDomain} style="card" />
 
 // Inline — great inside sentences or product specs
-<TrustBadge proxyUrl="/apps/revova" style="inline" />
+<TrustBadge storeDomain={storeDomain} style="inline" />
 ```
 
-**Props:** `proxyUrl`, `style?` (`'pill' | 'inline' | 'card'`, default `'pill'`), `starColor?`, `className?`
+**Props:** `storeDomain` or `proxyUrl`, `style?` (`'pill' | 'inline' | 'card'`, default `'pill'`), `starColor?`, `className?`
 
 ---
 
@@ -188,33 +271,32 @@ A continuously scrolling marquee of recent review snippets — ideal for homepag
 import { ReviewTicker } from '@revova/hydrogen';
 
 <ReviewTicker
-  proxyUrl="/apps/revova"
+  storeDomain={storeDomain}
   limit={20}
   speedSeconds={30}
 />
 ```
 
-**Props:** `proxyUrl`, `limit?` (default 20), `speedSeconds?` (default 30), `starColor?`, `className?`
+**Props:** `storeDomain` or `proxyUrl`, `limit?` (default 20), `speedSeconds?` (default 30), `starColor?`, `className?`
 
 ---
 
 ### `<SocialProofPopup>`
 
-A timed floating popup showing recent reviews one at a time. Appears after a short delay and cycles automatically.
+A timed floating popup showing recent reviews one at a time. Add once to your root layout.
 
 ```tsx
 import { SocialProofPopup } from '@revova/hydrogen';
 
-// Add once to your root layout
 <SocialProofPopup
-  proxyUrl="/apps/revova"
+  storeDomain={storeDomain}
   position="bottom-left"
   intervalMs={8000}
   displayMs={5000}
 />
 ```
 
-**Props:** `proxyUrl`, `position?` (`'bottom-left' | 'bottom-right'`, default `'bottom-left'`), `intervalMs?` (default 8000), `displayMs?` (default 5000), `starColor?`, `className?`
+**Props:** `storeDomain` or `proxyUrl`, `position?` (`'bottom-left' | 'bottom-right'`, default `'bottom-left'`), `intervalMs?` (default 8000), `displayMs?` (default 5000), `starColor?`, `className?`
 
 ---
 
@@ -226,14 +308,14 @@ A sticky tab fixed to the left or right edge of the viewport. Clicking it slides
 import { FloatingReviewsTab } from '@revova/hydrogen';
 
 <FloatingReviewsTab
-  proxyUrl="/apps/revova"
+  storeDomain={storeDomain}
   label="Reviews"
   position="right"
   color="#111827"
 />
 ```
 
-**Props:** `proxyUrl`, `label?` (default `'Reviews'`), `position?` (`'left' | 'right'`, default `'right'`), `color?`, `limit?` (default 5), `starColor?`, `className?`
+**Props:** `storeDomain` or `proxyUrl`, `label?` (default `'Reviews'`), `position?` (`'left' | 'right'`, default `'right'`), `color?`, `limit?` (default 5), `starColor?`, `className?`
 
 ---
 
@@ -245,7 +327,7 @@ A fixed "Write a Review" button that opens a modal with the submission form.
 import { FloatingReviewButton } from '@revova/hydrogen';
 
 <FloatingReviewButton
-  proxyUrl="/apps/revova"
+  storeDomain={storeDomain}
   productId={product.id}
   text="Write a Review"
   position="bottom-right"
@@ -253,23 +335,29 @@ import { FloatingReviewButton } from '@revova/hydrogen';
 />
 ```
 
-**Props:** `proxyUrl`, `productId`, `text?` (default `'Write a Review'`), `color?`, `position?` (`'bottom-left' | 'bottom-right'`, default `'bottom-right'`), `className?`
+**Props:** `storeDomain` or `proxyUrl`, `productId`, `text?` (default `'Write a Review'`), `color?`, `position?` (`'bottom-left' | 'bottom-right'`, default `'bottom-right'`), `className?`
 
 ---
 
 ## Hooks
 
-Use hooks to build fully custom UIs while Revova handles data fetching.
+Use hooks to build fully custom UIs while Revova handles data fetching. Hooks take `proxyUrl` as a plain string — use the exported `resolveProxyUrl` helper to build it from `storeDomain`.
+
+```ts
+import { resolveProxyUrl } from '@revova/hydrogen';
+
+const proxyUrl = resolveProxyUrl({ storeDomain }); // or { proxyUrl }
+```
 
 ### `useReviews(options)`
 
 Paginated reviews for a product with sorting controls.
 
 ```tsx
-import { useReviews } from '@revova/hydrogen';
+import { useReviews, resolveProxyUrl } from '@revova/hydrogen';
 
 const { data, loading, error, setPage, setSort, currentPage, currentSort, refetch } = useReviews({
-  proxyUrl: '/apps/revova',
+  proxyUrl: resolveProxyUrl({ storeDomain }),
   productId: product.id,
   limit: 5,
   sort: 'helpful',   // 'recent' | 'helpful' | 'rating_high' | 'rating_low'
@@ -282,10 +370,10 @@ const { data, loading, error, setPage, setSort, currentPage, currentSort, refetc
 Shop-level stats and recent reviews. Used internally by `<ReviewCount>`, `<TrustBadge>`, `<ReviewCarousel>`, `<ReviewGallery>`, `<ReviewTicker>`, `<SocialProofPopup>`, and `<FloatingReviewsTab>`.
 
 ```tsx
-import { useWidgetGlobals } from '@revova/hydrogen';
+import { useWidgetGlobals, resolveProxyUrl } from '@revova/hydrogen';
 
 const { data, loading, error } = useWidgetGlobals({
-  proxyUrl: '/apps/revova',
+  proxyUrl: resolveProxyUrl({ storeDomain }),
   limit: 20,
 });
 
@@ -300,9 +388,11 @@ const { data, loading, error } = useWidgetGlobals({
 Submit a new review programmatically.
 
 ```tsx
-import { useSubmitReview } from '@revova/hydrogen';
+import { useSubmitReview, resolveProxyUrl } from '@revova/hydrogen';
 
-const { submit, submitting, success, error, result, reset } = useSubmitReview('/apps/revova');
+const { submit, submitting, success, error, result, reset } = useSubmitReview(
+  resolveProxyUrl({ storeDomain })
+);
 
 await submit({
   productId: 'gid://shopify/Product/123',
@@ -321,7 +411,7 @@ await submit({
 Fetch and submit Q&A for a product.
 
 ```tsx
-import { useQnA } from '@revova/hydrogen';
+import { useQnA, resolveProxyUrl } from '@revova/hydrogen';
 
 const {
   data,
@@ -331,9 +421,11 @@ const {
   submitAnswer,
   submitState,
   resetSubmit,
-} = useQnA({ proxyUrl: '/apps/revova', productId: product.id });
+} = useQnA({
+  proxyUrl: resolveProxyUrl({ storeDomain }),
+  productId: product.id,
+});
 
-// Submit a question
 await submitQuestion({
   intent: 'question',
   productId: product.id,
@@ -347,9 +439,9 @@ await submitQuestion({
 Cast a helpful / not-helpful vote on a review.
 
 ```tsx
-import { useHelpfulVote } from '@revova/hydrogen';
+import { useHelpfulVote, resolveProxyUrl } from '@revova/hydrogen';
 
-const { vote, loading, voted } = useHelpfulVote('/apps/revova');
+const { vote, loading, voted } = useHelpfulVote(resolveProxyUrl({ storeDomain }));
 
 <button onClick={() => vote({ reviewId: review.id, vote: 'helpful' })} disabled={voted}>
   Helpful ({review.helpfulCount})

package/dist/index.cjs

@@ -42,6 +42,7 @@ __export(index_exports, {
   SocialProofPopup: () => SocialProofPopup,
   StarRating: () => StarRating,
   TrustBadge: () => TrustBadge,
+  resolveProxyUrl: () => resolveProxyUrl,
   useForm: () => useForm,
   useHelpfulVote: () => useHelpfulVote,
   useQnA: () => useQnA,
@@ -54,6 +55,14 @@ module.exports = __toCommonJS(index_exports);
 // src/components/ReviewWidget.tsx
 var import_react4 = require("react");
 
+// src/utils.ts
+var PROXY_PATH = "/apps/revova";
+function resolveProxyUrl(props) {
+  if (props.storeDomain) return `https://${props.storeDomain}${PROXY_PATH}`;
+  if (props.proxyUrl) return props.proxyUrl;
+  throw new Error("[Revova] Provide either proxyUrl or storeDomain.");
+}
+
 // src/hooks/useReviews.ts
 var import_react = require("react");
 function useReviews({
@@ -479,8 +488,9 @@ function FieldRenderer(props) {
       return null;
   }
 }
-function ReviewForm({ proxyUrl, productId, form, onSuccess, className }) {
-  const { submit, submitting, success, error, result } = useSubmitReview(proxyUrl);
+function ReviewForm({ proxyUrl, storeDomain, productId, form, onSuccess, className }) {
+  const resolvedUrl = resolveProxyUrl({ proxyUrl, storeDomain });
+  const { submit, submitting, success, error, result } = useSubmitReview(resolvedUrl);
   const [answers, setAnswers] = (0, import_react3.useState)({});
   const [email, setEmail] = (0, import_react3.useState)("");
   const starField = form.fields.find((f) => f.type === "STAR_RATING");
@@ -588,6 +598,7 @@ function ReviewForm({ proxyUrl, productId, form, onSuccess, className }) {
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function ReviewWidget({
   proxyUrl,
+  storeDomain,
   productId,
   locale,
   pageSize = 10,
@@ -595,9 +606,10 @@ function ReviewWidget({
   starColor,
   className
 }) {
+  const resolvedUrl = resolveProxyUrl({ proxyUrl, storeDomain });
   const [showingForm, setShowingForm] = (0, import_react4.useState)(false);
   const { data, loading, error, setPage, setSort, currentPage, currentSort } = useReviews({
-    proxyUrl,
+    proxyUrl: resolvedUrl,
     productId,
     limit: pageSize,
     ...locale !== void 0 ? { locale } : {}
@@ -632,7 +644,7 @@ function ReviewWidget({
     showingForm && form && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       ReviewForm,
       {
-        proxyUrl,
+        proxyUrl: resolvedUrl,
         productId,
         form,
         onSuccess: () => setShowingForm(false)
@@ -715,8 +727,9 @@ function useWidgetGlobals({ proxyUrl, limit = 20 }) {
 
 // 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({ proxyUrl, storeDomain, starColor, starSize, className }) {
+  const resolvedUrl = resolveProxyUrl({ proxyUrl, storeDomain });
+  const { data, loading } = useWidgetGlobals({ proxyUrl: resolvedUrl });
   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: [
@@ -735,13 +748,15 @@ var import_react6 = __toESM(require("react"), 1);
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function ReviewCarousel({
   proxyUrl,
+  storeDomain,
   limit = 10,
   autoPlay = true,
   intervalMs = 4e3,
   starColor,
   className
 }) {
-  const { data, loading } = useWidgetGlobals({ proxyUrl, limit });
+  const resolvedUrl = resolveProxyUrl({ proxyUrl, storeDomain });
+  const { data, loading } = useWidgetGlobals({ proxyUrl: resolvedUrl, limit });
   const [index, setIndex] = (0, import_react6.useState)(0);
   const reviews = data?.reviews ?? [];
   import_react6.default.useEffect(() => {
@@ -790,12 +805,14 @@ var import_react7 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function ReviewGallery({
   proxyUrl,
+  storeDomain,
   limit = 20,
   columns = 3,
   starColor,
   className
 }) {
-  const { data, loading } = useWidgetGlobals({ proxyUrl, limit });
+  const resolvedUrl = resolveProxyUrl({ proxyUrl, storeDomain });
+  const { data, loading } = useWidgetGlobals({ proxyUrl: resolvedUrl, 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" });
@@ -979,9 +996,10 @@ function useQnA({ proxyUrl, productId, page: initialPage = 1, sort = "recent" })
 
 // src/components/QnAWidget.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-function QnAWidget({ proxyUrl, productId, className }) {
+function QnAWidget({ proxyUrl, storeDomain, productId, className }) {
+  const resolvedUrl = resolveProxyUrl({ proxyUrl, storeDomain });
   const { data, loading, error, setPage, currentPage, submitQuestion, submitState, resetSubmit } = useQnA({
-    proxyUrl,
+    proxyUrl: resolvedUrl,
     productId
   });
   const [showForm, setShowForm] = (0, import_react9.useState)(false);
@@ -1074,13 +1092,15 @@ var import_react10 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function SocialProofPopup({
   proxyUrl,
+  storeDomain,
   position = "bottom-left",
   intervalMs = 8e3,
   displayMs = 5e3,
   starColor,
   className
 }) {
-  const { data } = useWidgetGlobals({ proxyUrl });
+  const resolvedUrl = resolveProxyUrl({ proxyUrl, storeDomain });
+  const { data } = useWidgetGlobals({ proxyUrl: resolvedUrl });
   const [current, setCurrent] = (0, import_react10.useState)(null);
   const [visible, setVisible] = (0, import_react10.useState)(false);
   const [dismissed, setDismissed] = (0, import_react10.useState)(false);
@@ -1183,12 +1203,14 @@ var import_react11 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function ReviewTicker({
   proxyUrl,
+  storeDomain,
   limit = 20,
   speedSeconds = 30,
   starColor,
   className
 }) {
-  const { data, loading } = useWidgetGlobals({ proxyUrl, limit });
+  const resolvedUrl = resolveProxyUrl({ proxyUrl, storeDomain });
+  const { data, loading } = useWidgetGlobals({ proxyUrl: resolvedUrl, limit });
   const trackRef = (0, import_react11.useRef)(null);
   const reviews = data?.reviews ?? [];
   if (loading || reviews.length === 0) return null;
@@ -1250,6 +1272,7 @@ var import_react12 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function FloatingReviewsTab({
   proxyUrl,
+  storeDomain,
   label = "Reviews",
   position = "right",
   color = "#111827",
@@ -1257,7 +1280,8 @@ function FloatingReviewsTab({
   starColor,
   className
 }) {
-  const { data } = useWidgetGlobals({ proxyUrl, limit });
+  const resolvedUrl = resolveProxyUrl({ proxyUrl, storeDomain });
+  const { data } = useWidgetGlobals({ proxyUrl: resolvedUrl, limit });
   const [open, setOpen] = (0, import_react12.useState)(false);
   const reviews = data?.reviews ?? [];
   const stats = data?.stats;
@@ -1334,8 +1358,9 @@ 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({ proxyUrl, storeDomain, style: badgeStyle = "pill", starColor, className }) {
+  const resolvedUrl = resolveProxyUrl({ proxyUrl, storeDomain });
+  const { data, loading } = useWidgetGlobals({ proxyUrl: resolvedUrl });
   if (loading || !data?.stats?.averageRating) return null;
   const avg = parseFloat(data.stats.averageRating);
   const count = data.stats.totalReviews;
@@ -1441,14 +1466,16 @@ function useForm(proxyUrl, productId) {
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function FloatingReviewButton({
   proxyUrl,
+  storeDomain,
   productId,
   text = "Write a Review",
   color = "#111827",
   position = "bottom-right",
   className
 }) {
+  const resolvedUrl = resolveProxyUrl({ proxyUrl, storeDomain });
   const [open, setOpen] = (0, import_react14.useState)(false);
-  const { form, loading } = useForm(proxyUrl, productId);
+  const { form, loading } = useForm(resolvedUrl, 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 +1553,7 @@ function FloatingReviewButton({
               /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 ReviewForm,
                 {
-                  proxyUrl,
+                  proxyUrl: resolvedUrl,
                   productId,
                   form,
                   onSuccess: () => setOpen(false)
@@ -1578,6 +1605,7 @@ function useHelpfulVote(proxyUrl) {
   SocialProofPopup,
   StarRating,
   TrustBadge,
+  resolveProxyUrl,
   useForm,
   useHelpfulVote,
   useQnA,

package/dist/index.d.cts

@@ -1,16 +1,5 @@
 import React from 'react';
 
-type ReviewWidgetProps = {
-    proxyUrl: string;
-    productId: string;
-    locale?: string;
-    pageSize?: number;
-    showForm?: boolean;
-    starColor?: string;
-    className?: string;
-};
-declare function ReviewWidget({ proxyUrl, productId, locale, pageSize, showForm, starColor, className, }: ReviewWidgetProps): React.JSX.Element | null;
-
 type ReviewMedia = {
     url: string;
     mimeType: string;
@@ -162,6 +151,25 @@ type HelpfulVoteResponse = {
     helpfulCount: number;
 };
 type SortKey = 'recent' | 'helpful' | 'rating_high' | 'rating_low';
+/**
+ * Every public component and hook accepts either an explicit proxyUrl or a
+ * storeDomain shorthand. Provide exactly one of the two.
+ *
+ * @example
+ * // explicit
+ * proxyUrl={`https://${env.PUBLIC_STORE_DOMAIN}/apps/revova`}
+ *
+ * @example
+ * // shorthand (Hydrogen-friendly)
+ * storeDomain={env.PUBLIC_STORE_DOMAIN}
+ */
+type ProxyProps = {
+    proxyUrl: string;
+    storeDomain?: never;
+} | {
+    storeDomain: string;
+    proxyUrl?: never;
+};
 type UseReviewsOptions = {
     proxyUrl: string;
     productId: string;
@@ -223,22 +231,30 @@ type UseQnAOptions = {
     sort?: 'recent' | 'helpful';
 };
 
-type ReviewFormProps = {
-    proxyUrl: string;
+type ReviewWidgetProps = ProxyProps & {
+    productId: string;
+    locale?: string;
+    pageSize?: number;
+    showForm?: boolean;
+    starColor?: string;
+    className?: string;
+};
+declare function ReviewWidget({ proxyUrl, storeDomain, productId, locale, pageSize, showForm, starColor, className, }: ReviewWidgetProps): React.JSX.Element | null;
+
+type ReviewFormProps = ProxyProps & {
     productId: string;
     form: ResolvedForm;
     onSuccess?: () => void;
     className?: string;
 };
-declare function ReviewForm({ proxyUrl, productId, form, onSuccess, className }: ReviewFormProps): React.JSX.Element;
+declare function ReviewForm({ proxyUrl, storeDomain, productId, form, onSuccess, className }: ReviewFormProps): React.JSX.Element;
 
-type ReviewCountProps = {
-    proxyUrl: string;
+type ReviewCountProps = ProxyProps & {
     starColor?: string;
     starSize?: number;
     className?: string;
 };
-declare function ReviewCount({ proxyUrl, starColor, starSize, className }: ReviewCountProps): React.JSX.Element | null;
+declare function ReviewCount({ proxyUrl, storeDomain, starColor, starSize, className }: ReviewCountProps): React.JSX.Element | null;
 
 type StarRatingProps = {
     rating: number;
@@ -249,53 +265,47 @@ type StarRatingProps = {
 };
 declare function StarRating({ rating, max, size, color, className }: StarRatingProps): React.JSX.Element;
 
-type ReviewCarouselProps = {
-    proxyUrl: string;
+type ReviewCarouselProps = ProxyProps & {
     limit?: number;
     autoPlay?: boolean;
     intervalMs?: number;
     starColor?: string;
     className?: string;
 };
-declare function ReviewCarousel({ proxyUrl, limit, autoPlay, intervalMs, starColor, className, }: ReviewCarouselProps): React.JSX.Element | null;
+declare function ReviewCarousel({ proxyUrl, storeDomain, limit, autoPlay, intervalMs, starColor, className, }: ReviewCarouselProps): React.JSX.Element | null;
 
-type ReviewGalleryProps = {
-    proxyUrl: string;
+type ReviewGalleryProps = ProxyProps & {
     limit?: number;
     columns?: number;
     starColor?: string;
     className?: string;
 };
-declare function ReviewGallery({ proxyUrl, limit, columns, starColor, className, }: ReviewGalleryProps): React.JSX.Element | null;
+declare function ReviewGallery({ proxyUrl, storeDomain, limit, columns, starColor, className, }: ReviewGalleryProps): React.JSX.Element | null;
 
-type QnAWidgetProps = {
-    proxyUrl: string;
+type QnAWidgetProps = ProxyProps & {
     productId: string;
     className?: string;
 };
-declare function QnAWidget({ proxyUrl, productId, className }: QnAWidgetProps): React.JSX.Element | null;
+declare function QnAWidget({ proxyUrl, storeDomain, productId, className }: QnAWidgetProps): React.JSX.Element | null;
 
-type SocialProofPopupProps = {
-    proxyUrl: string;
+type SocialProofPopupProps = ProxyProps & {
     position?: 'bottom-left' | 'bottom-right';
     intervalMs?: number;
     displayMs?: number;
     starColor?: string;
     className?: string;
 };
-declare function SocialProofPopup({ proxyUrl, position, intervalMs, displayMs, starColor, className, }: SocialProofPopupProps): React.JSX.Element | null;
+declare function SocialProofPopup({ proxyUrl, storeDomain, position, intervalMs, displayMs, starColor, className, }: SocialProofPopupProps): React.JSX.Element | null;
 
-type ReviewTickerProps = {
-    proxyUrl: string;
+type ReviewTickerProps = ProxyProps & {
     limit?: number;
     speedSeconds?: number;
     starColor?: string;
     className?: string;
 };
-declare function ReviewTicker({ proxyUrl, limit, speedSeconds, starColor, className, }: ReviewTickerProps): React.JSX.Element | null;
+declare function ReviewTicker({ proxyUrl, storeDomain, limit, speedSeconds, starColor, className, }: ReviewTickerProps): React.JSX.Element | null;
 
-type FloatingReviewsTabProps = {
-    proxyUrl: string;
+type FloatingReviewsTabProps = ProxyProps & {
     label?: string;
     position?: 'left' | 'right';
     color?: string;
@@ -303,25 +313,28 @@ type FloatingReviewsTabProps = {
     starColor?: string;
     className?: string;
 };
-declare function FloatingReviewsTab({ proxyUrl, label, position, color, limit, starColor, className, }: FloatingReviewsTabProps): React.JSX.Element;
+declare function FloatingReviewsTab({ proxyUrl, storeDomain, label, position, color, limit, starColor, className, }: FloatingReviewsTabProps): React.JSX.Element;
 
-type TrustBadgeProps = {
-    proxyUrl: string;
+type TrustBadgeProps = ProxyProps & {
     style?: 'inline' | 'pill' | 'card';
     starColor?: string;
     className?: string;
 };
-declare function TrustBadge({ proxyUrl, style: badgeStyle, starColor, className }: TrustBadgeProps): React.JSX.Element | null;
+declare function TrustBadge({ proxyUrl, storeDomain, style: badgeStyle, starColor, className }: TrustBadgeProps): React.JSX.Element | null;
 
-type FloatingReviewButtonProps = {
-    proxyUrl: string;
+type FloatingReviewButtonProps = ProxyProps & {
     productId: string;
     text?: string;
     color?: string;
     position?: 'bottom-left' | 'bottom-right';
     className?: string;
 };
-declare function FloatingReviewButton({ proxyUrl, productId, text, color, position, className, }: FloatingReviewButtonProps): React.JSX.Element | null;
+declare function FloatingReviewButton({ proxyUrl, storeDomain, productId, text, color, position, className, }: FloatingReviewButtonProps): React.JSX.Element | null;
+
+declare function resolveProxyUrl(props: {
+    proxyUrl?: string | undefined;
+    storeDomain?: string | undefined;
+}): string;
 
 type State$3 = {
     data: ReviewsResponse | null;
@@ -395,4 +408,4 @@ type State = {
  */
 declare function useForm(proxyUrl: string, productId: string): State;
 
-export { type AdminReply, type AttributeRating, FloatingReviewButton, FloatingReviewsTab, type FormField, type GlobalReview, type HelpfulVotePayload, type HelpfulVoteResponse, type ProductQuestion, type QnAAnswer, type QnAPagination, type QnAResponse, QnAWidget, type ResolvedForm, type Review, ReviewCarousel, ReviewCount, type ReviewFieldAnswer, ReviewForm, ReviewGallery, type ReviewMedia, ReviewTicker, ReviewWidget, type ReviewsPagination, type ReviewsResponse, type ShopStats, SocialProofPopup, type SortKey, StarRating, type SubmitAnswerPayload, type SubmitQuestionPayload, type SubmitReviewPayload, type SubmitReviewResponse, TrustBadge, type UseQnAOptions, type UseReviewsOptions, type UseWidgetGlobalsOptions, type WidgetConfig, type WidgetGlobalsResponse, type WidgetTheme, useForm, useHelpfulVote, useQnA, useReviews, useSubmitReview, useWidgetGlobals };
+export { type AdminReply, type AttributeRating, FloatingReviewButton, FloatingReviewsTab, type FormField, type GlobalReview, type HelpfulVotePayload, type HelpfulVoteResponse, type ProductQuestion, type ProxyProps, type QnAAnswer, type QnAPagination, type QnAResponse, QnAWidget, type ResolvedForm, type Review, ReviewCarousel, ReviewCount, type ReviewFieldAnswer, ReviewForm, ReviewGallery, type ReviewMedia, ReviewTicker, ReviewWidget, type ReviewsPagination, type ReviewsResponse, type ShopStats, SocialProofPopup, type SortKey, StarRating, type SubmitAnswerPayload, type SubmitQuestionPayload, type SubmitReviewPayload, type SubmitReviewResponse, TrustBadge, type UseQnAOptions, type UseReviewsOptions, type UseWidgetGlobalsOptions, type WidgetConfig, type WidgetGlobalsResponse, type WidgetTheme, resolveProxyUrl, useForm, useHelpfulVote, useQnA, useReviews, useSubmitReview, useWidgetGlobals };

package/dist/index.d.ts

@@ -1,16 +1,5 @@
 import React from 'react';
 
-type ReviewWidgetProps = {
-    proxyUrl: string;
-    productId: string;
-    locale?: string;
-    pageSize?: number;
-    showForm?: boolean;
-    starColor?: string;
-    className?: string;
-};
-declare function ReviewWidget({ proxyUrl, productId, locale, pageSize, showForm, starColor, className, }: ReviewWidgetProps): React.JSX.Element | null;
-
 type ReviewMedia = {
     url: string;
     mimeType: string;
@@ -162,6 +151,25 @@ type HelpfulVoteResponse = {
     helpfulCount: number;
 };
 type SortKey = 'recent' | 'helpful' | 'rating_high' | 'rating_low';
+/**
+ * Every public component and hook accepts either an explicit proxyUrl or a
+ * storeDomain shorthand. Provide exactly one of the two.
+ *
+ * @example
+ * // explicit
+ * proxyUrl={`https://${env.PUBLIC_STORE_DOMAIN}/apps/revova`}
+ *
+ * @example
+ * // shorthand (Hydrogen-friendly)
+ * storeDomain={env.PUBLIC_STORE_DOMAIN}
+ */
+type ProxyProps = {
+    proxyUrl: string;
+    storeDomain?: never;
+} | {
+    storeDomain: string;
+    proxyUrl?: never;
+};
 type UseReviewsOptions = {
     proxyUrl: string;
     productId: string;
@@ -223,22 +231,30 @@ type UseQnAOptions = {
     sort?: 'recent' | 'helpful';
 };
 
-type ReviewFormProps = {
-    proxyUrl: string;
+type ReviewWidgetProps = ProxyProps & {
+    productId: string;
+    locale?: string;
+    pageSize?: number;
+    showForm?: boolean;
+    starColor?: string;
+    className?: string;
+};
+declare function ReviewWidget({ proxyUrl, storeDomain, productId, locale, pageSize, showForm, starColor, className, }: ReviewWidgetProps): React.JSX.Element | null;
+
+type ReviewFormProps = ProxyProps & {
     productId: string;
     form: ResolvedForm;
     onSuccess?: () => void;
     className?: string;
 };
-declare function ReviewForm({ proxyUrl, productId, form, onSuccess, className }: ReviewFormProps): React.JSX.Element;
+declare function ReviewForm({ proxyUrl, storeDomain, productId, form, onSuccess, className }: ReviewFormProps): React.JSX.Element;
 
-type ReviewCountProps = {
-    proxyUrl: string;
+type ReviewCountProps = ProxyProps & {
     starColor?: string;
     starSize?: number;
     className?: string;
 };
-declare function ReviewCount({ proxyUrl, starColor, starSize, className }: ReviewCountProps): React.JSX.Element | null;
+declare function ReviewCount({ proxyUrl, storeDomain, starColor, starSize, className }: ReviewCountProps): React.JSX.Element | null;
 
 type StarRatingProps = {
     rating: number;
@@ -249,53 +265,47 @@ type StarRatingProps = {
 };
 declare function StarRating({ rating, max, size, color, className }: StarRatingProps): React.JSX.Element;
 
-type ReviewCarouselProps = {
-    proxyUrl: string;
+type ReviewCarouselProps = ProxyProps & {
     limit?: number;
     autoPlay?: boolean;
     intervalMs?: number;
     starColor?: string;
     className?: string;
 };
-declare function ReviewCarousel({ proxyUrl, limit, autoPlay, intervalMs, starColor, className, }: ReviewCarouselProps): React.JSX.Element | null;
+declare function ReviewCarousel({ proxyUrl, storeDomain, limit, autoPlay, intervalMs, starColor, className, }: ReviewCarouselProps): React.JSX.Element | null;
 
-type ReviewGalleryProps = {
-    proxyUrl: string;
+type ReviewGalleryProps = ProxyProps & {
     limit?: number;
     columns?: number;
     starColor?: string;
     className?: string;
 };
-declare function ReviewGallery({ proxyUrl, limit, columns, starColor, className, }: ReviewGalleryProps): React.JSX.Element | null;
+declare function ReviewGallery({ proxyUrl, storeDomain, limit, columns, starColor, className, }: ReviewGalleryProps): React.JSX.Element | null;
 
-type QnAWidgetProps = {
-    proxyUrl: string;
+type QnAWidgetProps = ProxyProps & {
     productId: string;
     className?: string;
 };
-declare function QnAWidget({ proxyUrl, productId, className }: QnAWidgetProps): React.JSX.Element | null;
+declare function QnAWidget({ proxyUrl, storeDomain, productId, className }: QnAWidgetProps): React.JSX.Element | null;
 
-type SocialProofPopupProps = {
-    proxyUrl: string;
+type SocialProofPopupProps = ProxyProps & {
     position?: 'bottom-left' | 'bottom-right';
     intervalMs?: number;
     displayMs?: number;
     starColor?: string;
     className?: string;
 };
-declare function SocialProofPopup({ proxyUrl, position, intervalMs, displayMs, starColor, className, }: SocialProofPopupProps): React.JSX.Element | null;
+declare function SocialProofPopup({ proxyUrl, storeDomain, position, intervalMs, displayMs, starColor, className, }: SocialProofPopupProps): React.JSX.Element | null;
 
-type ReviewTickerProps = {
-    proxyUrl: string;
+type ReviewTickerProps = ProxyProps & {
     limit?: number;
     speedSeconds?: number;
     starColor?: string;
     className?: string;
 };
-declare function ReviewTicker({ proxyUrl, limit, speedSeconds, starColor, className, }: ReviewTickerProps): React.JSX.Element | null;
+declare function ReviewTicker({ proxyUrl, storeDomain, limit, speedSeconds, starColor, className, }: ReviewTickerProps): React.JSX.Element | null;
 
-type FloatingReviewsTabProps = {
-    proxyUrl: string;
+type FloatingReviewsTabProps = ProxyProps & {
     label?: string;
     position?: 'left' | 'right';
     color?: string;
@@ -303,25 +313,28 @@ type FloatingReviewsTabProps = {
     starColor?: string;
     className?: string;
 };
-declare function FloatingReviewsTab({ proxyUrl, label, position, color, limit, starColor, className, }: FloatingReviewsTabProps): React.JSX.Element;
+declare function FloatingReviewsTab({ proxyUrl, storeDomain, label, position, color, limit, starColor, className, }: FloatingReviewsTabProps): React.JSX.Element;
 
-type TrustBadgeProps = {
-    proxyUrl: string;
+type TrustBadgeProps = ProxyProps & {
     style?: 'inline' | 'pill' | 'card';
     starColor?: string;
     className?: string;
 };
-declare function TrustBadge({ proxyUrl, style: badgeStyle, starColor, className }: TrustBadgeProps): React.JSX.Element | null;
+declare function TrustBadge({ proxyUrl, storeDomain, style: badgeStyle, starColor, className }: TrustBadgeProps): React.JSX.Element | null;
 
-type FloatingReviewButtonProps = {
-    proxyUrl: string;
+type FloatingReviewButtonProps = ProxyProps & {
     productId: string;
     text?: string;
     color?: string;
     position?: 'bottom-left' | 'bottom-right';
     className?: string;
 };
-declare function FloatingReviewButton({ proxyUrl, productId, text, color, position, className, }: FloatingReviewButtonProps): React.JSX.Element | null;
+declare function FloatingReviewButton({ proxyUrl, storeDomain, productId, text, color, position, className, }: FloatingReviewButtonProps): React.JSX.Element | null;
+
+declare function resolveProxyUrl(props: {
+    proxyUrl?: string | undefined;
+    storeDomain?: string | undefined;
+}): string;
 
 type State$3 = {
     data: ReviewsResponse | null;
@@ -395,4 +408,4 @@ type State = {
  */
 declare function useForm(proxyUrl: string, productId: string): State;
 
-export { type AdminReply, type AttributeRating, FloatingReviewButton, FloatingReviewsTab, type FormField, type GlobalReview, type HelpfulVotePayload, type HelpfulVoteResponse, type ProductQuestion, type QnAAnswer, type QnAPagination, type QnAResponse, QnAWidget, type ResolvedForm, type Review, ReviewCarousel, ReviewCount, type ReviewFieldAnswer, ReviewForm, ReviewGallery, type ReviewMedia, ReviewTicker, ReviewWidget, type ReviewsPagination, type ReviewsResponse, type ShopStats, SocialProofPopup, type SortKey, StarRating, type SubmitAnswerPayload, type SubmitQuestionPayload, type SubmitReviewPayload, type SubmitReviewResponse, TrustBadge, type UseQnAOptions, type UseReviewsOptions, type UseWidgetGlobalsOptions, type WidgetConfig, type WidgetGlobalsResponse, type WidgetTheme, useForm, useHelpfulVote, useQnA, useReviews, useSubmitReview, useWidgetGlobals };
+export { type AdminReply, type AttributeRating, FloatingReviewButton, FloatingReviewsTab, type FormField, type GlobalReview, type HelpfulVotePayload, type HelpfulVoteResponse, type ProductQuestion, type ProxyProps, type QnAAnswer, type QnAPagination, type QnAResponse, QnAWidget, type ResolvedForm, type Review, ReviewCarousel, ReviewCount, type ReviewFieldAnswer, ReviewForm, ReviewGallery, type ReviewMedia, ReviewTicker, ReviewWidget, type ReviewsPagination, type ReviewsResponse, type ShopStats, SocialProofPopup, type SortKey, StarRating, type SubmitAnswerPayload, type SubmitQuestionPayload, type SubmitReviewPayload, type SubmitReviewResponse, TrustBadge, type UseQnAOptions, type UseReviewsOptions, type UseWidgetGlobalsOptions, type WidgetConfig, type WidgetGlobalsResponse, type WidgetTheme, resolveProxyUrl, useForm, useHelpfulVote, useQnA, useReviews, useSubmitReview, useWidgetGlobals };

package/dist/index.js

@@ -1,6 +1,14 @@
 // src/components/ReviewWidget.tsx
 import { useState as useState4 } from "react";
 
+// src/utils.ts
+var PROXY_PATH = "/apps/revova";
+function resolveProxyUrl(props) {
+  if (props.storeDomain) return `https://${props.storeDomain}${PROXY_PATH}`;
+  if (props.proxyUrl) return props.proxyUrl;
+  throw new Error("[Revova] Provide either proxyUrl or storeDomain.");
+}
+
 // src/hooks/useReviews.ts
 import { useEffect, useState, useCallback } from "react";
 function useReviews({
@@ -426,8 +434,9 @@ function FieldRenderer(props) {
       return null;
   }
 }
-function ReviewForm({ proxyUrl, productId, form, onSuccess, className }) {
-  const { submit, submitting, success, error, result } = useSubmitReview(proxyUrl);
+function ReviewForm({ proxyUrl, storeDomain, productId, form, onSuccess, className }) {
+  const resolvedUrl = resolveProxyUrl({ proxyUrl, storeDomain });
+  const { submit, submitting, success, error, result } = useSubmitReview(resolvedUrl);
   const [answers, setAnswers] = useState3({});
   const [email, setEmail] = useState3("");
   const starField = form.fields.find((f) => f.type === "STAR_RATING");
@@ -535,6 +544,7 @@ function ReviewForm({ proxyUrl, productId, form, onSuccess, className }) {
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function ReviewWidget({
   proxyUrl,
+  storeDomain,
   productId,
   locale,
   pageSize = 10,
@@ -542,9 +552,10 @@ function ReviewWidget({
   starColor,
   className
 }) {
+  const resolvedUrl = resolveProxyUrl({ proxyUrl, storeDomain });
   const [showingForm, setShowingForm] = useState4(false);
   const { data, loading, error, setPage, setSort, currentPage, currentSort } = useReviews({
-    proxyUrl,
+    proxyUrl: resolvedUrl,
     productId,
     limit: pageSize,
     ...locale !== void 0 ? { locale } : {}
@@ -579,7 +590,7 @@ function ReviewWidget({
     showingForm && form && /* @__PURE__ */ jsx3("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ jsx3(
       ReviewForm,
       {
-        proxyUrl,
+        proxyUrl: resolvedUrl,
         productId,
         form,
         onSuccess: () => setShowingForm(false)
@@ -662,8 +673,9 @@ function useWidgetGlobals({ proxyUrl, limit = 20 }) {
 
 // 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({ proxyUrl, storeDomain, starColor, starSize, className }) {
+  const resolvedUrl = resolveProxyUrl({ proxyUrl, storeDomain });
+  const { data, loading } = useWidgetGlobals({ proxyUrl: resolvedUrl });
   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: [
@@ -682,13 +694,15 @@ import React3, { useState as useState6 } from "react";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function ReviewCarousel({
   proxyUrl,
+  storeDomain,
   limit = 10,
   autoPlay = true,
   intervalMs = 4e3,
   starColor,
   className
 }) {
-  const { data, loading } = useWidgetGlobals({ proxyUrl, limit });
+  const resolvedUrl = resolveProxyUrl({ proxyUrl, storeDomain });
+  const { data, loading } = useWidgetGlobals({ proxyUrl: resolvedUrl, limit });
   const [index, setIndex] = useState6(0);
   const reviews = data?.reviews ?? [];
   React3.useEffect(() => {
@@ -737,12 +751,14 @@ import { useState as useState7 } from "react";
 import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function ReviewGallery({
   proxyUrl,
+  storeDomain,
   limit = 20,
   columns = 3,
   starColor,
   className
 }) {
-  const { data, loading } = useWidgetGlobals({ proxyUrl, limit });
+  const resolvedUrl = resolveProxyUrl({ proxyUrl, storeDomain });
+  const { data, loading } = useWidgetGlobals({ proxyUrl: resolvedUrl, 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" });
@@ -926,9 +942,10 @@ function useQnA({ proxyUrl, productId, page: initialPage = 1, sort = "recent" })
 
 // 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({ proxyUrl, storeDomain, productId, className }) {
+  const resolvedUrl = resolveProxyUrl({ proxyUrl, storeDomain });
   const { data, loading, error, setPage, currentPage, submitQuestion, submitState, resetSubmit } = useQnA({
-    proxyUrl,
+    proxyUrl: resolvedUrl,
     productId
   });
   const [showForm, setShowForm] = useState9(false);
@@ -1021,13 +1038,15 @@ import { useEffect as useEffect4, useState as useState10 } from "react";
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function SocialProofPopup({
   proxyUrl,
+  storeDomain,
   position = "bottom-left",
   intervalMs = 8e3,
   displayMs = 5e3,
   starColor,
   className
 }) {
-  const { data } = useWidgetGlobals({ proxyUrl });
+  const resolvedUrl = resolveProxyUrl({ proxyUrl, storeDomain });
+  const { data } = useWidgetGlobals({ proxyUrl: resolvedUrl });
   const [current, setCurrent] = useState10(null);
   const [visible, setVisible] = useState10(false);
   const [dismissed, setDismissed] = useState10(false);
@@ -1130,12 +1149,14 @@ import { useRef } from "react";
 import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function ReviewTicker({
   proxyUrl,
+  storeDomain,
   limit = 20,
   speedSeconds = 30,
   starColor,
   className
 }) {
-  const { data, loading } = useWidgetGlobals({ proxyUrl, limit });
+  const resolvedUrl = resolveProxyUrl({ proxyUrl, storeDomain });
+  const { data, loading } = useWidgetGlobals({ proxyUrl: resolvedUrl, limit });
   const trackRef = useRef(null);
   const reviews = data?.reviews ?? [];
   if (loading || reviews.length === 0) return null;
@@ -1197,6 +1218,7 @@ import { useState as useState11 } from "react";
 import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 function FloatingReviewsTab({
   proxyUrl,
+  storeDomain,
   label = "Reviews",
   position = "right",
   color = "#111827",
@@ -1204,7 +1226,8 @@ function FloatingReviewsTab({
   starColor,
   className
 }) {
-  const { data } = useWidgetGlobals({ proxyUrl, limit });
+  const resolvedUrl = resolveProxyUrl({ proxyUrl, storeDomain });
+  const { data } = useWidgetGlobals({ proxyUrl: resolvedUrl, limit });
   const [open, setOpen] = useState11(false);
   const reviews = data?.reviews ?? [];
   const stats = data?.stats;
@@ -1281,8 +1304,9 @@ 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({ proxyUrl, storeDomain, style: badgeStyle = "pill", starColor, className }) {
+  const resolvedUrl = resolveProxyUrl({ proxyUrl, storeDomain });
+  const { data, loading } = useWidgetGlobals({ proxyUrl: resolvedUrl });
   if (loading || !data?.stats?.averageRating) return null;
   const avg = parseFloat(data.stats.averageRating);
   const count = data.stats.totalReviews;
@@ -1388,14 +1412,16 @@ function useForm(proxyUrl, productId) {
 import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 function FloatingReviewButton({
   proxyUrl,
+  storeDomain,
   productId,
   text = "Write a Review",
   color = "#111827",
   position = "bottom-right",
   className
 }) {
+  const resolvedUrl = resolveProxyUrl({ proxyUrl, storeDomain });
   const [open, setOpen] = useState13(false);
-  const { form, loading } = useForm(proxyUrl, productId);
+  const { form, loading } = useForm(resolvedUrl, 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 +1499,7 @@ function FloatingReviewButton({
               /* @__PURE__ */ jsx12(
                 ReviewForm,
                 {
-                  proxyUrl,
+                  proxyUrl: resolvedUrl,
                   productId,
                   form,
                   onSuccess: () => setOpen(false)
@@ -1524,6 +1550,7 @@ export {
   SocialProofPopup,
   StarRating,
   TrustBadge,
+  resolveProxyUrl,
   useForm,
   useHelpfulVote,
   useQnA,

package/package.json

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