feat(premium): add the Plutonium page behind an experiment (#3097)

fluxer_app/src/features/user/components/modals/UserSettingsModal.tsx

@@ -5,6 +5,8 @@ import {MobileSettingsView} from '@app/features/app/components/dialogs/component
 import * as Modal from '@app/features/app/components/dialogs/Modal';
 import {SettingsModalContainer} from '@app/features/app/components/dialogs/shared/SettingsModalLayout';
 import {ComponentBus} from '@app/features/platform/utils/ComponentBus';
+import * as PlutoniumPageCommands from '@app/features/premium/commands/PlutoniumPageCommands';
+import PlutoniumPageRollout from '@app/features/premium/state/PlutoniumPageRollout';
 import * as ModalCommands from '@app/features/ui/commands/ModalCommands';
 import * as UnsavedChangesCommands from '@app/features/ui/commands/UnsavedChangesCommands';
 import MobileLayout from '@app/features/ui/state/MobileLayout';
@@ -106,11 +108,26 @@ export const UserSettingsModal: React.FC<UserSettingsModalProps> = observer(
 				mobileNav.navigateBack();
 			}
 		}, [currentTab?.type, mobileNav, unsavedChangesState.unsavedChanges]);
+		const plutoniumPageEnabled = PlutoniumPageRollout.enabled;
 		const handleTabSelect = useCallback(
 			(tabType: string, title: string) => {
+				if (plutoniumPageEnabled && tabType === 'plutonium') {
+					PlutoniumPageCommands.openPlutoniumPage();
+					return;
+				}
 				mobileNav.navigateTo(tabType as UserSettingsTabType, title);
 			},
-			[mobileNav],
+			[mobileNav, plutoniumPageEnabled],
+		);
+		const handleDesktopTabSelect = useCallback(
+			(tabType: UserSettingsTabType) => {
+				if (plutoniumPageEnabled && tabType === 'plutonium') {
+					PlutoniumPageCommands.openPlutoniumPage();
+					return;
+				}
+				setSelectedTab(tabType);
+			},
+			[plutoniumPageEnabled],
 		);
 		const handleClose = useCallback(() => {
 			const checkTabId = selectedTab;
@@ -136,6 +153,10 @@ export const UserSettingsModal: React.FC<UserSettingsModalProps> = observer(
 		useEffect(() => {
 			const unsubscribe = ComponentBus.subscribe('USER_SETTINGS_TAB_SELECT', (args?: unknown) => {
 				const {tab, section} = (args ?? {}) as {tab?: string; section?: string};
+				if (plutoniumPageEnabled && tab === 'plutonium') {
+					PlutoniumPageCommands.openPlutoniumPage();
+					return;
+				}
 				if (tab && typeof tab === 'string') {
 					const accountSection =
 						getAccountSectionForNestedTab(tab as UserSettingsTabType) ?? getAccountSectionForLegacySection(section);
@@ -156,7 +177,7 @@ export const UserSettingsModal: React.FC<UserSettingsModalProps> = observer(
 				}
 			});
 			return unsubscribe;
-		}, [isMobile, mobileNav, resolveVisibleTab, visibleSettingsTabs]);
+		}, [isMobile, mobileNav, plutoniumPageEnabled, resolveVisibleTab, visibleSettingsTabs]);
 		return (
 			<SettingsContentKeyProvider data-flx="user.user-settings-modal.settings-content-key-provider">
 				<Modal.Root size="fullscreen" onClose={handleModalClose} data-flx="user.user-settings-modal.modal-root">
@@ -183,7 +204,7 @@ export const UserSettingsModal: React.FC<UserSettingsModalProps> = observer(
 								groupedSettingsTabs={groupedSettingsTabs}
 								currentTab={currentTab}
 								selectedTab={selectedTab}
-								onTabSelect={setSelectedTab}
+								onTabSelect={handleDesktopTabSelect}
 								initialGuildId={initialGuildId}
 								initialSubtab={normalizedInitialSubtab}
 								pendingSection={pendingSection}