✨ release tracking budget feature (#3833)

packages/desktop-client/e2e/page-models/settings-page.js

@@ -8,27 +8,10 @@ export class SettingsPage {
   }
 
   async useBudgetType(budgetType) {
-    await this.enableExperimentalFeature('Budget mode toggle');
-
     const switchBudgetTypeButton = this.page.getByRole('button', {
       name: `Switch to ${budgetType} budgeting`,
     });
 
     await switchBudgetTypeButton.click();
   }
-
-  async enableExperimentalFeature(featureName) {
-    const advancedSettingsButton = this.page.getByTestId('advanced-settings');
-    await advancedSettingsButton.click();
-
-    const experimentalSettingsButton = this.page.getByTestId(
-      'experimental-settings',
-    );
-    await experimentalSettingsButton.click();
-
-    const featureCheckbox = this.page.getByRole('checkbox', {
-      name: featureName,
-    });
-    await featureCheckbox.click();
-  }
 }

packages/desktop-client/src/components/mobile/MobileNavTabs.tsx

@@ -1,6 +1,6 @@
-// @ts-strict-ignore
 import React, {
   useCallback,
+  type ComponentProps,
   type ComponentType,
   type CSSProperties,
 } from 'react';
@@ -43,6 +43,43 @@ export function MobileNavTabs() {
     padding: 10,
   };
 
+  const [{ y }, api] = useSpring(() => ({ y: OPEN_DEFAULT_Y }));
+
+  const openFull = useCallback(
+    ({ canceled }: { canceled?: boolean }) => {
+      // when cancel is true, it means that the user passed the upwards threshold
+      // so we change the spring config to create a nice wobbly effect
+      api.start({
+        y: OPEN_FULL_Y,
+        immediate: false,
+        config: canceled ? config.wobbly : config.stiff,
+      });
+    },
+    [api, OPEN_FULL_Y],
+  );
+
+  const openDefault = useCallback(
+    (velocity = 0) => {
+      api.start({
+        y: OPEN_DEFAULT_Y,
+        immediate: false,
+        config: { ...config.stiff, velocity },
+      });
+    },
+    [api, OPEN_DEFAULT_Y],
+  );
+
+  const hide = useCallback(
+    (velocity = 0) => {
+      api.start({
+        y: HIDDEN_Y,
+        immediate: false,
+        config: { ...config.stiff, velocity },
+      });
+    },
+    [api, HIDDEN_Y],
+  );
+
   const navTabs = [
     {
       name: 'Budget',
@@ -92,50 +129,15 @@ export function MobileNavTabs() {
       style: navTabStyle,
       Icon: SvgCog,
     },
-  ].map(tab => <NavTab key={tab.path} {...tab} />);
+  ].map(tab => (
+    <NavTab key={tab.path} onClick={() => openDefault()} {...tab} />
+  ));
 
   const bufferTabsCount = COLUMN_COUNT - (navTabs.length % COLUMN_COUNT);
   const bufferTabs = Array.from({ length: bufferTabsCount }).map((_, idx) => (
     <div key={idx} style={navTabStyle} />
   ));
 
