Phone

(meta={}, site={}) => { class Ctxt { // ========== FORM-API SUBMIT (Profile API form-submit endpoint) ========== // Wires forms to the multi-tenant Profile API instead of Netlify/form-api. // Use on a form with data-form-type="contact" (or "virtual-estimate") and // hook via attachSingleHandler('#form', 'submit', site.submitToProfileAPI). profileApiUrl = 'https://mhjoh2ms77.execute-api.us-west-2.amazonaws.com/api/v1/webhooks/form-submit'; formLoadTimes = {}; generateSpamToken = () => { const ts = Date.now(); const reversed = ts.toString().split('').reverse().join(''); const checksum = ts % 9973; return `${reversed}-${checksum}`; }; markFormLoaded = (formId) => { this.formLoadTimes[formId] = Date.now(); const form = document.getElementById(formId); if (form) { const tsField = form.querySelector('[name="_ts"]'); const stField = form.querySelector('[name="_st"]'); if (tsField) tsField.value = this.formLoadTimes[formId]; if (stField) stField.value = this.generateSpamToken(); } }; initFormWithCountdown = (formId, placeholderId, countdownSeconds = 3) => { const placeholder = document.getElementById(placeholderId); const form = document.getElementById(formId); if (!placeholder || !form) { if (form) { form.style.display = ''; this.markFormLoaded(formId); } return; } let count = countdownSeconds; const countdownEl = placeholder.querySelector('.countdown-number'); const tick = () => { if (count <= 0) { placeholder.style.display = 'none'; form.style.display = ''; this.markFormLoaded(formId); return; } if (countdownEl) countdownEl.textContent = count; count--; this.setTimeout(tick, 1000); }; tick(); }; formDataToObject = (fd) => { const obj = {}; for (const key of fd.keys()) { const values = fd.getAll(key); obj[key] = values.length > 1 ? values : values[0]; } return obj; }; transformFormToPayload = (formType, fd, extras = {}) => { const nameParts = (fd.get('name') || '').trim().split(/\s+/); return { tenantId: 'job4movers', formType, email: (fd.get('email') || '').toLowerCase().trim(), firstName: nameParts[0] || '', lastName: nameParts.slice(1).join(' ') || '', phone: fd.get('phone') || '', subject: fd.get('subject') || '', message: fd.get('message') || '', formData: this.formDataToObject(fd), _hp: fd.get('bot-field') || fd.get('_hp') || '', _hp2: fd.get('_hp2') || '', _ts: parseInt(fd.get('_ts')) || null, _st: fd.get('_st') || '', ...(extras.attachmentKeys?.length ? { attachmentKeys: extras.attachmentKeys } : {}), }; }; _submitBusy = false; submitToProfileAPI = async (evt) => { const target = evt.currentTarget; evt.preventDefault(); const formType = target.dataset.formType; if (!formType) { console.error('Missing data-form-type attribute on form'); return; } // Re-entry guard: ignore any duplicate submit while one is in flight // (belt-and-suspenders on top of the disabled button below). if (this._submitBusy) return; this._submitBusy = true; // Immediate on-screen feedback — uploads + send can take a few seconds, // so show a "Sending…" toast right away (not just the button text) so the // visitor doesn't think it failed and click again. try { this.showMessage?.('Sending your request…', 'bg-teal-700', 'text-white', 30000); } catch(e){} const submitBtn = target.querySelector('[type="submit"]'); const originalText = submitBtn?.dataset.originalText || submitBtn?.textContent; if (submitBtn) { submitBtn.dataset.submitting = 'true'; submitBtn.disabled = true; submitBtn.style.opacity = '0.6'; submitBtn.style.cursor = 'wait'; submitBtn.dataset.originalText = submitBtn.textContent; submitBtn.textContent = 'Sending…'; } try { let attachmentKeys = []; if (this._uploads?.length) { if (submitBtn) submitBtn.textContent = `Uploading ${this._uploads.length} photo${this._uploads.length === 1 ? '' : 's'}…`; attachmentKeys = await this.uploadSelectedFiles('job4movers'); } if (submitBtn) submitBtn.textContent = 'Sending…'; const fd = new FormData(target); const payload = this.transformFormToPayload(formType, fd, { attachmentKeys }); const resp = await fetch(this.profileApiUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload), }); if (!resp.ok) { const error = await resp.json().catch(() => ({ error: 'Unknown error' })); throw new Error(error.error || 'Form submission failed'); } try { document.getElementById('toast-message')?.remove(); } catch(e){} this.showToast?.('toast-success'); target.querySelector('.reset')?.click(); } catch (err) { console.error('[FormSubmit] Error:', err); try { this.showMessage?.('Sorry — that didn\'t send. Please try again, or call/text (206) 859-9401.', 'bg-red-700', 'text-white', 8000); } catch(e){ this.showToast?.('toast-failure'); } } finally { this._submitBusy = false; if (submitBtn) { submitBtn.disabled = false; submitBtn.style.opacity = ''; submitBtn.style.cursor = ''; submitBtn.textContent = originalText; delete submitBtn.dataset.submitting; delete submitBtn.dataset.originalText; } } }; // ========== END FORM-API SUBMIT ========== // ========== CONTACT-EVIDENCE UPLOADER ========== // Pre-submission photo upload. Client mints a nonce per form-load, // presigns each file via /api/v1/uploads/presign (purpose:contact-evidence), // PUTs directly to S3, submits the resulting S3 keys with the form. UPLOAD_PRESIGN_URL = 'https://mhjoh2ms77.execute-api.us-west-2.amazonaws.com/api/v1/uploads/presign'; UPLOAD_ALLOWED_TYPES = ['image/jpeg','image/png','image/webp','image/heic','image/heif']; UPLOAD_MAX_FILES = 6; UPLOAD_MAX_BYTES = 5 * 1024 * 1024; // 5MB after resize UPLOAD_RESIZE_MAX_DIM = 1920; UPLOAD_RESIZE_QUALITY = 0.85; _uploads = []; _uploadedKeys = []; _uploadNonce = ''; _uploadBusy = false; _genUploadNonce = () => { if (window.crypto?.randomUUID) return window.crypto.randomUUID(); return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, (c) => { const r = Math.random() * 16 | 0; return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16); }); }; resizeImageToBlob = async (file, maxDim, quality) => { try { if (!file?.type?.startsWith('image/')) return file; if (file.type === 'image/heic' || file.type === 'image/heif') return file; const img = document.createElement('img'); const url = URL.createObjectURL(file); img.src = url; await new Promise((res, rej) => { img.onload = res; img.onerror = rej; }); const w = img.naturalWidth, h = img.naturalHeight; URL.revokeObjectURL(url); const scale = Math.min(1, maxDim / Math.max(w, h)); if (scale >= 1 && file.size <= 2_000_000) return file; const cw = Math.max(1, Math.round(w * scale)); const ch = Math.max(1, Math.round(h * scale)); const canvas = document.createElement('canvas'); canvas.width = cw; canvas.height = ch; canvas.getContext('2d').drawImage(img, 0, 0, cw, ch); const blob = await new Promise((res) => canvas.toBlob(res, 'image/jpeg', quality)); return blob || file; } catch (err) { console.warn('[Uploader] resize failed, sending original', err); return file; } }; _renderUploadPreviews = (host) => { const previews = host.querySelector('#upload-previews'); if (!previews) return; previews.innerHTML = ''; (this._uploads || []).forEach((u, idx) => { const f = u.file; const li = document.createElement('li'); li.className = 'flex items-center gap-3 text-sm py-2 px-3 rounded-md border border-[color:var(--color-gray-5)] bg-[color:var(--color-gray-2)]'; const img = document.createElement('img'); try { img.src = URL.createObjectURL(f); img.width = 56; img.height = 56; img.style.objectFit = 'cover'; img.style.borderRadius = '4px'; li.appendChild(img); } catch {} const meta = document.createElement('div'); meta.className = 'flex-1 min-w-0'; meta.style.overflow = 'hidden'; meta.style.textOverflow = 'ellipsis'; meta.style.whiteSpace = 'nowrap'; meta.textContent = `${f.name} (${Math.round(f.size/1024)} KB)`; li.appendChild(meta); const rm = document.createElement('button'); rm.type = 'button'; rm.className = 'px-3 py-1 text-sm rounded border border-[color:var(--color-gray-6)] hover:bg-[color:var(--color-gray-3)]'; rm.textContent = 'Remove'; rm.addEventListener('click', () => { try { if (img.src?.startsWith('blob:')) URL.revokeObjectURL(img.src); } catch {} this._uploads.splice(idx, 1); this._renderUploadPreviews(host); }); li.appendChild(rm); previews.appendChild(li); }); const countEl = host.querySelector('#upload-count'); if (countEl) { const n = (this._uploads || []).length; countEl.textContent = n === 0 ? '' : `${n} of ${this.UPLOAD_MAX_FILES} selected`; } }; initUploader = (rootSelector = '#uploadSection') => { const host = (typeof rootSelector === 'string') ? document.querySelector(rootSelector) : rootSelector; if (!host) return; this._uploads = []; this._uploadedKeys = []; this._uploadNonce = this._genUploadNonce(); const handleFiles = (evt) => { const files = Array.from(evt.target.files || []); const acc = (this._uploads || []).slice(); for (const f of files) { if (!this.UPLOAD_ALLOWED_TYPES.includes(f.type)) { console.warn(`[Uploader] Skipping ${f.name}: unsupported type ${f.type}`); continue; } if (acc.length >= this.UPLOAD_MAX_FILES) break; acc.push({ file: f }); } this._uploads = acc.slice(0, this.UPLOAD_MAX_FILES); this._renderUploadPreviews(host); try { evt.target.value = ''; } catch {} }; const btnPick = host.querySelector('#btnUploadPick'); const btnCam = host.querySelector('#btnUploadCamera'); const input = host.querySelector('#uploadInput'); const inputCam = host.querySelector('#uploadInputCamera'); // Use assignment (onclick/onchange), NOT addEventListener — attachHandlers // runs on both onMount AND afterNavigate, so calling initUploader twice // would stack listeners and fire input.click() twice (the file picker // re-opens right after you hit Open). Assignment replaces cleanly. if (btnPick) btnPick.onclick = () => input?.click(); if (btnCam) btnCam.onclick = () => inputCam?.click(); if (input) input.onchange = handleFiles; if (inputCam) inputCam.onchange = handleFiles; const form = host.closest('form'); if (form && !form._j4mUploadResetBound) { form._j4mUploadResetBound = true; form.addEventListener('reset', () => { this._uploads = []; this._uploadedKeys = []; this._uploadNonce = this._genUploadNonce(); const previews = host.querySelector('#upload-previews'); if (previews) previews.innerHTML = ''; const countEl = host.querySelector('#upload-count'); if (countEl) countEl.textContent = ''; }); } }; uploadSelectedFiles = async (tenantId) => { if (!this._uploads?.length) return []; if (this._uploadBusy) throw new Error('upload_in_progress'); this._uploadBusy = true; try { const keys = []; for (const u of this._uploads) { const f = u.file; const blob = await this.resizeImageToBlob(f, this.UPLOAD_RESIZE_MAX_DIM, this.UPLOAD_RESIZE_QUALITY); if (blob.size > this.UPLOAD_MAX_BYTES) { throw new Error(`File ${f.name} too large (${Math.round(blob.size/1024/1024)}MB > ${this.UPLOAD_MAX_BYTES/1024/1024}MB)`); } const isJpegBlob = blob.type === 'image/jpeg' || !blob.type?.startsWith('image/'); const filename = isJpegBlob ? f.name.replace(/\.(png|webp|gif|heic|heif)$/i, '.jpg') : f.name; const contentType = blob.type || f.type || 'image/jpeg'; const preResp = await fetch(this.UPLOAD_PRESIGN_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ tenantId, purpose: 'contact-evidence', nonce: this._uploadNonce, fileName: filename, contentType, }), }); const pre = await preResp.json().catch(() => ({})); if (!preResp.ok || !pre.uploadUrl || !pre.s3Key) { throw new Error(pre.error || 'presign_failed'); } const putResp = await fetch(pre.uploadUrl, { method: 'PUT', headers: { 'Content-Type': contentType }, body: blob, }); if (!putResp.ok) { throw new Error(`s3_upload_failed (${putResp.status})`); } keys.push(pre.s3Key); } this._uploadedKeys = keys; return keys; } finally { this._uploadBusy = false; } }; // ========== END CONTACT-EVIDENCE UPLOADER ========== constructor(meta, site) { this.id = this.getRandom(); meta.ctxt = () => { return this }; this.site = site; this.generate() } getSuggestions = async () => { return [ { detail: `(object)

${title}

Contact Us