// ───────────────────────────────────────────────────────── // ChefVerse · Profile page (chef-facing) // Sections: // • Hero — avatar (with corner camera) + name + role pill + market // • Your numbers — 4 stat tiles // • Account details — editable: name, email, role, restaurant, years, channels; read-only: market // • Shipping address — editable address for reward shipping // • Password — change password CTA // • Danger zone — request account deletion, sign out // (Preferences moved to Settings page.) // ───────────────────────────────────────────────────────── const PROFILE_I18N = { en: { title: "Your profile", sub: "How ChefVerse sees you, and what you can change.", edit: "Edit", editProfile: "Edit profile", save: "Save changes", cancel: "Cancel", yourStatsTitle: "Your numbers", yourStatsSub: "Quick view of what you've shipped so far.", statModulesDone: "Trainings completed", statBriefsDone: "Briefs submitted", statRewards: "Reward points", statStreak: "Day streak", accountTitle: "Account details", accountSub: "These are tied to your work email. Need a different email? Ask your UFS rep.", fieldName: "Full name", fieldEmail: "Work email", fieldRole: "Role", fieldRestaurant: "Where you work", fieldYears: "Years in professional kitchens", fieldMarket: "Region", channelsTitle: "Channels", channelsSub: "Where you post — so we know how to size and frame your content.", chInstagram: "Instagram handle", chTiktok: "TikTok handle", chFacebook: "Facebook page", chYoutube: "YouTube channel", shippingTitle: "Shipping address", shippingSub: "Where we'll send physical rewards (merch, equipment).", prefsTitle: "Preferences", prefsSub: "Email notification controls.", prefNotifs: "Email notifications", prefNotifsSub: "New modules, briefs, and reward updates.", prefNotifsAll: "All updates", prefNotifsOff: "Off", shipLine1: "Street address", shipLine2: "Apt, suite, floor (optional)", shipCity: "City", shipPostal: "Postal code", shipRegion: "State / Region", shipCountry: "Country", pwTitle: "Password", pwSub: "Change your password whenever it feels stale.", pwChange: "Change password", pwCurrent: "Current password", pwNew: "New password", pwConfirm: "Confirm new password", pwUpdate: "Update password", pwErrMismatch: "New passwords don't match.", pwErrShort: "New password must be at least 8 characters.", pwErrCurrent: "Please enter your current password.", pwOk: "Password updated", dangerTitle: "Account actions", dangerSub: "Sign out or close your ChefVerse account.", dangerDelete: "Request account deletion", dangerSignOut: "Sign out", saved: "Profile updated", avatarHint: "JPG or PNG · square works best", uploadAvatar: "Change photo", // Roles for the select (matches onboarding role_keys) role_chef: "Head chef", role_sous: "Sous chef", role_owner: "Owner-operator", role_pastry: "Pastry chef", role_consult: "Consultant chef", }, de: { title: "Dein Profil", sub: "Wie ChefVerse dich sieht, und was du ändern kannst.", edit: "Bearbeiten", editProfile: "Profil bearbeiten", save: "Änderungen speichern", cancel: "Abbrechen", yourStatsTitle: "Deine Zahlen", yourStatsSub: "Schnelle Übersicht, was du geliefert hast.", statModulesDone: "Schulungen abgeschlossen", statBriefsDone: "Briefings eingereicht", statRewards: "Belohnungspunkte", statStreak: "Tage-Streak", accountTitle: "Kontodetails", accountSub: "Diese sind an deine geschäftliche E-Mail gebunden. Andere E-Mail? Frag deinen UFS-Kontakt.", fieldName: "Vollständiger Name", fieldEmail: "Geschäftliche E-Mail", fieldRole: "Rolle", fieldRestaurant: "Wo du arbeitest", fieldYears: "Jahre in der Profi-Küche", fieldMarket: "Region", channelsTitle: "Kanäle", channelsSub: "Wo du postest — damit wir Inhalte passend skalieren.", chInstagram: "Instagram-Handle", chTiktok: "TikTok-Handle", chFacebook: "Facebook-Seite", chYoutube: "YouTube-Kanal", shippingTitle: "Versandadresse", shippingSub: "Wohin wir physische Belohnungen schicken (Merch, Equipment).", prefsTitle: "Einstellungen", prefsSub: "E-Mail-Benachrichtigungen.", prefNotifs: "E-Mail-Benachrichtigungen", prefNotifsSub: "Neue Module, Briefings und Belohnungs-Updates.", prefNotifsAll: "Alle Updates", prefNotifsOff: "Aus", shipLine1: "Straße und Hausnummer", shipLine2: "Wohnung, Etage (optional)", shipCity: "Stadt", shipPostal: "Postleitzahl", shipRegion: "Bundesland / Region", shipCountry: "Land", pwTitle: "Passwort", pwSub: "Ändere dein Passwort wann immer es sich abgenutzt anfühlt.", pwChange: "Passwort ändern", pwCurrent: "Aktuelles Passwort", pwNew: "Neues Passwort", pwConfirm: "Neues Passwort bestätigen", pwUpdate: "Passwort aktualisieren", pwErrMismatch: "Neue Passwörter stimmen nicht überein.", pwErrShort: "Das neue Passwort muss mindestens 8 Zeichen haben.", pwErrCurrent: "Bitte gib dein aktuelles Passwort ein.", pwOk: "Passwort aktualisiert", dangerTitle: "Konto-Aktionen", dangerSub: "Abmelden oder ChefVerse-Konto schließen.", dangerDelete: "Kontolöschung anfordern", dangerSignOut: "Abmelden", saved: "Profil aktualisiert", avatarHint: "JPG oder PNG · quadratisch passt am besten", uploadAvatar: "Foto ändern", role_chef: "Küchenchef", role_sous: "Sous chef", role_owner: "Inhaber-Betreiber", role_pastry: "Patissier", role_consult: "Beraterchef", }, id: { title: "Profilmu", sub: "Bagaimana ChefVerse melihatmu, dan apa yang bisa kamu ubah.", edit: "Edit", editProfile: "Edit profil", save: "Simpan", cancel: "Batal", yourStatsTitle: "Angka-angkamu", yourStatsSub: "Ringkasan apa yang sudah kamu kirim.", statModulesDone: "Pelatihan selesai", statBriefsDone: "Brief dikirim", statRewards: "Poin reward", statStreak: "Hari berturut", accountTitle: "Detail akun", accountSub: "Ini terikat ke email kerjamu. Perlu email lain? Tanya kontak UFS-mu.", fieldName: "Nama lengkap", fieldEmail: "Email kerja", fieldRole: "Peran", fieldRestaurant: "Tempat kamu bekerja", fieldYears: "Tahun di dapur profesional", fieldMarket: "Wilayah", channelsTitle: "Channel", channelsSub: "Di mana kamu posting — supaya kami tahu cara framing kontennya.", chInstagram: "Handle Instagram", chTiktok: "Handle TikTok", chFacebook: "Halaman Facebook", chYoutube: "Channel YouTube", shippingTitle: "Alamat pengiriman", shippingSub: "Tempat kami kirim reward fisik (merch, peralatan).", prefsTitle: "Preferensi", prefsSub: "Kontrol notifikasi email.", prefNotifs: "Notifikasi email", prefNotifsSub: "Modul baru, brief, dan update reward.", prefNotifsAll: "Semua update", prefNotifsOff: "Mati", shipLine1: "Alamat jalan", shipLine2: "Unit, lantai (opsional)", shipCity: "Kota", shipPostal: "Kode pos", shipRegion: "Provinsi / Region", shipCountry: "Negara", pwTitle: "Kata sandi", pwSub: "Ganti kata sandi kapan pun terasa basi.", pwChange: "Ubah kata sandi", pwCurrent: "Kata sandi saat ini", pwNew: "Kata sandi baru", pwConfirm: "Konfirmasi kata sandi baru", pwUpdate: "Perbarui kata sandi", pwErrMismatch: "Kata sandi baru tidak cocok.", pwErrShort: "Kata sandi baru minimal 8 karakter.", pwErrCurrent: "Masukkan kata sandi saat ini.", pwOk: "Kata sandi diperbarui", dangerTitle: "Tindakan akun", dangerSub: "Keluar atau tutup akun ChefVerse kamu.", dangerDelete: "Minta hapus akun", dangerSignOut: "Keluar", saved: "Profil diperbarui", avatarHint: "JPG atau PNG · persegi paling pas", uploadAvatar: "Ganti foto", role_chef: "Head chef", role_sous: "Sous chef", role_owner: "Pemilik-operator", role_pastry: "Pastry chef", role_consult: "Konsultan chef", }, }; // Market display based on locale (since profile.location was per-locale string) const MARKETS = { en: { code: "gb", label: "United Kingdom", flag: "🇬🇧" }, de: { code: "de", label: "Deutschland", flag: "🇩🇪" }, id: { code: "id", label: "Indonesia", flag: "🇮🇩" }, }; function ProfilePage({ locale, profile, onLogout, onChangePassword }) { const tl = PROFILE_I18N[locale] || PROFILE_I18N.en; // Per-section edit state: null when idle, or one of "account" | "channels" | "shipping" const [editingSection, setEditingSection] = React.useState(null); const [savedToast, setSavedToast] = React.useState(false); const editingAccount = editingSection === "account"; const editingChannels = editingSection === "channels"; const editingShipping = editingSection === "shipping"; // Email notifications preference (moved here from the removed Settings page) const [notifLevel, setNotifLevel] = React.useState(() => { try { return localStorage.getItem("chefverse_notif_level") || "all"; } catch (e) { return "all"; } }); const setNotif = (v) => { setNotifLevel(v); try { localStorage.setItem("chefverse_notif_level", v); } catch (e) {} setSavedToast(true); setTimeout(() => setSavedToast(false), 1600); }; // In-place password change (no redirect) const [pwCurrent, setPwCurrent] = React.useState(""); const [pwNew, setPwNew] = React.useState(""); const [pwConfirm, setPwConfirm] = React.useState(""); const [pwError, setPwError] = React.useState(""); const updatePassword = () => { if (!pwCurrent.trim()) { setPwError(tl.pwErrCurrent); return; } if (pwNew.length < 8) { setPwError(tl.pwErrShort); return; } if (pwNew !== pwConfirm) { setPwError(tl.pwErrMismatch); return; } setPwError(""); setPwCurrent(""); setPwNew(""); setPwConfirm(""); setSavedToast(true); setTimeout(() => setSavedToast(false), 1600); }; // Seed values const initialName = profile.name || "Chef"; const initialEmail = profile.email || (initialName.toLowerCase().replace(/\s+/g, ".") + "@yourrestaurant.com"); const initialRestaurant = profile.restaurant || (locale === "de" ? "Kantine Berlin Mitte" : locale === "id" ? "Warung Bali Sunset" : "Lower East Side Bistro"); const initialYears = profile.years || "4"; const initialChannels = profile.channels || { instagram: "", tiktok: "", facebook: "", youtube: "" }; const initialShipping = profile.shipping || { line1: "", line2: "", city: "", postal: "", region: "", country: "" }; // Editable state (cloned) const [name, setName] = React.useState(initialName); const [email, setEmail] = React.useState(initialEmail); const [roleKey, setRoleKey] = React.useState(profile.role_key || "role_sous"); const [restaurant, setRestaurant] = React.useState(initialRestaurant); const [years, setYears] = React.useState(initialYears); const [channels, setChannels] = React.useState(initialChannels); const [shipping, setShipping] = React.useState(initialShipping); // Market is read-only — derived from locale const market = MARKETS[locale] || MARKETS.en; // Stats (from progress + briefs data) const lp = window.useLessonProgress ? window.useLessonProgress() : null; const stats = React.useMemo(() => { const cur = window.CURRICULUM || []; let modulesDone = 0; if (lp) { // Count trainings that are fully complete (100%) modulesDone = cur.filter(m => lp.modulePct(m) >= 1).length; } let briefsDone = 0; try { const raw = localStorage.getItem("chefverse_briefs_v1"); if (raw) { const p = JSON.parse(raw); briefsDone = Object.values(p || {}).filter(v => v === "submitted" || v === "approved").length; } } catch (e) {} if (briefsDone === 0 && window.__CHEFVERSE_PROFILE === "experienced") briefsDone = 2; return { modules: modulesDone, total: cur.length, briefs: briefsDone, points: (modulesDone * 80) + (briefsDone * 150), streak: window.__CHEFVERSE_PROFILE === "experienced" ? 41 : 0, }; }, [lp]); const cancelEdit = (section) => { setEditingSection(null); if (section === "account") { setName(initialName); setEmail(initialEmail); setRoleKey(profile.role_key || "role_sous"); setRestaurant(initialRestaurant); setYears(initialYears); } else if (section === "channels") { setChannels(initialChannels); } else if (section === "shipping") { setShipping(initialShipping); } }; const handleSave = () => { setEditingSection(null); setSavedToast(true); setTimeout(() => setSavedToast(false), 2000); }; const roleLabel = tl[roleKey] || (window.I18N[locale].onboard[roleKey] || roleKey); const roleOptions = ["role_chef", "role_sous", "role_owner", "role_pastry", "role_consult"]; return (
{/* Hero */}

