// Scenes for the MiPaghi storyboard — realistic version.
// Real product photos, no stylized icons; assistant-driven order creation; new scenes.
const PRODUCTS = {
bag: { id: 'bag', name: 'Borsa elegante', sku: 'BG-1245', sub: 'Pelle nera · tracolla', price: 189.00, photo: 'assets/bag.jpg' },
shoe: { id: 'shoe', name: 'Sneaker nera', sku: 'SK-0042', sub: 'Pelle · taglia 42', price: 129.00, photo: 'assets/shoe.jpg' },
shirt: { id: 'shirt', name: 'T-shirt cotone', sku: 'TS-0301', sub: 'Cotone organico · M', price: 79.00, photo: 'assets/shirt.jpg' },
};
const fmt = (n) => n.toLocaleString('it-IT', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
const eur = (n) => `€ ${fmt(n)}`;
// Realistic product photo. Default `contain` so we don't zoom into the image.
function ProductPhoto({ product, size = 120, radius = 12, fit = 'contain' }) {
return (
);
}
// App chrome
function AppChrome({ title = 'Nuovo ordine', back, right, sub }) {
return (
{back ? (
) : (
)}
{title}
{sub && {sub} }
{right}
);
}
function PrimaryBtn({ children, onClick, full = true, icon, secondary = false, disabled }) {
return (
!disabled && (e.currentTarget.style.transform = 'scale(.98)')}
onMouseUp={e => e.currentTarget.style.transform = 'scale(1)'}
onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}>
{children}{icon}
);
}
function SectionLabel({ children, style }) {
return {children}
;
}
// ─────────────────────────────────────────────────────────────
// SCENE 1 — Intro: camera-live preview rotating through products
// ─────────────────────────────────────────────────────────────
function Scene0_Intro({ actions }) {
const products = Object.values(PRODUCTS);
const [idx, setIdx] = React.useState(0);
React.useEffect(() => {
const t = setInterval(() => setIdx(i => (i + 1) % products.length), 1800);
return () => clearInterval(t);
}, []);
const current = products[idx];
return (
{/* status bar already in iOS frame; here we just show the camera live UI */}
{/* Camera viewfinder with the product */}
{/* viewfinder corners */}
{[
{ top: 100, left: 18, br: '14px 0 0 0' },
{ top: 100, right: 18, br: '0 14px 0 0' },
{ bottom: 160, left: 18, br: '0 0 0 14px' },
{ bottom: 160, right: 18, br: '0 0 14px 0' },
].map((s, i) => (
))}
{/* Top label */}
{/* Mode selector (Foto/Video) */}
Foto
Video
{/* Shutter */}
{/* Bottom CTA overlay — sticks above the home indicator */}
s+l.price,0))}`}
back={state.cart.length > 0 ? actions.back : null}
/>
{state.cart.length === 0 ? 'Quale prodotto vuole il cliente?' : 'Cosa aggiungi all\u2019ordine?'}
Scatta una foto per iniziare la riga ordine.
{remaining.map((p, i) => (
actions.pickProduct(p.id)} style={{
border: '1px solid var(--line-2)', background: '#fff', borderRadius: 14, padding: 10,
display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer', textAlign: 'left',
fontFamily: 'inherit',
animation: `fadeIn .25s ${i*0.05}s both`,
transition: 'border-color .15s, box-shadow .15s',
}}
onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--blue)'; e.currentTarget.style.boxShadow = '0 4px 14px rgba(14,42,61,.06)'; }}
onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--line-2)'; e.currentTarget.style.boxShadow = 'none'; }}>
Scatta
))}
{state.cart.length > 0 && (
Vai al carrello
)}
);
}
// ─────────────────────────────────────────────────────────────
// SCENE 3 — Capture: shutter → preview → form with typing
// ─────────────────────────────────────────────────────────────
function Scene2_Capture({ state, actions }) {
const product = PRODUCTS[state.pendingProduct];
// phases: framing → flash → preview → form (framing waits for user tap)
const isFollowup = state.cart.length > 0;
const [phase, setPhase] = React.useState('framing');
const [name, setName] = React.useState('');
const [desc, setDesc] = React.useState('');
const [price, setPrice] = React.useState('');
const [note, setNote] = React.useState('');
// After user taps shutter, run flash → preview → form sequence
const triggerShutter = () => {
if (phase !== 'framing') return;
setPhase('flash');
setTimeout(() => setPhase('preview'), 300);
setTimeout(() => setPhase('form'), 1000);
};
// Typing helper: types target into setter at given speed
const typeInto = (target, setter, speed = 35, startDelay = 0) => {
setTimeout(() => {
let i = 0;
const tick = () => {
i += 1;
setter(target.slice(0, i));
if (i < target.length) setTimeout(tick, speed);
};
tick();
}, startDelay);
};
React.useEffect(() => {
if (phase !== 'form') return;
// For follow-ups, do everything quickly and auto-advance
const speed = isFollowup ? 18 : 32;
const baseDelay = isFollowup ? 200 : 400;
typeInto(product.name, setName, speed, baseDelay);
typeInto(product.sub, setDesc, speed, baseDelay + product.name.length * speed + 200);
const priceStr = product.price.toFixed(2).replace('.', ',');
typeInto(priceStr, setPrice, speed + 10, baseDelay + product.name.length * speed + product.sub.length * speed + 500);
if (isFollowup) {
// auto advance after typing
const total = baseDelay + (product.name.length + product.sub.length + priceStr.length) * speed + 1200;
setTimeout(() => actions.confirmPrice(product.price, { name: product.name, desc: product.sub, note: '' }), total);
}
}, [phase]);
const priceComplete = price.replace(',', '.') === product.price.toFixed(2);
if (phase !== 'form') {
return (
{/* Hint to tap shutter */}
{phase === 'framing' && (
Tocca il pulsante per scattare
)}
{/* viewfinder corners */}
{phase === 'framing' && [
{ top: 120, left: 18 }, { top: 120, right: 18 }, { bottom: 160, left: 18 }, { bottom: 160, right: 18 },
].map((s, i) => (
))}
{/* Tappable shutter button */}
{phase === 'flash' && (
)}
{phase === 'preview' && (
Foto acquisita
)}
);
}
// FORM phase
return (
setPhase('framing')} style={{
border: 'none', background: 'transparent', color: 'var(--ink-3)', fontSize: 11,
fontWeight: 600, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4, fontFamily: 'inherit',
}}> Rifai}/>
{/* Photo card */}
SKU · {product.sku}
Riconosciuto da AI
setPhase('framing')} style={{
marginTop: 6, fontSize: 11, color: 'var(--blue)', fontWeight: 700,
border: 'none', background: 'transparent', padding: 0, cursor: 'pointer', fontFamily: 'inherit',
}}>Rifai foto
{/* Name */}
{name}{name.length < product.name.length &&
{/* Description */}
{desc}{desc.length > 0 && desc.length < product.sub.length &&
{/* Price - manual */}
€
{price || 0,00 }
{!priceComplete && price.length > 0 &&
{/* Note */}
actions.confirmPrice(product.price, { name: product.name, desc: product.sub, note })} disabled={!priceComplete}
icon={}>
Aggiungi al carrello
);
}
function Field({ label, hint, children }) {
return (
{label}
{children}
{hint &&
{hint}
}
);
}
function Caret() {
return
L'ordine si compone in tempo reale
{state.cart.map((line, i) => (
{line.name}
SKU · {PRODUCTS[line.id].sku}
{eur(line.price)}
))}
}>Completa la vendita
{remaining > 0 && (
}>
Aggiungi un altro prodotto
)}
);
}
// ─────────────────────────────────────────────────────────────
// SCENE 5 — Checkout: manual shipping, % + € discount
// ─────────────────────────────────────────────────────────────
function Scene6_Checkout({ state, actions }) {
const [delivery, setDelivery] = React.useState(null);
const [shippingCostStr, setShippingCostStr] = React.useState('');
const [discPctStr, setDiscPctStr] = React.useState('');
const [discValStr, setDiscValStr] = React.useState('');
const subtotal = state.cart.reduce((s, l) => s + l.price, 0);
const shippingCost = parseFloat(shippingCostStr.replace(',', '.')) || 0;
const discPct = parseFloat(discPctStr.replace(',', '.')) || 0;
const discVal = parseFloat(discValStr.replace(',', '.')) || 0;
const totalDiscount = (subtotal * discPct / 100) + discVal;
const total = Math.max(0, subtotal - totalDiscount + shippingCost);
const canProceed = delivery && (delivery !== 'ship' || shippingCost > 0);
// When user picks a percentage, sync the value display; when they type value, leave pct alone
const onPctChange = (v) => {
setDiscPctStr(v);
setDiscValStr('');
};
return (
Articoli
{state.cart.map((line, i) => (
{line.name}
SKU · {PRODUCTS[line.id].sku}
{eur(line.price)}
))}
Consegna
setDelivery('pickup')} Icon={IconStore} title="Ritiro in negozio" meta="Gratuito"/>
setDelivery('ship')} Icon={IconTruck} title="Spedizione" meta="2–3 giorni"/>
{delivery === 'ship' && (
)}
Sconto
{setDiscValStr(v); setDiscPctStr('');}} placeholder="0,00"/>
{/* Totals */}
{totalDiscount > 0 && 0 ? ` ${discPct}%` : ''}`} value={`− ${eur(totalDiscount)}`} accent="#9FE6C2"/>}
{delivery === 'ship' && shippingCost > 0 && }
{delivery === 'pickup' &&
actions.toPayment({ delivery, shippingCost, discount: totalDiscount, total })} disabled={!canProceed} icon={}>
Procedi al pagamento
);
}
function InputRow({ label, prefix, suffix, value, onChange, placeholder }) {
return (
);
}
function DeliveryOption({ active, onClick, Icon, title, meta }) {
return (
{title}
{meta}
);
}
function TotalRow({ label, value, muted, accent }) {
return (
{label}
{value}
);
}
// ─────────────────────────────────────────────────────────────
// SCENE 6 — Payment: brighter BNPL
// ─────────────────────────────────────────────────────────────
function Scene9_Payment({ state, actions }) {
const [method, setMethod] = React.useState(null);
const total = state.checkout.total;
const installment = total / 3;
return (
Scegli il metodo di pagamento
Sarà disponibile per il cliente nel link.
Standard
setMethod('card')} Icon={IconCard} title="Carta di credito" sub="Visa · Mastercard · Amex"/>
setMethod('bank')} Icon={IconBank} title="Bonifico bancario" sub="SEPA istantaneo"/>
Pagamento flessibile
setMethod('bnpl')} style={{
position: 'relative', width: '100%',
border: '1.5px solid', borderColor: method==='bnpl' ? 'var(--blue)' : 'rgba(30,120,200,.4)',
background: method==='bnpl'
? 'linear-gradient(135deg, #E8F1FA 0%, #D2E5F4 100%)'
: 'linear-gradient(135deg, #F2F7FC 0%, #E8F1FA 100%)',
color: 'var(--ink)',
borderRadius: 14, padding: 14, cursor: 'pointer', textAlign: 'left',
fontFamily: 'inherit', overflow: 'hidden',
boxShadow: method==='bnpl' ? '0 6px 20px rgba(30,120,200,.20)' : '0 2px 8px rgba(30,120,200,.08)',
transition: 'all .2s',
}}>
3 × {eur(installment)} · senza interessi
{method==='bnpl' && }
{[0,1,2].map(i => (
{i===0 ? 'Oggi' : `${i*30} gg`}
{eur(installment)}
))}
actions.toCustomerData(method)} disabled={!method} icon={}>
Conferma metodo
);
}
function PaymentOption({ active, onClick, Icon, title, sub }) {
return (
{active && }
);
}
// ─────────────────────────────────────────────────────────────
// SCENE 7 — Customer data + link generation + channel choice
// ─────────────────────────────────────────────────────────────
function Scene7_Share({ state, actions }) {
const [step, setStep] = React.useState('data'); // data → link → sent
const [customer, setCustomer] = React.useState({ first: '', last: '', addr: '', city: '', cap: '', email: '', phone: '' });
const [channel, setChannel] = React.useState(null);
const orderId = '8F3KD9';
const linkUrl = `mipaghi.it/ordine/${orderId}`;
const set = (k) => (e) => setCustomer(c => ({ ...c, [k]: e.target.value }));
// Tutti i campi sono FACOLTATIVI: il link può essere generato anche con form vuoto.
// Demo helper: prefill
const prefill = () => setCustomer({
first: 'Giulia', last: 'Bianchi', addr: 'Via Brera 12', city: 'Milano', cap: '20121',
email: 'giulia.bianchi@email.it', phone: '+39 333 1234567',
});
if (step === 'data') {
return (
Compila demo}/>
Inserisci i dati del cliente per personalizzare il link e la spedizione, oppure procedi senza compilare nulla — sono tutti opzionali.
setStep('link')} icon={}>
Genera link ordine
);
}
if (step === 'link') {
return (
setStep('data')}/>
{/* Link card */}
Link generato
{linkUrl}
Copia link
{state.payment === 'bnpl' ? <> BNPL :
state.payment === 'card' ? <> Carta : <> Bonifico}
Destinatario
{customer.first || customer.last
?
{[customer.first, customer.last].filter(Boolean).join(' ')}
:
Cliente anonimo
}
{[customer.email, customer.phone].filter(Boolean).join(' · ') || 'Nessun contatto inserito — invia il link manualmente'}
Come vuoi inviarlo?
customer.phone && setChannel('wa')}/>
customer.email && setChannel('email')}/>
customer.phone && setChannel('sms')}/>
setChannel('copy')}/>
actions.sendLink(channel, customer)} disabled={!channel} icon={}>
Invia al cliente
);
}
}
function FormField({ label, value, onChange, placeholder, type = 'text', optional }) {
return (
);
}
function ChannelRow({ Icon, color, title, sub, active, onClick, disabled }) {
return (
{active && }
);
}
// ─────────────────────────────────────────────────────────────
// SCENE 8 — Customer experience (channel-specific)
// ─────────────────────────────────────────────────────────────
function Scene8_Customer({ state, actions }) {
const [view, setView] = React.useState('channel'); // channel → checkout → confirm
const ch = state.channel;
const installment = state.checkout.total / 3;
const orderId = '8F3KD9';
if (view === 'channel') {
return setView('checkout')} actions={actions}/>;
}
if (view === 'checkout') {
return setView('confirm')} actions={actions} onBack={() => setView('channel')}/>;
}
return actions.toBackoffice()}/>;
}
function CustomerChannel({ state, ch, orderId, onOpen, actions }) {
// WhatsApp (chat) | Email (inbox) | SMS (Messages)
if (ch === 'email') {
return (
Il tuo ordine è pronto
BS
Boutique Sienna
noreply@mipaghi.it · oggi, 14:32
Ciao {state.customer?.first || 'Giulia'},
mipaghi.it/ordine/{orderId}
Il link scade in 48 ore. Per qualsiasi domanda, rispondi a questa email.
);
}
if (ch === 'sms') {
return (
‹ Messaggi
BS
Boutique Sienna
Ciao {state.customer?.first || 'Giulia'}! Il tuo ordine è pronto.
mipaghi.it/ordine/{orderId}
Apri il link
);
}
// default WhatsApp
return (
Ciao {state.customer?.first || 'Giulia'}, ecco il riepilogo dei prodotti che hai scelto.
MiPaghi · Ordine
Riepilogo ordine #{orderId}
{state.cart.length} articoli · {eur(state.checkout.total)}
mipaghi.it/ordine/{orderId}
Apri il link
);
}
function CustomerCheckout({ state, orderId, onPay, actions, onBack }) {
const installment = state.checkout.total / 3;
return (
Boutique Sienna
vista cliente
Ordine #{orderId}
Conferma il tuo ordine
{state.cart.map((line, i) => (
{line.name}
{PRODUCTS[line.id].sub}
{eur(line.price)}
))}
{state.checkout.delivery === 'ship' && state.checkout.shippingCost > 0 && (
Spedizione {eur(state.checkout.shippingCost)}
)}
{state.checkout.delivery === 'pickup' && (
Ritiro in negozio Gratuito
)}
{state.checkout.discount > 0 && (
Sconto − {eur(state.checkout.discount)}
)}
Totale
{eur(state.checkout.total)}
{state.payment === 'bnpl' && (
{[0,1,2].map(i => (
{i===0 ? 'Oggi' : `${i*30} gg`}
{eur(installment)}
))}
)}
}>
{state.payment === 'bnpl' ? 'Paga ora la prima rata' : 'Paga ora'}
);
}
function CustomerConfirm({ state, installment, actions, onContinue }) {
return (
Pagamento confermato
{state.payment === 'bnpl'
? <>Prima rata di {eur(installment)} autorizzata. Le prossime in automatico.
: <>{eur(state.checkout.total)} incassati. Riconciliazione automatica nel backoffice.}
);
}
// ─────────────────────────────────────────────────────────────
// SCENE 9 — Backoffice dashboard (NEW)
// We render this directly into the device frame (looks like a tablet/phone backoffice app)
// ─────────────────────────────────────────────────────────────
function Scene9_Backoffice({ state, actions }) {
const [tab, setTab] = React.useState('orders');
const [dateFrom, setDateFrom] = React.useState('2026-05-01');
const [dateTo, setDateTo] = React.useState('2026-05-04');
const cust = state.customer || { first: 'Giulia', last: 'Bianchi' };
const orders = [
{ id: '8F3KD9', who: `${cust.first} ${cust.last}`, items: state.cart.length, total: state.checkout.total, status: 'paid', method: state.payment, when: 'Adesso', isCurrent: true },
{ id: '7A1MR2', who: 'Marco Rossi', items: 2, total: 248.00, status: 'paid', method: 'card', when: 'Oggi · 12:18' },
{ id: '6B9PN5', who: 'Elena Conti', items: 1, total: 79.00, status: 'pending', method: 'bnpl', when: 'Oggi · 11:02' },
{ id: '5K2WD1', who: 'Davide Ferri', items: 3, total: 412.50, status: 'paid', method: 'bank', when: 'Ieri · 18:44' },
{ id: '4H7TR8', who: 'Anna De Luca', items: 1, total: 189.00, status: 'expired', method: 'card', when: 'Ieri · 09:21' },
];
const totalToday = orders.filter(o => o.when.startsWith('Oggi') || o.isCurrent).reduce((s,o)=>s+o.total,0);
const paidCount = orders.filter(o => o.status === 'paid').length;
return (
{/* Tab bar with date range filter on the same line */}
{['orders','team'].map(t => (
setTab(t)} style={{
border: 'none', background: 'transparent', cursor: 'pointer', fontFamily: 'inherit',
padding: '10px 0', fontSize: 12, fontWeight: 700,
color: tab === t ? 'var(--ink)' : 'var(--ink-3)',
borderBottom: '2px solid', borderColor: tab === t ? 'var(--blue)' : 'transparent',
}}>{t === 'orders' ? 'Ordini' : 'Operatori'}
))}
{/* Date range — visible at all times */}
→
{tab === 'orders' && orders.map((o, i) => (
))}
{tab === 'team' && (
{[
{ name: 'Sara Marchetti', role: 'Senior assistant', orders: 12, value: 2840, on: true },
{ name: 'Luca Bianchi', role: 'Sales associate', orders: 7, value: 1620, on: true },
{ name: 'Chiara Romano', role: 'Sales associate', orders: 5, value: 980, on: false },
].map((p, i) => (
{p.name.split(' ').map(s => s[0]).join('')}
{p.name}
{p.on &&
{p.role} · {p.orders} ordini · {eur(p.value)}
))}
);
}
function Stat({ label, value, accent }) {
return (
);
}
// Compact date chip: shows DD/MM and toggles a hidden native date input on click
function DateChip({ value, onChange, label }) {
const ref = React.useRef(null);
const display = value ? (() => {
const [y,m,d] = value.split('-');
return `${d}/${m}`;
})() : '—';
const open = () => {
if (!ref.current) return;
if (typeof ref.current.showPicker === 'function') ref.current.showPicker();
else ref.current.click();
};
return (
{label}
{display}
);
}
function OrderRow({ o, index }) {
const statusColor = o.status === 'paid' ? 'var(--ok)' : o.status === 'pending' ? 'var(--warn)' : 'var(--ink-3)';
const statusLabel = o.status === 'paid' ? 'Pagato' : o.status === 'pending' ? 'In attesa' : 'Scaduto';
const methodLabel = o.method === 'bnpl' ? 'BNPL' : o.method === 'card' ? 'Carta' : 'Bonifico';
return (
{o.who}
{o.isCurrent && Nuovo }
#{o.id} · {o.items} {o.items === 1 ? 'articolo' : 'articoli'} · {methodLabel} · {o.when}
{eur(o.total)}
);
}
Object.assign(window, {
PRODUCTS, eur, fmt,
Scene0_Intro, Scene1_Pick, Scene2_Capture, Scene4_AddOrDone,
Scene6_Checkout, Scene9_Payment, Scene7_Share, Scene8_Customer, Scene9_Backoffice,
});