/* Studio — "Action needed" photo-review escalation (used by the order screen).
Flag → email a per-order upload link → reminders → if no reply, offer a refund. */
const Spf = window.SparkleClassicDesignSystem_7a1470;
const REASON_OPTIONS = ['Too dark', 'Blurry', 'Pet not facing camera', 'More than one pet', 'Too far away', 'Heavy filter / obscured'];
function EscalationSteps({ index }) {
const labels = ['Review photo', 'Request new photo', 'Await reply', 'Offer refund'];
return (
{labels.map((l, i) => {
const done = i < index, current = i === index;
return (
{done ? '✓' : i + 1}{l}
{i < labels.length - 1 && }
);
})}
);
}
function PhotoReview({ order, role, onActivity, onResolve }) {
const { Button, Card, Badge, Icon, Dialog, Textarea, Input } = Spf;
const [phase, setPhase] = React.useState('reviewing');
const [composer, setComposer] = React.useState(false);
const [refund, setRefund] = React.useState(false);
const [reasons, setReasons] = React.useState([REASON_OPTIONS.find((r) => (order.actionReason || '').toLowerCase().includes(r.toLowerCase().split(' ')[0])) || 'Too dark']);
const [copied, setCopied] = React.useState(false);
const first = order.customer.split(' ')[0];
const link = `sparkleclassic.com/u/${order.id}`;
const reasonPhrase = () => {
const rs = reasons.length ? reasons : ['Hard to trace'];
const r0 = rs[0].toLowerCase();
const map = { 'too dark': 'a little too dark to trace', 'blurry': 'a bit blurry', 'pet not facing camera': 'angled away from the camera', 'more than one pet': 'showing more than one pet', 'too far away': 'a little too far away', 'heavy filter / obscured': 'hard to read under the filter' };
return map[r0] || r0;
};
const uploadHref = () => `upload.html?order=${encodeURIComponent(order.id)}&pet=${encodeURIComponent(order.petName)}&reason=${encodeURIComponent(reasonPhrase())}`;
const openUpload = () => window.open(uploadHref(), '_blank', 'noopener');
const log = (t, icon) => onActivity && onActivity({ t, icon, when: 'Just now · you' });
const toggleReason = (r) => setReasons((rs) => rs.includes(r) ? rs.filter((x) => x !== r) : [...rs, r]);
const reasonText = (reasons.length ? reasons : ['it’s hard to trace']).map((r) => r.toLowerCase()).join(', ');
const buildBody = () => `Hi ${first},\n\nThanks for your order! We’ve started on ${order.petName}’s game, but the photo we have is tricky to work from (${reasonText}).\n\nCould you send one more? Your private upload link drops the photo straight onto your order — no account needed:\n\n${link}\n\nOne clear, well-lit photo facing the camera is perfect. As soon as it lands we’ll get ${order.petName} into the game — about 24 hours.\n\n— The Sparkle Classic team`;
const [body, setBody] = React.useState(buildBody());
React.useEffect(() => { setBody(buildBody()); /* eslint-disable-next-line */ }, [reasons.join('|')]);
const sendRequest = () => { setComposer(false); setPhase('awaiting'); log('New-photo request emailed', 'mail'); };
const sendReminder = () => log('Reminder email sent', 'reload');
const markNoReply = () => { setPhase('noResponse'); onActivity && onActivity({ t: 'No reply after 48 hours', icon: 'clock', when: 'Just now' }); };
const markReceived = () => { setPhase('received'); onActivity && onActivity({ t: 'Customer uploaded a new photo', icon: 'image', when: 'Just now' }); };
const approve = () => { setPhase('approved'); log('New photo approved — back in build queue', 'check'); onResolve && onResolve('art'); };
const doRefund = () => { setRefund(false); setPhase('refunded'); log(`Refund issued (${order.amount})`, 'check'); onResolve && onResolve('refunded'); };
const stepIndex = { reviewing: 0, awaiting: 2, noResponse: 3, received: 2, approved: 1, refunded: 3 }[phase];
const copy = () => { setCopied(true); setTimeout(() => setCopied(false), 1600); };
return (
Action needed: photo
This photo isn’t usable yet ({order.actionReason}). Ask for a better one, then escalate to a refund if they don’t reply.