@queuezero/react 0.1.8 → 0.1.10

package/README.md

@@ -78,8 +78,31 @@ A ready-to-use signup form.
     </div>
   )}
 </WaitlistForm>
+
+// Modal mode
+<WaitlistForm
+  displayMode="modal"
+  triggerText="Join Our Waitlist"
+  modalSize="md"
+// Headless modal mode (attaches to existing buttons)
+<WaitlistForm
+  displayMode="modal"
+  attachToText="Join Waitlist"
+  modalSize="md"
+/>
 ```
 
+#### Modal Mode Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `displayMode` | `'inline' \| 'modal'` | `'inline'` | Display as inline form or modal |
+| `triggerText` | `string` | `'Join Waitlist'` | Button text (modal mode only) |
+| `attachToText` | `string` | - | Text to match for auto-attaching modal (headless mode) |
+| `modalSize` | `'sm' \| 'md' \| 'lg'` | `'md'` | Modal width (modal mode only) |
+
+The modal automatically uses your campaign's branding (logo, cover image, theme color) from the API.
+
 ### WaitlistStatus
 
 Displays position, score, and referral count.

package/dist/index.d.mts

@@ -80,6 +80,10 @@ interface WaitlistFormProps {
     triggerText?: string;
     /** Modal size (only used when displayMode is 'modal') */
     modalSize?: 'sm' | 'md' | 'lg';
+    /** CSS selector to attach modal trigger to existing elements */
+    triggerSelector?: string;
+    /** Text content to match for attaching modal trigger to <a> and <button> elements */
+    attachToText?: string;
     /** Children for custom rendering */
     children?: React.ReactNode;
 }
@@ -203,7 +207,7 @@ declare function useWaitlist(campaign: string, config?: WaitlistProviderProps['c
  * <WaitlistForm displayMode="modal" triggerText="Join Our Waitlist" />
  * ```
  */
-declare function WaitlistForm({ onSuccess, onError, referrerCode, metadata, className, placeholder, buttonText, loadingText, showLabel, labelText, displayMode, triggerText, modalSize, children, }: WaitlistFormProps): any;
+declare function WaitlistForm({ onSuccess, onError, referrerCode, metadata, className, placeholder, buttonText, loadingText, showLabel, labelText, displayMode, triggerText, modalSize, triggerSelector, attachToText, children, }: WaitlistFormProps): any;
 
 /**
  * WaitlistStatus - Shows current position, score, and referral count

package/dist/index.d.ts

@@ -80,6 +80,10 @@ interface WaitlistFormProps {
     triggerText?: string;
     /** Modal size (only used when displayMode is 'modal') */
     modalSize?: 'sm' | 'md' | 'lg';
+    /** CSS selector to attach modal trigger to existing elements */
+    triggerSelector?: string;
+    /** Text content to match for attaching modal trigger to <a> and <button> elements */
+    attachToText?: string;
     /** Children for custom rendering */
     children?: React.ReactNode;
 }
