// MiPaghi · Beauty Corner — orchestrator // Scene da components/scenes-beauty.jsx const TWEAK_DEFAULTS_B = /*EDITMODE-BEGIN*/{ "showBackdrop": true, "showSidePanel": true }/*EDITMODE-END*/; const SCENE_FLOW_B = [ { id: 'auth', short: 'Login', label: 'Autenticazione addetta · store + PIN' }, { id: 'corner', short: 'Corner', label: 'Dashboard iniziativa · nuova vendita' }, { id: 'catalog', short: 'Catalogo', label: 'Prodotti corner + bundle' }, { id: 'livephoto', short: 'Foto live', label: 'Prodotto fuori corner' }, { id: 'cart', short: 'Carrello', label: 'Omaggio a soglia · promo iniziativa' }, { id: 'delivery', short: 'Consegna', label: 'Ritiro al corner / spedizione' }, { id: 'payment', short: 'Pagamento', label: 'Carta, bonifico, BNPL' }, { id: 'share', short: 'Link', label: 'Dati cliente · invio link' }, { id: 'customer', short: 'Cliente', label: 'Esperienza cliente' }, { id: 'backoffice',short: 'Backoffice', label: 'Report per store e addetta' }, ]; const SIDE_COPY_B = { auth: { eyebrow: '01 · Autenticazione', title: 'Ogni vendita ha un volto e uno store.', body: 'L\u2019addetta si autentica con il proprio profilo e PIN. MiPaghi traccia venduto, store e venditrice: base per performance e reportistica filtrata.', }, corner: { eyebrow: '02 · Il corner co-marketing', title: 'Uno stand brandizzato, uno strumento di vendita.', body: 'Iniziativa co-marketing LUMÉA Paris × MiPaghi: corner dedicato in-store, promo esclusive, omaggi a soglia. La vendita parte da qui — cliente al corner o remota.', }, catalog: { eyebrow: '03 · Catalogo corner', title: 'Solari, creme, profumi e bundle pronti al tap.', body: 'Il corner ha un catalogo pre-caricato: prodotti singoli e bundle con omaggio. Per articoli fuori corner resta la foto live.', }, livephoto: { eyebrow: '04 · Foto live', title: 'Fuori catalogo? Scatta e vendi.', body: 'La cliente chiede un prodotto non a scaffale del corner: foto, nome, prezzo. La riga ordine nasce comunque in pochi secondi.', }, cart: { eyebrow: '05 · Carrello', title: 'Bundle, omaggi a soglia, promo iniziativa.', body: 'Superata la soglia scatta l\u2019omaggio; la promo \u221220% sui solari si applica con un tap. Meccaniche promozionali visibili e tracciate.', }, delivery: { eyebrow: '06 · Consegna', title: 'Cliente al corner o a casa.', body: 'Ritiro immediato al corner oppure spedizione a domicilio per la clientela remota intercettata via social e WhatsApp.', }, payment: { eyebrow: '07 · Pagamento', title: 'Carta, bonifico o 3 rate.', body: 'Il metodo viene proposto nel link. Il BNPL \u00e8 una scelta in pi\u00f9 per lo scontrino medio alto \u2014 profumi e routine complete.', }, share: { eyebrow: '08 · Invio link', title: 'L\u2019ordine viaggia via WhatsApp, email o SMS.', body: 'Dati cliente facoltativi, link generato e tracciato su store e addetta. La vendita si chiude anche a distanza.', }, customer: { eyebrow: '09 · Esperienza cliente', title: 'La cliente conferma dal proprio telefono.', body: 'Riepilogo con promo e omaggio ben visibili, pagamento in 30 secondi. La conferma rimbalza sul backoffice.', }, backoffice: { eyebrow: '10 · Backoffice · solo admin', title: 'Il controllo è dell\u2019amministratore.', body: 'Report filtrati per store e per addetta, riservati al responsabile dell\u2019iniziativa. Ogni addetta vede solo le proprie vendite: qui l\u2019admin legge le performance complessive del co-marketing.', }, }; function AppBeauty() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS_B); const [scene, setScene] = React.useState('auth'); const [staff, setStaff] = React.useState(null); const [store, setStore] = React.useState(null); const [saleMode, setSaleMode] = React.useState('local'); // local | remote const [cart, setCart] = React.useState([]); const [checkout, setCheckout] = React.useState({ delivery: null, shippingCost: 0, promoVal: 0, promoOn: true, gift: false, total: 0, totalAfterPromo: 0 }); const [payment, setPayment] = React.useState(null); const [customer, setCustomer] = React.useState(null); const [channel, setChannel] = React.useState(null); const state = { scene, staff, store, saleMode, cart, checkout, payment, customer, channel }; const order = SCENE_FLOW_B.map(s => s.id); const ensureDefaults = (target) => { const i = order.indexOf(target); if (i >= order.indexOf('corner') && !staff) { setStaff(STAFF_B[0]); setStore(STORES_B[0]); } if (i >= order.indexOf('cart') && cart.length === 0 && target !== 'catalog' && target !== 'livephoto') { setCart([ { id: 'kitsolari', name: CATB.kitsolari.name, price: CATB.kitsolari.price }, { id: 'parfum', name: CATB.parfum.name, price: CATB.parfum.price }, ]); } if (i >= order.indexOf('delivery') && (!checkout.delivery || checkout.total === 0)) { const subtotal = (cart.length ? cart : [ { id: 'kitsolari', price: CATB.kitsolari.price }, { id: 'parfum', price: CATB.parfum.price }, ]).reduce((s,l)=>s+l.price,0); const promoVal = CATB.kitsolari.price * 0.20; const after = subtotal - promoVal; setCheckout({ delivery: 'pickup', shippingCost: 0, promoOn: true, promoVal, gift: after >= GIFT_THRESHOLD_B, total: after, totalAfterPromo: after }); } if (i >= order.indexOf('share') && !payment) setPayment('bnpl'); if (i >= order.indexOf('customer') && (!customer || !channel)) { if (!customer) setCustomer({ first: 'Sofia', last: 'Greco', email: 'sofia.greco@email.it', phone: '+39 340 9876543' }); if (!channel) setChannel('wa'); } }; const actions = { login: (st, sto) => { setStaff(st); setStore(sto); setScene('corner'); }, startSale: (mode) => { setSaleMode(mode); setScene('catalog'); }, pickItem: (id) => { const it = CATB[id]; setCart(c => [...c, { id: it.id, name: it.name, price: it.price }]); }, toLivePhoto: () => setScene('livephoto'), addCustomItem: (name, price) => { setCart(c => [...c, { id: 'custom-' + Date.now(), name, price }]); setScene('cart'); }, toCart: () => setScene('cart'), addAnother: () => setScene('catalog'), toDelivery: (info) => { setCheckout(k => ({ ...k, ...info })); setScene('delivery'); }, toPayment: (info) => { setCheckout(k => ({ ...k, ...info })); setScene('payment'); }, toShare: (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: () => { setStaff(null); setStore(null); setSaleMode('local'); setCart([]); setCheckout({ delivery: null, shippingCost: 0, promoVal: 0, promoOn: true, gift: false, total: 0, totalAfterPromo: 0 }); setPayment(null); setCustomer(null); setChannel(null); setScene('auth'); }, jumpTo: (id) => { ensureDefaults(id); setScene(id); }, }; let SceneEl = null; switch (scene) { case 'auth': SceneEl = ; break; case 'corner': SceneEl = ; break; case 'catalog': SceneEl = ; break; case 'livephoto': SceneEl = ; break; case 'cart': SceneEl = ; break; case 'delivery': SceneEl = ; break; case 'payment': SceneEl = ; break; case 'share': SceneEl = ; break; case 'customer': SceneEl = ; break; case 'backoffice': SceneEl = ; break; default: SceneEl = ; } const stepIndex = Math.max(0, SCENE_FLOW_B.findIndex(s => s.id === scene)); const isCustomer = scene === 'customer'; const copy = SIDE_COPY_B[scene]; const sceneNum = stepIndex + 1; // Ambientazioni stilizzate beauty (in attesa delle foto reali): // vendita = interno profumeria con stand brand; backoffice = ufficio responsabile beauty const beautyAmbience = ` radial-gradient(700px 420px at 78% 18%, rgba(200,110,138,.45), transparent 60%), radial-gradient(560px 380px at 15% 85%, rgba(201,162,75,.35), transparent 60%), linear-gradient(165deg, #331B2A 0%, #14384F 62%, #0E2A3D 100%)`; const adminAmbience = ` radial-gradient(700px 420px at 80% 15%, rgba(201,162,75,.30), transparent 60%), radial-gradient(500px 360px at 12% 88%, rgba(200,110,138,.22), transparent 60%), linear-gradient(165deg, #14384F 0%, #0E2A3D 85%)`; const asideBg = sceneNum === 10 ? adminAmbience : beautyAmbience; return (
{t.showSidePanel && ( )}
{t.showBackdrop && }
{(() => { const fullBleed = scene === 'livephoto'; return (
{SceneEl}
); })()}
{isCustomer ? 'Smartphone cliente' : 'Smartphone addetta'}
setTweak('showBackdrop', v)}/> setTweak('showSidePanel', v)}/> ({ value: s.id, label: `${String(i+1).padStart(2,'0')} · ${s.short}` }))} onChange={v => actions.jumpTo(v)} /> { actions.jumpTo('payment'); }}/> { actions.jumpTo('backoffice'); }}/>
); } // Backdrop sfumato dietro al telefono (stessa ambientazione del pannello) function BeautyBackdrop({ bg }) { return (
); } ReactDOM.createRoot(document.getElementById('root')).render();