// nesti-wishlist.jsx — owner's wishlist page + add custom + share modal
function WishlistPage(){
const { wishlist, signedIn, navigate, removeFromWishlist, requireAuth, addToast, customItems, addCustomItem, removeCustomItem, updateCustomItem, wishlistTitle, setWishlistTitle, getShareUrl } = useApp();
const { lang, t } = useLang();
const [showAdd, setShowAdd] = React.useState(false);
const [showShare, setShowShare] = React.useState(false);
const [editing, setEditing] = React.useState(null); // custom item id being edited
const [editingTitle, setEditingTitle] = React.useState(false);
if (!signedIn){
return (
Your wishlist lives here.
Sign in to save what you love, share it with family, and let them gently bring it home.
navigate({name:'signup'})}>Create a free account
navigate({name:'login'})}>I have one already
);
}
const productItems = wishlist.map(id => ({ kind:'product', product: NESTI_PRODUCT_BY_ID[id], id })).filter(x=>x.product);
const allItems = [
...productItems,
...customItems.map(c => ({ kind:'custom', custom: c, id: c.uid })),
];
return (
{signedIn.name.split(' ')[0]}'s wishlist · Due August
{editingTitle ? (
setWishlistTitle(e.target.value)}
onBlur={()=>setEditingTitle(false)}
onKeyDown={e=>{ if (e.key==='Enter') setEditingTitle(false); }}
className="input"
style={{
fontFamily:'var(--font-display)', fontStyle:'italic',
fontSize: 'clamp(40px, 5.5vw, 64px)',
padding: '4px 8px', border: '1px dashed var(--line-strong)',
background: 'transparent', lineHeight: 1.05,
}}
/>
) : (
setEditingTitle(true)} className="display italic" style={{
fontSize: 'clamp(40px, 5.5vw, 64px)', margin: 0, lineHeight: 1.05, cursor: 'text',
}} title="Click to rename">
{wishlistTitle}
)}
Everything you've saved. Share it with the people you love — they can reserve a gift so nothing arrives twice.
setShowAdd(true)}>
Add a custom item
setShowShare(true)}>
Share wishlist
{/* Stat strip */}
s + (i.kind==='product' ? i.product.price : (parseFloat(i.custom.price)||0)), 0), lang)} icon="bag"/>
{/* Items */}
{allItems.length === 0 ? (
setShowAdd(true)} onBrowse={()=>navigate({name:'home'})}/>
) : (
{allItems.map(it => (
it.kind === 'product' ? (
navigate({name:'detail', id: it.id})}
onRemove={()=>removeFromWishlist(it.id)}
/>
) : (
setEditing(it.id)}
onRemove={()=>removeCustomItem(it.id)}
/>
)
))}
)}
setShowAdd(false)}
onSubmit={(it) => { addCustomItem(it); setShowAdd(false); addToast({ msg: 'Added to your wishlist.', icon: 'check'}); }}
/>
setEditing(null)}
editing={customItems.find(c => c.uid === editing)}
onSubmit={(it) => { updateCustomItem(editing, it); setEditing(null); addToast({ msg: 'Updated.', icon: 'check' }); }}
/>
setShowShare(false)}
url={getShareUrl()}
title={wishlistTitle}
/>
);
}
// ─────────────────────────────────────────────────────────────────────────────
function StatTile({ label, value, icon, note }){
return (
{label}
{value}
{note &&
{note}
}
);
}
function EmptyWishlist({ onAdd, onBrowse }){
return (
Your nest is empty.
Save something from the shop — or add a custom item from elsewhere with its link.
Browse the shop
Add a custom item
);
}
// ─────────────────────────────────────────────────────────────────────────────
function WishlistProductCard({ product, onOpen, onRemove }){
const { lang, t } = useLang();
return (
{NESTI_CATEGORIES.find(c=>c.id===product.cat)?.label}
Available
{product.name}
{formatPrice(product.price, lang)}
View
);
}
function WishlistCustomCard({ item, onEdit, onRemove }){
const { lang, t } = useLang();
return (
{item.photo ? (
) : (
)}
Custom
From elsewhere
Available
{item.name}
{item.price ? `${formatPrice(item.price, lang)}` : 'Price not set'}
);
}
// ─────────────────────────────────────────────────────────────────────────────
function CustomItemModal({ open, onClose, onSubmit, editing }){
const [name, setName] = React.useState('');
const [price, setPrice] = React.useState('');
const [url, setUrl] = React.useState('');
const [photo, setPhoto] = React.useState('');
const fileRef = React.useRef();
React.useEffect(() => {
if (open){
setName(editing?.name || '');
setPrice(editing?.price || '');
setUrl(editing?.url || '');
setPhoto(editing?.photo || '');
}
}, [open, editing]);
const handleFile = (file) => {
if (!file) return;
const reader = new FileReader();
reader.onload = (e) => setPhoto(e.target.result);
reader.readAsDataURL(file);
};
const submit = (e) => {
e.preventDefault();
if (!name.trim()) return;
onSubmit({ name, price, url, photo });
};
return (
{editing ? 'Edit item' : 'Add a custom item'}
Saw something perfect somewhere else? Add it to your nest with the link.
);
}
// ─────────────────────────────────────────────────────────────────────────────
function ShareModal({ open, onClose, url, title }){
const { navigate, addToast } = useApp();
const [copied, setCopied] = React.useState(false);
const inputRef = React.useRef();
React.useEffect(()=>{ if (open) setCopied(false); }, [open]);
const copy = async () => {
try {
if (navigator.clipboard) await navigator.clipboard.writeText(url);
else { inputRef.current?.select(); document.execCommand('copy'); }
setCopied(true);
setTimeout(()=>setCopied(false), 2000);
} catch (e) {}
};
const whatsapp = () => {
const msg = encodeURIComponent(`Hi — I made a baby wishlist on Nesti: ${title}. You can have a look here (no signup needed): ${url}`);
window.open(`https://wa.me/?text=${msg}`, '_blank');
};
return (
Share your wishlist
Anyone with this link can see your wishlist and reserve a gift quietly. No signup needed.
Public link
{copied ? <> Copied : <> Copy}
or share via
{ onClose(); navigate({name:'guest', wid:'demo'}); addToast?.({ msg: 'Sent to your friend on Nesti.', icon: 'check' }); }} style={{ padding: '14px 8px' }}>
WhatsApp
{ window.location.href = `mailto:?subject=${encodeURIComponent('My baby wishlist')}&body=${encodeURIComponent(`I made a wishlist on Nesti — have a look: ${url}`)}`; }} style={{ padding: '14px 8px' }}>
Email
Tip. When a friend reserves a gift, the item shows as reserved for everyone else, so nothing arrives twice.
);
}
Object.assign(window, { WishlistPage, ShareModal, CustomItemModal });
// Small Nesti N-mark for share buttons
function NestiNMark(){
return (
n
);
}
) : (