@reeka/minisite-popup 0.1.0

package/LICENSE

@@ -0,0 +1,5 @@
+Copyright (c) 2026 Reeka. All rights reserved.
+
+This software is proprietary. Unauthorized copying, modification,
+distribution, or use is prohibited without prior written permission
+from Reeka.

package/README.md

@@ -0,0 +1,25 @@
+# @reeka/minisite-popup
+
+Image lightbox marketing popup for Reeka mini-sites and agent listing sites.
+
+```ts
+import "@reeka/minisite-popup/style.css";
+import { installMinisitePopup } from "@reeka/minisite-popup";
+
+app.mount("#app");
+
+void installMinisitePopup({
+  apiBase: config.apiBaseUrl,
+  organizationId: config.portfolioId, // or agentListingId / publicKey
+});
+```
+
+## Behavior
+
+- Fetches `GET /public/marketing-popup/config?organizationId=`
+- Shows once after `delayMs` (default 2500) when enabled
+- Dismiss (X / Escape / backdrop) → `sessionStorage` key `reeka_popup_dismissed:{organizationId}`
+- Skips booking/checkout routes by default
+- CMS edit session: force-show preview; listens for `reeka-marketing-popup-draft` CustomEvent
+
+Configure under Settings → Website → Marketing popup (or CMS **Popup** panel).

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { type App } from "vue";
+import type { MinisitePopupInstallOptions } from "./types";
+/**
+ * Mount the marketing popup when the org has it enabled
+ * (checked via public config API). Safe to call after `app.mount`.
+ */
+export declare function installMinisitePopup(options: MinisitePopupInstallOptions): Promise<App | null>;
+export type { MinisitePopupInstallOptions, MarketingPopupConfig, } from "./types";

package/dist/index.js

@@ -0,0 +1,172 @@
+import { defineComponent as z, ref as k, computed as E, watch as D, onMounted as K, onUnmounted as N, openBlock as f, createBlock as R, Teleport as A, createElementBlock as g, withKeys as P, withModifiers as C, createElementVNode as y, createCommentVNode as b, toDisplayString as V, createApp as j } from "vue";
+const q = ["onKeydown"], F = ["src"], x = ["href", "target", "rel"], O = "reeka_site_cms_session", B = "reeka-marketing-popup-draft", W = /* @__PURE__ */ z({
+  __name: "PopupWidget",
+  props: {
+    apiBase: {},
+    organizationId: {},
+    skipBookingRoutes: { type: Boolean }
+  },
+  setup(i) {
+    const a = i, t = k(null), s = k(!1), u = k(null);
+    let l = null, r = null;
+    const _ = E(
+      () => `reeka_popup_dismissed:${a.organizationId}`
+    ), I = E(
+      () => {
+        var e;
+        return !!((e = t.value) != null && e.ctaEnabled) && !!t.value.ctaLabel && !!t.value.ctaUrl;
+      }
+    );
+    function c() {
+      try {
+        return !!sessionStorage.getItem(O);
+      } catch {
+        return !1;
+      }
+    }
+    function S() {
+      if (c()) return !1;
+      try {
+        return sessionStorage.getItem(_.value) === "1";
+      } catch {
+        return !1;
+      }
+    }
+    function h() {
+      if (!c())
+        try {
+          sessionStorage.setItem(_.value, "1");
+        } catch {
+        }
+    }
+    function T() {
+      if (a.skipBookingRoutes === !1) return !1;
+      const e = (window.location.pathname || "").toLowerCase();
+      return /\/booking(\/|$)/.test(e) || /\/checkout(\/|$)/.test(e) || /\/book(\/|$)/.test(e) || /\/payment(\/|$)/.test(e);
+    }
+    function d(e) {
+      if (!(e != null && e.enabled) || !e.imageUrl) {
+        t.value = null, s.value = !1;
+        return;
+      }
+      t.value = e, M();
+    }
+    function M() {
+      var o;
+      if (l && (clearTimeout(l), l = null), !((o = t.value) != null && o.enabled) || !t.value.imageUrl || !c() && (S() || T()))
+        return;
+      const e = typeof t.value.delayMs == "number" && Number.isFinite(t.value.delayMs) ? Math.max(0, Math.min(3e4, t.value.delayMs)) : 2500, n = c() ? 0 : e;
+      l = setTimeout(() => {
+        s.value = !0;
+      }, n);
+    }
+    function m() {
+      s.value = !1, h(), U();
+    }
+    function L() {
+      h();
+    }
+    function v(e) {
+      if (!s.value || e.key !== "Tab" || !u.value) return;
+      const n = u.value.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      if (!n.length) return;
+      const o = n[0], p = n[n.length - 1];
+      e.shiftKey && document.activeElement === o ? (e.preventDefault(), p.focus()) : !e.shiftKey && document.activeElement === p && (e.preventDefault(), o.focus());
+    }
+    function U() {
+      var e;
+      (e = r == null ? void 0 : r.focus) == null || e.call(r), r = null;
+    }
+    D(s, (e) => {
+      e ? (r = document.activeElement, requestAnimationFrame(() => {
+        var n;
+        return (n = u.value) == null ? void 0 : n.focus();
+      }), document.addEventListener("keydown", v)) : document.removeEventListener("keydown", v);
+    });
+    function w(e) {
+      const n = e.detail;
+      n && typeof n == "object" && d(n);
+    }
+    async function $() {
+      const n = `${a.apiBase.replace(/\/$/, "")}/public/marketing-popup/config?organizationId=${encodeURIComponent(a.organizationId)}`;
+      try {
+        const o = await fetch(n);
+        if (!o.ok) {
+          d({ enabled: !1 });
+          return;
+        }
+        const p = await o.json();
+        d(p);
+      } catch {
+        d({ enabled: !1 });
+      }
+    }
+    return K(() => {
+      window.addEventListener(B, w), $();
+    }), N(() => {
+      window.removeEventListener(B, w), document.removeEventListener("keydown", v), l && clearTimeout(l);
+    }), (e, n) => {
+      var o;
+      return f(), R(A, { to: "body" }, [
+        s.value ? (f(), g("div", {
+          key: 0,
+          class: "reeka-popup",
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "Promotion",
+          onKeydown: P(C(m, ["prevent"]), ["escape"])
+        }, [
+          y("div", {
+            class: "reeka-popup__backdrop",
+            onClick: m
+          }),
+          y("div", {
+            ref_key: "dialogEl",
+            ref: u,
+            class: "reeka-popup__dialog",
+            tabindex: "-1",
+            onClick: n[0] || (n[0] = C(() => {
+            }, ["stop"]))
+          }, [
+            y("button", {
+              type: "button",
+              class: "reeka-popup__close",
+              "aria-label": "Close",
+              onClick: m
+            }, " × "),
+            (o = t.value) != null && o.imageUrl ? (f(), g("img", {
+              key: 0,
+              class: "reeka-popup__image",
+              src: t.value.imageUrl,
+              alt: ""
+            }, null, 8, F)) : b("", !0),
+            I.value ? (f(), g("a", {
+              key: 1,
+              class: "reeka-popup__cta",
+              href: t.value.ctaUrl,
+              target: t.value.openInNewTab ? "_blank" : void 0,
+              rel: t.value.openInNewTab ? "noopener noreferrer" : void 0,
+              onClick: L
+            }, V(t.value.ctaLabel), 9, x)) : b("", !0)
+          ], 512)
+        ], 40, q)) : b("", !0)
+      ]);
+    };
+  }
+});
+async function G(i) {
+  if (typeof window > "u" || !i.apiBase || !i.organizationId || document.getElementById("reeka-minisite-popup-root")) return null;
+  const a = document.createElement("div");
+  a.id = "reeka-minisite-popup-root", document.body.appendChild(a);
+  const t = j(W, {
+    apiBase: i.apiBase,
+    organizationId: i.organizationId,
+    skipBookingRoutes: i.skipBookingRoutes !== !1
+  });
+  return t.mount(a), t;
+}
+export {
+  G as installMinisitePopup
+};

