/* ------------------------------------------------------------------ HyperFocusOZ — Booking modal ------------------------------------------------------------------ Custom-front-end booking flow that embeds Microsoft Bookings. ┌─────────────────────────────────────────────────────────────────┐ │ SETUP — replace the URLs in BOOKING_SERVICES below with the │ │ three Microsoft Bookings service URLs from your tenant. │ │ │ │ How to find them: │ │ 1. Go to https://outlook.office.com/bookings │ │ 2. Open your Booking page → Services → click a service │ │ 3. Copy the public booking URL — it looks like: │ │ https://outlook.office.com/bookwithme/user/{id} │ │ /meetingtype/{meetingId}?anonymous │ │ 4. Paste it into the matching service below. │ │ │ │ Until URLs are swapped in, the modal shows a helpful │ │ "configuration pending" panel instead of the iframe. │ └─────────────────────────────────────────────────────────────────*/ const BOOKING_CONFIG = /*EDITMODE-BEGIN*/{ "discoveryUrl": "https://outlook.office.com/book/HyperFocusBookings1@hyperfocusoz.com/?ismsaljsauthenabled", "scopingUrl": "https://outlook.office.com/book/HyperFocusBookings1@hyperfocusoz.com/?ismsaljsauthenabled", "kickoffUrl": "https://outlook.office.com/book/HyperFocusBookings1@hyperfocusoz.com/?ismsaljsauthenabled" }/*EDITMODE-END*/; const BOOKING_SERVICES = [ { id: 'discovery', num: '01', title: 'Discovery call', duration: '30 minutes', cost: 'No charge', desc: 'A conversation about your goals, constraints, and stack. No slides, no sales pitch — honest answer on fit.', bullets: ['Whether we can help', 'What we\'d do first', 'Rough size and shape'], urlKey: 'discoveryUrl', featured: true, }, { id: 'scoping', num: '02', title: 'Scoping session', duration: '60 minutes', cost: 'No charge', desc: 'Deeper working session once a discovery call says it\'s a fit. We map the flow, identify the wins, sketch a proposal.', bullets: ['Process walkthrough', 'AI / automation opportunities', 'Cost & timeline framework'], urlKey: 'scopingUrl', featured: false, }, { id: 'kickoff', num: '03', title: 'Quick Win kickoff', duration: '90 minutes', cost: 'Included with engagement', desc: 'Kickoff for an approved Quick Win. We align on outcomes, access, and a 2-week delivery plan.', bullets: ['Outcomes locked in', 'Stack & access ready', 'Working software in 2 weeks'], urlKey: 'kickoffUrl', featured: false, }, ]; const { useEffect, useState, useRef, useCallback } = React; // All component definitions and mount logic live inside this IIFE so internal // names (ServiceCard, ModalHeader, etc.) don't collide with components defined // in other Babel-loaded files (e.g. site-sections.jsx also defines ServiceCard). (function () { // ---------------------------------------------------------------- // // Backdrop + container // ---------------------------------------------------------------- // function BookingModal({ initialServiceId, onClose }) { const [serviceId, setServiceId] = useState(initialServiceId || null); const dialogRef = useRef(null); // Lock body scroll useEffect(() => { const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = prev; }; }, []); // ESC to close useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [onClose]); // Focus dialog on open useEffect(() => { setTimeout(() => dialogRef.current && dialogRef.current.focus(), 60); }, []); const service = BOOKING_SERVICES.find(s => s.id === serviceId); return (
{ if (e.target === e.currentTarget) onClose(); }} style={{ position: 'fixed', inset: 0, zIndex: 9999, background: 'rgba(20, 15, 10, 0.62)', backdropFilter: 'blur(6px) saturate(140%)', WebkitBackdropFilter: 'blur(6px) saturate(140%)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 'clamp(12px, 3vw, 32px)', animation: 'hf-fadeIn 200ms ease-out', }} >
setServiceId(null) : null} onClose={onClose} />
{!service && } {service && }
); } // ---------------------------------------------------------------- // // Header // ---------------------------------------------------------------- // function ModalHeader({ service, onBack, onClose }) { return (
{onBack && ( )}
hyperfocusoz // {service ? service.title : 'Book a time'}
); } // ---------------------------------------------------------------- // // Step 1: pick a service // ---------------------------------------------------------------- // function ServicePicker({ onPick }) { return (
// step 1 of 2

What kind of conversation {' '}are we having?

Pick a meeting type, then choose a time that works. Calendar invites land in your inbox automatically.

{BOOKING_SERVICES.map(s => ( onPick(s.id)} /> ))}
// Powered by Microsoft Bookings · AEST/AEDT default Prefer email? hello@hyperfocusoz.com
); } function ServiceCard({ service, onPick }) { const { num, title, duration, cost, desc, bullets, featured } = service; return ( ); } // ---------------------------------------------------------------- // // Step 2: embed the actual Microsoft Bookings page // ---------------------------------------------------------------- // function ServiceBooking({ service }) { const url = BOOKING_CONFIG[service.urlKey]; const configured = url && url !== 'PLACEHOLDER' && url.includes('http'); return (
{/* Left: meeting summary in HF style */} {/* Right: the actual booking iframe */}
{configured ? (