@@ -203,7 +207,7 @@ declare function useWaitlist(campaign: string, config?: WaitlistProviderProps['c
  * <WaitlistForm displayMode="modal" triggerText="Join Our Waitlist" />
  * ```
  */
-declare function WaitlistForm({ onSuccess, onError, referrerCode, metadata, className, placeholder, buttonText, loadingText, showLabel, labelText, displayMode, triggerText, modalSize, children, }: WaitlistFormProps): any;
+declare function WaitlistForm({ onSuccess, onError, referrerCode, metadata, className, placeholder, buttonText, loadingText, showLabel, labelText, displayMode, triggerText, modalSize, triggerSelector, attachToText, children, }: WaitlistFormProps): any;
 
 /**
  * WaitlistStatus - Shows current position, score, and referral count

package/dist/index.js

@@ -81,7 +81,13 @@ function WaitlistProvider({ campaign, config, children }) {
       campaign,
       join: stateManager.join.bind(stateManager),
       refresh: stateManager.refresh.bind(stateManager),
-      getReferralLink: stateManager.getReferralLink.bind(stateManager),
+      getReferralLink: () => {
+        const code = stateManager.getReferralCode();
+        if (code && typeof window !== "undefined") {
+          return `${window.location.origin}${window.location.pathname}?ref=${code}`;
+        }
+        return stateManager.getReferralLink();
+      },
       getReferralCode: stateManager.getReferralCode.bind(stateManager),
       reset: stateManager.reset.bind(stateManager),
       config: publicConfig,
@@ -176,6 +182,8 @@ function WaitlistForm({
   displayMode = "inline",
   triggerText = "Join Waitlist",
   modalSize = "md",
+  triggerSelector,
+  attachToText,
   children
 }) {
   const { join, loading, error, isJoined, config, configLoading } = useWaitlistContext();
@@ -183,6 +191,7 @@ function WaitlistForm({
   const [formData, setFormData] = (0, import_react2.useState)({});
   const [localError, setLocalError] = (0, import_react2.useState)(null);
   const [isModalOpen, setIsModalOpen] = (0, import_react2.useState)(false);
+  const [successData, setSuccessData] = (0, import_react2.useState)(null);
   (0, import_react2.useEffect)(() => {
     const handleEsc = (e) => {
       if (e.key === "Escape" && isModalOpen) setIsModalOpen(false);
@@ -213,6 +222,7 @@ function WaitlistForm({
         if (result) {
           setEmail("");
           setFormData({});
+          setSuccessData(result);
           onSuccess?.(result);
         } else if (error) {
           onError?.(error);
@@ -275,7 +285,7 @@ function WaitlistForm({
                 required: field.required,
                 className: "qz-form-select",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "", children: field.placeholder || `Select ${field.label}` }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "", children: "Select an option" }),
                   field.options?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: opt, children: opt }, opt))
                 ]
               }
@@ -340,8 +350,33 @@ function WaitlistForm({
   if (displayMode === "inline") {
     return formContent;
   }
+  const isHeadless = !!(triggerSelector || attachToText);
+  (0, import_react2.useEffect)(() => {
+    if (displayMode !== "modal") return;
+    const cleanupFns = [];
+    const attach = (element) => {
+      const handler = (e) => {
+        e.preventDefault();
+        setIsModalOpen(true);
+      };
+      element.addEventListener("click", handler);
+      cleanupFns.push(() => element.removeEventListener("click", handler));
+    };
+    if (triggerSelector) {
+      document.querySelectorAll(triggerSelector).forEach(attach);
+    }
+    if (attachToText) {
+      const lowerText = attachToText.toLowerCase();
+      document.querySelectorAll("a, button").forEach((el) => {
+        if (el.textContent?.toLowerCase().includes(lowerText)) {
+          attach(el);
+        }
+      });
+    }
+    return () => cleanupFns.forEach((fn) => fn());
+  }, [displayMode, triggerSelector, attachToText]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    !isHeadless && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "button",
       {
         type: "button",
@@ -373,7 +408,27 @@ function WaitlistForm({
           branding.coverImageUrl && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: branding.coverImageUrl, alt: "", className: "qz-modal-cover" }),
           /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "qz-modal-body", children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { className: "qz-modal-title", children: config?.name || "Join Waitlist" }),
-            formContent
+            successData ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "qz-success", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { style: { fontSize: "1.25rem", fontWeight: 600, marginBottom: "0.5rem", textAlign: "center" }, children: "You're on the list!" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { style: { textAlign: "center", marginBottom: "1.5rem", opacity: 0.9 }, children: [
+                "You're #",
+                successData.position || "?",
+                " in line."
+              ] }),
+              successData.referralLink && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginTop: "1.5rem" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { marginBottom: "0.5rem", fontSize: "0.875rem", opacity: 0.9, textAlign: "center" }, children: "Refer friends to move up:" }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "input",
+                  {
+                    readOnly: true,
+                    value: window.location.origin + window.location.pathname + "?ref=" + successData.referralCode,
+                    onClick: (e) => e.currentTarget.select(),
+                    className: "qz-form-input",
+                    style: { textAlign: "center", cursor: "pointer" }
+                  }
+                )
+              ] })
+            ] }) : formContent
           ] })
         ] })
       }

package/dist/index.mjs

@@ -47,7 +47,13 @@ function WaitlistProvider({ campaign, config, children }) {
       campaign,
       join: stateManager.join.bind(stateManager),
       refresh: stateManager.refresh.bind(stateManager),
-      getReferralLink: stateManager.getReferralLink.bind(stateManager),
+      getReferralLink: () => {
+        const code = stateManager.getReferralCode();
+        if (code && typeof window !== "undefined") {
+          return `${window.location.origin}${window.location.pathname}?ref=${code}`;
+        }
+        return stateManager.getReferralLink();
+      },
       getReferralCode: stateManager.getReferralCode.bind(stateManager),
       reset: stateManager.reset.bind(stateManager),
       config: publicConfig,
@@ -142,6 +148,8 @@ function WaitlistForm({
   displayMode = "inline",
   triggerText = "Join Waitlist",
   modalSize = "md",
+  triggerSelector,
+  attachToText,
   children
 }) {
   const { join, loading, error, isJoined, config, configLoading } = useWaitlistContext();
@@ -149,6 +157,7 @@ function WaitlistForm({
   const [formData, setFormData] = useState2({});
   const [localError, setLocalError] = useState2(null);
   const [isModalOpen, setIsModalOpen] = useState2(false);
+  const [successData, setSuccessData] = useState2(null);
   useEffect2(() => {
     const handleEsc = (e) => {
       if (e.key === "Escape" && isModalOpen) setIsModalOpen(false);
@@ -179,6 +188,7 @@ function WaitlistForm({
         if (result) {
           setEmail("");
           setFormData({});
+          setSuccessData(result);
           onSuccess?.(result);
         } else if (error) {
           onError?.(error);
@@ -241,7 +251,7 @@ function WaitlistForm({
                 required: field.required,
                 className: "qz-form-select",
                 children: [
-                  /* @__PURE__ */ jsx2("option", { value: "", children: field.placeholder || `Select ${field.label}` }),
+                  /* @__PURE__ */ jsx2("option", { value: "", children: "Select an option" }),
                   field.options?.map((opt) => /* @__PURE__ */ jsx2("option", { value: opt, children: opt }, opt))
                 ]
               }
@@ -306,8 +316,33 @@ function WaitlistForm({
   if (displayMode === "inline") {
     return formContent;
   }
+  const isHeadless = !!(triggerSelector || attachToText);
+  useEffect2(() => {
+    if (displayMode !== "modal") return;
+    const cleanupFns = [];
+    const attach = (element) => {
+      const handler = (e) => {
+        e.preventDefault();
+        setIsModalOpen(true);
+      };
+      element.addEventListener("click", handler);
+      cleanupFns.push(() => element.removeEventListener("click", handler));
+    };
+    if (triggerSelector) {
+      document.querySelectorAll(triggerSelector).forEach(attach);
+    }
+    if (attachToText) {
+      const lowerText = attachToText.toLowerCase();
+      document.querySelectorAll("a, button").forEach((el) => {
+        if (el.textContent?.toLowerCase().includes(lowerText)) {
+          attach(el);
+        }
+      });
+    }
+    return () => cleanupFns.forEach((fn) => fn());
+  }, [displayMode, triggerSelector, attachToText]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx2(
+    !isHeadless && /* @__PURE__ */ jsx2(
       "button",
       {
         type: "button",
@@ -339,7 +374,27 @@ function WaitlistForm({
           branding.coverImageUrl && /* @__PURE__ */ jsx2("img", { src: branding.coverImageUrl, alt: "", className: "qz-modal-cover" }),
           /* @__PURE__ */ jsxs("div", { className: "qz-modal-body", children: [
             /* @__PURE__ */ jsx2("h2", { className: "qz-modal-title", children: config?.name || "Join Waitlist" }),
-            formContent
+            successData ? /* @__PURE__ */ jsxs("div", { className: "qz-success", children: [
+              /* @__PURE__ */ jsx2("h3", { style: { fontSize: "1.25rem", fontWeight: 600, marginBottom: "0.5rem", textAlign: "center" }, children: "You're on the list!" }),
+              /* @__PURE__ */ jsxs("p", { style: { textAlign: "center", marginBottom: "1.5rem", opacity: 0.9 }, children: [
+                "You're #",
+                successData.position || "?",
+                " in line."
+              ] }),
+              successData.referralLink && /* @__PURE__ */ jsxs("div", { style: { marginTop: "1.5rem" }, children: [
+                /* @__PURE__ */ jsx2("p", { style: { marginBottom: "0.5rem", fontSize: "0.875rem", opacity: 0.9, textAlign: "center" }, children: "Refer friends to move up:" }),
+                /* @__PURE__ */ jsx2(
+                  "input",
+                  {
+                    readOnly: true,
+                    value: window.location.origin + window.location.pathname + "?ref=" + successData.referralCode,
+                    onClick: (e) => e.currentTarget.select(),
+                    className: "qz-form-input",
+                    style: { textAlign: "center", cursor: "pointer" }
+                  }
+                )
+              ] })
+            ] }) : formContent
           ] })
         ] })
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@queuezero/react",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "React components and hooks for QueueZero viral waitlists",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",