// Phone.jsx — phone-native UI components. // // These are SEPARATE components from the desktop equivalents, not // responsive variants. App.jsx swaps them in when viewport ≤ 760px so // every phone visitor gets a UI designed for a 360–414 px screen and // touch-first interaction. // // Shared with the desktop tree: // · Hooks (useAccount, useAllTiles, useCollectionsMeta, etc.) // · Server endpoints (no duplication) // · Tile data + collection metadata // // Phone-specific: // · Layouts (single-column, sticky bars, bottom-sheet drawers) // · Typography (smaller, denser) // · Interactions (touch swipe, no hover states, big tap targets) // // Components defined: // · PhoneHeader — sticky top bar (logo + cart/search/menu) // · PhoneFooter — minimal footer // · PhoneHome — landing page // · PhoneListing — collection / filter / grid // · PhoneProduct — product detail // · PhoneJournal — journal list + article view // · PhoneQuote — quote form // · PhoneAccount — favourites + profile const { useState, useEffect, useMemo, useRef } = React; // Bind dependencies once at module load. index.html guarantees these // scripts load before Phone.jsx (AccountStore + Collections + Journal // + Home all run their Object.assign(window, {…}) before this file // is even parsed). const useAccount = window.useAccount; const useAllTilesHook = window.useAllTilesHook; const useCollectionsMetaHook = window.useCollectionsMetaHook; const HERO_SLIDES_DATA = window.HERO_SLIDES || []; const ARTICLES_DATA = window.ARTICLES || []; // Live subscription that's safe to call from any component, regardless // of script load order. Always calls the same React hooks (useState + // useEffect) so the hook-order rule is never violated. If // Journal.jsx's articlesStore is available on the window, subscribes // to it; otherwise the initial state is whatever ARTICLES_DATA holds // and never updates — the page still renders. function usePhoneArticles() { const [list, setList] = useState(() => { const store = typeof window !== 'undefined' ? window.QW_articlesStore : null; return (store && Array.isArray(store.list) && store.list.length) ? store.list : ARTICLES_DATA; }); useEffect(() => { const store = typeof window !== 'undefined' ? window.QW_articlesStore : null; if (!store) return; const sync = () => setList([...store.list]); store.listeners.add(sync); sync(); return () => { store.listeners.delete(sync); }; }, []); return list; } const COLLECTIONS_DATA = window.COLLECTIONS || []; const SIDEBAR_SECTIONS_DATA = window.SIDEBAR_SECTIONS || []; const AXES_DATA = window.AXES || {}; const applySidebarFn = window.applySidebarFn || ((tiles) => tiles); const filterTilesFn = window.filterTilesFn || ((tiles) => tiles); const tileHasFn = window.tileHasFn || (() => false); const resolveFilterFn = window.resolveFilter || ((p) => p || { axis: 'all', value: '', label: 'All Tiles' }); // ─── Helpers ───────────────────────────────────────────────────────── // Read the first image from a tile that's safe to show as a hero/thumb. // Mirrors the storefront's imagesOf() but stays local so this file is // self-contained. function pSightImg(tile) { return (Array.isArray(tile?.sightImages) && tile.sightImages[0]) || tile?.img || ''; } function pGalleryImgs(tile){ return Array.isArray(tile?.galleryImages) ? tile.galleryImages : []; } function pColourImg(tile) { if (tile?.colourImage) return tile.colourImage; const g = pGalleryImgs(tile); return g[0] || pSightImg(tile); } function pFirst(t, key) { const a = t?.[key]; return Array.isArray(a) ? a[0] : null; } // ─── PhoneHeader ───────────────────────────────────────────────────── // Sticky top bar. Logo on the left, action icons on the right // (search + menu). Shrinks to ~56px tall. Background is white with // a slight backdrop blur so content scrolls underneath. function PhoneHeader({ navigate, onOpenSearch, onOpenCart, onOpenMenu }) { // Reads favourites count direct from the store so the badge stays // live without having to thread it down from App.jsx. const { favourites } = useAccount(); const favCount = favourites?.length || 0; return (
{/* Favourites / Selection — opens the same drawer used on desktop. Badge surfaces fav count so users always know how many tiles are sitting in their selection. */}
); } const pIconBtn = { width: '40px', height: '40px', background: 'none', border: 'none', padding: 0, cursor: 'pointer', color: 'var(--dark)', display: 'flex', alignItems: 'center', justifyContent: 'center', }; // ─── PhoneMenu ─────────────────────────────────────────────────────── // Slide-down full-screen menu triggered by the header's menu icon. function PhoneMenu({ open, onClose, navigate }) { const { favourites } = useAccount(); if (!open) return null; const go = (page, data) => { navigate(page, data); onClose(); }; const openSelection = () => { onClose(); if (typeof window.QW_openCart === 'function') window.QW_openCart(); }; return (
Menu
); } // ─── PhoneFooter ───────────────────────────────────────────────────── // Single-column minimal footer below every phone page. function PhoneFooter({ navigate }) { return ( ); } // ─── PhonePageShell ────────────────────────────────────────────────── // Wraps every phone page with the header, the menu drawer, and the // footer. Keeps each PhoneXxx component focused on its own content. function PhonePageShell({ navigate, children, hideFooter, hideHeader }) { const [menuOpen, setMenuOpen] = useState(false); return (
{!hideHeader && ( { if (typeof window.QW_openSearch === 'function') window.QW_openSearch(); }} onOpenCart={() => { if (typeof window.QW_openCart === 'function') window.QW_openCart(); }} onOpenMenu={() => setMenuOpen(true)} /> )} setMenuOpen(false)} navigate={navigate}/>
{children}
{!hideFooter && }
); } // ─── PhoneHome ─────────────────────────────────────────────────────── // Single full-height hero with auto-rotating swipeable slides; then // editorial sections below. Optimised for portrait phone scrolling. function PhoneHome({ navigate }) { const slides = HERO_SLIDES_DATA; const [active, setActive] = useState(0); const [paused, setPaused] = useState(false); useEffect(() => { if (paused || slides.length <= 1) return; const id = setInterval(() => setActive(s => (s + 1) % slides.length), 5800); return () => clearInterval(id); }, [paused, slides.length]); // Touch swipe between slides const touchRef = useRef({ x: 0, t: 0 }); function onTouchStart(e) { touchRef.current = { x: e.touches[0].clientX, t: Date.now() }; } function onTouchEnd(e) { const dx = e.changedTouches[0].clientX - touchRef.current.x; if (Math.abs(dx) < 50) return; setActive(s => (dx < 0 ? (s + 1) : (s - 1 + slides.length)) % slides.length); } const slide = slides[active] || {}; const enterSlide = () => { if (slide.target === 'collections') return navigate('collections'); if (typeof slide.target === 'number' && COLLECTIONS_DATA[slide.target]) { const col = COLLECTIONS_DATA[slide.target]; return navigate('collection', { id: col.id, label: col.label + ' Tiles', ...col }); } navigate('collections'); }; // Categories: same 6 vibe slides used in the hero, rendered as a // 2-col grid below. const categories = slides.slice(1); return ( {/* HERO */}
setPaused(true)} onMouseLeave={() => setPaused(false)} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd} > {slides.map((s, i) => ( ))}

