/* UI-only In-store screens preview, adapted from the user-supplied Claude export.
* Sample fixtures and edits stay in this module until page reload. No API or device publishing. */
(function(host){
const window = {OFFICE_SCREENS:{}};
const OIcon = props =>
{pm.origin === "clearance" ? "CLEARANCE" : m.where === "price" ? "SPECIAL" : "OFFER"}
9 ? 150 : 230) : (offer.length > 9 ? 180 : 280)}}>{offer}
{single && price != null && (
was {dsM(prods[0].cur)}
)}
{!single && m.where === "price" && (
{pm.level === "group" ? "every line in the shop" : "off the whole range"}
)}
{subject}
{dense && !single && prods.length > 1 && (
{prods.length} lines across the range
)}
Until {DSP.toOf(pm)}{pm.mech === "member" ? " · members only" : ""}
);
} else if (f.standing) {
const st = f.standing;
theme = st.theme;
if (st.kind === "wait") {
body = (
<>
NOW SERVING
{st.live.waiting} waiting
about {st.live.mins} minutes
Take a seat — we will call your number
);
} else if (st.kind === "scriptReady") {
body = (
<>
READY FOR COLLECTION
{st.live.ready.map(n => {n} )}
Collection numbers only. Bring your slip to the counter.
);
} else {
body = (
<>
{st.kind === "service" ? "AVAILABLE TODAY" : "HEALTH"}
{dense && st.body && {st.body}
}
Ask any of our team
);
}
}
const t = T[theme] || T.navy;
return (
);
}
window.DFrame = DFrame;
// -----------------------------------------------------------------
// PLAYLIST EDITOR
// -----------------------------------------------------------------
function DsPlaylists() {
const { scope, pushToast } = window.useOffice();
const store = scope === "all" ? "S-001" : scope;
const zones = Object.keys(DS.ZONES).filter(z => DS.screenIn(store, z));
const [zone, setZone] = dsUseState(zones[0] || "window");
const z = DS.ZONES[zone] || DS.ZONES.window;
const scr = DS.screenIn(store, zone);
// manual order, held per store+zone
const key = store + ":" + zone;
const [orders, setOrders] = dsUseState({});
const list = DS.resolvePlaylist(store, zone, DS.NOW_MIN);
const setList = next => { DS.PLAYLISTS[key] = next.map(({ref,dwell,pin})=>({ref,dwell,pin})); setOrders(o => ({...o,[key]:(o[key]||0)+1})); };
const [drag, setDrag] = dsUseState(null);
const [over, setOver] = dsUseState(null);
const [sel, setSel] = dsUseState(0);
dsUseEffect(() => {setSel(0); if(!zones.includes(zone))setZone(zones[0]||"window");}, [zone,store]);
const move = (from, to) => {
if (!Number.isInteger(from) || from < 0 || from >= list.length || from === to || to == null || to < 0 || to >= list.length) return;
const next = list.slice();
const [it] = next.splice(from, 1);
next.splice(to, 0, it);
setList(next);
};
const playing = list.filter(e => e.playing);
const cycle = playing.reduce((s, e) => s + e.dwell, 0);
const cur = playing[Math.min(sel, Math.max(0, playing.length - 1))];
return (
<>
{zones.map(k => {
const zz = DS.ZONES[k];
const l = DS.resolvePlaylist(store, k, DS.NOW_MIN);
const s2 = DS.screenIn(store, k);
return (
setZone(k)}>
{zz.l}
{l.filter(e => e.playing).length} of {l.length} playing{s2 && s2.state !== "online" ? " · " + s2.state : ""}
);
})}
{/* ---- list ---- */}
{z.orient} {scr ? scr.size : "—"}
cycle {cycle + "s"}
{cycle > 45 && (
A {cycle} second cycle means nobody walking past sees the end of it. Four or five frames is usually the practical limit for a {z.l.toLowerCase()} screen.
)}
{list.map((e, i) => {
const f = e.f;
const kind = f ? DS.KINDS[f.kind] : null;
const label = f ? (f.pm ? f.pm.name : f.standing.head) : e.ref + " (missing)";
const pos = playing.indexOf(e);
return (
setDrag(i)}
onDragOver={ev => { ev.preventDefault(); setOver(i); }}
onDragEnd={() => { setDrag(null); setOver(null); }}
onDrop={ev => { ev.preventDefault(); move(drag, i); setDrag(null); setOver(null); }}
onClick={() => { if (e.playing) setSel(pos); }}>
{e.playing ? pos + 1 : "—"}
{label}
{e.pin && pinned }
{kind ? kind.l : ""}{e.part && e.part !== "allday" ? " · " + DS.DAYPARTS[e.part].l.toLowerCase() + " only" : ""}
{!e.playing && e.reasons && e.reasons.map((r, ri) => (
{r.say}
))}
{e.playing && f && f.warn && (
{f.warn}
)}
{ ev.stopPropagation(); setList(list.map(x => x === e ? { ...x, dwell: Math.max(2, x.dwell - 1) } : x)); }}>
{e.dwell}s
{ ev.stopPropagation(); setList(list.map(x => x === e ? { ...x, dwell: Math.min(20, x.dwell + 1) } : x)); }}>
{ ev.stopPropagation(); move(i, i - 1); }} disabled={i === 0}>
{ ev.stopPropagation(); move(i, i + 1); }} disabled={i === list.length - 1}>
);
})}
Drag to reorder, or use the arrows. Nothing sorts itself — the order on screen is the order here.
What this zone will not carry
Content rules follow the placement, not the promotion.
{Object.entries(DS.KINDS).map(([k, kd]) => {
const ok = z.allow.includes(k);
return (
{kd.l}
{ok ? kd.d : (z.denyWhy || "Not appropriate for this placement.")}
);
})}
Pharmacist-only (S3) medicines are held out of every screen, whatever the zone. S3 can be promoted on price but not advertised, and a screen is advertising in a way a shelf ticket is not.
{/* ---- preview ---- */}
Preview on screen
{scr ? scr.id + " · " + scr.size + " " + z.orient : "No sample screen in this zone"} · {DS.hhmm(DS.NOW_MIN)}
setSel(s => (s - 1 + playing.length) % playing.length)} disabled={playing.length < 2}>
{playing.length ? Math.min(sel, playing.length - 1) + 1 : 0} / {playing.length}
setSel(s => (s + 1) % playing.length)} disabled={playing.length < 2}>
{playing.length === 0
?
Nothing is playing in this zone. A screen showing nothing is better than a screen showing an ended promotion, but it is still a dark screen in a shop window.
:
}
{cur && (
Holds for {cur.dwell} seconds
Frame type {DS.KINDS[cur.f.kind].l}
Words on screen {z.maxWords >= 20 ? "detail allowed" : "under " + z.maxWords}
Read at {zone === "window" ? "5 m, 2 seconds" : zone === "counter" ? "0.5 m, seated" : zone === "wait" ? "2 m, minutes" : "2 m, walking"}
)}
Rendered at the screen's real pixel size and scaled down, so the type sizes are the ones the shop will actually see.
Add a frame
Only content this zone allows is offered.
{[...DSP.PROMOS.filter(pm => DSP.stateOf(pm) === "live" && pm.stores.includes(store)),
...DS.STANDING.filter(st => !st.pending)].filter(x => {
const f = DS.frame(x.id);
return f && z.allow.includes(f.kind) && !list.find(e => e.ref === x.id);
}).map(x => (
{ setList([...list, { ref: x.id, dwell: z.dwell + 2 }]); pushToast({kind:'paid', icon:'check', title:'Added to ' + z.l, meta:'Preview only · kept until page reload; nothing is sent to a screen'}); }}>
+ {x.name || x.head}
))}
s.state === "online").length} delta={{dir: bad.length ? "down" : "up", text: bad.length ? bad.length + " need attention" : "All reporting"}}/>
s.state === "cached").length} delta={{dir:"down", text:"Cached playlist, promotion may have ended"}}/>
s.fw !== "2.4.1").length} delta={{text:"On 2.3.8 · dayparting needs 2.4"}}/>
Each screen pulls its playlist and caches it. A dropped connection shows the last good playlist rather than an error page, which is the right failure — but it also means a screen can keep advertising a promotion that has ended, so a cached screen is a problem to chase rather than a state to ignore.
Sample screen inventory
pushToast({kind:'paid', icon:'refresh', title:'Preview only', meta:'No playlists sent. Screen connection and publishing are not connected.'})}>
Screen
Store
Zone
Size
Firmware
State
Last contact
{rows.map(s => {
const [tone, l] = STATE[s.state];
const z = D2.ZONES[s.zone];
const pl = D2.resolvePlaylist(s.store, s.zone, D2.NOW_MIN);
return (
{s.id}
{d2Store(s.store)}
{z.l}
{pl.filter(e => e.playing).length} frames · {D2.cycleOf(pl)}s cycle
{s.size} {z.orient === "portrait" ? "port" : "land"}
{s.fw}
{s.seen}{s.note &&
{s.note}
}
);
})}
);
}
// =================================================================
// FRAME LIBRARY — the standing content, and one promotion three ways
// =================================================================
function DsLibrary() {
const { scope, pushToast } = window.useOffice();
const store = scope === "all" ? "S-001" : scope;
const [pick, setPick] = d2UseState("PM-1041");
const live = D2P.PROMOS.filter(pm => D2P.stateOf(pm) === "live" && pm.stores.includes(store));
const pm = live.find(x => x.id === pick) || live[0];
const f = pm ? D2.frame(pm.id) : null;
const SHOW = ["window", "wait", "counter"];
return (
<>
The same promotion is not the same frame in every zone. A window screen gets the price and nothing else; a waiting-area screen has minutes of attention and can carry the explanation. One authored promotion, three treatments.
One promotion, three zones
{live.map(x => (
setPick(x.id)}>
{x.name}
))}
{pm && (
{SHOW.map(z => {
const zz = D2.ZONES[z];
const allowed = zz.allow.includes(f.kind);
return (
{zz.l}
{zz.orient} · {zz.dwell}s · {zz.maxWords >= 20 ? "detail allowed" : "under " + zz.maxWords + " words"}
{allowed
?
:
{zz.denyWhy}
}
);
})}
)}
Standing content
Authored once and reviewed, not derived from a promotion. Health messaging carries no product claim, and the two queue frames use sample collection numbers in this preview.
{D2.STANDING.map(st => (
{st.head}{st.pending && awaiting review }
{D2.KINDS[st.kind].l}
{st.review}
))}
Free text on a screen is where therapeutic claims creep in. Standing frames are reviewed and dated before they go up.
);
}
// =================================================================
// SHELL
// =================================================================
function Displays() {
const { scope, setScreen, pushToast } = window.useOffice();
const [tab, setTab] = d2UseState(previewTab);
const TABS = [
{ k: "playlists", l: "Playlists" },
{ k: "library", l: "Frames" },
{ k: "screens", l: "Screens" },
];
const BODIES = { playlists: window.DsPlaylists, library: DsLibrary, screens: DsScreens };
const Body = BODIES[tab];
return (
Pricing · {scope === "all" ? "all stores" : d2Store(scope)}
In-store screens
Six placements, each with its own content rules. A frame is read in about two seconds at the window and several minutes in the dispensary queue, so the same promotion is not the same frame.
{tab === "library" && (
setScreen("displayFrameNew")}>
)}
pushToast({kind:'paid', icon:'refresh', title:'Preview only', meta:'No playlists sent. Screen connection and publishing are not connected.'})}>
{TABS.map(t => {previewTab=t.k;setTab(t.k);}}>{t.l} )}
);
}
window.OFFICE_SCREENS = Object.assign(window.OFFICE_SCREENS || {}, { displays: Displays });
/* =============================================================
CoreIQ Office — Displays: standing frame composer
Free text on a screen is where therapeutic claims creep in, so
a new frame is drafted, screened and reviewed before it can be
added to any playlist.
============================================================= */
const { useState: d3UseState } = React;
const D3 = window.OFFICE_DISPLAYS;
// Words a pharmacy screen should not carry without a pharmacist's sign-off.
// Not a compliance engine — a prompt to look again before it goes on a wall.
const D3_CLAIMS = [
{ re: /\b(cure|cures|cured|curing)\b/i, say: "\u201ccure\u201d is a therapeutic claim. Say what the service does instead." },
{ re: /\b(treat|treats|treatment for)\b/i, say: "\u201ctreat\u201d implies a therapeutic claim for a named condition." },
{ re: /\b(prevent|prevents|prevention of)\b/i, say: "\u201cprevent\u201d needs to be supported and is usually better left to the vaccine's own wording." },
{ re: /\b(safe|safest|harmless|no side effects)\b/i, say: "Safety claims cannot be made on a display." },
{ re: /\b(best|number one|no\.? ?1|leading)\b/i, say: "Comparative superiority claims are not permitted." },
{ re: /\b(guaranteed|guarantee)\b/i, say: "A guarantee on a health service is a claim you cannot stand behind." },
{ re: /\b(doctor recommended|clinically proven|proven to)\b/i, say: "Efficacy claims need evidence and a pharmacist's approval." },
{ re: /\b(free)\b/i, say: "\u201cFree\u201d is fine for an NIP service, but say who is eligible or it reads as a retail offer.", soft: true },
];
function DisplayFrameNew() {
const { setScreen, pushToast } = window.useOffice();
const [kind, setKind] = d3UseState("service");
const [head, setHead] = d3UseState("");
const [sub, setSub] = d3UseState("");
const [body, setBody] = d3UseState("");
const [theme, setTheme] = d3UseState("teal");
const [zone, setZone] = d3UseState("counter");
const [ack, setAck] = d3UseState(false);
const zones = Object.keys(D3.ZONES).filter(z => D3.ZONES[z].allow.includes(kind));
const z = D3.ZONES[zones.includes(zone) ? zone : zones[0]];
const zKey = zones.includes(zone) ? zone : zones[0];
const text = [head, sub, body].join(" ").trim();
const words = text ? text.split(/\s+/).length : 0;
const hits = D3_CLAIMS.filter(c => c.re.test(text));
const hard = hits.filter(c => !c.soft);
// the zone's own word budget, not an arbitrary limit
const tight = zones.filter(k => words > D3.ZONES[k].maxWords);
const preview = { id: "ST-DRAFT", kind, standing: { kind, head: head || "Headline", sub, body, theme } };
const ready = head.trim().length > 2 && sub.trim().length > 2 && ack && hard.length === 0;
const save = () => {
const id = "ST-" + String(D3.STANDING.length + 1).padStart(2, "0");
D3.STANDING.push({ id, kind, head: head.trim(), sub: sub.trim(), body: body.trim(), theme,
pending: false, review: "Local preview draft · not submitted or approved" });
pushToast({ kind: "hold", icon: "doc", title: "Preview draft added",
meta: id + " \u00b7 " + head.trim() + " · local preview only; nothing submitted or published" });
previewTab="library";setScreen("displays");
};
const KINDS = [["service", "Service available today"], ["seasonal", "Seasonal health message"]];
return (
What kind of frame
{KINDS.map(([k, l]) => (
{ setKind(k); setTheme(k === "service" ? "teal" : "green"); }}>
{l}
{D3.KINDS[k].d}
))}
Now serving and scripts ready are system frames — they pull live from the dispensary queue and are not authored here.