// Skrrs portal — Contact form and Favorites. const { Button: KBtn, Input: KInput, Select: KSelect, Checkbox: KCheck, Badge: KBadge, PropertyCard: KPCard } = window.SkrrsDesignSystem_6013e8; // ── Contact ───────────────────────────────────────────────── function ContactScreen({ onNav, presetType, property }) { const D = window.SKRRS_DATA; const { isMobile } = window.useViewport(); const [sent, setSent] = React.useState(false); const [sending, setSending] = React.useState(false); const [error, setError] = React.useState(''); const [tsToken, setTsToken] = React.useState(''); const tsRef = React.useRef(null); const tsWid = React.useRef(null); const SITEKEY = '0x4AAAAAADl0zdk2Q3xosmTj'; const resetTs = () => { try { if (window.turnstile && tsWid.current!=null) window.turnstile.reset(tsWid.current); } catch(e){} window.__skrrsTs=''; setTsToken(''); }; const propMsg = (p) => p ? `下記の物件についてご相談を希望します。\n\n【物件名】${p.name}\n【物件番号】SK-${String(p.id).toUpperCase()}\n【所在地】${p.area}\n【賃料】${p.rent}\n\n` : ''; const [form, setForm] = React.useState({ name:'', company:'', email:'', tel:'', type: (property && property.type) || presetType || '', area:'', message: propMsg(property), agree:false, }); const set = (k,v)=>setForm(f=>({...f,[k]:v})); const valid = form.name && form.email && form.agree; // 実送信：Cloudflare Pages Function /api/contact 経由で info@skrrs-jp.com へ const submit = async (e) => { e.preventDefault(); if (!valid || sending || !tsToken) return; setSending(true); setError(''); const typeLabel = ({office:'オフィス（借りたい）',retail:'店舗（借りたい）',rnd:'教室（借りたい）',industrial:'倉庫（借りたい）',datacenter:'工場（借りたい）',manage:'物件管理のご相談（貸したい）',other:'その他・複合'})[form.type] || form.type || ''; try { const res = await fetch('/api/contact', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ name: form.name, company: form.company, email: form.email, phone: form.tel, inquiryType: typeLabel, area: form.area, message: form.message, propertyId: property ? ('SK-'+String(property.id).toUpperCase()) : '', propertyName: property ? property.name : '', turnstileToken: tsToken, sourcePage: (typeof location!=='undefined' ? location.pathname+location.hash : ''), }), }); const data = await res.json().catch(()=>({})); if (res.ok && data.ok) { setSent(true); } else { setError(data.error || '送信に失敗しました。お手数ですが info@skrrs-jp.com まで直接ご連絡ください。'); resetTs(); } } catch (err) { setError('通信エラーが発生しました。時間をおいて再度お試しください。'); resetTs(); } finally { setSending(false); } }; // re-prefill if the linked property changes (navigating from a detail page) React.useEffect(() => { if (property) { setForm(f => ({ ...f, type: property.type || f.type, message: propMsg(property) })); setSent(false); } }, [property && property.id]); // Turnstile（スパム対策）ウィジェットを描画 React.useEffect(() => { if (sent) return; let timer = null, cancelled = false; const render = () => { if (cancelled) return; if (window.turnstile && tsRef.current && tsWid.current == null) { tsWid.current = window.turnstile.render(tsRef.current, { sitekey: SITEKEY, callback: (t) => { window.__skrrsTs = t; setTsToken(t); }, 'expired-callback': () => { window.__skrrsTs=''; setTsToken(''); }, 'error-callback': () => { window.__skrrsTs=''; setTsToken(''); }, }); } else if (tsWid.current == null) { timer = setTimeout(render, 300); } }; render(); return () => { cancelled = true; if (timer) clearTimeout(timer); if (tsWid.current != null && window.turnstile) { try { window.turnstile.remove(tsWid.current); } catch(e){} } tsWid.current = null; window.__skrrsTs=''; setTsToken(''); }; }, [sent]); const aside = (
By phone お電話でのご相談はこちら 03-5937-7544 営業時間／平日 10:00〜18:00
ご相談は無料です {['物件のご紹介・ご提案','移転・出店のご相談','物件管理のご相談'].map(t=>( {t} ))}
); return (
{sent ? (

送信が完了しました

お問い合わせありがとうございます。担当者より2営業日以内にご連絡いたします。

onNav('home')}>ホームへ戻る
) : (
{property && (
お問い合わせ対象の物件 {property.name} 物件番号 SK-{String(property.id).toUpperCase()}・{property.rent}
)}
set('name',e.target.value)} placeholder="山田 太郎" /> set('company',e.target.value)} placeholder="株式会社サンプル" /> set('email',e.target.value)} placeholder="you@example.com" /> set('tel',e.target.value)} placeholder="03-0000-0000" /> set('type',e.target.value)} placeholder="種別を選択" options={[{value:'office',label:'オフィス（借りたい）'},{value:'retail',label:'店舗（借りたい）'},{value:'rnd',label:'教室（借りたい）'},{value:'industrial',label:'倉庫（借りたい）'},{value:'datacenter',label:'工場（借りたい）'},{value:'manage',label:'物件管理のご相談（貸したい）'},{value:'other',label:'その他・複合'}]} /> set('area',e.target.value)} placeholder="エリアを選択" options={D.areas} />