London Tile Craft

{slide.line1} {slide.line2}

{slide.body}

{/* Slide pips */}
{slides.map((_, i) => ( ))}
{/* Categories grid (2-col) */}

Categories

Six vibes,
one studio.

{categories.map(c => ( ))}
{/* Philosophy band */}

Our philosophy

A tile is not a product.
It's a decision you live with.

A London tile studio with almost five decades of curation behind it. We don't make tiles — we choose them. Every surface in our catalogue is seen, touched and approved by us, sourced direct from the makers we trust, and dispatched from our Wimbledon warehouse.

{/* Journal teasers */}

Journal

{/* Bottom CTA */}
); } // Pulls the journal articles from the global ARTICLES const exposed by // Journal.jsx, falls back to an empty list. Renders the first 3 as // stacked cards. function PhoneJournalTeasers({ navigate }) { const all = usePhoneArticles(); const articles = (all.length ? all : ARTICLES_DATA).slice(0, 3); return (
{articles.map(a => ( ))}
); } // ─── PhoneListing ──────────────────────────────────────────────────── // Sticky title + filter/sort bar. 2-column tile grid. Bottom-sheet // filter drawer. function PhoneListing({ filter, navigate }) { const tiles = useAllTilesHook ? useAllTilesHook() : usePhoneTiles(); const collectionsMeta = useCollectionsMetaHook ? useCollectionsMetaHook() : usePhoneCollectionsMeta(); // Filter spec from URL/nav. Reuse the desktop resolveFilter + // applySidebar via the bound module-level functions. const spec = useMemo(() => resolveFilterFn(filter), [filter]); // Per-axis selection state — mirrors CollectionDetail's selected. const [selected, setSelected] = useState(() => ({ room: new Set(), colour: new Set(), style: new Set(), shape: new Set(), finish: new Set(), })); useEffect(() => { if (['room', 'colour', 'style', 'shape'].includes(spec.axis)) { setSelected(prev => ({ ...prev, [spec.axis]: new Set([spec.value]) })); } }, [spec.axis, spec.value]); const [sort, setSort] = useState('featured'); const [drawerOpen, setDrawerOpen] = useState(false); useEffect(() => { if (drawerOpen) { document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = ''; }; } }, [drawerOpen]); const baseTiles = useMemo(() => { if (spec.axis === 'cat') return filterTilesFn(tiles, spec); return tiles; }, [tiles, spec]); const filtered = useMemo(() => applySidebarFn(baseTiles, selected), [baseTiles, selected]); const products = useMemo(() => { const list = filtered.slice(); if (sort === 'name-asc') list.sort((a, b) => (a.name||'').localeCompare(b.name||'')); if (sort === 'name-desc') list.sort((a, b) => (b.name||'').localeCompare(a.name||'')); return list; }, [filtered, sort]); const PAGE_SIZE = 24; const [visibleCount, setVisibleCount] = useState(PAGE_SIZE); useEffect(() => { setVisibleCount(PAGE_SIZE); }, [spec.axis, spec.value, selected, sort]); const visible = products.slice(0, visibleCount); const hasMore = visibleCount < products.length; const activeCount = ['room', 'colour', 'style', 'shape', 'finish'] .reduce((n, k) => n + (selected[k]?.size || 0), 0); const resetAll = () => setSelected({ room: new Set(), colour: new Set(), style: new Set(), shape: new Set(), finish: new Set(), }); const toggle = (axis, id) => setSelected(prev => { const next = { ...prev, [axis]: new Set(prev[axis]) }; if (next[axis].has(id)) next[axis].delete(id); else next[axis].add(id); return next; }); return ( {/* Title + count */}

