/** * ═══════════════════════════════════════════════════════════════════ * Explore Page Component (SPA) * ═══════════════════════════════════════════════════════════════════ * * Extracted from pages/explore/index.html * * Removed: * - TopBar (handled by app.html) * - Global bottom Tab Bar on Explore (handled by app shell — hidden while on Explore; **InternalShellTwinNav** twin strip + hotbar share bottom inset like NuAsk) * - Side Drawer (handled by app.html) * - TabButton component (shared in app.html) * - DrawerItem component (shared in app.html) * - Authentication checks (handled by router) * * Uses: * - window.SylvanFlowState for destinations caching * - window.appState for state-driven navigation * - window.SylvanFlowAuth for authenticated API calls * * **Ask Sylvan in-TV:** canonical Ask UX is `exploreTvMode === 'askSylvan'` (`AskSylvanPage` with `embeddedExploreTv` + `embeddedPowerUpTv` so the composer stays in the TV column). Full-app `view: 'ask-sylvan'` is optional (deep link / “Full chat”); it does **not** use the global three-tab shell — same immersive contract as Explore/NuAsk (`InternalShellTwinNav` on standalone chat). * Issue #86: Explore hotbar — **premium glass** four tiles (visual parity with Power Up `PowerUpHubTileRow`): per-slot emerald / cyan / violet / amber `glow` + `ring`, stroke icons per slot, labels `text-white` / `#9CA3AF`. Bottom stack: **`SYLVAN_TECH_THEME.classes.shellTwinDockOuter`** + **`shellTwinDockHubInner`** (shared with Power Up). TV hero rim: **`flex-1`** + **`tvRimMaxHeight`** so the plate scales with viewport; scroll clears **`dockScrollPaddingBottom`**. Overlay modes use **minimal-height** flat chrome row (`window.TV_EMBED_CHROME_CLASSES`) + inner plate; **Ask Sylvan overlay** uses **`askRow` / `askTitle`** tokens for a tighter strip above chat (`pages/shared/tv-embed-chrome-classes.js`). Blue hotkey: pick itinerary → stay on **hero / destination** (not trip program); purple hotkey owns timeline + activities. Hero tap opens destination detail in-TV (`ExploreDestinationDetailEmbedded`); detail primary CTA matches purple (trip program timeline + scroll). Timeline activity tap opens **`ExploreActivityDetailEmbedded`** in-TV (no legacy `activity-detail` full page). * NuAsk-tech shell: dark corridor UI, fray loading hold, fixed four-tile hotbar (press **`motion-safe:active:scale-[0.97]`** / **`group-active:`** on icon well). **Phone/tablet first:** `brightness-110` on hover is non-blocking. New plan: tap the Create tile (no keyboard shortcut). **Hero TV gutters:** the flex column wrapping the teal rim uses **symmetric vertical padding** (`pt`/`pb` with `sm:` parity) so header→TV and TV→fixed hotbar gaps stay coherent; **no-plan empty state** uses **`flex-1` + `justify-center`** inside the scroll column so copy + CTA sit mid-plate instead of a tall dead void. **Hero with destination photo:** the hero tap control **`flex-1`** with **`justify-center`** on the image band fills the TV plate above the headline (**no** flipped reflection strip). Documented in **`docs/setup/EXPLORE_SCREEN_CONTRACT.md`**. */ (function() { 'use strict'; const { useState, useEffect, useRef, useMemo } = React; /** Power Up personality carousel moment art — reused for Explore “no current trip” TV plate. */ const EXPLORE_NO_CURRENT_HERO_IMAGE = '/assets/powerup-moment-quiet-lake.png'; function exploreClientDayYmd() { const n = new Date(); return ( n.getFullYear() + '-' + String(n.getMonth() + 1).padStart(2, '0') + '-' + String(n.getDate()).padStart(2, '0') ); } /** Active window or upcoming trip (pairs with `flow-plan-create-guard` + API list ranks). */ function exploreIsCurrentOrUpcomingItinerary(it, todayYmd) { if (!it) return false; const today = todayYmd || exploreClientDayYmd(); const Guard = typeof window !== 'undefined' ? window.flowPlanCreateGuard : null; if (Guard && typeof Guard.evaluateFlowPlanCreateBlockFromList === 'function') { return !!Guard.evaluateFlowPlanCreateBlockFromList([it], today); } return it.is_today_plan === true || it.is_today_plan === 'true'; } function explorePickDefaultActiveTripKey(itins, todayYmd) { if (!Array.isArray(itins) || itins.length === 0) return null; const today = todayYmd || exploreClientDayYmd(); const active = itins.filter((it) => exploreIsCurrentOrUpcomingItinerary(it, today)); if (active.length === 0) return null; const flagged = active.find((it) => it.is_today_plan === true || it.is_today_plan === 'true'); const row = flagged || active[0]; return row.trip_key || row.Trip_Key || null; } /** Legacy SYS/KV `PowerUpAI` → current left-tab label (non-Latin strings unchanged). */ function normalizeTabPowerUpLabel(raw) { const s = String(raw || '').trim(); if (!s) return ''; const compact = s.replace(/[\s_-]/g, ''); if (/^powerupai$/i.test(compact)) return 'Flow Profile'; return s; } /** * Explore dock — four-tile **premium glass** hotbar (visual parity with Power Up `PowerUpHubTileRow`): * per-slot emerald · cyan · violet · orange `glow` / `ring` (~1.33× baseline alpha for richer glass). */ const EXPLORE_HOTBAR_SPECS = [ { key: 'create', icon: 'calendarPlan', glow: 'rgba(34,197,94,0.35)', ring: 'rgba(52,211,153,0.4)' }, { key: 'flowPick', icon: 'flowStack', glow: 'rgba(56,189,248,0.35)', ring: 'rgba(125,211,252,0.4)' }, { key: 'tripTimeline', icon: 'timelineV', glow: 'rgba(167,139,250,0.35)', ring: 'rgba(196,181,253,0.4)' }, { key: 'askChat', icon: 'askBubble', glow: 'rgba(248,130,18,0.35)', ring: 'rgba(251,162,52,0.4)' } ]; /** Custom line-art glyphs — `h-[18px]` / `sw` aligned with Power Up hub icons; tint follows slot hue. */ function ExploreHotbarIcon({ spec }) { const k = spec && spec.icon; const sw = 1.62; const cnBase = 'h-[18px] w-[18px] shrink-0 '; const cn = k === 'calendarPlan' ? cnBase + 'text-emerald-200' : k === 'flowStack' ? cnBase + 'text-sky-200' : k === 'timelineV' ? cnBase + 'text-violet-200' : k === 'askBubble' ? cnBase + 'text-amber-200' : cnBase + 'text-[#2DE2C5]/90'; if (k === 'calendarPlan') { return ( ); } if (k === 'flowStack') { return ( ); } if (k === 'timelineV') { return ( ); } if (k === 'askBubble') { return ( ); } return null; } // ✅ GATEWAY MIGRATION: Use SF_API_BASE (Gateway Worker) instead of SMART_BRAIN_URL // ✅ GATEWAY MIGRATION: Use SF_API_BASE from shared-api-config.js (no duplicate declaration) const SF_API_BASE = window.SF_API_BASE; /** NuAsk-style “fray” hold surface (same motion tokens as NuAskSylvanPage TOP gate). */ function ExploreFrayHold({ linkLabel, titleText, captionText }) { const raw = (titleText || 'LOADING').trim(); const latinTitle = /^[\sA-Za-z0-9·\-]+$/.test(raw); const phrase = latinTitle ? raw.toUpperCase() : raw; const linkTrim = (linkLabel || '').trim(); const capTrim = (captionText || '').trim(); const latinLinkEyebrow = /^[\sA-Za-z0-9·\-.]+$/.test(linkTrim); const latinCaptionLine = /^[\sA-Za-z0-9·\-.:,']+$/.test(capTrim); return (

{linkLabel}

{latinTitle ? ( phrase.split('').map((ch, i) => ( {ch === ' ' ? '\u00a0' : ch} )) ) : (

{phrase}

)}

{captionText}

{[0, 1, 2, 3, 4].map((i) => ( ))}
); } // Legacy constant (removed) // const SMART_BRAIN_URL = 'https://smart-brain.foofiebean.workers.dev'; function ExplorePage() { const TV_EMBED = window.TV_EMBED_CHROME_CLASSES; const [destinations, setDestinations] = useState([]); const [flowPlanCount, setFlowPlanCount] = useState(0); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [profile, setProfile] = useState(null); /** Issue #86: itinerary list + detail (same sources as Flow Plan tab) */ const [itineraries, setItineraries] = useState([]); const [selectedTripKey, setSelectedTripKey] = useState(null); const [selectedItinerary, setSelectedItinerary] = useState(null); const [itinerariesLoading, setItinerariesLoading] = useState(true); // ✅ PAGE LOADING GATE: Track when translations are ready const [translationsReady, setTranslationsReady] = useState(false); // ✅ PROFILE-PHOTO: State for authenticated photo blob URL const [profilePhotoUrl, setProfilePhotoUrl] = useState(null); const profilePhotoObjectUrlRef = useRef(null); const selectedTripKeyRef = useRef(null); const tripTimelineAnchorRef = useRef(null); const [itineraryPickerOpen, setItineraryPickerOpen] = useState(false); /** hero | createPlan (iframe) | tripProgram | destinationDetail | activityDetail | askSylvan */ const [exploreTvMode, setExploreTvMode] = useState('hero'); /** Tighter chrome row when Ask Sylvan fills the overlay TV (less vertical chrome above chat). */ const tvEmbedChrome = TV_EMBED && exploreTvMode === 'askSylvan' && TV_EMBED.askRow ? { row: TV_EMBED.askRow, backBtn: TV_EMBED.askBackBtn, title: TV_EMBED.askTitle, spacer: TV_EMBED.askSpacer } : TV_EMBED; /** When exploreTvMode === 'destinationDetail', API id for window.ExploreDestinationDetailEmbedded */ const [tvDestinationId, setTvDestinationId] = useState(null); /** In-TV activity detail (Explore only — avoids legacy full-page activity-detail view). */ const [tvActivityEmbed, setTvActivityEmbed] = useState(null); /** Which hotkey opened trip program — affects TV chrome title only */ const [tripProgramSource, setTripProgramSource] = useState('pick'); const pendingTripTimelineScrollRef = useRef(false); /** SYS-backed copy when Create Flow Plan is blocked (active or upcoming itinerary). */ const [createFlowPlanBlockedMessage, setCreateFlowPlanBlockedMessage] = useState(null); useEffect(() => { selectedTripKeyRef.current = selectedTripKey; }, [selectedTripKey]); /** BCP 47 tags for `toLocaleDateString` / weekday labels (matches app language codes). */ const getExploreDateLocaleTag = () => { const lang = window.SylvanFlowState?.getLanguage?.() || 'en'; const map = { en: 'en-US', 'zh-CN': 'zh-CN', ja: 'ja-JP', ko: 'ko-KR', th: 'th-TH', vi: 'vi-VN', id: 'id-ID', ms: 'ms-MY', ar: 'ar', fil: 'fil-PH' }; return map[lang] || 'en-US'; }; // ✅ UI LANGUAGE AWARENESS: State for language-aware UI strings const [uiStrings, setUiStrings] = useState({ spontaneityAwaits: 'CORRIDOR · LIVE', yourFlowBegins: 'Your itinerary command center', flowPlansCreatedCount: 'Current Flow Plans: {number}', createNewFlowPlan: 'Create New Flow Plan', createFlowPlan: 'Create Flow Plan', createFirstFlowPlanMessage: 'Create your first flow plan to get started!', flowPlanUserTitle: '{displayName}\'s Flow Plan', flowPlanUserTitlePlural: '{displayName}\'s Flow Plans', flowPlanCurrentCount: 'Current Flow Plan: {number}', flowPlanCurrentCountPlural: 'Current Flow Plans: {number}', flowPlanCurrentLabel: 'CURRENT FLOW PLAN', flowPlanActivity: 'Activity', flowPlanActivities: 'Activities', clickDiscoverMore: 'Click to discover more', loadingHoldLink: 'Your trip link', loadingHoldTitle: 'Loading Explore', loadingHoldCaption: 'Syncing trips, stops, and this view…', itineraryLoadingCaption: 'Loading each day’s stops and activities…', itineraryLoadingTitle: 'Syncing day plan', hotbarCreateSub: '', hotbarFlowPickTitle: 'Flow Plan Selection', hotbarFlowPickSub: 'Choose which plan is on-screen', hotbarTripTimelineTitle: 'Trip timeline', hotbarTripTimelineSub: 'Jump to your day-by-day stops', tabAskSylvanShort: 'Ask Sylvan', hotbarAskSylvanSub: 'Chat with your travel copilot', tabExploreBadge: 'Explore', exploreFlowPickHotbarHint: 'Tap Flow Plan Selection in the bottom bar to open your trip list.', exploreNoActivePlanLabel: 'NO ACTIVE TRIP', exploreNoCurrentPlanTitle: 'No Flow Plan for today', exploreNoCurrentPlanMessage: "You don't have a trip in progress right now. Start a new Flow Plan when you're ready—or tap Flow Plan Selection below to open a past trip.", destinationsErrorHeading: 'Unable to load destinations', retryButton: 'Retry', recoverySyncMessage: 'We found plans on your account, but this screen did not sync. Refresh to load itineraries and destinations again.', recoveryRefreshButton: 'Refresh', legalPoliciesLink: 'Legal & Policies', unknownDate: 'Unknown date', defaultGuestName: 'Traveler', heroFallbackTitle: 'Your trip', brandLogoAlt: 'SylvanFlow', exploreDestinationChromeTitle: 'Destination', exploreDestinationLoading: 'Loading destination...', exploreDestinationNoDescription: 'No description available.', exploreDestinationAiVoice: "In Sylvan AI's Words", exploreDestinationViewFlowPlan: 'View Detailed Flow Plan', exploreDestinationGoBack: 'Go Back', exploreActivityChromeTitle: 'Activity', exploreActivityLabelDestination: 'Destination', exploreActivityLabelDay: 'Day', exploreActivityLabelLocation: 'Location', exploreActivityLabelTime: 'Time', exploreActivityLabelType: 'Type', exploreActivityNoDescription: 'No description for this stop yet.', exploreActivityMissingParams: 'Could not open this activity.', navTwinPowerUp: 'Profile', navTwinNuAsk: 'NOW WHAT' }); // ✅ FIX: Identity comes from Bearer token via authenticatedFetch, not from localStorage email // Removed userId dependency - authenticatedFetch works with session token only // Identity is derived server-side from Authorization Bearer token (opaque userKey) useEffect(() => { window.SYLVAN_TECH_THEME?.ensureKeyframes?.(); }, []); useEffect(() => { // ✅ FIX: Identity guarantee log - once per page load (admin-only, sanitized) const sessionToken = localStorage.getItem('sylvanflow_session_token'); if (window.uiLogger) { window.uiLogger.uiLog('[IDENTITY][EXPLORE] source=Bearer_only tokenLength=' + (sessionToken?.length || 0)); } loadData(); // Cleanup object URL on unmount return () => { if (profilePhotoObjectUrlRef.current) { URL.revokeObjectURL(profilePhotoObjectUrlRef.current); profilePhotoObjectUrlRef.current = null; } }; }, []); // ✅ PROFILE-PHOTO: Fetch photo when profile changes useEffect(() => { // Reset photo URL when profile changes if (profilePhotoObjectUrlRef.current) { URL.revokeObjectURL(profilePhotoObjectUrlRef.current); profilePhotoObjectUrlRef.current = null; } setProfilePhotoUrl(null); if (!profile) { return; } // ✅ PROFILE-PHOTO: If profile_photo_url is already a public URL, use it directly if (profile.profile_photo_url && !profile.profile_photo_url.includes('/api/profile-photo/')) { setProfilePhotoUrl(profile.profile_photo_url); return; } // ✅ PROFILE-PHOTO: Use cached data URL (persists across refresh) if (profile.profile_photo_r2_key || profile.profile_photo_url?.includes('/api/profile-photo/')) { const loadPhoto = async () => { try { // Check cache first const CACHE_KEY = 'profile_photo_cache_v1'; const CACHE_MAX_AGE_MS = 7 * 24 * 60 * 60 * 1000; // 7 days const r2Key = profile.profile_photo_r2_key; if (r2Key) { try { const cached = localStorage.getItem(CACHE_KEY); if (cached) { const cacheData = JSON.parse(cached); if (cacheData.profile_photo_r2_key === r2Key) { const cacheAge = Date.now() - (cacheData.cachedAt || 0); if (cacheAge < CACHE_MAX_AGE_MS) { // Cache hit - use immediately if (window.uiLogger) { window.uiLogger.uiLog(`[EXPLORE] [PROFILE-PHOTO] Cache hit (age: ${Math.floor(cacheAge / 1000 / 60)} min)`); } setProfilePhotoUrl(cacheData.dataUrl); // Refetch in background to refresh cache fetchPhotoInBackground(); return; } else { // Cache expired localStorage.removeItem(CACHE_KEY); } } } } catch (cacheError) { if (window.uiLogger) { window.uiLogger.uiWarn('[EXPLORE] [PROFILE-PHOTO] Cache read error:', cacheError.message || cacheError); } } } // Cache miss - fetch and cache await fetchPhotoInBackground(); } catch (error) { if (window.uiLogger) { window.uiLogger.uiWarn('[EXPLORE] [PROFILE-PHOTO] Error loading photo:', error.message || error); } setProfilePhotoUrl(null); } }; const fetchPhotoInBackground = async () => { try { const res = await window.SylvanFlowAuth.authenticatedFetch( `${SF_API_BASE}/api/profile-photo/self` ); // ✅ UI-BUG-02 FIX: Check status before reading blob (204 = no content) if (res.status === 204) { return; } if (res.ok) { const blob = await res.blob(); if (blob.size === 0 || !blob.type.startsWith('image/')) { if (window.uiLogger) { window.uiLogger.uiWarn('[EXPLORE] [PROFILE-PHOTO] Invalid blob', { size: blob.size, type: blob.type }); } return; } // Convert to data URL const reader = new FileReader(); reader.onloadend = () => { const dataUrl = reader.result; const r2Key = profile.profile_photo_r2_key; if (r2Key && dataUrl) { // Cache it try { const cacheData = { profile_photo_r2_key: r2Key, dataUrl: dataUrl, cachedAt: Date.now() }; localStorage.setItem('profile_photo_cache_v1', JSON.stringify(cacheData)); if (window.uiLogger) { window.uiLogger.uiLog('[EXPLORE] [PROFILE-PHOTO] Cached (size: ' + blob.size + ' bytes)'); } } catch (cacheError) { if (window.uiLogger) { window.uiLogger.uiWarn('[EXPLORE] [PROFILE-PHOTO] Cache write error:', cacheError.message || cacheError); } } } setProfilePhotoUrl(dataUrl); }; reader.onerror = () => { if (window.uiLogger) { window.uiLogger.uiWarn('[EXPLORE] [PROFILE-PHOTO] FileReader error'); } setProfilePhotoUrl(null); }; reader.readAsDataURL(blob); } else { if (window.uiLogger) { window.uiLogger.uiWarn('[EXPLORE] [PROFILE-PHOTO] Failed to fetch photo:', res.status); } setProfilePhotoUrl(null); } } catch (error) { if (window.uiLogger) { window.uiLogger.uiWarn('[EXPLORE] [PROFILE-PHOTO] Error fetching photo:', error.message || error); } setProfilePhotoUrl(null); } }; loadPhoto(); } }, [profile?.profile_photo_r2_key, profile?.profile_photo_url]); // ✅ UI LANGUAGE AWARENESS: Load UI strings when language changes useEffect(() => { const loadUiStrings = async () => { const language = window.SylvanFlowState?.getLanguage() || 'en'; // ✅ PAGE LOADING GATE: Reset translations ready state when loading new language setTranslationsReady(false); try { const [ spontaneityAwaits, yourFlowBegins, flowPlansCreatedCount, createNewFlowPlan, createFlowPlan, createFirstFlowPlanMessage, flowPlanUserTitle, flowPlanUserTitlePlural, flowPlanCurrentCount, flowPlanCurrentCountPlural, flowPlanCurrentLabel, flowPlanActivity, flowPlanActivities, clickDiscoverMore, loadingHoldLink, loadingHoldTitle, loadingHoldCaption, itineraryLoadingCaption, itineraryLoadingTitle, hotbarCreateSub, hotbarFlowPickTitle, hotbarFlowPickSub, hotbarTripTimelineTitle, hotbarTripTimelineSub, tabAskSylvanShort, hotbarAskSylvanSub, tabExploreBadge, exploreFlowPickHotbarHint, exploreNoActivePlanLabel, exploreNoCurrentPlanTitle, exploreNoCurrentPlanMessage, destinationsErrorHeading, retryButton, recoverySyncMessage, recoveryRefreshButton, legalPoliciesLink, unknownDate, defaultGuestName, heroFallbackTitle, brandLogoAlt, navTwinPowerUp, navTwinNuAsk, exploreActivityChromeTitle, exploreActivityLabelDestination, exploreActivityLabelDay, exploreActivityLabelLocation, exploreActivityLabelTime, exploreActivityLabelType, exploreActivityNoDescription, exploreActivityMissingParams ] = await Promise.all([ window.getSysMessage('ui:spontaneity_awaits', language), window.getSysMessage('ui:your_flow_begins', language), window.getSysMessage('ui:flow_plan_current_count_plural', language), window.getSysMessage('ui:create_new_flow_plan', language), window.getSysMessage('ui:create_flow_plan', language), window.getSysMessage('ui:create_first_flow_plan_message', language), window.getSysMessage('ui:flow_plan_user_title', language), window.getSysMessage('ui:flow_plan_user_title_plural', language), window.getSysMessage('ui:flow_plan_current_count', language), window.getSysMessage('ui:flow_plan_current_count_plural', language), window.getSysMessage('ui:flow_plan_current_label', language), window.getSysMessage('ui:flow_plan_activity', language), window.getSysMessage('ui:flow_plan_activities', language), window.getSysMessage('ui:explore_click_discover_more', language), window.getSysMessage('ui:explore_loading_hold_link', language), window.getSysMessage('ui:explore_loading_hold_title', language), window.getSysMessage('ui:explore_loading_hold_caption', language), window.getSysMessage('ui:explore_itinerary_loading_caption', language), window.getSysMessage('ui:explore_itinerary_loading_title', language), window.getSysMessage('ui:explore_hotbar_create_sub', language), window.getSysMessage('ui:explore_hotbar_flow_pick_title', language), window.getSysMessage('ui:explore_hotbar_flow_pick_sub', language), window.getSysMessage('ui:explore_hotbar_trip_timeline_title', language), window.getSysMessage('ui:explore_hotbar_trip_timeline_sub', language), window.getSysMessage('ui:tab_ask_sylvan', language), window.getSysMessage('ui:explore_hotbar_ask_sylvan_sub', language), window.getSysMessage('ui:tab_explore', language), window.getSysMessage('ui:explore_flow_pick_hotbar_hint', language), window.getSysMessage('ui:explore_no_active_plan_label', language), window.getSysMessage('ui:explore_no_current_plan_title', language), window.getSysMessage('ui:explore_no_current_plan_message', language), window.getSysMessage('ui:explore_destinations_error_heading', language), window.getSysMessage('ui:explore_retry_button', language), window.getSysMessage('ui:explore_recovery_sync_message', language), window.getSysMessage('ui:explore_recovery_refresh_button', language), window.getSysMessage('ui:explore_legal_policies_link', language), window.getSysMessage('ui:explore_unknown_date', language), window.getSysMessage('ui:explore_default_guest_name', language), window.getSysMessage('ui:explore_hero_fallback_title', language), window.getSysMessage('ui:explore_brand_logo_alt', language), window.getSysMessage('ui:tab_powerupai', language), window.getSysMessage('ui:tab_nu_ask_sylvan', language), window.getSysMessage('ui:explore_activity_chrome_title', language), window.getSysMessage('ui:explore_activity_label_destination', language), window.getSysMessage('ui:explore_activity_label_day', language), window.getSysMessage('ui:explore_activity_label_location', language), window.getSysMessage('ui:explore_activity_label_time', language), window.getSysMessage('ui:explore_activity_label_type', language), window.getSysMessage('ui:explore_activity_no_description', language), window.getSysMessage('ui:explore_activity_missing_params', language) ]); setUiStrings({ spontaneityAwaits: spontaneityAwaits || 'CORRIDOR · LIVE', yourFlowBegins: yourFlowBegins || 'Your itinerary command center', flowPlansCreatedCount: flowPlansCreatedCount || 'Current Flow Plans: {number}', createNewFlowPlan: createNewFlowPlan || 'Create New Flow Plan', createFlowPlan: createFlowPlan || 'Create Flow Plan', createFirstFlowPlanMessage: createFirstFlowPlanMessage || 'Create your first flow plan to get started!', flowPlanUserTitle: flowPlanUserTitle || "{displayName}'s Flow Plan", flowPlanUserTitlePlural: flowPlanUserTitlePlural || "{displayName}'s Flow Plans", flowPlanCurrentCount: flowPlanCurrentCount || 'Current Flow Plan: {number}', flowPlanCurrentCountPlural: flowPlanCurrentCountPlural || 'Current Flow Plans: {number}', flowPlanCurrentLabel: flowPlanCurrentLabel || 'CURRENT FLOW PLAN', flowPlanActivity: flowPlanActivity || 'Activity', flowPlanActivities: flowPlanActivities || 'Activities', clickDiscoverMore: clickDiscoverMore || 'Click to discover more', loadingHoldLink: loadingHoldLink || 'Your trip link', loadingHoldTitle: loadingHoldTitle || 'Loading Explore', loadingHoldCaption: loadingHoldCaption || 'Syncing trips, stops, and this view…', itineraryLoadingCaption: itineraryLoadingCaption || 'Loading each day’s stops and activities…', itineraryLoadingTitle: itineraryLoadingTitle || 'Syncing day plan', hotbarCreateSub: hotbarCreateSub || '', hotbarFlowPickTitle: hotbarFlowPickTitle || 'Flow Plan Selection', hotbarFlowPickSub: hotbarFlowPickSub || 'Choose which plan is on-screen', hotbarTripTimelineTitle: hotbarTripTimelineTitle || 'Trip timeline', hotbarTripTimelineSub: hotbarTripTimelineSub || 'Jump to your day-by-day stops', tabAskSylvanShort: tabAskSylvanShort || 'Ask Sylvan', hotbarAskSylvanSub: hotbarAskSylvanSub || 'Chat with your travel copilot', tabExploreBadge: tabExploreBadge || 'Explore', exploreFlowPickHotbarHint: exploreFlowPickHotbarHint || 'Tap Flow Plan Selection in the bottom bar to open your trip list.', exploreNoActivePlanLabel: exploreNoActivePlanLabel || 'NO ACTIVE TRIP', exploreNoCurrentPlanTitle: exploreNoCurrentPlanTitle || 'No Flow Plan for today', exploreNoCurrentPlanMessage: exploreNoCurrentPlanMessage || "You don't have a trip in progress right now. Start a new Flow Plan when you're ready—or tap Flow Plan Selection below to open a past trip.", destinationsErrorHeading: destinationsErrorHeading || 'Unable to load destinations', retryButton: retryButton || 'Retry', recoverySyncMessage: recoverySyncMessage || 'We found plans on your account, but this screen did not sync. Refresh to load itineraries and destinations again.', recoveryRefreshButton: recoveryRefreshButton || 'Refresh', legalPoliciesLink: legalPoliciesLink || 'Legal & Policies', unknownDate: unknownDate || 'Unknown date', defaultGuestName: defaultGuestName || 'Traveler', heroFallbackTitle: heroFallbackTitle || 'Your trip', brandLogoAlt: brandLogoAlt || 'SylvanFlow', navTwinPowerUp: 'Profile', navTwinNuAsk: navTwinNuAsk || 'NOW WHAT', exploreActivityChromeTitle: exploreActivityChromeTitle || 'Activity', exploreActivityLabelDestination: exploreActivityLabelDestination || 'Destination', exploreActivityLabelDay: exploreActivityLabelDay || 'Day', exploreActivityLabelLocation: exploreActivityLabelLocation || 'Location', exploreActivityLabelTime: exploreActivityLabelTime || 'Time', exploreActivityLabelType: exploreActivityLabelType || 'Type', exploreActivityNoDescription: exploreActivityNoDescription || 'No description for this stop yet.', exploreActivityMissingParams: exploreActivityMissingParams || 'Could not open this activity.' }); // ✅ PAGE LOADING GATE: Mark translations as ready setTranslationsReady(true); } catch (error) { if (window.uiLogger) { window.uiLogger.uiWarn('[EXPLORE] Error loading UI strings:', error.message || error); } // Keep fallback values on error // ✅ PAGE LOADING GATE: Still mark as ready even on error (fallback values are acceptable) setTranslationsReady(true); } }; loadUiStrings(); // Re-fetch when language changes const handleLanguageChange = () => { loadUiStrings(); }; if (window.SylvanFlowState?.on) { window.SylvanFlowState.on('language', handleLanguageChange); return () => { window.SylvanFlowState.off('language', handleLanguageChange); }; } }, []); function findDestinationForTripKey(destList, tripKey) { if (!tripKey || !destList?.length) return null; const norm = window.NormalizeTripKey?.normalizeTripKey(tripKey) || tripKey; return ( destList.find((d) => { const tk = d.trip_key || d.Trip_Key || d.Flow_Plan_ID; if (!tk) return false; const nt = d._normalized_trip_key || window.NormalizeTripKey?.normalizeTripKey(tk); return nt === norm; }) || null ); } const formatFlowPlanDate = (flowPlanCreatedOn, createdDate) => { const loc = getExploreDateLocaleTag(); const unknown = uiStrings.unknownDate || 'Unknown date'; try { if (createdDate) { const date = new Date(createdDate + 'T00:00:00'); return date.toLocaleDateString(loc, { year: 'numeric', month: 'long', day: 'numeric' }); } if (flowPlanCreatedOn) { const datePart = flowPlanCreatedOn.split(' at ')[0]; return datePart; } return unknown; } catch { return flowPlanCreatedOn || createdDate || unknown; } }; const formatFlowPlanDropdownLabel = (itinerary) => { const datePart = formatFlowPlanDate(itinerary.FlowPlanCreatedOn, itinerary.created_date || itinerary.created_at); const dest = (itinerary.destination_label || '').trim(); if (dest) return `${dest} · ${datePart}`; return datePart; }; const formatTime = (timeStr) => { try { if (!timeStr) return ''; if (!timeStr.includes(':')) return timeStr; const [hours, minutes] = timeStr.split(':'); const hour = parseInt(hours, 10); const min = parseInt(minutes || '0', 10); if (Number.isNaN(hour)) return timeStr; const d = new Date(2000, 0, 1, hour, Number.isNaN(min) ? 0 : min); return d.toLocaleTimeString(getExploreDateLocaleTag(), { hour: 'numeric', minute: '2-digit' }); } catch { return timeStr || ''; } }; const formatDateDisplay = (dateStr) => { try { const date = new Date(dateStr); return date.toLocaleDateString(getExploreDateLocaleTag(), { year: 'numeric', month: 'long', day: 'numeric' }); } catch { return dateStr; } }; const getActivityImage = (activity) => activity.image_url || activity.Image_URL || activity.photo_url || activity.Photo_URL || null; const getActivityLocation = (activity) => { if (typeof activity.location === 'object' && activity.location !== null) { return activity.location.address || activity.location.name || activity.location.Location || ''; } return activity.location || activity.Location || ''; }; const navigateToActivityDetail = ({ tripKey, dayKey, activityIndex, lang, activity }) => { setTvDestinationId(null); setTvActivityEmbed({ tripKey, dayKey, activityIndex, activity, lang: lang || window.SylvanFlowState?.getLanguage?.() || 'en' }); setTripProgramSource('timeline'); setExploreTvMode('activityDetail'); }; const navigateToFlowPlanForm = () => { setTvActivityEmbed(null); setTvDestinationId(null); setExploreTvMode('createPlan'); }; const tryOpenFlowPlanForm = async () => { const Guard = typeof window !== 'undefined' ? window.flowPlanCreateGuard : null; const lang = profile?.preferred_language || (typeof window !== 'undefined' && window.SylvanFlowState?.getLanguage?.()) || 'en'; if (!Guard || typeof Guard.fetchItinerariesForFlowPlanGuard !== 'function') { navigateToFlowPlanForm(); return; } try { const list = await Guard.fetchItinerariesForFlowPlanGuard(); const block = Guard.evaluateFlowPlanCreateBlockFromList(list, Guard.clientCalendarDayYMD()); if (block && typeof Guard.getFlowPlanBlockedMessage === 'function') { const msg = await Guard.getFlowPlanBlockedMessage(block, lang); setCreateFlowPlanBlockedMessage(msg || null); return; } } catch (_) { /* fail open */ } setCreateFlowPlanBlockedMessage(null); navigateToFlowPlanForm(); }; useEffect(() => { if (exploreTvMode !== 'tripProgram') return; if (!pendingTripTimelineScrollRef.current) return; pendingTripTimelineScrollRef.current = false; const id = requestAnimationFrame(() => { requestAnimationFrame(() => { const el = tripTimelineAnchorRef.current || document.getElementById('explore-trip-timeline-anchor'); if (el && typeof el.scrollIntoView === 'function') { el.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); return () => cancelAnimationFrame(id); }, [exploreTvMode, selectedItinerary, selectedTripKey]); const loadItineraryDetails = async (tripKey) => { if (window.uiLogger) { window.uiLogger.uiLog(`[EXPLORE] loadItineraryDetails tripKey length=${tripKey?.length || 0}`); } try { const encodedUrl = `${SF_API_BASE}/api/itineraries/${encodeURIComponent(tripKey)}`; const res = await window.SylvanFlowAuth.authenticatedFetch(encodedUrl); window.SylvanFlowAuth.handleAuthResponse(res); if (res.ok) { const data = await res.json(); if (data.ok && data.itinerary) { setSelectedItinerary(data.itinerary); } else { setSelectedItinerary(null); } } else { setSelectedItinerary(null); } } catch (e) { if (window.uiLogger) { window.uiLogger.uiError('[EXPLORE] loadItineraryDetails:', e.message || e); } setSelectedItinerary(null); } }; /** * @returns {{ itineraries: Array, flowPlanCount: number }} */ const loadItineraries = async () => { let resultItins = []; let resultFpCount = 0; try { setItinerariesLoading(true); if (window.SylvanFlowState) { window.SylvanFlowState.invalidateItineraries(); } if (window.SylvanFlowState && window.SylvanFlowState.isItinerariesLoaded()) { const cachedItineraries = window.SylvanFlowState.getItineraries(); if (cachedItineraries && cachedItineraries.length > 0) { setItineraries(cachedItineraries); } } const clientDayKeyForList = (() => { const n = new Date(); return `${n.getFullYear()}-${String(n.getMonth() + 1).padStart(2, '0')}-${String(n.getDate()).padStart(2, '0')}`; })(); const url = `${SF_API_BASE}/api/itineraries?include_past=1&client_day_key=${encodeURIComponent(clientDayKeyForList)}`; const res = await window.SylvanFlowAuth.authenticatedFetch(url); window.SylvanFlowAuth.handleAuthResponse(res); if (!res.ok) { setItineraries([]); return { itineraries: [], flowPlanCount: 0 }; } const data = await res.json(); const itinerariesLength = data.itineraries?.length || 0; if (data.ok && data.itineraries) { const itins = data.itineraries || []; if (window.NormalizeTripKey) { itins.forEach((it) => { const tk = it.trip_key || it.Trip_Key; if (tk) { it._normalized_trip_key = window.NormalizeTripKey.normalizeTripKey(tk); } }); } resultItins = itins; if (data.flow_plan_count !== undefined) { resultFpCount = data.flow_plan_count; setFlowPlanCount(data.flow_plan_count); } setItineraries(itins); if (window.SylvanFlowState) { window.SylvanFlowState.setItineraries(itins); } setSelectedTripKey((prev) => { if (prev) { const stillThere = itins.some((it) => (it.trip_key || it.Trip_Key) === prev); if (stillThere) return prev; } return explorePickDefaultActiveTripKey(itins, clientDayKeyForList); }); } else { setItineraries([]); } if (window.uiLogger) { window.uiLogger.uiLog('[EXPLORE] itineraries loaded', { count: itinerariesLength }); } return { itineraries: resultItins, flowPlanCount: resultFpCount }; } catch (e) { if (window.uiLogger) { window.uiLogger.uiError('[EXPLORE] loadItineraries:', e.message || e); } setItineraries([]); return { itineraries: [], flowPlanCount: 0 }; } finally { setItinerariesLoading(false); } }; const exploreNavigateToView = (view) => { try { const legalAgreed = localStorage.getItem('sylvanflow_legal_agreed'); const restrictedTabs = ['explore', 'ask-sylvan', 'nu-ask-sylvan']; if (restrictedTabs.includes(view) && !legalAgreed) { // SF_ALLOW_HARDEXIT_REDIRECT window.location.href = '/legal?return=/app'; return; } if (window.appState && typeof window.appState.set === 'function') { window.appState.set({ view }); } } catch (e) { if (window.uiLogger) { window.uiLogger.uiWarn('[EXPLORE] exploreNavigateToView', e?.message || e); } } }; const TwinNav = typeof window !== 'undefined' ? window.InternalShellTwinNav : null; const scrollToTripTimeline = () => { setTvActivityEmbed(null); setTvDestinationId(null); setTripProgramSource('timeline'); setExploreTvMode('tripProgram'); pendingTripTimelineScrollRef.current = true; }; /** * Refresh Explore destinations + profile + itineraries. * @returns {{ destinationCount: number, itineraryCount: number, flowPlanCount: number, tripKeys: Set }} */ const loadData = async () => { let lastDestinations = []; let lastDestFlowPlanCount = 0; try { setLoading(true); setError(null); // Check cache first if (window.SylvanFlowState && window.SylvanFlowState.isDestinationsLoaded()) { const cachedDestinations = window.SylvanFlowState.getDestinations(); if (cachedDestinations && cachedDestinations.length > 0) { setDestinations(cachedDestinations); // Still fetch to get flowPlanCount and latest data } } // Load profile from cache or fetch if (window.SylvanFlowState && window.SylvanFlowState.isProfileLoaded()) { const cachedProfile = window.SylvanFlowState.getProfile(); if (cachedProfile) { setProfile(cachedProfile); } } // ✅ FIX: Load profile using authenticatedFetch (identity from Bearer token, not email) // No userId check needed - authenticatedFetch works with session token only try { // ✅ SYSTEM_MAP COMPLIANT: No user_id query param (identity via Authorization header) const profileRes = await window.SylvanFlowAuth.authenticatedFetch( `${SF_API_BASE}/api/profile/me` ); window.SylvanFlowAuth.handleAuthResponse(profileRes); if (profileRes.ok) { const profileData = await profileRes.json(); if (profileData.ok && profileData.profile) { setProfile(profileData.profile); // Update state store if (window.SylvanFlowState) { window.SylvanFlowState.setProfile(profileData.profile); } } } } catch (e) { if (window.uiLogger) { window.uiLogger.uiWarn("Failed to load profile:", e.message || e); } } // ✅ SYSTEM_MAP COMPLIANT: No user_id query param (identity via Authorization header) // Load destinations const url = `${SF_API_BASE}/api/destinations`; // ✅ FIX: Log identity source (Bearer token, not email) (admin-only, sanitized) const sessionToken = localStorage.getItem('sylvanflow_session_token'); if (window.uiLogger) { window.uiLogger.uiLog(`[IDENTITY] [EXPLORE]`, { identitySource: 'Bearer token (authenticatedFetch)', tokenLength: sessionToken?.length || 0, profileUserKeyLength: profile?.user_key?.length || 0, note: 'Identity derived server-side from Authorization header' }); window.uiLogger.uiLog(`[EXPLORE] Fetch URL: ${url}`); window.uiLogger.uiLog(`[EXPLORE] SF_API_BASE: ${SF_API_BASE}`); window.uiLogger.uiLog(`[EXPLORE] Using authenticatedFetch: ${!!window.SylvanFlowAuth?.authenticatedFetch}`); } try { const res = await window.SylvanFlowAuth.authenticatedFetch(url); window.SylvanFlowAuth.handleAuthResponse(res); if (window.uiLogger) { window.uiLogger.uiLog(`[EXPLORE] Response status: ${res.status}`); } if (!res.ok) { if (window.uiLogger) { window.uiLogger.uiWarn(`API call failed: ${res.status}. This is normal for local preview.`); } setDestinations([]); setFlowPlanCount(0); lastDestinations = []; lastDestFlowPlanCount = 0; setError(null); } else { const data = await res.json(); const destinationsLength = data.destinations?.length || 0; const flowPlanCountValue = data.flow_plan_count || 0; if (window.uiLogger) { window.uiLogger.uiLog(`[EXPLORE] Response metadata`, { responseKeys: Object.keys(data), ok: data.ok, destinationsLength: destinationsLength, flowPlanCount: flowPlanCountValue }); } // Data mismatch warning log if (flowPlanCountValue > 0 && destinationsLength === 0) { const sessionToken = localStorage.getItem('sylvanflow_session_token'); if (window.uiLogger) { window.uiLogger.uiWarn(`[EXPLORE] ⚠️ DATA MISMATCH:`, { identitySource: 'Bearer token (authenticatedFetch)', tokenLength: sessionToken?.length || 0, profileUserKeyLength: profile?.user_key?.length || 0, flowPlanCount: flowPlanCountValue, destinationsLength: destinationsLength, hasFirstTripKey: !!(data.destinations?.[0]?.trip_key || data.destinations?.[0]?.Trip_Key || data.destinations?.[0]?.Flow_Plan_ID), firstTripKeyLength: (data.destinations?.[0]?.trip_key || data.destinations?.[0]?.Trip_Key || data.destinations?.[0]?.Flow_Plan_ID || '').length, rawResponseKeys: Object.keys(data) }); } } if (data.destinations && data.destinations.length > 0) { const firstDest = data.destinations[0]; if (window.uiLogger) { window.uiLogger.uiLog(`[EXPLORE] First destination sample:`, { hasTripKey: !!(firstDest.trip_key || firstDest.Trip_Key || firstDest.Flow_Plan_ID), tripKeyLength: (firstDest.trip_key || firstDest.Trip_Key || firstDest.Flow_Plan_ID || '').length, hasDestination: !!firstDest.destination || !!firstDest.Destination, hasDestinationName: !!firstDest.destination_name || !!firstDest.Destination_Name }); } } if (data.ok) { const dests = data.destinations || []; // Normalize trip_keys for all destinations if (window.NormalizeTripKey) { dests.forEach(dest => { const tripKey = dest.trip_key || dest.Trip_Key || dest.Flow_Plan_ID; if (tripKey) { dest._normalized_trip_key = window.NormalizeTripKey.normalizeTripKey(tripKey); } }); } lastDestinations = dests; lastDestFlowPlanCount = flowPlanCountValue; setDestinations(dests); setFlowPlanCount(flowPlanCountValue); // Update state store if (window.SylvanFlowState) { window.SylvanFlowState.setDestinations(dests); } } else { if (window.uiLogger) { window.uiLogger.uiWarn("API returned error:", data.error); } lastDestinations = []; lastDestFlowPlanCount = 0; setDestinations([]); setFlowPlanCount(0); } } } catch (fetchError) { // Network error (e.g., no backend running) - show empty state if (window.uiLogger) { window.uiLogger.uiWarn("Fetch error (normal for local preview):", fetchError.message); } lastDestinations = []; lastDestFlowPlanCount = 0; setDestinations([]); setFlowPlanCount(0); setError(null); // Don't show error for local preview } } catch (e) { if (window.uiLogger) { window.uiLogger.uiError("Data load error:", e.message || e); } // Only show error for unexpected errors, not API failures if (e.message && !e.message.includes("Failed to load destinations")) { setError(e.message); } else { setError(null); } } finally { const itSnap = await loadItineraries(); setLoading(false); const tripKeys = new Set( (itSnap.itineraries || []).map((i) => i.trip_key || i.Trip_Key).filter(Boolean) ); return { destinationCount: lastDestinations.length, itineraryCount: (itSnap.itineraries || []).length, flowPlanCount: Math.max(lastDestFlowPlanCount, itSnap.flowPlanCount || 0), tripKeys }; } }; const loadDataRef = useRef(loadData); useEffect(() => { loadDataRef.current = loadData; }); const itinerariesPollRef = useRef([]); const destinationsPollRef = useRef([]); const flowPlanCountPollRef = useRef(0); useEffect(() => { itinerariesPollRef.current = itineraries; }, [itineraries]); useEffect(() => { destinationsPollRef.current = destinations; }, [destinations]); useEffect(() => { flowPlanCountPollRef.current = flowPlanCount; }, [flowPlanCount]); const flowPlanPollTimerRef = useRef(null); /** iframe flow-plan-form posts message after itinerary.generate accepts — refresh Explore + poll every 15s until new plan rows appear (sf-itinerary async). */ useEffect(() => { const tripKeySetFromList = (list) => { const s = new Set(); (list || []).forEach((i) => { const k = i.trip_key || i.Trip_Key; if (k) s.add(k); }); return s; }; const snapshotFresh = (snap, baseline) => { if (!snap || !baseline) return false; if (snap.itineraryCount > baseline.itineraryCount) return true; if (snap.destinationCount > baseline.destinationCount) return true; if (snap.flowPlanCount > baseline.flowPlanCount) return true; for (const k of snap.tripKeys) { if (!baseline.tripKeys.has(k)) return true; } return false; }; const onMessage = (ev) => { if (!ev.data || ev.data.type !== 'sylvanflow-flow-plan-submitted') return; if (ev.data.source && ev.data.source !== 'flow-plan-form') return; if (flowPlanPollTimerRef.current) { clearInterval(flowPlanPollTimerRef.current); flowPlanPollTimerRef.current = null; } const baseline = { itineraryCount: itinerariesPollRef.current.length, destinationCount: destinationsPollRef.current.length, flowPlanCount: flowPlanCountPollRef.current, tripKeys: tripKeySetFromList(itinerariesPollRef.current) }; let runs = 0; const MAX_RUNS = 120; const tick = async () => { runs += 1; const snap = await loadDataRef.current(); if (snapshotFresh(snap, baseline)) { if (flowPlanPollTimerRef.current) { clearInterval(flowPlanPollTimerRef.current); flowPlanPollTimerRef.current = null; } if (window.uiLogger) { window.uiLogger.uiLog('[EXPLORE] Flow plan generation reflected in Explore data — poll stopped'); } return; } if (runs >= MAX_RUNS && flowPlanPollTimerRef.current) { clearInterval(flowPlanPollTimerRef.current); flowPlanPollTimerRef.current = null; if (window.uiLogger) { window.uiLogger.uiWarn('[EXPLORE] Flow-plan poll stopped after max runs (itinerary may still be processing)'); } } }; if (window.uiLogger) { window.uiLogger.uiLog('[EXPLORE] flow-plan-form submitted — immediate refresh + 15s poll until materialized'); } tick(); flowPlanPollTimerRef.current = setInterval(tick, 15000); }; window.addEventListener('message', onMessage); return () => { window.removeEventListener('message', onMessage); if (flowPlanPollTimerRef.current) { clearInterval(flowPlanPollTimerRef.current); flowPlanPollTimerRef.current = null; } }; }, []); useEffect(() => { if (selectedTripKey) { loadItineraryDetails(selectedTripKey); } else { setSelectedItinerary(null); } }, [selectedTripKey]); useEffect(() => { if (itineraries.length === 0 || itinerariesLoading) return; const state = window.appState?.get() || {}; const planId = state.flowPlan?.trip_key; if (!planId) return; const normalizedPlanId = window.NormalizeTripKey?.normalizeTripKey(planId) || planId; if (selectedTripKey) { const normalizedSelected = window.NormalizeTripKey?.normalizeTripKey(selectedTripKey) || selectedTripKey; if (normalizedPlanId === normalizedSelected) return; } const foundItinerary = itineraries.find((it) => { const itKey = it.trip_key || it.Trip_Key; if (!itKey) return false; const normalizedItKey = it._normalized_trip_key || window.NormalizeTripKey?.normalizeTripKey(itKey) || itKey; return normalizedItKey === normalizedPlanId; }); if (foundItinerary) { const tk = foundItinerary.trip_key || foundItinerary.Trip_Key; setSelectedTripKey(tk); } }, [itineraries, itinerariesLoading, selectedTripKey]); // ✅ Search removed - show all destinations const filteredDestinations = destinations; filteredDestinations.forEach((dest) => { const tripKey = dest.trip_key || dest.Trip_Key || dest.Flow_Plan_ID; if (tripKey && window.NormalizeTripKey) { dest._normalized_trip_key = window.NormalizeTripKey.normalizeTripKey(tripKey); } }); // Open destination detail inside Explore TV viewport (same content as explore-detail page) const navigateToDetail = (destinationId, e) => { if (e) { e.preventDefault(); e.stopPropagation(); } if (window.uiLogger) { window.uiLogger.uiLog(`[EXPLORE] Destination detail in TV (destinationId length):`, destinationId?.length || 0); } setTvActivityEmbed(null); setTvDestinationId(destinationId); setExploreTvMode('destinationDetail'); }; /** TV destination detail primary CTA — same navigation as purple Explore hotkey (trip program / timeline + scroll). */ const handleTvDestinationTripTimeline = (destination) => { const tripKey = destination.Trip_Key || destination.Flow_Plan_ID || destination.trip_key || ''; if (!tripKey) { scrollToTripTimeline(); return; } const normalizedTripKey = window.NormalizeTripKey?.normalizeTripKey(tripKey) || tripKey; if (window.appState && typeof window.appState.set === 'function') { window.appState.set({ view: 'explore', flowPlan: { trip_key: normalizedTripKey }, destinationParams: null }); } const foundItinerary = itineraries.find((it) => { const itKey = it.trip_key || it.Trip_Key; if (!itKey) return false; const n = window.NormalizeTripKey?.normalizeTripKey(itKey) || itKey; return n === normalizedTripKey; }); if (foundItinerary) { setSelectedTripKey(foundItinerary.trip_key || foundItinerary.Trip_Key); } else { setSelectedTripKey(tripKey); } scrollToTripTimeline(); }; const ST = typeof window !== 'undefined' && window.SYLVAN_TECH_THEME ? window.SYLVAN_TECH_THEME : null; const topPlanRing = ST?.layout?.recoTopDefault || 'relative overflow-hidden rounded-2xl p-[2px]'; const displayName = window.SYLVAN_TECH_THEME?.normalizeProfileDisplayName?.( profile?.name || profile?.user_name, uiStrings.defaultGuestName ) || uiStrings.defaultGuestName; const heroDest = findDestinationForTripKey(destinations, selectedTripKey); const heroImage = (heroDest && heroDest.PhotosOfDestinations) || selectedItinerary?.destination_photo || ''; const heroTitle = ( heroDest && `${heroDest.Name || ''}${ heroDest.Region && heroDest.Name !== heroDest.Region ? `, ${heroDest.Region}` : '' }`.trim() ) || (selectedItinerary?.destination_label || '').trim() || uiStrings.heroFallbackTitle; const heroDestinationId = heroDest && (heroDest.Destination_ID || heroDest.id || heroDest.Trip_Key || ''); const clientTodayYmd = exploreClientDayYmd(); const hasActiveFlowPlan = itineraries.some((it) => exploreIsCurrentOrUpcomingItinerary(it, clientTodayYmd) ); const hasPlanContent = destinations.length > 0 || itineraries.length > 0; const showRecovery = !hasPlanContent && flowPlanCount > 0; const showEmpty = !hasPlanContent && !showRecovery; const showNoCurrentHero = !itinerariesLoading && hasPlanContent && !hasActiveFlowPlan && !selectedTripKey && exploreTvMode === 'hero'; /** Strip `hover:*` Tailwind utilities — product targets phones/tablets, not pointer-hover desktops. */ const stripHoverClasses = (cls) => { if (typeof cls !== 'string' || !cls.trim()) return cls; return cls .split(/\s+/) .filter((t) => t && !t.startsWith('hover:')) .join(' '); }; /** Bottom inset: fixed hotbar + InternalShellTwinNav — shared token with Power Up (`dockScrollPaddingBottom`). */ const exploreDockBottomInset = ST?.classes?.dockScrollPaddingBottom || 'pb-[max(0.75rem,calc(9.25rem+env(safe-area-inset-bottom)))]'; /** Fixed chrome + central TV viewport (hero | create form | trip program | destination detail); hotbar + twin nav docked at bottom (no inline legal/footer strip). */ const exploreMainColumn = 'relative z-[1] flex min-h-0 flex-1 flex-col ' + exploreDockBottomInset; const btnPrimaryFull = stripHoverClasses(ST?.classes?.btnPrimaryFull) || 'w-full min-h-[44px] rounded-xl font-semibold text-black bg-gradient-to-r from-teal-400 to-teal-300 shadow-[0_0_22px_-6px_rgba(45,226,197,0.65)] active:brightness-95 transition'; const btnGhost = stripHoverClasses(ST?.classes?.btnGhost) || 'w-full min-h-[44px] rounded-xl font-semibold bg-white/5 text-slate-200 border border-white/10 active:bg-white/15 transition'; const sectionDivider = ST?.classes?.sectionDivider || 'border-b border-white/10'; const flowPlanFormIframeSrc = useMemo(() => { const lang = profile?.preferred_language || 'en'; const params = new URLSearchParams(); params.set('lang', lang); params.set('embed', 'tv'); return `/flow-plan-form?${params.toString()}`; }, [profile?.preferred_language]); /** Sub-views that use flat TV chrome (no duplicate gradient rim). */ const exploreTvOverlay = exploreTvMode === 'createPlan' || exploreTvMode === 'tripProgram' || exploreTvMode === 'destinationDetail' || exploreTvMode === 'activityDetail' || exploreTvMode === 'askSylvan'; return (

