function MainComponent() { const [step, setStep] = useState(0); const [formData, setFormData] = useState({ appType: "", appGoal: "", appFeatures: [], additionalRequests: "", userScale: "", developmentPeriod: "", needsDemo: "", needsPM: "", needsDesign: "", needsInhouse: "", budgetRange: "", companyName: "", contactName: "", email: "", phone: "" }); const [emailError, setEmailError] = useState(""); const [isSubmitting, setIsSubmitting] = useState(false); const [submitSuccess, setSubmitSuccess] = useState(false); const [showError, setShowError] = useState(false); const questions = [ { title: "どのようなアプリを開発したいですか？", field: "appType", type: "select", options: [ "Webアプリ", "モバイルアプリ", "両方", "まだ決まっていない" ], required: true }, { title: "今回の開発の目的・ゴールを教えてください", field: "appGoal", type: "textarea", placeholder: "例：顧客との予約をスムーズにしたい、社内業務を効率化したいなど", required: true }, { title: "必要と思われる主な機能を教えてください（複数選択可）", field: "appFeatures", type: "checkbox", options: [ "ユーザー登録・ログイン機能", "検索・フィルタリング機能", "予約・スケジュール管理機能", "決済機能", "通知機能（メールやプッシュ通知）", "管理画面（ダッシュボード）", "外部サービス連携（SNSなど）", "その他" ], required: false }, { title: "その他に想定している機能や要望はありますか？", field: "additionalRequests", type: "textarea", placeholder: "例：特定のUI要件、データ分析機能など", required: false }, { title: "想定されるユーザー数（規模）を教えてください", field: "userScale", type: "select", options: [ "〜50人", "51〜200人", "201〜1000人", "1000人以上", "未定" ], required: true }, { title: "開発期間はどれくらいを想定していますか？", field: "developmentPeriod", type: "select", options: [ "1〜3ヶ月", "3〜6ヶ月", "6〜12ヶ月", "1年以上", "未定" ], required: true }, { title: "進行管理ディレクター（PM）は必要ですか？", field: "needsPM", type: "select", options: [ "はい", "いいえ", "相談したい" ], required: true }, { title: "デザインは必要ですか？", field: "needsDesign", type: "select", options: [ "はい", "いいえ", "相談したい" ], required: true }, { title: "内製化支援をご希望ですか？", field: "needsInhouse", type: "select", options: [ "はい", "いいえ", "相談したい" ], required: true }, { title: "おおよその予算イメージがあれば教えてください", field: "budgetRange", type: "select", options: [ "〜100万円", "100〜300万円", "300〜500万円", "500万円以上", "未定" ], required: false }, { title: "お客様の会社名を教えてください", field: "companyName", type: "text", placeholder: "会社名", required: true }, { title: "担当者名を教えてください", field: "contactName", type: "text", placeholder: "お名前", required: true }, { title: "お客様のメールアドレスを教えてください", field: "email", type: "email", placeholder: "example@company.com", required: true, validation: (value)=>{ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(value)) { return "有効なメールアドレスを入力してください"; } return ""; } }, { title: "最後に、お客様のお電話番号を教えてください", field: "phone", type: "tel", placeholder: "03-xxxx-xxxx", required: true } ]; const handleOptionSelect = (value)=>{ setFormData({ ...formData, [questions[step].field]: value }); if (step < questions.length - 1) { setStep(step + 1); } }; const handleInputChange = (e)=>{ const value = e.target.value; setFormData({ ...formData, [questions[step].field]: value }); setShowError(false); if (questions[step].validation) { const error = questions[step].validation(value); setEmailError(error); } }; const handleSubmit = async ()=>{ if (step === questions.length - 1) { setIsSubmitting(true); try { const emailBody = Object.entries(formData).map(([key, value])=>{ const question = questions.find((q)=>q.field === key); return `■${question.title}\r\n${value}`; }).join("\r\n\r\n"); const formattedEmailBody = ` お見積もり依頼内容: ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\r\n ${emailBody} \r\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━`; const response = await fetch("/api/send-email-api", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ to: "info_lead-aaaak7i7xk3go3wjslpnvsjl7u@funrepeat.slack.com", subject: "新規お見積もり依頼", body: formattedEmailBody }) }); if (response.ok) { setSubmitSuccess(true); } } catch (error) { console.error("送信エラー:", error); } finally{ setIsSubmitting(false); } } }; const currentQuestion = questions[step]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f8f9fa] flex items-start justify-center py-8", __source: { fileName: "", lineNumber: 207, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[320px] bg-gradient-to-b from-white to-[#fffef5] rounded-lg shadow-lg p-5 border-2 border-[#ffd700]", __source: { fileName: "", lineNumber: 208, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-6", __source: { fileName: "", lineNumber: 209, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://bolt-dev.net/wp-content/uploads/2022/06/logo.png", alt: "BOLT Logo", className: "h-12 mx-auto mb-4", __source: { fileName: "", lineNumber: 210, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-[18px] font-bold text-gray-800 mb-2", __source: { fileName: "", lineNumber: 215, columnNumber: 11 }, __self: this }, "システム開発の", /*#__PURE__*/ React.createElement("span", { className: "text-[#ffd700]", __source: { fileName: "", lineNumber: 217, columnNumber: 13 }, __self: this }, '"かんたん"'), "見積り"), /*#__PURE__*/ React.createElement("p", { className: "text-[13px] text-gray-600 leading-tight", __source: { fileName: "", lineNumber: 220, columnNumber: 11 }, __self: this }, "BOLTの超高速開発を体感！", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 222, columnNumber: 13 }, __self: this }), "お見積フォームからご依頼ください")), !submitSuccess ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "mb-5", __source: { fileName: "", lineNumber: 228, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[12px] text-gray-500 mb-2 flex justify-between items-center", __source: { fileName: "", lineNumber: 229, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 230, columnNumber: 17 }, __self: this }, "ステップ ", step + 1, "/", questions.length), /*#__PURE__*/ React.createElement("span", { className: "text-[#ffd700]", __source: { fileName: "", lineNumber: 233, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bolt mr-1", __source: { fileName: "", lineNumber: 234, columnNumber: 19 }, __self: this }), "簡単1分で完了")), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-100 rounded-full h-1.5", __source: { fileName: "", lineNumber: 238, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#ffd700] h-1.5 rounded-full transition-all duration-300", style: { width: `${(step + 1) / questions.length * 100}%` }, __source: { fileName: "", lineNumber: 239, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-sm mb-4", __source: { fileName: "", lineNumber: 245, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[14px] font-bold mb-4 text-gray-800", __source: { fileName: "", lineNumber: 246, columnNumber: 15 }, __self: this }, currentQuestion.title, currentQuestion.required && /*#__PURE__*/ React.createElement("span", { className: "text-red-500 ml-1", __source: { fileName: "", lineNumber: 249, columnNumber: 19 }, __self: this }, "*")), currentQuestion.type === "select" ? /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 254, columnNumber: 17 }, __self: this }, currentQuestion.options.map((option)=>/*#__PURE__*/ React.createElement("button", { key: option, onClick: ()=>handleOptionSelect(option), className: "w-full text-left px-3 py-2.5 text-[13px] rounded-lg border-2 border-gray-200 hover:border-[#ffd700] hover:bg-[#fffef5] hover:shadow-md transition-all duration-200", __source: { fileName: "", lineNumber: 256, columnNumber: 21 }, __self: this }, option))) : currentQuestion.type === "checkbox" ? /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 266, columnNumber: 17 }, __self: this }, currentQuestion.options.map((option)=>/*#__PURE__*/ React.createElement("label", { key: option, className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 268, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: formData[currentQuestion.field]?.includes(option) || false, onChange: (e)=>{ const currentValues = formData[currentQuestion.field] || []; const newValues = e.target.checked ? [ ...currentValues, option ] : currentValues.filter((v)=>v !== option); setFormData({ ...formData, [currentQuestion.field]: newValues }); }, className: "form-checkbox h-4 w-4 text-[#ffd700] rounded border-gray-300 focus:ring-[#ffd700]", __source: { fileName: "", lineNumber: 269, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[13px]", __source: { fileName: "", lineNumber: 288, columnNumber: 23 }, __self: this }, option))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ if (step < questions.length - 1) { setStep(step + 1); } }, className: "w-full bg-[#ffd700] text-[13px] font-bold text-gray-800 py-3 rounded-lg hover:bg-[#ffed4a] hover:shadow-md transition-all duration-200 mt-4", __source: { fileName: "", lineNumber: 291, columnNumber: 19 }, __self: this }, "次へ", /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right ml-1", __source: { fileName: "", lineNumber: 300, columnNumber: 21 }, __self: this }))) : currentQuestion.type === "textarea" ? /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 304, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { placeholder: currentQuestion.placeholder, value: formData[currentQuestion.field] || "", onChange: handleInputChange, className: "w-full px-3 py-2 text-[13px] border rounded focus:outline-none focus:border-[#ffd700] min-h-[100px]", name: currentQuestion.field, required: currentQuestion.required, __source: { fileName: "", lineNumber: 305, columnNumber: 19 }, __self: this }), showError && !formData[currentQuestion.field] && currentQuestion.required && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-[11px] mt-1", __source: { fileName: "", lineNumber: 316, columnNumber: 23 }, __self: this }, "この項目は必須です"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setShowError(true); if ((!currentQuestion.required || formData[currentQuestion.field]) && (!currentQuestion.validation || !emailError)) { if (step < questions.length - 1) { setShowError(false); setStep(step + 1); } else { handleSubmit(); } } }, className: "w-full bg-[#ffd700] text-[13px] font-bold text-gray-800 py-3 rounded-lg hover:bg-[#ffed4a] hover:shadow-md transition-all duration-200", __source: { fileName: "", lineNumber: 320, columnNumber: 19 }, __self: this }, isSubmitting ? "送信中..." : step === questions.length - 1 ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane mr-1", __source: { fileName: "", lineNumber: 342, columnNumber: 25 }, __self: this }), "送信する") : /*#__PURE__*/ React.createElement(React.Fragment, null, "次へ", /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right ml-1", __source: { fileName: "", lineNumber: 348, columnNumber: 25 }, __self: this })))) : /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 354, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 355, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: currentQuestion.type, placeholder: `${currentQuestion.placeholder}${currentQuestion.required ? " *" : ""}`, value: formData[currentQuestion.field] || "", onChange: handleInputChange, className: `w-full px-3 py-2 text-[13px] border rounded focus:outline-none focus:border-[#ffd700] ${emailError && currentQuestion.field === "email" ? "border-red-500" : "border-gray-200"}`, name: currentQuestion.field, required: currentQuestion.required, __source: { fileName: "", lineNumber: 356, columnNumber: 21 }, __self: this }), emailError && currentQuestion.field === "email" && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-[11px] mt-1", __source: { fileName: "", lineNumber: 372, columnNumber: 23 }, __self: this }, emailError), showError && !formData[currentQuestion.field] && currentQuestion.required && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-[11px] mt-1", __source: { fileName: "", lineNumber: 379, columnNumber: 25 }, __self: this }, "この項目は必須です")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setShowError(true); if (formData[currentQuestion.field] && (!currentQuestion.validation || !emailError)) { if (step < questions.length - 1) { setShowError(false); setStep(step + 1); } else { handleSubmit(); } } }, className: "w-full bg-[#ffd700] text-[13px] font-bold text-gray-800 py-3 rounded-lg hover:bg-[#ffed4a] hover:shadow-md transition-all duration-200", __source: { fileName: "", lineNumber: 384, columnNumber: 19 }, __self: this }, isSubmitting ? "送信中..." : step === questions.length - 1 ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane mr-1", __source: { fileName: "", lineNumber: 405, columnNumber: 25 }, __self: this }), "送信する") : /*#__PURE__*/ React.createElement(React.Fragment, null, "次へ", /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right ml-1", __source: { fileName: "", lineNumber: 411, columnNumber: 25 }, __self: this }))))), step > 0 && /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setShowError(false); setStep(step - 1); }, className: "mt-4 text-[12px] text-gray-500 hover:text-gray-700", __source: { fileName: "", lineNumber: 420, columnNumber: 15 }, __self: this }, "← 戻る")) : /*#__PURE__*/ React.createElement("div", { className: "text-center py-4", __source: { fileName: "", lineNumber: 432, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#fffef5] rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4", __source: { fileName: "", lineNumber: 433, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#ffd700] text-4xl", __source: { fileName: "", lineNumber: 434, columnNumber: 15 }, __self: this }, "✓")), /*#__PURE__*/ React.createElement("h2", { className: "text-[15px] font-bold mb-2", __source: { fileName: "", lineNumber: 436, columnNumber: 13 }, __self: this }, "送信完了しました"), /*#__PURE__*/ React.createElement("p", { className: "text-[13px] text-gray-600", __source: { fileName: "", lineNumber: 437, columnNumber: 13 }, __self: this }, "担当者より連絡させていただきます。")))); }

システム開発の"かんたん"見積り

どのようなアプリを開発したいですか？*