{spec.axis === 'all' ? 'All tiles' : (AXES_DATA[spec.axis]?.label || '').replace('By ', '')}

{spec.label || 'All Tiles'}

{/* Sticky filter + sort bar (sticks under the header) */}
{/* Tile grid */}

{products.length} {products.length === 1 ? 'tile' : 'tiles'}

{products.length === 0 ? (

No tiles match every filter.

) : (
{visible.map(t => )}
)} {hasMore && (

Showing {visible.length} of {products.length}

)}
{/* Filter drawer */} {drawerOpen && ( setDrawerOpen(false)} productCount={products.length} /> )} ); } // Tile card for the phone listing — image + name + collection. function PhoneTileCard({ tile, navigate }) { const { favourites, toggleFavourite } = useAccount(); const faved = favourites?.includes(tile.id); return (
navigate('product', tile)} style={{ cursor: 'pointer' }} >
{tile.name} { e.target.style.display = 'none'; }} />
{tile.collection && (

{tile.collection}

)}

{tile.name}

); } // Bottom-sheet filter drawer. function PhoneFilterDrawer({ tiles, baseTiles, selected, toggle, resetAll, onClose, productCount }) { const sections = SIDEBAR_SECTIONS_DATA; const [openSet, setOpenSet] = useState(() => new Set(sections.length ? [sections[0].key] : [])); return (
e.stopPropagation()} style={{ background: 'white', width: '100%', maxHeight: '88vh', borderRadius: '16px 16px 0 0', display: 'flex', flexDirection: 'column', overflow: 'hidden', animation: 'pSheetUp 0.28s var(--ease-out)', }} >

Filter

