Thank you, ${esc(recipientName) || 'friend'}

${messageHtml || ''}

Love,
${esc(signOffName) || esc(senderName) || ''}

★ Sent with MagicRascals

You received this because you claimed a gift on a public registry on MagicRascals. Reply directly to this email to message ${esc(senderName) || 'the parents'} back.

`; } const DEFAULT_TEMPLATE = `Thank you so much for the {GIFT}! It really means the world that you thought of us. We can't wait to put it to use. With so much love, {YOU}`; function substitute(template, vars) { return String(template || '') .replace(/\{NAME\}/g, vars.NAME || 'friend') .replace(/\{GIFT\}/g, vars.GIFT || 'gift') .replace(/\{YOU\}/g, vars.YOU || ''); } function ThankYouComposer({ open, list, claims, items, productMap, onClose, onSent, defaultSenderName }) { const [photoUrl, setPhotoUrl] = _ts(''); const [photoBusy, setPhotoBusy] = _ts(false); const [template, setTemplate] = _ts(DEFAULT_TEMPLATE); const [senderName, setSenderName] = _ts(defaultSenderName || ''); const [subject, setSubject] = _ts('Thank you for the gift!'); const [selected, setSelected] = _ts(() => new Set()); const [sendingIdx, setSendingIdx] = _ts(-1); const [sentCount, setSentCount] = _ts(0); const [errMsg, setErrMsg] = _ts(''); const [doneMsg, setDoneMsg] = _ts(''); const [previewIdx, setPreviewIdx] = _ts(0); const [perRecipientMode, setPerRecipientMode] = _ts(false); const [perRecipientMessages, setPerRecipientMessages] = _ts({}); const fileRef = _tr(null); // Eligible claims: have an email and haven't already been thanked const eligibleClaims = _tm(() => { return (claims || []).filter(c => c.buyer_email && !c.thanked_at); }, [claims]); // Reset state when modal re-opens _te(() => { if (open) { const initial = new Set(eligibleClaims.map(c => c.id)); setSelected(initial); setSentCount(0); setErrMsg(''); setDoneMsg(''); setPreviewIdx(0); setPerRecipientMode(false); setPerRecipientMessages({}); setSenderName(defaultSenderName || ''); } }, [open]); if (!open || !list) return null; const claimById = {}; (claims || []).forEach(c => { claimById[c.id] = c; }); const itemById = {}; (items || []).forEach(it => { itemById[it.id] = it; }); const resolveGiftName = (claim) => { const item = claim.item_id ? itemById[claim.item_id] : null; if (item && item.custom_name) return item.custom_name; const p = claim.product_id ? productMap[claim.product_id] : null; if (p) return p.name; return 'gift'; }; const handlePhoto = async (file) => { if (!file) return; setPhotoBusy(true); try { const res = await uploadOrEncodeImage(file); if (res.hosted) { setPhotoUrl(res.url); } else { // Base64 data URLs in emails are huge and often get filtered as spam. // Warn the user but allow it. setPhotoUrl(res.url); setErrMsg('Photo couldn\'t be uploaded to Storage — it\'ll be embedded inline (works but the email file size is larger). Sign in to host photos properly.'); } } catch (e) { setErrMsg('Couldn\'t read the photo: ' + e.message); } finally { setPhotoBusy(false); } }; const selectedClaims = eligibleClaims.filter(c => selected.has(c.id)); // Build the preview for one claim const previewClaim = selectedClaims[previewIdx] || eligibleClaims[0]; const previewVars = previewClaim ? { NAME: previewClaim.buyer_name, GIFT: resolveGiftName(previewClaim), YOU: senderName || 'Us', } : { NAME: 'Friend', GIFT: 'gift', YOU: senderName }; const effectiveTemplate = perRecipientMode && previewClaim ? (perRecipientMessages[previewClaim.id] ?? template) : template; const previewHtml = buildThankYouEmail({ recipientName: previewVars.NAME, giftName: previewVars.GIFT, message: substitute(effectiveTemplate, previewVars), senderName: senderName, signOffName: senderName, photoUrl, }); const send = async () => { if (selectedClaims.length === 0) return; setErrMsg(''); setDoneMsg(''); setSentCount(0); for (let i = 0; i < selectedClaims.length; i++) { const claim = selectedClaims[i]; setSendingIdx(i); const vars = { NAME: claim.buyer_name, GIFT: resolveGiftName(claim), YOU: senderName || 'Us', }; const messageTpl = perRecipientMode ? (perRecipientMessages[claim.id] ?? template) : template; const html = buildThankYouEmail({ recipientName: vars.NAME, giftName: vars.GIFT, message: substitute(messageTpl, vars), senderName, signOffName: senderName, photoUrl, }); try { const resp = await fetch('/api/send-thank-you', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ to: claim.buyer_email, subject: subject || 'Thank you for the gift!', html, }), }); const json = await resp.json(); if (!resp.ok || !json.ok) { setErrMsg(`Failed for ${claim.buyer_email}: ${json.error || resp.statusText}`); // Keep going — we'd rather get most of them than stop on one } else { // Mark thanked + log to thank_you_sent if (window.MR && window.MR.lists) { await window.MR.lists.markClaimThanked(claim.id, true); try { await window.MR.supabase.from('thank_you_sent').insert({ claim_id: claim.id, list_id: list.id, sent_by: (window.MR.user._session && window.MR.user._session.user.id) || null, recipient_email: claim.buyer_email, recipient_name: claim.buyer_name, subject, message_html: html.slice(0, 5000), photo_url: photoUrl || null, resend_id: json.id || null, }); } catch (e) { /* audit log failure is non-fatal */ } } setSentCount(prev => prev + 1); } } catch (e) { setErrMsg(`Network error on ${claim.buyer_email}: ${e.message}`); } } setSendingIdx(-1); setDoneMsg(`Sent ${selectedClaims.length === 1 ? '1 thank-you' : `${selectedClaims.length} thank-yous`}.`); if (onSent) onSent(); }; const toggleSelected = (id, on) => { setSelected(prev => { const next = new Set(prev); if (on) next.add(id); else next.delete(id); return next; }); }; const toggleAll = () => { if (selected.size === eligibleClaims.length) setSelected(new Set()); else setSelected(new Set(eligibleClaims.map(c => c.id))); }; return ( <>