@queuezero/react 0.1.3

package/dist/index.js

@@ -0,0 +1,438 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  InMemoryStorageAdapter: () => import_queuezero3.InMemoryStorageAdapter,
+  LocalStorageAdapter: () => import_queuezero3.LocalStorageAdapter,
+  QueueZeroClient: () => import_queuezero3.QueueZeroClient,
+  ReferralShare: () => ReferralShare,
+  WaitlistForm: () => WaitlistForm,
+  WaitlistProvider: () => WaitlistProvider,
+  WaitlistStatus: () => WaitlistStatus,
+  useWaitlist: () => useWaitlist,
+  useWaitlistContext: () => useWaitlistContext
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/context.tsx
+var import_react = require("react");
+var import_queuezero = require("queuezero");
+var import_jsx_runtime = require("react/jsx-runtime");
+var WaitlistContext = (0, import_react.createContext)(null);
+function WaitlistProvider({ campaign, config, children }) {
+  const stateManager = (0, import_react.useMemo)(() => {
+    const client = new import_queuezero.QueueZeroClient(campaign, config);
+    return new import_queuezero.QueueZeroStateManager(client);
+  }, [campaign, config?.apiUrl, config?.baseUrl]);
+  const [state, setState] = (0, import_react.useState)(stateManager.getState());
+  (0, import_react.useEffect)(() => {
+    return stateManager.subscribe((newState) => {
+      setState(newState);
+    });
+  }, [stateManager]);
+  const [publicConfig, setPublicConfig] = (0, import_react.useState)(null);
+  const [configLoading, setConfigLoading] = (0, import_react.useState)(true);
+  (0, import_react.useEffect)(() => {
+    let mounted = true;
+    const fetchConfig = async () => {
+      try {
+        const cfg = await stateManager.fetchPublicConfig();
+        if (mounted) setPublicConfig(cfg);
+      } catch (e) {
+        console.error("Failed to fetch config", e);
+      } finally {
+        if (mounted) setConfigLoading(false);
+      }
+    };
+    fetchConfig();
+    return () => {
+      mounted = false;
+    };
+  }, [stateManager]);
+  (0, import_react.useEffect)(() => {
+    if (stateManager.getState().isJoined) {
+      stateManager.refresh();
+    }
+  }, [stateManager]);
+  const value = (0, import_react.useMemo)(
+    () => ({
+      loading: state.loading,
+      status: state.status,
+      error: state.error,
+      isJoined: state.isJoined,
+      campaign,
+      join: stateManager.join.bind(stateManager),
+      refresh: stateManager.refresh.bind(stateManager),
+      getReferralLink: stateManager.getReferralLink.bind(stateManager),
+      getReferralCode: stateManager.getReferralCode.bind(stateManager),
+      reset: stateManager.reset.bind(stateManager),
+      config: publicConfig,
+      configLoading
+    }),
+    [state, campaign, stateManager, publicConfig, configLoading]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WaitlistContext.Provider, { value, children });
+}
+function useWaitlistContext() {
+  const context = (0, import_react.useContext)(WaitlistContext);
+  if (!context) {
+    throw new Error("useWaitlistContext must be used within a WaitlistProvider");
+  }
+  return context;
+}
+function useWaitlist(campaign, config) {
+  const client = (0, import_react.useMemo)(() => {
+    return new import_queuezero.QueueZeroClient(campaign, config);
+  }, [campaign, config?.apiUrl, config?.baseUrl]);
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const [status, setStatus] = (0, import_react.useState)(null);
+  const [error, setError] = (0, import_react.useState)(null);
+  const [isJoined, setIsJoined] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    const joined = client.isJoined();
+    setIsJoined(joined);
+    if (joined) {
+      refresh();
+    }
+  }, [client]);
+  const join = (0, import_react.useCallback)(
+    async (email, metadata, referrerCode) => {
+      setLoading(true);
+      setError(null);
+      try {
+        const response = await client.joinWaitlist(email, metadata, referrerCode);
+        const userStatus = await client.getPosition();
+        setStatus(userStatus);
+        setIsJoined(true);
+        return response;
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error("Unknown error"));
+        return null;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [client]
+  );
+  const refresh = (0, import_react.useCallback)(async () => {
+    if (!client.isJoined()) return null;
+    setLoading(true);
+    setError(null);
+    try {
+      const userStatus = await client.getPosition();
+      setStatus(userStatus);
+      return userStatus;
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Unknown error"));
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  }, [client]);
+  const getReferralLink = (0, import_react.useCallback)(() => client.getReferralLink(), [client]);
+  const getReferralCode = (0, import_react.useCallback)(() => client.getReferralCode(), [client]);
+  const reset = (0, import_react.useCallback)(() => {
+    client.reset();
+    setStatus(null);
+    setError(null);
+    setIsJoined(false);
+  }, [client]);
+  return { loading, status, error, isJoined, campaign, join, refresh, getReferralLink, getReferralCode, reset };
+}
+
+// src/WaitlistForm.tsx
+var import_react2 = require("react");
+var import_queuezero2 = require("queuezero");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function WaitlistForm({
+  onSuccess,
+  onError,
+  referrerCode,
+  metadata,
+  className = "",
+  placeholder = "Enter your email",
+  buttonText = "Join Waitlist",
+  loadingText = "Joining...",
+  showLabel = false,
+  labelText = "Email",
+  children
+}) {
+  const { join, loading, error, isJoined, config, configLoading } = useWaitlistContext();
+  const [email, setEmail] = (0, import_react2.useState)("");
+  const [formData, setFormData] = (0, import_react2.useState)({});
+  const [localError, setLocalError] = (0, import_react2.useState)(null);
+  const controller = (0, import_react2.useMemo)(
+    () => new import_queuezero2.FormController(join, config?.formFields || [], referrerCode),
+    [join, config, referrerCode]
+  );
+  const handleSubmit = (0, import_react2.useCallback)(
+    async (e) => {
+      e?.preventDefault();
+      setLocalError(null);
+      try {
+        const result = await controller.submit(email, formData, metadata);
+        if (result) {
+          setEmail("");
+          setFormData({});
+          onSuccess?.(result);
+        } else if (error) {
+          onError?.(error);
+        }
+      } catch (err) {
+        const error2 = err instanceof Error ? err : new Error("Failed to join");
+        setLocalError(error2);
+        onError?.(error2);
+      }
+    },
+    [email, formData, controller, metadata, onSuccess, onError, error]
+  );
+  const displayError = localError || error;
+  if (isJoined) {
+    return null;
+  }
+  if (typeof children === "function") {
+    return children({
+      email,
+      setEmail,
+      submit: handleSubmit,
+      loading,
+      error: displayError
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: handleSubmit, className: `qz-form ${className}`.trim(), children: [
+    showLabel && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: "qz-email", className: "qz-form-label", children: labelText }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "qz-form-row", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "input",
+      {
+        id: "qz-email",
+        type: "email",
+        value: email,
+        onChange: (e) => setEmail(e.target.value),
+        placeholder,
+        disabled: loading,
+        required: true,
+        className: "qz-form-input",
+        "aria-label": !showLabel ? labelText : void 0
+      }
+    ) }),
+    !configLoading && config?.formFields?.map((field) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "qz-form-row", children: [
+      showLabel && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "qz-form-label", children: field.label }),
+      field.type === "select" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "select",
+        {
+          value: formData[field.key] || "",
+          onChange: (e) => setFormData((prev) => ({ ...prev, [field.key]: e.target.value })),
+          disabled: loading,
+          required: field.required,
+          className: "qz-form-select",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "", children: field.placeholder || `Select ${field.label}` }),
+            field.options?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: opt, children: opt }, opt))
+          ]
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "input",
+        {
+          type: field.type === "number" ? "number" : "text",
+          value: formData[field.key] || "",
+          onChange: (e) => setFormData((prev) => ({ ...prev, [field.key]: e.target.value })),
+          placeholder: field.placeholder || field.label,
+          disabled: loading,
+          required: field.required,
+          className: "qz-form-input"
+        }
+      )
+    ] }, field.key)),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "qz-form-row", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "submit", disabled: loading, className: "qz-form-button", children: loading ? loadingText : buttonText }) }),
+    displayError && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "qz-form-error", role: "alert", children: displayError.message }),
+    children
+  ] });
+}
+
+// src/WaitlistStatus.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function WaitlistStatus({
+  className = "",
+  showReferrals = true,
+  showScore = true,
+  positionLabel = "Position",
+  scoreLabel = "Score",
+  referralsLabel = "Referrals",
+  children
+}) {
+  const { status, loading, isJoined } = useWaitlistContext();
+  if (!isJoined || !status) {
+    return null;
+  }
+  if (loading && !status) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `qz-status qz-status-loading ${className}`.trim(), children: "Loading..." });
+  }
+  if (typeof children === "function") {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: children(status) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `qz-status ${className}`.trim(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "qz-status-item qz-status-position", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "qz-status-label", children: positionLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "qz-status-value", children: [
+        "#",
+        status.position.toLocaleString()
+      ] })
+    ] }),
+    showScore && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "qz-status-item qz-status-score", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "qz-status-label", children: scoreLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "qz-status-value", children: status.priorityScore.toLocaleString() })
+    ] }),
+    showReferrals && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "qz-status-item qz-status-referrals", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "qz-status-label", children: referralsLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "qz-status-value", children: status.referralCount.toLocaleString() })
+    ] })
+  ] });
+}
+
+// src/ReferralShare.tsx
+var import_react3 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function ReferralShare({
+  className = "",
+  label = "Share your referral link:",
+  copyButtonText = "Copy",
+  copiedText = "Copied!",
+  onCopy,
+  shareMessage = "Join me on the waitlist!",
+  showSocialButtons,
+  children
+}) {
+  const { getReferralLink, getReferralCode, isJoined, config } = useWaitlistContext();
+  const [copied, setCopied] = (0, import_react3.useState)(false);
+  const referralEnabled = config?.features?.referral_enabled ?? true;
+  const showSocial = showSocialButtons ?? config?.features?.social_share_buttons ?? false;
+  if (!referralEnabled) return null;
+  const link = getReferralLink();
+  const code = getReferralCode();
+  const handleCopy = (0, import_react3.useCallback)(async () => {
+    if (!link) return;
+    try {
+      await navigator.clipboard.writeText(link);
+      setCopied(true);
+      onCopy?.(link);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      const textarea = document.createElement("textarea");
+      textarea.value = link;
+      textarea.style.position = "fixed";
+      textarea.style.opacity = "0";
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textarea);
+      setCopied(true);
+      onCopy?.(link);
+      setTimeout(() => setCopied(false), 2e3);
+    }
+  }, [link, onCopy]);
+  const handleTwitterShare = (0, import_react3.useCallback)(() => {
+    if (!link) return;
+    const text = encodeURIComponent(`${shareMessage} ${link}`);
+    window.open(`https://twitter.com/intent/tweet?text=${text}`, "_blank", "noopener,noreferrer");
+  }, [link, shareMessage]);
+  const handleLinkedInShare = (0, import_react3.useCallback)(() => {
+    if (!link) return;
+    const url = encodeURIComponent(link);
+    window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${url}`, "_blank", "noopener,noreferrer");
+  }, [link]);
+  const handleEmailShare = (0, import_react3.useCallback)(() => {
+    if (!link) return;
+    const subject = encodeURIComponent("Join me on the waitlist!");
+    const body = encodeURIComponent(`${shareMessage}
+
+${link}`);
+    window.location.href = `mailto:?subject=${subject}&body=${body}`;
+  }, [link, shareMessage]);
+  if (!isJoined || !link || !code) {
+    return null;
+  }
+  if (typeof children === "function") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: children({ link, code, copy: handleCopy, copied }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `qz-share ${className}`.trim(), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "qz-share-label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "qz-share-link-container", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "input",
+        {
+          type: "text",
+          value: link,
+          readOnly: true,
+          className: "qz-share-input",
+          onClick: (e) => e.target.select()
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: handleCopy, className: "qz-share-copy-button", children: copied ? copiedText : copyButtonText })
+    ] }),
+    showSocial && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "qz-share-social", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          onClick: handleTwitterShare,
+          className: "qz-share-social-button qz-share-twitter",
+          "aria-label": "Share on Twitter",
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          onClick: handleLinkedInShare,
+          className: "qz-share-social-button qz-share-linkedin",
+          "aria-label": "Share on LinkedIn",
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" }) })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          onClick: handleEmailShare,
+          className: "qz-share-social-button qz-share-email",
+          "aria-label": "Share via Email",
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "currentColor", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" })
+          ] })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/index.ts
+var import_queuezero3 = require("queuezero");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InMemoryStorageAdapter,
+  LocalStorageAdapter,
+  QueueZeroClient,
+  ReferralShare,
+  WaitlistForm,
+  WaitlistProvider,
+  WaitlistStatus,
+  useWaitlist,
+  useWaitlistContext
+});