{sections.map(sec => { const opts = sec.getOptions(tiles); const sel = selected[sec.key]; const open = openSet.has(sec.key); return (
{open && (
{opts.map(opt => { const checked = sel?.has(opt.id); const count = baseTiles.filter(t => tileHasFn(t, sec.key, opt.id)).length; const dim = count === 0 && !checked; return ( ); })}
)}
); })}
{/* Sticky footer */}
); } // ─── PhoneProduct ──────────────────────────────────────────────────── // Full-bleed image carousel, name, swatches, accordion specs, sticky // CTA at the bottom. function PhoneProduct({ product, navigate }) { const allTiles = useAllTilesHook ? useAllTilesHook() : usePhoneTiles(); const collectionsMeta = useCollectionsMetaHook ? useCollectionsMetaHook() : usePhoneCollectionsMeta(); const { favourites, toggleFavourite } = useAccount(); const faved = favourites?.includes(product.id); const sights = useMemo(() => { if (Array.isArray(product.sightImages) && product.sightImages.length) return product.sightImages; return product.img ? [product.img] : []; }, [product.sightImages, product.img]); const gallery = pGalleryImgs(product); const [active, setActive] = useState(0); useEffect(() => { setActive(0); }, [product.id]); // Touch swipe through hero images const touchRef = useRef({ x: 0 }); function onTouchStart(e) { touchRef.current.x = e.touches[0].clientX; } function onTouchEnd(e) { const dx = e.changedTouches[0].clientX - touchRef.current.x; if (Math.abs(dx) < 50) return; setActive(s => (dx < 0 ? (s + 1) : (s - 1 + sights.length)) % sights.length); } // Sizes / finishes derived const sizes = useMemo(() => Array.isArray(product.sizes) ? product.sizes : (product.size ? [product.size] : []), [product.sizes, product.size]); const finishes = useMemo(() => Array.isArray(product.finishes) ? product.finishes : (product.finish ? [product.finish] : []), [product.finishes, product.finish]); const [activeSize, setActiveSize] = useState(sizes[0] || ''); const [activeFinish, setActiveFinish] = useState(finishes[0] || ''); useEffect(() => { setActiveSize(sizes[0] || ''); setActiveFinish(finishes[0] || ''); }, [product.id]); // Colour variants (same collection, admin-ordered) const colourSwatches = useMemo(() => { if (!product.collection || !allTiles.length) return []; const meta = collectionsMeta[product.collection] || {}; const hidden = new Set(Array.isArray(meta.hidden) ? meta.hidden : []); const order = Array.isArray(meta.order) ? meta.order : []; const seen = new Set(); const pool = []; for (const t of allTiles) { if (t.id === product.id) continue; if (t.collection !== product.collection) continue; if (hidden.has(t.id)) continue; if (seen.has(t.name)) continue; seen.add(t.name); pool.push(t); } const idx = (id) => { const i = order.indexOf(id); return i < 0 ? Infinity : i; }; pool.sort((a, b) => idx(a.id) - idx(b.id)); return pool; }, [allTiles, collectionsMeta, product.collection, product.id]); // Accordion: description + spec const [openSpec, setOpenSpec] = useState(false); // Suggestions (capped at 6 for the horizontal scroll) const suggestions = useMemo(() => { if (!allTiles.length) return []; const others = allTiles.filter(t => t.id !== product.id); const seen = new Set(); const buckets = [[], [], [], []]; const arr = v => Array.isArray(v) ? v : (v ? [v] : []); const pColours = new Set(arr(product.colours).concat(arr(product.colour)).filter(Boolean)); const pStyles = new Set(arr(product.styles ).concat(arr(product.style )).filter(Boolean)); for (const t of others) { if (seen.has(t.name)) continue; const tColours = new Set(arr(t.colours).concat(arr(t.colour)).filter(Boolean)); const tStyles = new Set(arr(t.styles ).concat(arr(t.style )).filter(Boolean)); const cMatch = [...pColours].some(c => tColours.has(c)); const sMatch = [...pStyles ].some(s => tStyles.has(s)); let b; if (sMatch && cMatch) b = 0; else if (cMatch) b = 1; else if (sMatch) b = 2; else b = 3; buckets[b].push(t); seen.add(t.name); } return buckets.flat().slice(0, 8); }, [allTiles, product.id, product.colours, product.styles]); const submitQuote = () => navigate('quote', { tiles: [{ name: product.name, size: activeSize, finish: activeFinish, sqm: 10 }] }); return (
{/* HERO carousel */}
{sights.map((src, i) => ( {i { e.target.style.display = 'none'; }} /> ))} {/* Back button */} {/* Heart */} {/* Dot pips */} {sights.length > 1 && (
{sights.map((_, i) => ( ))}
)}
{/* Name + collection */}
{product.collection && (

{product.collection}

)}

