fix(settings): hoist tab-visibility useEffect above isLoading early return
Surfaced while exercising Part D (WhatsApp) end-to-end. Navigating to Settings → WhatsApp triggered React error #310 ("Rendered more hooks than during the previous render"). Root cause is pre-existing: the SettingsPage redirect-to-visible-tab `useEffect` lived AFTER the `if (isLoading) return <Loading />` early return, so on the isLoading=true→false transition the hook count grew by one and React's rules-of-hooks invariant blew up. Move the effect above the early return so the hook count is stable across renders. While here, switch the gating logic from "is the key in the currently-visible nav list" (which the bundle couldn't reference yet because the nav array is built lower down) to a small lookup keyed by activeTab → matching dependency flag. That's an equivalent decision for the four tabs we already gated (crm, contracts, reminderTemplates, accounting) plus the new whatsapp tab. Add `flagsLoading` from the FeatureFlags context to the deps so the snap-back only fires once the server's actual flag values have arrived. Without this, the initial render with the placeholder DEFAULT_FLAGS would falsely snap away from any tab whose flag is "on" on the server but absent from the placeholder. Also add `whatsapp: false` to `DEFAULT_FLAGS` in FeatureFlagsContext (was missing — TypeScript should have caught the Record<FeatureKey, boolean> violation but the build pipeline didn't surface it). Without this, `flags.whatsapp` is undefined on the placeholder, which had secondary effects on tab visibility and the snap-back logic. Verified via Chrome DevTools: Settings → WhatsApp now loads cleanly with all 5 form fields, the saved config values prefilled, the Save button, and the Send-test card.
This commit is contained in:
@@ -60,6 +60,8 @@ export const DEFAULT_FLAGS: FeatureFlags = {
|
||||
// the Project Overview cockpit. Off by default — admin opts in under
|
||||
// Settings → Features once they want the CRM → Overview area.
|
||||
projects: false,
|
||||
// WhatsApp Business API delivery channel (migration 136, #640D).
|
||||
whatsapp: false,
|
||||
};
|
||||
|
||||
export const FEATURE_FLAGS_QUERY_KEY = ['feature-flags'] as const;
|
||||
|
||||
Reference in New Issue
Block a user