{uiStrings.tabExploreBadge}

{uiStrings.yourFlowBegins}

{(loading || !translationsReady) && (
)} {!loading && translationsReady && error && (

{uiStrings.destinationsErrorHeading}

{error}

)} {!loading && translationsReady && !error && showRecovery && (

{uiStrings.recoverySyncMessage}

)} {!loading && translationsReady && !error && (hasPlanContent || showEmpty) && !showRecovery && ( <> {hasPlanContent ? (
{itineraries.length > 0 && showNoCurrentHero ? (
{uiStrings.exploreNoActivePlanLabel}

{uiStrings.exploreNoCurrentPlanTitle}

{uiStrings.exploreFlowPickHotbarHint}

) : null} {itineraries.length > 0 && selectedTripKey && !showNoCurrentHero ? (
{uiStrings.flowPlanCurrentLabel}

{(() => { const row = selectedItinerary || itineraries.find((i) => i.trip_key === selectedTripKey); return row ? formatFlowPlanDropdownLabel(row) : uiStrings.heroFallbackTitle; })()}

{uiStrings.exploreFlowPickHotbarHint}

) : null}
) : null} {/* TV viewport — flex-fill hero rim + shared max-height token (`tvRimMaxHeight`); overlay modes stay flex-fill */}
{!exploreTvOverlay ? (
{showNoCurrentHero ? (
{ e.currentTarget.src = '/assets/powerup-nature-hero.png'; }} />

{uiStrings.exploreNoActivePlanLabel}

{uiStrings.exploreNoCurrentPlanTitle}

{uiStrings.exploreNoCurrentPlanMessage}

) : selectedTripKey ? (
{!heroImage ? (
{ e.currentTarget.src = '/assets/powerup-nature-hero.png'; }} />
) : null} {heroImage ? ( ) : null}
{uiStrings.flowPlanCurrentLabel}

{heroTitle}

{(itineraries.length !== 1 ? uiStrings.flowPlanUserTitlePlural : uiStrings.flowPlanUserTitle ).replace('{displayName}', displayName)}

{!heroImage && heroDestinationId ? ( ) : null}
) : showEmpty ? (

{uiStrings.createFirstFlowPlanMessage}

) : (
{uiStrings.exploreFlowPickHotbarHint}
)}
Powered by SylvanFlow™
) : (
{exploreTvMode === 'askSylvan' ? uiStrings.tabAskSylvanShort : exploreTvMode === 'createPlan' ? uiStrings.createNewFlowPlan : exploreTvMode === 'destinationDetail' ? uiStrings.exploreDestinationChromeTitle : exploreTvMode === 'activityDetail' ? uiStrings.exploreActivityChromeTitle : tripProgramSource === 'timeline' ? uiStrings.hotbarTripTimelineTitle : uiStrings.hotbarFlowPickTitle}
{exploreTvMode === 'createPlan' && (