{product.name}

{product.description && (

{product.description}

)}
{/* Size selector */} {sizes.length > 0 && (

Size

{sizes.map(s => { const on = s === activeSize; return ( ); })}
)} {/* Finish selector */} {finishes.length > 0 && (

Finish

{finishes.map(f => { const on = f === activeFinish; return ( ); })}
)} {/* Colour swatches — horizontal scroll strip */} {colourSwatches.length > 0 && (

The colours · {colourSwatches.length + 1} variants

{/* Current tile first */} {}}/> {colourSwatches.map(t => ( navigate('product', t)} /> ))}
)} {/* Gallery */} {gallery.length > 0 && (

In sight

{gallery.map((src, i) => ( ))}
)} {/* Spec accordion */}
{openSpec && (
)}
{/* Suggestions */} {suggestions.length > 0 && (

You may also like

{suggestions.map(t => ( ))}
)}
{/* Sticky bottom CTA bar */}
); } function SpecRow({ label, value }) { return (
{label} {value}
); } function PhoneColourCell({ tile, active, onClick }) { return ( ); } // ─── PhoneJournal ──────────────────────────────────────────────────── function PhoneJournal({ navigate, pageData }) { const live = usePhoneArticles(); const articles = live.length ? live : ARTICLES_DATA; const activeArticle = (pageData && pageData.articleId) ? articles.find(a => a.id === pageData.articleId) : null; if (activeArticle) { return (
{activeArticle.title}

{activeArticle.category} · {activeArticle.date} · {activeArticle.read}

{activeArticle.title}

{activeArticle.intro}

{(activeArticle.body || '').split('\n\n').map((p, i) => (

{p}

))}
); } const [featured, ...rest] = articles; return (

Journal

Ideas, rooms
& material stories

{featured && ( )}
{rest.map(a => ( ))}
); } // ─── PhoneQuote ────────────────────────────────────────────────────── // Single-column form on mobile. Reuses the desktop Quote underneath // when possible — but renders a tighter mobile layout. function PhoneQuote({ navigate, prefill }) { // For simplicity we delegate to the desktop Quote component which // is already responsive enough at narrow widths (the 720px breakpoint // collapses the form to one column). We just wrap it in the phone // shell so the global Nav doesn't double up. const Inner = window.Quote; return ( {Inner ? :

Quote form unavailable.

} ); } // ─── PhoneAccount ──────────────────────────────────────────────────── function PhoneAccount({ navigate, tiles }) { const { profile, favourites } = useAccount(); const favTiles = (favourites || []).map(id => tiles.find(t => t.id === id)).filter(Boolean); return (

Your account

Hi, {profile?.name?.split(' ')[0] || 'there'}

Favourites ({favTiles.length})

{favTiles.length === 0 ? (

♡

No favourites yet

Tap the heart on any tile to save it here.

) : (
{favTiles.map(t => )}
)}
); } // ─── Hooks (local copies) ──────────────────────────────────────────── function usePhoneTiles() { const [tiles, setTiles] = useState([]); useEffect(() => { let cancelled = false; fetch('/api/tiles').then(r => r.json()).then(d => { if (!cancelled) setTiles((d?.tiles) || []); }).catch(() => {}); return () => { cancelled = true; }; }, []); return tiles; } function usePhoneCollectionsMeta() { const [meta, setMeta] = useState({}); useEffect(() => { let cancelled = false; fetch('/api/collections').then(r => r.json()).then(d => { if (!cancelled) setMeta(d?.collections || {}); }).catch(() => {}); return () => { cancelled = true; }; }, []); return meta; } Object.assign(window, { PhoneHome, PhoneListing, PhoneProduct, PhoneJournal, PhoneQuote, PhoneAccount, });