function MainComponent() { const [selectedProduct, setSelectedProduct] = React.useState(""); const [showOptions, setShowOptions] = React.useState(false); const [selectedType, setSelectedType] = React.useState(""); const [selectedSize, setSelectedSize] = React.useState(""); const [instructions, setInstructions] = React.useState(""); const handleProductChange = (e)=>{ setSelectedProduct(e.target.value); if (e.target.value === "補修テープ") { setShowOptions(true); } else { setShowOptions(false); setSelectedType(""); setSelectedSize(""); setInstructions(""); } }; const handleTypeChange = (e)=>{ setSelectedType(e.target.value); updateInstructions(e.target.value, selectedSize); }; const handleSizeChange = (e)=>{ const size = e.target.value; setSelectedSize(size); updateInstructions(selectedType, size); }; const updateInstructions = (type, size)=>{ if (type === "普通") { if (size && size <= 4) { setInstructions(`荷造り手順: 1. 商品の梱包: - 商品を丸めて潰し、ビニール袋に入れます。 - 商品がビニール袋に収まるように適切に梱包します。 2. シールの貼り付け: - 梱包された商品に表面にシールを貼ります。 - シールには適切な送付先情報が含まれていることを確認します。 3. 重りを乗せて潰す: - 商品に適切な重りを乗せて潰しておきます。 - これにより、商品が梱包中に変形するのを防ぎます。郵送手順: 1. 必要書類の準備: - 後納郵便物等取扱票(お客様用)と料金後納郵便物等差出票をセットにして準備します。 2. 包装の選択: - 補修テープ2mの場合、ゆうパケット2cmを使用します。 3. 郵送の申し込み: - 三時までに、郵便局に持っていきます。 - 郵便局で郵送の手続きを行います。`); } else if (size && size >= 5) { setInstructions(`梱包と出荷手順書: 1. 伝票シールの貼付け: - 段ボールの側面に伝票シールを貼り付けます。 2. 補修テープの準備: - 床のサイズに合わせて補修テープを切ります。 - 切る際にはノリ用ハサミ(黒いハサミ)を使用します。 - 補修テープの最初の部分が汚れている場合は、少しだけ切り落とします。 3. 補修テープの巻き付け: - 補修テープの芯に巻き付けます。 - マスキングテープで固定し、縦に長く2列分ほど貼り付けます。 - 巻き始めの部分をテープで固定し、芯を回しながら巻いていきます。 - 巻き終わったら、マスキングテープで止めます。 4. 梱包作業: - 補修テープが完成したら、ビニール袋に商品を入れます。 - 商品を段ボールに入れ、梱包材を追加します。 - 手で蓋をしてみて、揺れないかを確認します。 - 透明テープを使用して蓋を止めます。最初は小さく蓋の方に止め、その上から横に長く貼ります。 5. 出荷手続き: - 梱包が完了したら、カウンターの所に置いておきます。 - ヤマト(ドライバー)に電話し、「出荷をお願いします」と伝えます。`); } } else if (type === "パッキー") { if (size <= 4) { setInstructions(`【補修テープパッキーの使用手順】 1. パッキーは超強力なテープであり、通常のテープよりも粘着力が強いため、使用前に確認してください。 2. テープの長さを必要な長さに図り、必要に応じて裁断してください。パッキーはテープに線が付いていないため、切断する際には注意してください。 3. パッキー補修テープの梱包の際は、通常の梱包作業とは異なります。粘着性が強いため、テープを直接貼り付けるのではなく、ビニールなどの表面にテープを貼り付け、それを包むようにしてください。 4. 補修テープを使用して修理を行った場合、修理した部分がビニール袋などに入るようにしてください。これにより、修理箇所が保護され、さらなる損傷を防ぐことができます。`); } else if (size >= 5) { setInstructions(`【補修テープパッキーの使用手順】 1. パッキーは超強力なテープであり、通常のテープよりも粘着力が強いため、使用前に確認してください。 2. テープの長さを必要な長さに図り、必要に応じて裁断してください。パッキーはテープに線が付いていないため、切断する際には注意してください。 3. パッキー補修テープの梱包の際は、通常の梱包作業とは異なります。粘着性が強いため、テープを直接貼り付けるのではなく、ビニールなどの表面にテープを貼り付け、それを包むようにしてください。 4. 補修テープを使用して修理を行った場合、修理した部分がビニール袋などに入るようにしてください。これにより、修理箇所が保護され、さらなる損傷を防ぐことができます。 5. テープが 5m 以上の場合、箱梱包を使用することをお勧めします。これにより、テープが適切に保護され、輸送中に損傷を防ぐことができます。`); } } else { setInstructions(""); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col justify-center items-center h-screen", __source: { fileName: "", lineNumber: 104, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "products", className: "border border-gray-300 rounded px-4 py-2", onChange: handleProductChange, __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, "製品を選択してください"), /*#__PURE__*/ React.createElement("option", { value: "補修テープ", __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, "補修テープ"), /*#__PURE__*/ React.createElement("option", { value: "テント重り", __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }, "テント重り"), /*#__PURE__*/ React.createElement("option", { value: "ミスタークイック", __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, "ミスタークイック"), /*#__PURE__*/ React.createElement("option", { value: "キャラバンテント", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, "キャラバンテント"), /*#__PURE__*/ React.createElement("option", { value: "かんたんてんと3", __source: { fileName: "", lineNumber: 115, columnNumber: 9 }, __self: this }, "かんたんてんと3"), /*#__PURE__*/ React.createElement("option", { value: "スーパーキングEテント", __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, "スーパーキングEテント"), /*#__PURE__*/ React.createElement("option", { value: "パワーパイプテント", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, "パワーパイプテント"), /*#__PURE__*/ React.createElement("option", { value: "新らくらくテント", __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }, "新らくらくテント"), /*#__PURE__*/ React.createElement("option", { value: "スーパーアルミキングテント", __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }, "スーパーアルミキングテント"), /*#__PURE__*/ React.createElement("option", { value: "格安テント", __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }, "格安テント"), /*#__PURE__*/ React.createElement("option", { value: "激安テント", __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, "激安テント"), /*#__PURE__*/ React.createElement("option", { value: "天幕のみ", __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, "天幕のみ"), /*#__PURE__*/ React.createElement("option", { value: "フレームのみ", __source: { fileName: "", lineNumber: 123, columnNumber: 9 }, __self: this }, "フレームのみ"), /*#__PURE__*/ React.createElement("option", { value: "砂袋", __source: { fileName: "", lineNumber: 124, columnNumber: 9 }, __self: this }, "砂袋"), /*#__PURE__*/ React.createElement("option", { value: "ゴムロープ", __source: { fileName: "", lineNumber: 125, columnNumber: 9 }, __self: this }, "ゴムロープ")), showOptions && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "type", className: "border border-gray-300 rounded px-4 py-2 mb-4", onChange: handleTypeChange, __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 135, columnNumber: 13 }, __self: this }, "種類を選択してください"), /*#__PURE__*/ React.createElement("option", { value: "普通", __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this }, "普通"), /*#__PURE__*/ React.createElement("option", { value: "パッキー", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }, "パッキー")), /*#__PURE__*/ React.createElement("select", { name: "size", className: "border border-gray-300 rounded px-4 py-2", onChange: handleSizeChange, __source: { fileName: "", lineNumber: 139, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }, "サイズを選択してください"), Array.from({ length: 12 }, (_, i)=>i + 1).map((size)=>/*#__PURE__*/ React.createElement("option", { key: size, value: size, __source: { fileName: "", lineNumber: 146, columnNumber: 15 }, __self: this }, size, "m")))), instructions && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 border border-gray-300 rounded bg-gray-100 text-sm font-roboto whitespace-pre-wrap", __source: { fileName: "", lineNumber: 153, columnNumber: 9 }, __self: this }, instructions)); }