);
}
// ── Address Autocomplete ──────────────────────────────────────────────────────
// Maps loads async (async defer script) — attach Autocomplete once ready.
// acRef guard (Cause 3/4): prevents double-init if effect re-runs.
// pollTimer (Cause 3): retries every 100ms if Maps not yet ready on Step 2 mount.
function AddressAutocomplete({ address, setAddress, setSuburb, setPostcode, setAddrState }) {
const inputRef = useRefBook(null);
const acRef = useRefBook(null); // Autocomplete instance — set ONCE, never reset mid-session
const [manual, setManual] = useBook(false);
useEffectBook(() => {
if (manual || !inputRef.current) return;
if (acRef.current) return; // already initialised — guard against double-init
let pollTimer = null;
const tryAttach = () => {
if (!inputRef.current || acRef.current) return;
if (!window.google?.maps?.places?.Autocomplete) return; // Maps not ready yet
const ac = new window.google.maps.places.Autocomplete(inputRef.current, {
componentRestrictions: { country: 'au' },
fields: ['address_components', 'formatted_address'],
types: ['address'],
bounds: new window.google.maps.LatLngBounds(
{ lat: -28.5, lng: 152.6 }, { lat: -26.5, lng: 153.5 }
),
strictBounds: false,
});
acRef.current = ac;
if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
ac.addListener('place_changed', () => {
const place = ac.getPlace();
if (!place?.address_components) return;
let sn = '', rt = '', sub = '', pc = '', st = '';
place.address_components.forEach(c => {
if (c.types.includes('street_number')) sn = c.long_name;
if (c.types.includes('route')) rt = c.long_name;
if (c.types.includes('locality')) sub = c.long_name;
if (c.types.includes('postal_code')) pc = c.short_name;
if (c.types.includes('administrative_area_level_1')) st = c.short_name;
});
setAddress(place.formatted_address || [sn, rt].filter(Boolean).join(' '));
setSuburb(sub); setPostcode(pc); setAddrState(st);
});
};
// Try immediately — works if Maps already finished loading
tryAttach();
// If Maps is still loading (async script), poll until available (max 5 s)
if (!acRef.current) {
let polls = 0;
pollTimer = setInterval(() => {
polls++;
tryAttach();
if (acRef.current || polls >= 50) { clearInterval(pollTimer); pollTimer = null; }
}, 100);
}
return () => {
if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
if (acRef.current) {
try { window.google?.maps?.event?.clearInstanceListeners(acRef.current); } catch (_) {}
acRef.current = null;
}
};
}, [manual]);
if (manual) {
return (
setAddress(e.target.value)}
placeholder="e.g. 28 Wordsworth St, Norman Park QLD 4170"
autoComplete="street-address"/>
);
}
return (
<>
{ if (e.target.value && !address) setAddress(e.target.value); }}
/>
);
}
// ── Main Component ────────────────────────────────────────────────────────────
function TechnicianBookingPage() {
const [step, setStep] = useBook(_INIT_PARAMS.step);
const [services, setServices] = useBook(_INIT_PARAMS.services);
const [name, setName] = useBook('');
const [phone, setPhone] = useBook('');
const [email, setEmail] = useBook('');
const [address, setAddress] = useBook('');
const [suburb, setSuburb] = useBook('');
const [postcode, setPostcode] = useBook('');
const [addrState, setAddrState] = useBook('');
const [notes, setNotes] = useBook('');
const [date, setDate] = useBook('');
const [slot, setSlot] = useBook('');
const [customTime,setCustomTime]= useBook('');
const [submitting, setSubmitting] = useBook(false);
const [submitErr, setSubmitErr] = useBook('');
const [submitted, setSubmitted] = useBook(false);
const [refId, setRefId] = useBook('');
const [bookingPhone, setBookingPhone] = useBook('');
const [bookingEmail, setBookingEmail] = useBook('');
// Stripe state
const [payState, setPayState] = useBook('idle'); // idle | loading | ready | error
const [elemReady, setElemReady] = useBook(false);
const [retryCount, setRetryCount]= useBook(0); // incremented by onRetry to re-trigger Effect 2
const elemReadyRef = useRefBook(false);
const elemTimerRef = useRefBook(null);
const stripeInst = useRefBook(null);
const stripeElems = useRefBook(null);
const payDomRef = useRefBook(null);
const stripeInitRef = useRefBook(false); // true while Effect 2 is running — guards re-entry
// ── Cache reset: clear stale config on every mount ───────────────────────
// Prevents a prior failed/empty cache from blocking Effect 2 silently.
useEffectBook(() => { _stripeConfigCache = null; }, []);
// ── Step-change guard: reset payment state whenever user leaves Step 4 ───
// Ensures payState is 'idle' if the user navigates away and returns.
// The back() function also does this explicitly — this is defence-in-depth.
useEffectBook(() => {
if (step !== 4) {
setPayState('idle');
stripeInitRef.current = false; // allow Effect 2 to re-run next time step reaches 4
stripeInst.current = null;
stripeElems.current = null;
console.log('[VT] Payment state reset — left Step 4');
}
}, [step]);
// ── Effect 1: handle 3DS redirect back ───────────────────────────────────
useEffectBook(() => {
const sp = new URLSearchParams(window.location.search);
const piId = sp.get('payment_intent');
const secret = sp.get('payment_intent_client_secret');
if (!piId || !secret || !window.Stripe) return;
(async () => {
try {
if (!_stripeConfigCache) {
const cfgRes = await fetch('/.netlify/functions/get-config');
if (!cfgRes.ok) return;
_stripeConfigCache = await cfgRes.json();
}
const { stripePublicKey } = _stripeConfigCache;
if (!stripePublicKey) return;
const stripe = window.Stripe(stripePublicKey);
const { paymentIntent, error } = await stripe.retrievePaymentIntent(secret);
if (error || !paymentIntent) return;
if (paymentIntent.status === 'succeeded') {
setBookingPhone(sp.get('phone') || '');
setBookingEmail(sp.get('email') || '');
setSubmitted(true);
}
} catch (e) { console.warn('[VT] 3DS redirect check:', e.message); }
})();
}, []);
// ── Effect 2: init Stripe when step 4 is reached ─────────────────────────
// deps: [step, retryCount] — payState intentionally excluded.
// Reason: calling setPayState('loading') inside this effect would cause React
// to re-run the effect (because payState was a dep), which triggered cleanup
// (isActive=false) mid-fetch, silently killing the async chain.
// stripeInitRef guards re-entry; retryCount lets onRetry re-trigger explicitly.
useEffectBook(() => {
if (step !== 4) return;
if (stripeInitRef.current) return; // already running or completed — no re-entry
if (!window.Stripe) {
setPayState('error');
setSubmitErr('Payment system could not be loaded. Please refresh or call 0449 991 572.');
return;
}
stripeInitRef.current = true; // claim synchronously before any async work
const effectId = Date.now();
let isActive = true;
console.log('[VT] Effect 2 fired — initialising Stripe', { effectId });
console.log('[VT] Booking data at Step 4:', {
name: name || '(empty)', email: email || '(empty)',
phone: phone || '(empty)', services,
});
setPayState('loading'); // safe: payState is NOT in deps — this won't re-trigger the effect
async function runEffect() {
try {
// Step 1: fetch config — always fresh (no cache)
console.log('[VT] Effect 2 — step 1: fetch config');
const cfgRes = await fetch('/.netlify/functions/get-config');
if (!isActive) { console.log('[VT] Effect 2 cancelled after step 1, effectId:', effectId); return; }
if (!cfgRes.ok) throw new Error('get-config failed: ' + cfgRes.status);
const config = await cfgRes.json();
if (!isActive) return;
console.log('[VT] Effect 2 — step 2:', {
hasKey: !!config.stripePublicKey,
prefix: config.stripePublicKey?.slice(0, 12) || '(empty)',
effectId,
});
if (!config.stripePublicKey || config.stripePublicKey.trim() === '') {
throw new Error('stripePublicKey is empty — check STRIPE_PUBLIC_KEY in Netlify env variables.');
}
// Step 3: init Stripe
console.log('[VT] Effect 2 — step 3: init Stripe');
const stripe = window.Stripe(config.stripePublicKey);
if (!isActive) return;
stripeInst.current = stripe;
// Step 4: create PaymentIntent
console.log('[VT] Effect 2 — step 4: create PaymentIntent');
const serviceNames = services
.map(id => (BOOK_SERVICES.find(s => s.id === id) || {}).name)
.filter(Boolean).join(', ');
const slotId = slot || 'flexible';
const piRes = await fetch('/.netlify/functions/create-payment-intent', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
amount: 4900, currency: 'aud',
metadata: {
source: 'book-page',
customer_name: name.trim(),
customer_email: email.trim(),
customer_phone: phone.trim(),
service: serviceNames,
address: address.trim(),
suburb: suburb.trim(),
postcode: postcode.trim(),
date,
preferred_time: SLOT_TIME_MAP[slotId] || '09:00',
preferred_time_slot: slotId,
custom_time: customTime.trim(),
notes: notes.trim(),
},
}),
});
console.log('[VT] Effect 2 — step 5: pi status', piRes.status);
if (!isActive) return;
const piData = await piRes.json();
if (!isActive) return;
console.log('[VT] Effect 2 — step 6:', {
hasSecret: !!piData.clientSecret,
error: piData.error || null,
effectId,
});
if (piData.error) throw new Error(piData.error);
if (!piData.clientSecret) throw new Error('No clientSecret — response: ' + JSON.stringify(piData));
// Step 7: create Elements instance
console.log('[VT] Effect 2 — step 7: create elements');
const elements = stripe.elements({
clientSecret: piData.clientSecret,
appearance: {
theme: 'stripe',
variables: {
colorPrimary: '#E8621A',
colorBackground: '#ffffff',
colorText: '#1A1A1A',
borderRadius: '10px',
fontFamily: '-apple-system, BlinkMacSystemFont, "Inter", sans-serif',
},
rules: {
'.Input': { border: '1.5px solid #E5E1DC', boxShadow: 'none', padding: '12px 14px' },
'.Input:focus': { border: '1.5px solid #E8621A', boxShadow: '0 0 0 3px rgba(232,98,26,0.12)' },
},
},
});
if (!isActive) return;
stripeElems.current = elements;
console.log('[VT] Effect 2 — step 8: setting payState to ready');
setPayState('ready');
} catch (e) {
if (!isActive) return;
console.error('[VT] Effect 2 FAILED:', e.message, e.stack);
stripeInitRef.current = false; // allow retry to re-run the effect
setPayState('error');
setSubmitErr('Could not load payment system. Please refresh or call 0449 991 572.');
}
}
runEffect();
return () => {
console.log('[VT] Effect 2 cleanup — isActive set false, effectId:', effectId);
isActive = false;
stripeInitRef.current = false; // reset so next mount or retry can re-enter
};
}, [step, retryCount]); // payState intentionally excluded — see comment above
// ── Effect 3: mount PaymentElement + watch for ready event ───────────────
useEffectBook(() => {
if (payState !== 'ready') return;
let mountTimer = null;
let stripeEl = null;
// 100ms delay — ensures React has committed the DOM update before we touch the div
mountTimer = setTimeout(() => {
console.log('[VT] Effect 3 fired', {
payDomRef: !!payDomRef.current,
paymentElementDiv: !!document.getElementById('payment-element'),
stripeElems: !!stripeElems.current,
});
if (!payDomRef.current) {
console.error('[VT] payDomRef.current is null — cannot mount');
return;
}
if (!stripeElems.current) {
console.error('[VT] stripeElems.current is null — cannot mount');
return;
}
if (payDomRef.current._mounted) {
console.log('[VT] already mounted — skipping');
return;
}
try {
stripeEl = stripeElems.current.create('payment', { layout: 'tabs' });
stripeEl.on('ready', () => {
console.log('[VT] PaymentElement ready ✓');
elemReadyRef.current = true;
setElemReady(true);
if (elemTimerRef.current) { clearTimeout(elemTimerRef.current); elemTimerRef.current = null; }
});
stripeEl.on('loaderror', (evt) => {
console.error('[VT] PaymentElement load error:', evt.error?.message || evt);
setSubmitErr('Payment form failed to load. Please try again or call +61 449 991 572.');
setPayState('error');
if (elemTimerRef.current) { clearTimeout(elemTimerRef.current); elemTimerRef.current = null; }
});
console.log('[VT] mount() called ✓');
stripeEl.mount(payDomRef.current);
payDomRef.current._mounted = true;
// 10-second safety timeout
elemTimerRef.current = setTimeout(() => {
if (!elemReadyRef.current) {
console.warn('[VT] Stripe PaymentElement timed out after 10s');
setSubmitErr('Payment form timed out. Please refresh or call +61 449 991 572.');
}
}, 10000);
} catch (err) {
console.error('[VT] Effect 3 mount error:', err.message);
setPayState('error');
}
}, 100);
return () => {
clearTimeout(mountTimer);
if (stripeEl) {
try { stripeEl.unmount(); } catch (_) {}
}
if (payDomRef.current) payDomRef.current._mounted = false;
if (elemTimerRef.current) { clearTimeout(elemTimerRef.current); elemTimerRef.current = null; }
};
}, [payState]);
const errs = useMemoBook(() => {
const e = {};
if (step === 1) {
if (!services.length) e.services = 'Pick at least one thing we can help with.';
} else if (step === 2) {
if (!name.trim()) e.name = 'Please tell us your name.';
const cp = phone.replace(/[\s\-\(\)\.]/g, '');
if (!cp || !/^\d{10}$/.test(cp) || !cp.startsWith('04'))
e.phone = 'Please enter a valid Australian mobile number starting with 04 — e.g. 0412 345 678';
const em = email.trim();
if (!em || /\s/.test(em) || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(em))
e.email = 'Please enter a valid email address — e.g. yourname@gmail.com';
if (!address.trim()) e.address = 'Please enter your address so we know where to come.';
} else if (step === 3) {
if (!date && !customTime.trim()) e.date = 'Pick a date or type a preferred time below.';
if (date && !slot && !customTime.trim()) e.slot = 'Pick a time slot, or type your preferred time below.';
}
return e;
}, [step, services, name, phone, email, address, date, slot, customTime]);
const toggleService = id =>
setServices(ss => ss.includes(id) ? ss.filter(x => x !== id) : [...ss, id]);
const next = () => {
if (Object.keys(errs).length) return;
setStep(s => Math.min(4, s + 1));
setTimeout(() => window.scrollTo({ top: 0, behavior: 'smooth' }), 30);
};
const back = () => {
if (step === 4) {
setPayState('idle');
setElemReady(false);
elemReadyRef.current = false;
if (elemTimerRef.current) { clearTimeout(elemTimerRef.current); elemTimerRef.current = null; }
stripeInst.current = null;
stripeElems.current = null;
setSubmitErr('');
}
setStep(s => Math.max(1, s - 1));
setSubmitErr('');
};
// ── finishBooking: DB + emails after confirmed payment ────────────────────
const finishBooking = async (paymentIntentId) => {
const serviceNames = services
.map(id => (BOOK_SERVICES.find(s => s.id === id) || {}).name)
.filter(Boolean).join(', ');
const totalAmt = services.reduce((s, id) => s + (SVC_AMT_MAP[id] || 0), 0);
const today = new Date().toISOString().split('T')[0];
const slotId = slot || 'flexible';
const notesStr = [notes.trim(), customTime ? 'Preferred time: ' + customTime : ''].filter(Boolean).join('\n');
const bookingRefId = window.vtGenerateRefId('BOOK');
try {
const jobId = await window.vtNextJobId();
await window.vtInsertJob({
id: jobId, reference_id: bookingRefId, source: 'booking',
customer: name.trim(), phone: phone.trim(), email: email.trim(),
service: serviceNames, address: address.trim(), suburb: suburb.trim(),
postcode: postcode.trim(), lat: 0, lng: 0,
date: date || today, time: SLOT_TIME_MAP[slotId] || '09:00',
status: 'Pending', assigned_to: '',
deposit_paid: true, deposit_amount: 49,
stripe_payment_id: paymentIntentId, stripe_status: 'paid',
service_amount: totalAmt, notes: notesStr, amount: totalAmt, created: today,
});
} catch (dbErr) {
console.error('[VT] DB insert failed after payment:', dbErr.message);
// Webhook handles insert — show success anyway
setRefId(paymentIntentId);
setBookingPhone(phone.trim());
setBookingEmail(email.trim());
setSubmitted(true);
setSubmitting(false);
return;
}
const dateLabel = date
? new Date(date + 'T00:00:00').toLocaleDateString('en-AU',
{ day: 'numeric', month: 'long', year: 'numeric' })
: 'Flexible';
window.vtSendEmail({
type: 'booking', refId: bookingRefId,
to: email.trim(), name: name.trim(), phone: phone.trim(),
service: serviceNames, date: dateLabel,
slot: BOOK_SLOTS.find(s => s.id === slot)?.name || (customTime || 'Flexible'),
address: address.trim(), suburb: suburb.trim(), postcode: postcode.trim(),
notes: notesStr, customTime: customTime.trim(),
submittedAt: new Date().toLocaleString('en-AU', { timeZone: 'Australia/Brisbane' }),
}).catch(e => console.warn('[VT] Email error:', e.message));
setRefId(bookingRefId);
setBookingPhone(phone.trim());
setBookingEmail(email.trim());
setSubmitted(true);
setSubmitting(false);
setTimeout(() => window.scrollTo({ top: 0, behavior: 'smooth' }), 30);
};
const submit = async () => {
if (!stripeInst.current || !stripeElems.current) {
setSubmitErr('Payment system not ready. Please wait a moment then try again.');
return;
}
setSubmitting(true);
setSubmitErr('');
try {
const { error, paymentIntent } = await stripeInst.current.confirmPayment({
elements: stripeElems.current,
confirmParams: {
return_url: window.location.href,
payment_method_data: { billing_details: { name: name.trim(), email: email.trim(), phone: phone.trim() } },
},
redirect: 'if_required',
});
if (error) {
console.warn('[VT] Stripe confirmPayment error:', error.message);
setSubmitErr(error.message || 'Payment failed — please check your card details and try again.');
setSubmitting(false);
return;
}
if (paymentIntent && paymentIntent.status === 'succeeded') {
console.log('[VT] Payment succeeded ✓', paymentIntent.id);
await finishBooking(paymentIntent.id);
} else {
setSubmitErr('Payment could not be completed. Please try again or call 0449 991 572.');
setSubmitting(false);
}
} catch (e) {
console.error('[VT] confirmPayment error:', e.message);
setSubmitErr('Something went wrong. Please try again or call 0449 991 572.');
setSubmitting(false);
}
};
// ── Success screen ─────────────────────────────────────────────────────────
if (submitted) {
return (
Booking Confirmed!
{refId && refId.startsWith('VT-') && (
Your Reference Number
{refId}
Save this — we'll reference it when we call you
)}
Your $49 deposit has been received.
{bookingPhone && <> We will call you on {bookingPhone} within 2 hours to confirm your appointment (during business hours).}