{name}

{roleLabel} · {market.flag} {market.label}
{/* Stats */}

{tl.yourStatsTitle}

{tl.yourStatsSub}

{stats.modules} / {stats.total}
{tl.statModulesDone}
{stats.briefs}
{tl.statBriefsDone}
{stats.points.toLocaleString()}
{tl.statRewards}
{stats.streak}
{tl.statStreak}
{/* Account details — with Edit button next to heading */}

{tl.accountTitle}

{tl.accountSub}

{!editingAccount ? ( ) : ( <> )}
{editingAccount ? setName(e.target.value)} /> :
{name}
}
{editingAccount ? setEmail(e.target.value)} /> :
{email}
}
{editingAccount ?
({ value: rk, label: tl[rk] }))} />
:
{roleLabel}
}
{editingAccount ? setRestaurant(e.target.value)} placeholder={locale === "de" ? "Restaurant, Küche, eigene Marke oder freiberuflich" : locale === "id" ? "Restoran, dapur, brand pribadi, atau freelance" : "Restaurant, kitchen, personal brand, or freelance"} /> :
{restaurant}
}
{editingAccount ? setYears(e.target.value)} /> :
{years}
}
{market.flag} {market.label}
{/* Channels */}

{tl.channelsTitle}

{tl.channelsSub}

