// MiPaghi storyboard app — orchestrates scenes inside an iPhone frame on a // retail-context backdrop, with a left side panel narrating each scene. const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "#1E78C8", "showBackdrop": true, "showSidePanel": true }/*EDITMODE-END*/; // Scene flow — 9 scenes total const SCENE_FLOW = [ { id: 'intro', short: 'Intro', label: 'Camera live · introduzione' }, { id: 'pick', short: 'Scelta', label: 'Scelta del prodotto' }, { id: 'capture', short: 'Foto+Prezzo', label: 'Scatto, riconoscimento, prezzo' }, { id: 'cart', short: 'Carrello', label: 'Aggiungi o concludi' }, { id: 'checkout', short: 'Checkout', label: 'Consegna, sconto, totale' }, { id: 'payment', short: 'Pagamento', label: 'Standard o BNPL' }, { id: 'share', short: 'Cliente+Link', label: 'Dati cliente · invia link' }, { id: 'customer', short: 'Esp. Cliente', label: 'Esperienza lato cliente' }, { id: 'backoffice',short: 'Backoffice', label: 'Dashboard ordini' }, ]; const SIDE_COPY = { intro: { eyebrow: '01 · Contesto', title: 'Il punto vendita diventa un terminale d\u2019ordine.', body: 'In boutique, il cliente è interessato ma non davanti a un checkout. MiPaghi trasforma lo smartphone del venditore in uno strumento di acquisizione: scatta, prezza, condividi.', }, pick: { eyebrow: '02 · Selezione', title: 'L\u2019assistente avvia l\u2019ordine con un tap.', body: 'Tre prodotti rappresentativi del catalogo. Ogni card è una riga ordine pronta ad essere acquisita: foto e prezzo digitati direttamente.', }, capture: { eyebrow: '03 · Acquisizione', title: 'Foto, riconoscimento, prezzo manuale.', body: 'Niente catalogo da consultare. L\u2019assistente scatta una foto reale del prodotto in mano al cliente, riconosce l\u2019articolo via AI e digita il prezzo concordato.', }, cart: { eyebrow: '04 · Carrello', title: 'L\u2019ordine si compone in tempo reale.', body: 'L\u2019assistente può aggiungere altri articoli senza interrompere la trattativa. Il totale è sempre visibile e tracciabile.', }, checkout: { eyebrow: '05 · Checkout', title: 'Condizioni chiare, totale aggiornato.', body: 'Ritiro o spedizione (con costo digitato dall\u2019assistente), sconto in % o in valore. L\u2019accordo informale diventa una transazione strutturata.', }, payment: { eyebrow: '06 · Pagamento', title: 'Il momento BNPL.', body: 'L\u2019ordine esiste, è strutturato, è digitale. Solo ora il pagamento rateale si innesta come scelta naturale del cliente, accanto a carta e bonifico.', }, share: { eyebrow: '07 · Dati cliente · Link', title: 'L\u2019assistente compila e invia il link.', body: 'Dati anagrafici, generazione del link MiPaghi, scelta del canale di invio (WhatsApp, email, SMS).', }, customer: { eyebrow: '08 · Esperienza cliente', title: 'Il cliente conferma dal proprio dispositivo.', body: 'Riceve il link, apre il riepilogo, paga. La conferma rimbalza in tempo reale sul backoffice.', }, backoffice: { eyebrow: '09 · Backoffice', title: 'L\u2019ordine entra nello storico.', body: 'Dashboard ordini, stati pagamento, performance per operatore. Niente CSV, niente fogli paralleli.', }, }; function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [scene, setScene] = React.useState('intro'); const [cart, setCart] = React.useState([]); const [pendingProduct, setPendingProduct] = React.useState(null); const [checkout, setCheckout] = React.useState({ delivery: null, shippingCost: 0, discount: 0, total: 0 }); const [payment, setPayment] = React.useState(null); const [customer, setCustomer] = React.useState(null); const [channel, setChannel] = React.useState(null); const state = { scene, cart, pendingProduct, checkout, payment, customer, channel }; const order = ['intro','pick','capture','cart','checkout','payment','share','customer','backoffice']; // Default state for direct scene jumps (so each scene is self-sufficient) const ensureDefaults = (target) => { const i = order.indexOf(target); let nextCart = cart, nextPending = pendingProduct, nextCheckout = checkout, nextPayment = payment, nextCustomer = customer, nextChannel = channel; // Capture needs a pending product if (target === 'capture' && !nextPending) { nextPending = 'bag'; setPendingProduct('bag'); } // Scenes from cart onward need a populated cart if (i >= order.indexOf('cart') && nextCart.length === 0) { nextCart = [ { id: 'bag', name: PRODUCTS.bag.name, price: PRODUCTS.bag.price }, { id: 'shoe', name: PRODUCTS.shoe.name, price: PRODUCTS.shoe.price }, ]; setCart(nextCart); } // Scenes from payment onward need a finalized checkout if (i >= order.indexOf('payment') && (!nextCheckout.delivery || nextCheckout.total === 0)) { const subtotal = nextCart.reduce((s, l) => s + l.price, 0); nextCheckout = { delivery: 'ship', shippingCost: 9.90, discount: 0, total: subtotal + 9.90 }; setCheckout(nextCheckout); } // Scenes from share onward need a payment method if (i >= order.indexOf('share') && !nextPayment) { nextPayment = 'bnpl'; setPayment('bnpl'); } // Scenes from customer onward need customer + channel if (i >= order.indexOf('customer') && (!nextCustomer || !nextChannel)) { if (!nextCustomer) { nextCustomer = { first: 'Giulia', last: 'Bianchi', addr: 'Via Brera 12', city: 'Milano', cap: '20121', email: 'giulia.bianchi@email.it', phone: '+39 333 1234567' }; setCustomer(nextCustomer); } if (!nextChannel) { nextChannel = 'wa'; setChannel('wa'); } } }; const actions = { next: () => setScene('pick'), pickProduct: (id) => { setPendingProduct(id); setScene('capture'); }, confirmPrice: (price, meta) => { const p = PRODUCTS[pendingProduct]; setCart(c => [...c, { id: p.id, name: p.name, price, ...(meta || {}) }]); setPendingProduct(null); setScene('cart'); }, addAnother: () => setScene('pick'), toCart: () => setScene('cart'), toCheckout: () => setScene('checkout'), toPayment: (info) => { setCheckout(info); setScene('payment'); }, toCustomerData: (method) => { setPayment(method); setScene('share'); }, sendLink: (ch, cust) => { setChannel(ch); setCustomer(cust); setScene('customer'); }, toBackoffice: () => setScene('backoffice'), back: () => { const i = order.indexOf(scene); if (i > 0) setScene(order[i - 1]); }, restart: () => { setCart([]); setPendingProduct(null); setCheckout({ delivery: null, shippingCost: 0, discount: 0, total: 0 }); setPayment(null); setCustomer(null); setChannel(null); setScene('intro'); }, jumpTo: (id) => { ensureDefaults(id); setScene(id); }, }; // Build the active scene component let SceneEl = null; switch (scene) { case 'intro': SceneEl = ; break; case 'pick': SceneEl = ; break; case 'capture': SceneEl = ; break; case 'cart': SceneEl = ; break; case 'checkout': SceneEl = ; break; case 'payment': SceneEl = ; break; case 'share': SceneEl = ; break; case 'customer': SceneEl = ; break; case 'backoffice': SceneEl = ; break; default: SceneEl = ; } const copy = SIDE_COPY[scene]; const stepIndex = Math.max(0, SCENE_FLOW.findIndex(s => s.id === scene)); const isCustomer = scene === 'customer'; return (
{t.showSidePanel && (() => { // Background swap based on scene index (1-based human numbering) // Scenes 6 (payment), 7 (share), 8 (customer) → customer POV // Scene 9 (backoffice) → manager at desk // Others → store interior const sceneNum = stepIndex + 1; const bgImage = sceneNum === 9 ? 'assets/manager-bg.jpg' : (sceneNum >= 6 && sceneNum <= 8) ? 'assets/customer-bg.jpg' : 'assets/store-bg.jpg'; return ( ); })()}
{t.showBackdrop && }
{(() => { const fullBleed = scene === 'intro' || scene === 'capture'; return (
{SceneEl}
); })()}
{isCustomer ? 'Smartphone cliente' : 'Smartphone assistente'}
setTweak('showBackdrop', v)}/> setTweak('showSidePanel', v)}/> ({ value: s.id, label: `${String(i+1).padStart(2,'0')} · ${s.short}` }))} onChange={v => actions.jumpTo(v)} /> { setCart([ { id: 'bag', name: PRODUCTS.bag.name, price: PRODUCTS.bag.price }, { id: 'shoe', name: PRODUCTS.shoe.name, price: PRODUCTS.shoe.price }, ]); setCheckout({ delivery: 'ship', shippingCost: 9.90, discount: 31.80, total: PRODUCTS.bag.price + PRODUCTS.shoe.price + 9.90 - 31.80 }); setScene('payment'); }}/> { setCart([ { id: 'bag', name: PRODUCTS.bag.name, price: PRODUCTS.bag.price }, { id: 'shoe', name: PRODUCTS.shoe.name, price: PRODUCTS.shoe.price }, ]); setCheckout({ delivery: 'ship', shippingCost: 9.90, discount: 31.80, total: PRODUCTS.bag.price + PRODUCTS.shoe.price + 9.90 - 31.80 }); setPayment('bnpl'); setCustomer({ first: 'Giulia', last: 'Bianchi', addr: 'Via Brera 12', city: 'Milano', cap: '20121', email: 'giulia.bianchi@email.it', phone: '+39 333 1234567' }); setChannel('wa'); setScene('backoffice'); }}/>
); } // Boutique backdrop using the real store image, blurred for the right pane. // Swaps to the customer or manager photo on later scenes for narrative coherence. function BoutiqueBackdrop({ sceneNum = 1 }) { const bg = sceneNum === 9 ? 'assets/manager-bg.jpg' : (sceneNum >= 6 && sceneNum <= 8) ? 'assets/customer-bg.jpg' : 'assets/store-bg.jpg'; return (
{/* Soft halo behind the device */}
); } ReactDOM.createRoot(document.getElementById('root')).render();