);
}
/* ── rule card ──────────────────────────────────────────── */
function RuleCard({ rule, index, total, hit, onChange, onMove, onRemove }) {
const setCond = (i, c) => { const conditions = rule.conditions.slice(); conditions[i] = c; onChange({ ...rule, conditions }); };
const addCond = () => onChange({ ...rule, conditions: [...rule.conditions, newCondition("device")] });
const rmCond = (i) => onChange({ ...rule, conditions: rule.conditions.filter((_, j) => j !== i) });
return (
<>
{/* The scan→route connector (fl-wire--h) already sits above the first
rule; only inter-rule cards need their own leading wire. */}
{index > 0 && }
{index + 1}{tr('mqr.flow.rule.when')}
{/* Show the "lands here" badge AND the move/delete tools together — the
tools must stay reachable even when this rule is the current hit. */}
{hit && {tr('mqr.flow.rule.hit')}}
{rule.conditions.map((c, i) => (
setCond(i, nc)} onRemove={() => rmCond(i)} />
))}
{/* Rule action: redirect to a URL, or BLOCK access (restrict-to-a-zone). */}
);
}
/* ── integrations lane ──────────────────────────────────── */
// webhook + zapier both deliver to an https URL the user supplies; clicking
// their card opens an inline form to capture it before creating the config.
const INT_NEEDS_URL = { webhook: true, zapier: true, sheets: true, slack: true, discord: true };
function IntegrationsLane({ ints, onAdd, onRemove }) {
// Surface every available integration as its own button — nothing hidden
// behind an "Add integration" dropdown — so users see exactly which
// integrations they get (and what they'd unlock by upgrading).
// Show as "add" cards only the integrations NOT already configured (those render as the
// removable chips above) — so a type never appears twice. `soon` types stay hidden.
const configuredTypes = new Set((ints || []).map((i) => i.type));
const available = Object.keys(INT_META).filter((t) => !INT_META[t].soon && !configuredTypes.has(t));
// When a URL-based integration is being added, `pending` holds its type and
// we show the URL form instead of firing onAdd immediately.
const [pending, setPending] = React.useState(null);
const [editingId, setEditingId] = React.useState(null); // non-null → editing an existing one
const [url, setUrl] = React.useState("");
const [err, setErr] = React.useState("");
const [busy, setBusy] = React.useState(false);
// Opt-in: forward the visitor's PRECISE GPS to this webhook (not stored by us).
const [fwdRaw, setFwdRaw] = React.useState(false);
// Open the URL form to ADD a new integration of type `t`, or EDIT an existing one (pass it).
const start = (t, existing) => {
if (!existing && !INT_NEEDS_URL[t]) { onAdd(t); return; }
setErr("");
setUrl(existing ? (existing.url || existing.target || "") : "");
setFwdRaw(existing ? existing.forward_location === "raw" : false);
setEditingId(existing ? existing.id : null);
setPending(t);
};
const cancel = () => { setPending(null); setEditingId(null); setUrl(""); setErr(""); setFwdRaw(false); };
const confirm = async () => {
const u = url.trim();
// Match the server: these need a valid https URL.
if (!/^https:\/\/.+/i.test(u)) { setErr(tr('mqr.flow.int.url.invalid')); return; }
setBusy(true); setErr("");
try { await onAdd(pending, u, fwdRaw ? 'raw' : undefined, editingId); cancel(); }
catch (e) { setErr((e && e.message) || String(e)); }
finally { setBusy(false); }
};
return (
{tr('mqr.flow.int.lanehead')}
{pending ? (
// Inline URL form — used to BOTH add a new integration and edit an existing one.
{INT_META[pending].label}
{tr('mqr.flow.int.url.label.' + pending)}
{ setUrl(e.target.value); if (err) setErr(""); }}
onKeyDown={(e) => { if (e.key === "Enter") confirm(); if (e.key === "Escape") cancel(); }}
/>
{err &&
{err}
}
) : (
// One consistent card grid: CONFIGURED integrations (with their target + Edit/Remove)
// followed by the ones still AVAILABLE to add. Same width + style throughout.
);
}
/* ── embeddable editor ──────────────────────────────────── */
// Props: { code, link, baseDestination, name, locked, onUpgrade, onSaved }.
// Edits the SAME link the Builder owns: routing rules + integrations for that
// code, with the default destination driven by the builder above (read-only
// here). Saving persists name + destination + routing for the one code, and
// reports the updated link back via onSaved. When `locked` (free) the body is
// dimmed + read-only and a non-covering upgrade banner sits above it.
// `passcode` is the passcode change to persist with this save: undefined = no
// change, "" = clear protection, "" = set/replace. The Builder owns the
// control + computes this; the editor just forwards it on create/update.
function FlowEditor({ code, link: linkProp, baseDestination, defaultValue, onDefaultChange, name, content, style, passcode, builderDirty, draft, locked, onUpgrade, onSaved, saveRef, onState }) {
const [link, setLink] = React.useState(linkProp || null);
const [rules, setRules] = React.useState([]);
const [ints, setInts] = React.useState([]);
const [dirty, setDirty] = React.useState(false);
const [saving, setSaving] = React.useState(false);
const [savedAt, setSavedAt] = React.useState(false);
const [loaded, setLoaded] = React.useState(!!linkProp);
const [ctx, setCtx] = React.useState({ device: "mobile", os: "ios", country: "SE", region: "", city: "", lat: "", lng: "", time: "12:30", weekday: 1, scanCount: 1 });
// The Builder is the single source of truth for the link + its base
// destination. Re-seed routing whenever that link changes (load + save). A
// fresh draft (`draft`) starts empty and is created on first save.
React.useEffect(() => {
let alive = true;
if (draft) { setLink(null); setRules([]); setInts([]); setDirty(false); setSavedAt(false); setLoaded(true); return () => { alive = false; }; }
(async () => {
try {
// Resolve within the caller's OWN links (listLinks is ownership-scoped),
// never getLink(code) — a ?code= from the URL may be a demo/foreign code
// we don't own, which would 404. Prefer the link the Builder passed in.
let l = linkProp;
if (!l) {
const ls = await Api.listLinks();
l = (code && ls.find((x) => x.code === code)) || ls[0] || null;
}
if (!alive || !l) return;
setLink(l);
const r = l.routing || {};
setRules((r.rules || []).map(normalizeRule));
setDirty(false); setSavedAt(false);
try { const ix = await Api.listIntegrations(l.code); if (alive) setInts(ix); } catch (e) { /* optional */ }
} catch (e) {
// Not signed in / offline — render the editor empty rather than hang.
} finally {
if (alive) setLoaded(true);
}
})();
return () => { alive = false; };
}, [linkProp, code, draft]);
const mut = (fn) => { fn(); setDirty(true); setSavedAt(false); };
const setRule = (i, r) => mut(() => setRules((rs) => rs.map((x, j) => (j === i ? r : x))));
const addRule = () => mut(() => setRules((rs) => [...rs, { conditions: [newCondition("device")], destination_url: "" }]));
const removeRule = (i) => mut(() => setRules((rs) => rs.filter((_, j) => j !== i)));
const moveRule = (i, dir) => mut(() => setRules((rs) => { const a = rs.slice(); const j = i + dir; if (j < 0 || j >= a.length) return a; [a[i], a[j]] = [a[j], a[i]]; return a; }));
// Recipes set the conditional rules only; the default stays the builder's destination.
const applyRecipe = (r) => mut(() => setRules(r.rules.map(normalizeRule)));
const addInt = async (type, url, forwardLocation, id) => {
if (!link) return;
const m = INT_META[type];
// URL-based integrations require a delivery URL; the server rejects them without one.
const cfg = { code: link.code, type, label: m.label };
if (id) cfg.id = id; // editing an existing one → upsert by id
if (url) cfg.url = url;
if (forwardLocation) cfg.forward_location = forwardLocation; // 'raw' → precise GPS
const created = await Api.setIntegration(cfg);
// Replace if it already existed (edit), else append (add).
setInts((xs) => [...xs.filter((x) => x.id !== created.id), created]);
};
const removeInt = async (i) => { await Api.deleteIntegration(i.id); setInts((xs) => xs.filter((x) => x.id !== i.id)); };
// The default destination = the builder's destination (one shared value).
const def = baseDestination || (link && ((link.routing && link.routing.default) || link.destination_url)) || "";
// Dirty = the builder's design drifted from the saved baseline (name, dest,
// content OR style — computed in the App and passed as `builderDirty`), the
// routing rules changed, or it's a draft with a destination to create.
const anyDirty = draft ? !!def : (dirty || !!builderDirty);
// Save the WHOLE code at once: create it if this is a new draft, then persist
// routing + destination + name. Not gated on `locked` — flows are Pro, but a
// free user can still save their code's base destination/name.
const save = async () => {
if (!link && !draft) return;
setSaving(true);
try {
// Upload an inline logo to Storage ONCE up front (returns the same style
// with a Storage URL + path), so create+update reuse it — no re-upload churn.
const upStyle = Api.uploadStyle ? await Api.uploadStyle(style) : style;
const isNew = !link;
// Set the passcode at creation when the code is brand-new (so it's
// protected from the first scan); on an existing code, send it with the
// update. `undefined` means "leave protection unchanged".
const createPayload = { title: name || null, destination_url: def, content, style: upStyle };
if (isNew && passcode !== undefined) createPayload.passcode = passcode;
let l = link;
if (isNew) { l = await Api.createLink(createPayload); setLink(l); }
await Api.saveRouting(l.code, { rules, default: def });
// Persist name + the authoring content (type + form) + visual style so the
// whole code round-trips when re-opened.
const updPayload = { code: l.code, title: name != null ? name : l.title, destination_url: def, content, style: upStyle };
if (!isNew && passcode !== undefined) updPayload.passcode = passcode;
const saved = await Api.updateLink(updPayload);
// Reflect the post-save protection state: from createLink's response on a
// new code, from updateLink's response when we changed it on an existing one.
const protectedNow = !isNew && saved && saved.passcode_protected !== undefined
? saved.passcode_protected
: !!(l && l.passcode_protected);
const updated = Object.assign({}, l, { title: name != null ? name : l.title, destination_url: def || l.destination_url, content, style: upStyle, routing: { rules, default: def }, passcode_protected: protectedNow });
setLink(updated); setDirty(false); setSavedAt(true);
if (onSaved) onSaved(updated);
} finally { setSaving(false); }
};
// Register the saver + report state up so the sticky topbar drives the save.
if (saveRef) saveRef.current.save = save;
React.useEffect(() => {
if (onState) onState({ dirty: anyDirty, saving, canSave: anyDirty && (!!link || draft) });
}, [anyDirty, saving, link, draft]);
const result = React.useMemo(() => evalRouting(rules, def, ctx), [rules, def, ctx]);
const base = link ? (link.destination_url || "").replace(/\/[^/]*$/, "") : "";
const linkCode = link ? link.code : (code || "—");
// Show loading only briefly; once the load settles (success OR failure) we
// render the editor (empty if no link could load) so it never hangs.
if (!loaded && !link) return
{tr('mqr.flow.loading')}
;
return (
{/* Save lives in the sticky topbar (one save for the whole code). When
locked (free), a non-covering upgrade banner sits above the visible,
read-only editor so users see exactly what they'd unlock. */}
{locked && (
{tr('mqr.flow.default.label')}
{/* The default destination IS the builder's destination — one shared
value. Editable here too (writes straight back to the builder)
for URL-bearing codes; read-only for vcard/wifi (no URL). */}
{onDefaultChange ? (
onDefaultChange(e.target.value)} />
) : (
{def ? def.replace(/^https?:\/\//, "") : tr('mqr.flow.default.placeholder')}
{tr('mqr.flow.default.synced')}
)}