// Telegram Remote — animated iPhone 15 chat + printer mockup on the right. // Flow: tap Onayla → bot replies with "E-Fatura taslağı hazırlandı" + İmzala button // tap İmzala → bot shows e-fatura preview with Paylaş + Yazdır buttons // tap Yazdır → printer (right of phone) slowly extrudes a Turkish e-Arşiv fatura const SectionWrap = window.SectionWrap; const SectionHead = window.SectionHead; // ── Touch cursor: pulsing ring + white dot ── const TouchCursor = ({ show, x, y, tap }) => (
); const BotBubble = ({ children, visible, borderLeft }) => (
{children}
); const UserBubble = ({ children, visible }) => (
{children}
); // ── A4 e-Arşiv fatura, styled after the Bifamo reference ── // Designed at paper width 210 with aspectRatio 210:297 (A4). const FakeFatura = () => (
{/* TOP ROW: company / TC stamp / brand + QR */}
MODA TİCARET LİMİTED ŞİRKETİ
BAĞCILAR MAH. 120 SK. NO: 14
BAĞCILAR / İSTANBUL
Tel: 0212 555 00 00
Web: www.modaticaret.com
e-Posta: info@modaticaret.com
Vergi Dairesi: BAĞCILAR KURUMLAR
VKN: 1234567890
Ticaret Sicil No: 208761
MERSİS No: 1234567890004821
TC
e-Arşiv Fatura
{/* fake QR */}
{/* Signature + brand row */}
M. Demir
modaticaret
{/* SAYIN + data grid */}
SAYIN
Mehmet Yılmaz
Kadıköy Mah. Bahçe Cd. No:14
Kadıköy / İstanbul
e-Posta: mehmet.yilmaz@mail.com
TCKN: 12345678901
ETTN: 48291dbbb-ccf7-46b6-bba9-495a9b18e10f
{[ ['Tarih','17-04-2026'], ['Fatura No','EAA2026000048291'], ['Özelleştirme No','TR1.2'], ['Senaryo','EARSIVFATURA'], ['Fatura Tipi','SATIS'], ['Sipariş No','TY-48291'], ['Sipariş Tarihi','17-04-2026'], ['Son Ödeme Tarihi','17-04-2026'], ['Oluşma Zamanı','14:32:00'], ].map(([k,v],i,a) => (
{k}
{v}
))}
{/* Items table */} {['Sıra No','Mal/Hizmet','Açıklama','Miktar','Birim Fiyat','İskonto','Mal Tutar','KDV %','KDV Tutar'].map(h => ( ))}
{h}
1 T-Shirt Slim Fit M Siyah 1 Adet 290,83 TL 0,00 TL 290,83 TL %20,00 58,17 TL
{/* Totals block */}
{[ ['Mal Hizmet Toplam Tutarı','290,83 TL'], ['KDV Matrahı (%20,00)','290,83 TL'], ['Vergi Hariç Tutar','290,83 TL'], ['Hesaplanan KDV (%20,00)','58,17 TL'], ['Vergiler Dahil Toplam Tutar','349,00 TL'], ['Ödenecek Tutar','349,00 TL'], ].map(([k,v],i,a) => (
{k}:{v}
))}
{/* Gider pusulası + sebep kodu tabloları (simplified) */}
GİDER PUSULASI
{['Ürün Adı','Adet','Birim','KDV','Toplam','Sebep'].map(h => ( ))} {[0,1,2,3,4].map(i => ( {[0,1,2,3,4,5].map(j => ( ))} ))}
{h}
Sebep Kod Tablosu
{[ ['A','Beden olarak uygun değil'], ['B','Hatalı ürün gönderimi'], ['C','Ürün kalitesini beğenmedim'], ['D','Ürün deforme oldu'], ['E','Ürün sitede göründüğü gibi değil'], ['F','Defolu ürün gönderimi'], ['G','Siparişim geç gönderildi'], ].map(([k,v],i) => (
{k}
{v}
))}
{/* Footer Ad Soyad / Telefon / Adres / İade Nedeni */}
Ad Soyad :
Adres :
Telefon :
İmza :
İade Nedeni :
); // ── Printer mockup ── // printing prop has three states: false (idle), 'extruding' (paper emerges & stays), 'fading' (paper fades out) const PrinterMockup = ({ phase }) => { const extruded = phase === 'extruding' || phase === 'fading'; const fading = phase === 'fading'; // Paper dimensions: 210 wide (A4 ratio). We let it emerge ABOVE the printer freely. return (
{/* Mask: clips paper to the area ABOVE the printer slot. The printer body (slot lip + body + feet + floor shadow) is ~195px tall measured from the bottom of the container, so the slot line is at bottom ≈ 195 (slot lip top). Mask bottom sits at that slot line; anything that would render below is clipped. */}
{/* Printer body */}
{/* top slot lip */}
{/* main body */}
{/* LCD */}
ShopPanel Printer
{phase === 'extruding' ? '● yazdırıyor...' : phase === 'fading' ? '✓ tamamlandı' : '✓ hazır'}
{/* vents */}
{[0,1,2,3].map(i => (
))}
{/* button row */}
EPSON · LQ-2090
{['#FF6B00','#5de6ff','#a78bfa'].map((c,i) => (
))}
{/* feet */}
{/* floor shadow */}
); }; // ── The animated iPhone chat ── const AnimatedTelegramChat = () => { // Steps: // 0 = initial order bubble only // 2 = user "Onayla" bubble appears // 3 = bot "E-Fatura taslağı hazırlandı" + İmzala button // 5 = user "İmzala" bubble // 6 = bot e-fatura preview with Paylaş + Yazdır // 8 = user "Yazdır" bubble + printer starts printing const [step, setStep] = React.useState(0); const [cursor, setCursor] = React.useState({ show:false, x:180, y:360, tap:false }); const [tappedOnayla, setTappedOnayla] = React.useState(false); const [tappedImzala, setTappedImzala] = React.useState(false); const [tappedYazdir, setTappedYazdir] = React.useState(false); // printer phase: 'idle' | 'extruding' | 'fading' const [printerPhase, setPrinterPhase] = React.useState('idle'); const scrollRef = React.useRef(null); const onaylaRef = React.useRef(null); const imzalaRef = React.useRef(null); const yazdirRef = React.useRef(null); const phoneRef = React.useRef(null); const [isMobile, setIsMobile] = React.useState( typeof window !== 'undefined' && window.innerWidth < 768 ); React.useEffect(() => { const onResize = () => setIsMobile(window.innerWidth < 768); window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }, []); // On Mobile: scale phone + printer down so both fit side-by-side const scale = isMobile ? 0.52 : 1; const wrapperHeight = isMobile ? 700 * scale + 30 : 'auto'; // Compute cursor position inside the phone frame. // CRITICAL: getBoundingClientRect() returns TRANSFORMED dimensions. When the // parent is scaled, we must divide by scale to get back to the unscaled CSS // coordinate space used by the TouchCursor's position:absolute (left/top). const posOf = (ref) => { if (!ref.current || !phoneRef.current) return null; const b = ref.current.getBoundingClientRect(); const p = phoneRef.current.getBoundingClientRect(); const dx = (b.left - p.left) + b.width / 2; const dy = (b.top - p.top) + b.height / 2; return { x: dx / scale, y: dy / scale }; }; React.useEffect(() => { let timeouts = []; const push = (fn, t) => timeouts.push(setTimeout(fn, t)); const run = () => { // reset setStep(0); setTappedOnayla(false); setTappedImzala(false); setTappedYazdir(false); setPrinterPhase('idle'); setCursor({ show:false, x:180, y:360, tap:false }); // 0.9s: cursor appears near center-bottom push(() => setCursor({ show:true, x:100, y:380, tap:false }), 900); // 1.5s: glide to Onayla push(() => { const p = posOf(onaylaRef); if (p) setCursor({ show:true, x:p.x, y:p.y, tap:false }); }, 1500); // 2.4s: tap! push(() => { setCursor(c => ({ ...c, tap:true })); setTappedOnayla(true); }, 2400); // 2.7s: show user bubble, hide cursor push(() => { setStep(2); setCursor(c => ({ ...c, show:false, tap:false })); }, 2700); // 3.4s: bot reply (step 3) push(() => setStep(3), 3400); // 4.4s: cursor moves to İmzala push(() => { const p = posOf(imzalaRef); if (p) setCursor({ show:true, x:p.x, y:p.y, tap:false }); }, 4400); // 5.3s: tap İmzala push(() => { setCursor(c => ({ ...c, tap:true })); setTappedImzala(true); }, 5300); // 5.6s: user bubble push(() => { setStep(5); setCursor(c => ({ ...c, show:false, tap:false })); }, 5600); // 6.3s: bot e-fatura preview push(() => setStep(6), 6300); // 7.3s: cursor moves to Yazdır push(() => { const p = posOf(yazdirRef); if (p) setCursor({ show:true, x:p.x, y:p.y, tap:false }); }, 7300); // 8.2s: tap Yazdır push(() => { setCursor(c => ({ ...c, tap:true })); setTappedYazdir(true); }, 8200); // 8.5s: user bubble + printer begins extruding paper push(() => { setStep(8); setCursor(c => ({ ...c, show:false, tap:false })); setPrinterPhase('extruding'); }, 8500); // 13s: paper is fully out, hold briefly, then fade push(() => { setPrinterPhase('fading'); }, 13500); // 15s: reset paper (back to idle/hidden) so the next loop can extrude again push(() => { setPrinterPhase('idle'); }, 15000); // loop at 17s push(run, 17000); }; run(); return () => timeouts.forEach(clearTimeout); }, []); React.useEffect(() => { if (scrollRef.current) { scrollRef.current.scrollTo({ top: scrollRef.current.scrollHeight, behavior:'smooth' }); } }, [step]); return (
{/* iPhone */}
{/* Screen */}
{/* Dynamic island */}
{/* Status bar */}
14:32
{/* Chat header */}
◆
ShopPanel Bot
bot · çevrimiçi
{/* Chat scroll body */}
{/* Initial order — NO İmzala, only Onayla + Etiket + E-Fatura */}
YENİ SİPARİŞ · TRENDYOL
#TY-48291 · 349₺
T-Shirt Slim · M · Siyah
M. Yılmaz · İstanbul
14:32
 {step >= 2 && (
✓ Onayla
14:32 ✓✓
 )} {step >= 3 && (
✓ Sipariş onaylandı
✓ Etiket yazıcıya gönderildi
✓ E-Fatura taslağı hazırlandı
E-FATURA TASLAĞI
M. Yılmaz · 349,00₺
Alıcı ve tutar doğrulandı.
14:32
 )} {step >= 5 && (
✍ İmzala
14:32 ✓✓
 )} {step >= 6 && (
✓ E-FATURA İMZALANDI · GİB ONAYLI
E-ARŞİV FATURA #EAA…48291
M. Yılmaz · T-Shirt Slim · M
Ödenecek349,00 ₺
14:32
 )} {step >= 8 && (
🖨 Yazdır
14:32 ✓✓
 )}
{/* Home indicator */}
{/* Cursor */}
{/* Printer */}
); }; const TelegramRemoteSection = () => { const [isMobile, setIsMobile] = React.useState( typeof window !== 'undefined' && window.innerWidth < 768 ); React.useEffect(() => { const onResize = () => setIsMobile(window.innerWidth < 768); window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }, []); return (
{[ { t:'Tek sohbette: onay → imza → yazdırma zinciri.', i:'🔗' }, { t:'GİB e-Arşiv uyumu — taslak, imza, iletim otomatik.', i:'✍' }, { t:'Uzaktan yazdırma: mağaza içi yazıcılara anında kuyrukla.', i:'🖨' }, { t:'Mobil uygulama (iOS & Android · yakında) — aynı akış.', i:'📱' }, ].map((x,i) => (
{x.i}
{x.t}
))}
); }; window.TelegramRemoteSection = TelegramRemoteSection;