{!editingChannels ? ( ) : ( <> )}
{editingChannels ? setChannels({ ...channels, instagram: e.target.value })} /> :
{channels.instagram || —}
}
{editingChannels ? setChannels({ ...channels, tiktok: e.target.value })} /> :
{channels.tiktok || —}
}
{editingChannels ? setChannels({ ...channels, facebook: e.target.value })} /> :
{channels.facebook || —}
}
{editingChannels ? setChannels({ ...channels, youtube: e.target.value })} /> :
{channels.youtube || —}
}
{/* Shipping address */}

{tl.shippingTitle}

{tl.shippingSub}

{!editingShipping ? ( ) : ( <> )}
{editingShipping ? setShipping({ ...shipping, line1: e.target.value })} /> :
{shipping.line1 || —}
}
{editingShipping ? setShipping({ ...shipping, line2: e.target.value })} /> :
{shipping.line2 || —}
}
{editingShipping ? setShipping({ ...shipping, city: e.target.value })} /> :
{shipping.city || —}
}
{editingShipping ? setShipping({ ...shipping, postal: e.target.value })} /> :
{shipping.postal || —}
}
{editingShipping ? setShipping({ ...shipping, region: e.target.value })} /> :
{shipping.region || —}
}
{editingShipping ? setShipping({ ...shipping, country: e.target.value })} /> :
{shipping.country || —}
}
{/* Preferences — email notifications (language lives in the top bar) */}

{tl.prefsTitle}

{tl.prefsSub}

{tl.prefNotifs}
{tl.prefNotifsSub}
{/* Password */}

{tl.pwTitle}

{tl.pwSub}

{ setPwCurrent(e.target.value); setPwError(""); }} />
{ setPwNew(e.target.value); setPwError(""); }} />
{ setPwConfirm(e.target.value); setPwError(""); }} />
{pwError &&
{pwError}
}
{/* Danger zone */}

{tl.dangerTitle}

{tl.dangerSub}

{savedToast && (
{tl.saved}
)}
); } window.ProfilePage = ProfilePage; window.PROFILE_I18N = PROFILE_I18N;