// Signed-in layer for the Open Marketplace.
// Loads AFTER open-marketplace.jsx. Exposes window.RLS.
// Storage: rl-user (from Simple Signup), rl-saved, rl-my-listings,
// rl-messages, rl-requests.
const { useState, useEffect, useRef } = React;
// ── Storage helpers ──────────────────────────────────────────────────────
function rlsRead(k, d) {
try { const v = JSON.parse(localStorage.getItem(k)); return v == null ? d : v; }
catch (e) { return d; }
}
function rlsWrite(k, v) { try { localStorage.setItem(k, JSON.stringify(v)); } catch (e) {} }
// ── Session ──────────────────────────────────────────────────────────────
function rlsUser() {
try {
const raw = localStorage.getItem("rl-user");
if (!raw) return null;
let u; try { u = JSON.parse(raw); } catch (e) { u = { name: raw }; }
if (typeof u === "string") u = { name: u };
if (!u || (!u.name && !u.company)) return null;
return { name: u.name || "Mike", company: u.company || u.name || "My Roofing Co." };
} catch (e) { return null; }
}
const RLS_USER = rlsUser();
// Register "you" as a seller so your listings render with the shared card components
if (RLS_USER && window.MP_SELLERS && !window.MP_SELLERS.you) {
window.MP_SELLERS.you = {
name: RLS_USER.company, type: "Contractor", rating: 5.0, reviews: 1,
verified: true, member: false, resp: "~1 hr",
grad: "linear-gradient(140deg,#2C4A3E,#6B8A66)",
};
}
// ── Saved ────────────────────────────────────────────────────────────────
function rlsSavedIds() { return rlsRead("rl-saved", []); }
function rlsIsSaved(id) { return rlsSavedIds().includes(id); }
function rlsToggleSaved(id) {
const ids = rlsSavedIds();
const next = ids.includes(id) ? ids.filter(x => x !== id) : [id, ...ids];
rlsWrite("rl-saved", next);
return next.includes(id);
}
// ── My listings ──────────────────────────────────────────────────────────
function rlsMyListings() {
const ls = rlsRead("rl-my-listings", []);
ls.forEach(l => {
if (window.MP_PHOTOS && !window.MP_PHOTOS[l.id]) {
if (l.img) window.MP_PHOTOS[l.id] = l.img;
else if (l.photoOf) window.MP_PHOTOS[l.id] = window.MP_PHOTOS[l.photoOf];
}
});
return ls;
}
function rlsSaveMyListings(ls) { rlsWrite("rl-my-listings", ls); }
function rlsWithMine(kind, base) {
if (!RLS_USER) return base;
const mine = rlsMyListings().filter(l => l.kind === kind && !l.sold);
return mine.concat(base);
}
function rlsAllItems() {
return rlsMyListings().concat(window.MP_MATERIALS || [], window.MP_MACHINERY || []);
}
// ── Messages ─────────────────────────────────────────────────────────────
function rlsThreads() { return rlsRead("rl-messages", {}); }
function rlsThread(sellerId) { return rlsThreads()[sellerId] || []; }
function rlsAppendMsg(sellerId, msg) {
const t = rlsThreads();
t[sellerId] = (t[sellerId] || []).concat([msg]);
rlsWrite("rl-messages", t);
return t[sellerId];
}
// ── Requests ─────────────────────────────────────────────────────────────
function rlsRequests() { return rlsRead("rl-requests", []); }
function rlsAddRequest(r) { const all = [r, ...rlsRequests()]; rlsWrite("rl-requests", all); return all; }
// ── One-time CSS ─────────────────────────────────────────────────────────
if (!document.getElementById("rls-styles")) {
const s = document.createElement("style");
s.id = "rls-styles";
s.textContent = `
.rls-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100vw); z-index: 90;
background: var(--bg-card); border-left: 1px solid var(--border);
box-shadow: -12px 0 40px rgba(27,24,20,0.14); display: flex; flex-direction: column; }
@media (prefers-reduced-motion: no-preference) {
.rls-drawer { animation: rlsSlide .32s cubic-bezier(.2,.8,.3,1) both; }
.rls-msg { animation: rlsMsgIn .3s cubic-bezier(.2,.7,.3,1) both; }
}
@keyframes rlsSlide { from { transform: translateX(100%); } to { transform: none; } }
@keyframes rlsMsgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rls-bubble { max-width: 78%; padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.4; }
.rls-bubble.me { background: var(--text-1); color: #FBF7EB; border-bottom-right-radius: 4px; margin-left: auto; }
.rls-bubble.them { background: var(--bg-card-soft); border: 1px solid var(--border-soft); border-bottom-left-radius: 4px; }
.rls-typing span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3);
margin-right: 3px; animation: rlsBlink 1.1s infinite; }
.rls-typing span:nth-child(2) { animation-delay: .18s; } .rls-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes rlsBlink { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.rls-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px; z-index: 80;
background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
box-shadow: 0 12px 36px rgba(27,24,20,0.16); padding: 6px; }
.rls-menu a, .rls-menu button { display: flex; align-items: center; gap: 10px; width: 100%;
padding: 9px 12px; border: none; background: transparent; border-radius: 8px; cursor: pointer;
font-family: var(--sans); font-size: 14px; color: var(--text-1); text-decoration: none; text-align: left; }
.rls-menu a:hover, .rls-menu button:hover { background: var(--bg-hover); color: var(--text-1); }
.rls-avatar { width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; flex-shrink: 0;
background: linear-gradient(140deg,#2C4A3E,#6B8A66); color: #F4E9CC;
display: grid; place-items: center; font-weight: 600; font-size: 13px; font-family: var(--sans); }
.rls-check { width: 64px; height: 64px; border-radius: 50%; background: var(--green-soft);
display: grid; place-items: center; margin: 0 auto 14px; }
@media (prefers-reduced-motion: no-preference) { .rls-check { animation: mpxSpring .45s cubic-bezier(.34,1.5,.5,1) both; } }
.rls-photo-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rls-photo-pick button { border: 2px solid transparent; border-radius: 10px; padding: 0; overflow: hidden;
aspect-ratio: 16/11; cursor: pointer; background: var(--bg-card-soft); }
.rls-photo-pick button.on { border-color: var(--gold-dark); }
.rls-photo-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
`;
document.head.appendChild(s);
}
// ── Chat drawer ──────────────────────────────────────────────────────────
const RLS_REPLIES = [
"Yes, it's still available. When do you need it?",
"Can do — pickup is off Country Club Dr in Mesa.",
"If you take the whole lot I'll knock 10% off.",
"\uD83D\uDC4D Sounds good. Anything else you need for the job?",
];
function ChatDrawer({ sellerId, onClose }) {
const seller = MP_SELLERS[sellerId];
const [msgs, setMsgs] = useState(() => rlsThread(sellerId));
const [draft, setDraft] = useState("");
const [typing, setTyping] = useState(false);
const endRef = useRef(null);
useEffect(() => { if (endRef.current) endRef.current.scrollTop = endRef.current.scrollHeight; }, [msgs, typing]);
if (!seller) return null;
const send = () => {
const text = draft.trim();
if (!text) return;
setDraft("");
const mine = rlsAppendMsg(sellerId, { from: "me", text, at: Date.now() });
setMsgs(mine.slice());
setTyping(true);
const replyIdx = mine.filter(m => m.from === "them").length % RLS_REPLIES.length;
setTimeout(() => {
setTyping(false);
const next = rlsAppendMsg(sellerId, { from: "them", text: RLS_REPLIES[replyIdx], at: Date.now() });
setMsgs(next.slice());
}, 1500);
};
return (
{seller.name}
Usually responds {seller.resp}
{msgs.length === 0 && (
Say hello — ask about availability, price, or pickup.
)}
{msgs.map((m, i) =>
{m.text}
)}
{typing &&
}
setDraft(e.target.value)}
onKeyDown={e => { if (e.key === "Enter") send(); }} autoFocus />
);
}
// ── Request to buy / rent ────────────────────────────────────────────────
function RequestModal({ item, onClose }) {
const seller = MP_SELLERS[item.seller];
const isRental = item.cond === "Rental";
const [qty, setQty] = useState(isRental ? 1 : 10);
const [start, setStart] = useState("");
const [note, setNote] = useState("");
const [done, setDone] = useState(false);
const total = item.price * qty;
const submit = () => {
rlsAddRequest({
id: "req" + Date.now(), itemId: item.id, title: item.title, seller: item.seller,
qty, start: start || "Flexible", note, total, unit: item.unit,
kind: isRental ? "Rental" : "Purchase", status: "Sent", at: Date.now(),
});
setDone(true);
};
return (
e.stopPropagation()}>
{done ? (
Request sent!
{seller.name} usually responds {seller.resp}. We'll ping you the moment they reply.
) : (
{isRental ? "Request to rent" : "Request to buy"}
{item.title} — ${item.price}{item.unit} · {seller.name}
{isRental && (
Start date
setStart(e.target.value)} />
)}
Note to seller (optional)
No charge yet — the seller confirms first.
)}
);
}
// ── Post a listing ───────────────────────────────────────────────────────
const RLS_PHOTO_OPTS = [
{ key: "m1", label: "Shingles" }, { key: "m3", label: "Underlayment" }, { key: "m5", label: "Pallet" },
{ key: "q1", label: "Lift" }, { key: "q2", label: "Hoist" }, { key: "q4", label: "Trailer" },
];
function PostListingModal({ onClose, onPublished }) {
const [kind, setKind] = useState("materials");
const [title, setTitle] = useState("");
const [detail, setDetail] = useState("");
const [price, setPrice] = useState("");
const [cat, setCat] = useState("Shingles");
const [photoOf, setPhotoOf] = useState("m1");
const [done, setDone] = useState(false);
const cats = (kind === "materials" ? MP_MATERIAL_CATS : MP_MACHINERY_CATS).filter(c => c !== "All");
const unit = kind === "materials" ? "/bundle" : "/day";
const canPost = title.trim() && parseFloat(price) > 0;
const publish = () => {
const id = "u" + Date.now();
const item = {
id, title: title.trim(), detail: detail.trim() || "Posted just now",
price: Math.round(parseFloat(price)), unit,
cond: kind === "materials" ? "Surplus" : "Rental",
cat: cats.includes(cat) ? cat : cats[0],
loc: "Mesa, AZ", dist: 0, seller: "you",
thumb: "shingle-charcoal", photoOf, kind, sold: false, at: Date.now(),
};
window.MP_PHOTOS[id] = window.MP_PHOTOS[photoOf];
rlsSaveMyListings([item, ...rlsMyListings()]);
setDone(true);
};
return (
e.stopPropagation()}>
{done ? (
You're live!
Your listing is on the marketplace with a "JUST LISTED" badge. Buyers within 25 mi will see it first.
) : (
)}
);
}
// ── Avatar menu ──────────────────────────────────────────────────────────
function AccountMenu({ user, onGoTab }) {
const [open, setOpen] = useState(false);
const ref = useRef(null);
useEffect(() => {
const close = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener("mousedown", close);
return () => document.removeEventListener("mousedown", close);
}, []);
const initials = user.name.split(" ").map(w => w[0]).slice(0, 2).join("").toUpperCase();
return (
{open && (
{user.name}
{user.company !== user.name &&
{user.company}
}
📊 My dashboard
🧰 My tools
)}
);
}
// ── Incoming requests on YOUR listings ──
function rlsIncoming() { return rlsRead("rl-incoming", []); }
function rlsSaveIncoming(v) { rlsWrite("rl-incoming", v); }
function rlsEnsureIncoming() {
const buyers = ["cardenas", "halcon", "summit", "torres", "diaz"];
const notes = {
job: "I'd like to apply — 6 yrs on residential crews.",
crew: "Do you have availability the week of the 20th?",
work: "We're hiring — can you start Monday?",
wanted: "I've got these in my yard — want photos?",
};
const inc = rlsIncoming();
let changed = false;
rlsMyListings().filter(l => !l.sold).forEach((l, i) => {
if (!inc.some(r => r.listingId === l.id)) {
const qty = l.unit === "/day" ? 2 : 8;
inc.push({
id: "in-" + l.id, listingId: l.id, from: buyers[i % buyers.length],
qty, total: (l.price || 0) * qty,
note: notes[l.postType] || "Is this still available?",
at: Date.now() - 1000 * 60 * (7 + i * 13), status: "new",
});
changed = true;
}
});
if (changed) rlsSaveIncoming(inc);
return inc;
}
function rlsSetIncomingStatus(id, status) {
const inc = rlsIncoming().map(r => r.id === id ? { ...r, status } : r);
rlsSaveIncoming(inc);
return inc;
}
function rlsTimeAgo(ts) {
const m = Math.max(1, Math.round((Date.now() - ts) / 60000));
if (m < 60) return m + " min";
const h = Math.round(m / 60);
return h < 24 ? h + " hr" : Math.round(h / 24) + " d";
}
// ── Saved tab ────────────────────────────────────────────────────────────
function SavedTab({ onOpen, onGoTab }) {
const [ids, setIds] = useState(rlsSavedIds());
useEffect(() => { setIds(rlsSavedIds()); }, []);
const all = rlsAllItems();
const items = ids.map(id => all.find(it => it.id === id)).filter(Boolean);
const Card = window.ListingCardGrid;
if (items.length === 0) return (
♡
Nothing saved yet
Tap the heart on any listing and it'll live here.
);
return (
{items.map((it, i) => {}} index={i} />)}
);
}
// ── Messages / inbox tab ──
function InboxTab({ onOpenChat, onGoTab }) {
const threads = Object.entries(rlsThreads()).filter(([, m]) => m.length > 0)
.sort((a, b) => b[1][b[1].length - 1].at - a[1][a[1].length - 1].at);
if (threads.length === 0) return (
💬
No conversations yet
Message any seller from a listing — it lands here.
);
return (
{threads.map(([sid, msgs], i) => {
const s = MP_SELLERS[sid];
if (!s) return null;
const last = msgs[msgs.length - 1];
return (
onOpenChat(sid)}>
{s.name}
{rlsTimeAgo(last.at)} ago
{last.from === "me" ? "You: " : ""}{last.text}
›
);
})}
e.stopPropagation()}>
{item.chip || (item.cond === "Rental" ? "Rental" : "For sale")}
{editing ? (
) : (
{item.title}
{item.price > 0 &&
${item.price}{item.unit}
}
{item.detail}
{[[views, "views"], [saves, "saves"], [inc.length, "requests"]].map(([n, l]) => (
{n} {l}
))}
)}
{!editing && (
Requests on this listing
{inc.length === 0 &&
None yet — buyers nearby will see it first.
}
{inc.map(r => {
const buyer = MP_SELLERS[r.from];
return (
{buyer.name}
{r.total > 0 && · ${r.total.toLocaleString()}}
· {rlsTimeAgo(r.at)} ago
{r.note}
{r.status === "new" ? (
) : r.status === "accepted" ? (
Accepted
) : Declined}
);
})}
)}
);
}
// ── My listings tab ──────────────────────────────────────────────────────
function MyListingsTab({ onPost, onChat }) {
const [ls, setLs] = useState(rlsMyListings());
const [open, setOpen] = useState(null);
const incAll = rlsEnsureIncoming();
const update = next => { rlsSaveMyListings(next); setLs(next); };
if (ls.length === 0) return (
🏷
You haven't listed anything yet
Surplus shingles? A lift sitting idle? Turn it into money.
);
return (
{ls.filter(l => !l.sold).length} active · {ls.filter(l => l.sold).length} sold
{ls.map(l => {
const newReq = incAll.filter(r => r.listingId === l.id && r.status === "new").length;
return (
setOpen(l)}>
{l.title}
{l.price > 0 ? "$" + l.price + l.unit : (l.chip || "")}{l.cat ? " · " + l.cat : ""}
{l.sold ? (l.kind === "board" ? "Closed" : "Sold") : "Active"}
{newReq > 0 && {newReq} new request{newReq > 1 ? "s" : ""}}
e.stopPropagation()}>
);
})}
{open &&
x.id === open.id) || open} onClose={() => setOpen(null)}
onSaved={next => setLs(next)} onChat={onChat} />}
);
}
window.RLS = {
user: RLS_USER,
read: rlsRead, write: rlsWrite,
isSaved: rlsIsSaved, toggleSaved: rlsToggleSaved, savedIds: rlsSavedIds,
myListings: rlsMyListings, saveMyListings: rlsSaveMyListings, withMine: rlsWithMine, allItems: rlsAllItems,
threads: rlsThreads, thread: rlsThread,
requests: rlsRequests,
incoming: rlsIncoming, ensureIncoming: rlsEnsureIncoming,
ChatDrawer, RequestModal, PostListingModal, AccountMenu, SavedTab, MyListingsTab, InboxTab, MyListingModal,
};