-  const [{ y }, api] = useSpring(() => ({ y: OPEN_DEFAULT_Y }));
-
-  const openFull = useCallback(
-    ({ canceled }) => {
-      // when cancel is true, it means that the user passed the upwards threshold
-      // so we change the spring config to create a nice wobbly effect
-      api.start({
-        y: OPEN_FULL_Y,
-        immediate: false,
-        config: canceled ? config.wobbly : config.stiff,
-      });
-    },
-    [api, OPEN_FULL_Y],
-  );
-
-  const openDefault = useCallback(
-    (velocity = 0) => {
-      api.start({
-        y: OPEN_DEFAULT_Y,
-        immediate: false,
-        config: { ...config.stiff, velocity },
-      });
-    },
-    [api, OPEN_DEFAULT_Y],
-  );
-
-  const hide = useCallback(
-    (velocity = 0) => {
-      api.start({
-        y: HIDDEN_Y,
-        immediate: false,
-        config: { ...config.stiff, velocity },
-      });
-    },
-    [api, HIDDEN_Y],
-  );
-
   useScrollListener(({ isScrolling }) => {
     if (isScrolling('down')) {
       hide();
@@ -237,9 +239,10 @@ type NavTabProps = {
   path: string;
   Icon: ComponentType<NavTabIconProps>;
   style?: CSSProperties;
+  onClick: ComponentProps<typeof NavLink>['onClick'];
 };
 
-function NavTab({ Icon: TabIcon, name, path, style }: NavTabProps) {
+function NavTab({ Icon: TabIcon, name, path, style, onClick }: NavTabProps) {
   return (
     <NavLink
       to={path}
@@ -253,6 +256,7 @@ function NavTab({ Icon: TabIcon, name, path, style }: NavTabProps) {
         textAlign: 'center',
         ...style,
       })}
+      onClick={onClick}
     >
       <TabIcon width={22} height={22} />
       {name}

packages/desktop-client/src/components/settings/Experimental.tsx

@@ -1,5 +1,5 @@
 import { type ReactNode, useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
+import { Trans } from 'react-i18next';
 
 import type { FeatureFlag } from 'loot-core/src/types/prefs';
 
@@ -67,23 +67,6 @@ function FeatureToggle({
   );
 }
 
-function TrackingBudgetFeature() {
-  const { t } = useTranslation();
-  const [budgetType = 'rollover'] = useSyncedPref('budgetType');
-  const enabled = useFeatureFlag('reportBudget');
-  const blockToggleOff = budgetType === 'report' && enabled;
-  return (
-    <FeatureToggle
-      flag="reportBudget"
-      disableToggle={blockToggleOff}
-      error={t('Switch to a envelope budget before turning off this feature')}
-      feedbackLink="https://github.com/actualbudget/actual/issues/2999"
-    >
-      <Trans>Budget mode toggle</Trans>
-    </FeatureToggle>
-  );
-}
-
 export function ExperimentalFeatures() {
   const [expanded, setExpanded] = useState(false);
 
@@ -92,8 +75,6 @@ export function ExperimentalFeatures() {
       primaryAction={
         expanded ? (
           <View style={{ gap: '1em' }}>
-            <TrackingBudgetFeature />
-
             <FeatureToggle flag="goalTemplatesEnabled">
               <Trans>Goal templates</Trans>
             </FeatureToggle>

packages/desktop-client/src/components/settings/index.tsx

@@ -7,7 +7,6 @@ import { isElectron } from 'loot-core/shared/environment';
 import { listen } from 'loot-core/src/platform/client/fetch';
 
 import { useActions } from '../../hooks/useActions';
-import { useFeatureFlag } from '../../hooks/useFeatureFlag';
 import { useGlobalPref } from '../../hooks/useGlobalPref';
 import { useIsOutdated, useLatestVersion } from '../../hooks/useLatestVersion';
 import { useMetadataPref } from '../../hooks/useMetadataPref';
@@ -177,7 +176,7 @@ export function Settings() {
         <ThemeSettings />
         <FormatSettings />
         <EncryptionSettings />
-        {useFeatureFlag('reportBudget') && <BudgetTypeSettings />}
+        <BudgetTypeSettings />
         {isElectron() && <Backups />}
         <ExportBudget />
         <AdvancedToggle>

packages/desktop-client/src/hooks/useFeatureFlag.ts

@@ -3,7 +3,6 @@ import type { FeatureFlag } from 'loot-core/src/types/prefs';
 import { useSyncedPref } from './useSyncedPref';
 
 const DEFAULT_FEATURE_FLAG_STATE: Record<FeatureFlag, boolean> = {
-  reportBudget: false,
   goalTemplatesEnabled: false,
   dashboards: false,
   actionTemplating: false,

packages/loot-core/src/types/prefs.d.ts

@@ -1,6 +1,5 @@
 export type FeatureFlag =
   | 'dashboards'
-  | 'reportBudget'
   | 'goalTemplatesEnabled'
   | 'actionTemplating'
   | 'upcomingLengthAdjustment'

upcoming-release-notes/3833.md

@@ -0,0 +1,6 @@
+---
+category: Features
+authors: [MatissJanis]
+---
+
+Release tracking budget feature.