package/dist/style.css

@@ -0,0 +1 @@
+.reeka-popup{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:1rem;box-sizing:border-box}.reeka-popup__backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#0f172a8c}.reeka-popup__dialog{position:relative;z-index:1;max-width:min(92vw,420px);max-height:min(88vh,720px);display:flex;flex-direction:column;align-items:stretch;gap:.75rem;outline:none}.reeka-popup__close{position:absolute;top:-.35rem;right:-.35rem;z-index:2;width:2rem;height:2rem;border:none;border-radius:999px;background:#fff;color:#111;font-size:1.35rem;line-height:1;cursor:pointer;box-shadow:0 1px 4px #0003}.reeka-popup__close:hover{background:#f3f4f6}.reeka-popup__image{display:block;width:100%;max-height:min(72vh,560px);object-fit:contain;border-radius:8px;background:#0f172a}.reeka-popup__cta{display:inline-flex;align-items:center;justify-content:center;align-self:center;min-width:10rem;padding:.65rem 1.25rem;border-radius:8px;background:#111827;color:#fff;font:600 .9rem/1.2 system-ui,-apple-system,sans-serif;text-decoration:none}.reeka-popup__cta:hover{background:#1f2937}

package/dist/types.d.ts

@@ -0,0 +1,18 @@
+export type MarketingPopupConfig = {
+    enabled: boolean;
+    delayMs?: number;
+    imageUrl?: string;
+    ctaEnabled?: boolean;
+    ctaLabel?: string;
+    ctaUrl?: string;
+    openInNewTab?: boolean;
+};
+export type MinisitePopupInstallOptions = {
+    apiBase: string;
+    /** Org Mongo _id, publicKey, or agentListingId */
+    organizationId: string;
+    /**
+     * When true (default), skip showing on booking/checkout paths.
+     */
+    skipBookingRoutes?: boolean;
+};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@reeka/minisite-popup",
+  "version": "0.1.0",
+  "description": "Marketing image lightbox popup for Reeka mini-sites and agent listing sites",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "style": "./dist/style.css",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "dev": "vite build --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.1.4",
+    "typescript": "~5.6.2",
+    "vite": "^5.4.9",
+    "vue": "^3.5.12"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ReekaTech/minisite-popup.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "license": "SEE LICENSE IN LICENSE",
+  "private": false
+}