// Monitor conditions, application form, and footer.
const { CTAButton, ImgFrame, Ornament, SafetyNotice } = window;
const priceOptions = {
trial3: ["500円未満", "500〜980円", "980〜1,280円", "1,280円以上でも内容次第", "価格次第では試さない"],
trial10: ["1,500円未満", "1,500〜2,480円", "2,480〜2,980円", "2,980円以上でも内容次第", "10包は不要"],
set: ["3,980円未満", "3,980〜4,980円", "4,980〜5,980円", "5,980〜6,980円", "セットではなくトリートメント単品がよい"]
};
const agreementItems = [
"入力内容をモニター選考および連絡のために使用することに同意します。",
"使用後アンケートに協力できる場合のみ応募してください。",
"商品は開発中であり、仕様・内容が変更になる可能性があることを確認しました。",
"使用中または使用後に異常を感じた場合は使用を中止することを確認しました。"
];
const MonitorConditions = () => {
const conditions = [
{ label: "対象", body: "30代・40代女性で、サウナをご利用いただける方" },
{ label: "お悩み", body: "サウナ後の髪のパサつき、広がり、きしみが気になる方" },
{ label: "ご協力内容", body: "使用感・香り・洗い流しやすさ等のアンケート" },
{ label: "人数", body: "先行モニター 10〜20名限定／選考のうえご連絡" }
];
return (
MONITOR CONDITIONS
先行モニター募集要項
開発中のサウナ前ヘアケア「SAUNA HAIR VEIL」を、実際のサウナ習慣の中でお試しいただける方を募集しています。
{conditions.map((condition, index) => (
NO. 0{index + 1}
{condition.label}
{condition.body}
))}
{options.map((option, index) => {
const id = `${name}-${index}`;
return (
);
})}
);
const CheckboxGroup = ({ name, options }) => (
{options.map((option, index) => {
const id = `${name}-${index}`;
return (
);
})}
);
const AgreementChecks = ({ values, onChange }) => (
{agreementItems.map((item, index) => {
const id = `agreement-${index}`;
return (
);
})}
);
const collectFormData = (form) => {
const formData = new FormData(form);
const values = {};
for (const [key, value] of formData.entries()) {
if (values[key]) {
values[key] = Array.isArray(values[key]) ? [...values[key], value] : [values[key], value];
} else {
values[key] = value;
}
}
return values;
};
const MonitorForm = ({ onSubmit }) => {
const [agreements, setAgreements] = React.useState(agreementItems.map(() => false));
const [status, setStatus] = React.useState("");
const allAgreed = agreements.every(Boolean);
const updateAgreement = (index, checked) => {
setAgreements((current) => current.map((value, itemIndex) => itemIndex === index ? checked : value));
};
const handleSubmit = async (event) => {
event.preventDefault();
const form = event.currentTarget;
if (!allAgreed) {
setStatus("同意項目をすべて確認してください。");
return;
}
if (!form.reportValidity()) return;
const payload = collectFormData(form);
const result = await onSubmit(payload);
if (result?.ok) {
setStatus("仮受付が完了しました。選考のうえ、後日メールにてご連絡します。");
form.reset();
setAgreements(agreementItems.map(() => false));
} else {
setStatus(result?.message || "送信内容を確認してください。");
}
};
return (
);
};
const FinalCTA = ({ onCta }) => (
JOIN THE PRE-LAUNCH MONITOR
あなたの声を、商品づくりに。
SAUNA HAIR VEILの先行モニターにご協力ください。
);
const Footer = () => (
);
Object.assign(window, { MonitorConditions, MonitorForm, FinalCTA, Footer, collectFormData });