Adding a help modal for quick reference to goal template syntax

packages/desktop-client/src/components/HelpMenu.tsx

@@ -8,6 +8,7 @@ import { useToggle } from 'usehooks-ts';
 
 import { pushModal } from 'loot-core/client/actions/modals';
 
+import { useFeatureFlag } from '../hooks/useFeatureFlag';
 import { SvgHelp } from '../icons/v2/Help';
 import { openUrl } from '../util/router-tools';
 
@@ -16,7 +17,7 @@ import { Menu } from './common/Menu';
 import { Popover } from './common/Popover';
 import { SpaceBetween } from './common/SpaceBetween';
 
-type HelpMenuItem = 'docs' | 'keyboard-shortcuts';
+type HelpMenuItem = 'docs' | 'keyboard-shortcuts' | 'goal-templates';
 
 type HelpButtonProps = {
   onPress?: () => void;
@@ -66,6 +67,7 @@ const getPageDocs = (page: string) => {
 };
 
 export const HelpMenu = () => {
+  const showGoalTemplates = useFeatureFlag('goalTemplatesEnabled');
   const { t } = useTranslation();
   const [isMenuOpen, toggleMenuOpen, setMenuOpen] = useToggle();
   const menuButtonRef = useRef(null);
@@ -81,6 +83,9 @@ export const HelpMenu = () => {
       case 'keyboard-shortcuts':
         dispatch(pushModal('keyboard-shortcuts'));
         break;
+      case 'goal-templates':
+        dispatch(pushModal('goal-templates'));
+        break;
     }
   };
 
@@ -100,14 +105,17 @@ export const HelpMenu = () => {
         <Menu
           onMenuSelect={item => {
             setMenuOpen(false);
-            handleItemSelect(item);
+            handleItemSelect(item as HelpMenuItem);
           }}
           items={[
             {
               name: 'docs',
               text: t('Documentation'),
             },
             { name: 'keyboard-shortcuts', text: t('Keyboard shortcuts') },
+            ...(showGoalTemplates && page === '/budget'
+              ? [{ name: 'goal-templates', text: t('Goal templates') }]
+              : []),
           ]}
         />
       </Popover>

packages/desktop-client/src/components/Modals.tsx

@@ -35,6 +35,7 @@ import { EnvelopeBudgetMonthMenuModal } from './modals/EnvelopeBudgetMonthMenuMo
 import { EnvelopeBudgetSummaryModal } from './modals/EnvelopeBudgetSummaryModal';
 import { EnvelopeToBudgetMenuModal } from './modals/EnvelopeToBudgetMenuModal';
 import { FixEncryptionKeyModal } from './modals/FixEncryptionKeyModal';
+import { GoalTemplateModal } from './modals/GoalTemplateModal';
 import { GoCardlessExternalMsgModal } from './modals/GoCardlessExternalMsgModal';
 import { GoCardlessInitialiseModal } from './modals/GoCardlessInitialiseModal';
 import { HoldBufferModal } from './modals/HoldBufferModal';
@@ -83,6 +84,9 @@ export function Modals() {
   const modals = modalStack
     .map(({ name, options }) => {
       switch (name) {
+        case 'goal-templates':
+          return budgetId ? <GoalTemplateModal key={name} /> : null;
+
         case 'keyboard-shortcuts':
           // don't show the hotkey help modal when a budget is not open
           return budgetId ? <KeyboardShortcutModal key={name} /> : null;

packages/desktop-client/src/components/modals/GoalTemplateModal.tsx

@@ -0,0 +1,88 @@
+import { theme } from '../../style';
+import { Link } from '../common/Link';
+import { Modal, ModalCloseButton, ModalHeader } from '../common/Modal';
+import { Text } from '../common/Text';
+import { View } from '../common/View';
+
+export function GoalTemplateModal() {
+  return (
+    <Modal name="goal-templates">
+      {({ state: { close } }) => (
+        <>
+          <ModalHeader
+            title="Goal Templates"
+            rightContent={<ModalCloseButton onPress={close} />}
+          />
+          <View
+            style={{
+              flexDirection: 'row',
+              fontSize: 13,
+            }}
+          >
+            <Text style={{ textAlign: 'left' }}>
+              <h3>Weekly:</h3>
+              <strong>
+                #template $10 repeat every week starting 2025-01-03
+              </strong>{' '}
+              - Budget $10 a week <br />
+              {'\n'}
+              <strong>
+                #template $10 repeat every week starting 2025-01-03 up to 80
+              </strong>{' '}
+              - Budget $10 a week, up to a maximum of $80
+              <h3>Monthly:</h3>
+              <strong>#template $50</strong> - Budget $50 each month <br />
+              {'\n'}
+              <strong>#template up to $150</strong> - Budget up to $150 each
+              month, and remove extra funds over $150 <br /> {'\n'}
+              <strong>#template up to $150 hold</strong> - Budget up to $150
+              each month, but retain any funds over $150 <br />
+              {'\n'}
+              <h3>Longer Term:</h3>
+              <strong>#template $500 by 2025-03 repeat every 6 months</strong> -
+              Break down large, less-frequent expenses into manageable monthly
+              expenses <br />
+              {'\n'}
+              <strong>#template $500 by 2025-03 repeat every year</strong> -
+              Break down large, less-frequent expenses into manageable monthly
+              expenses <br />
+              {'\n'}
+              <strong>#template $500 by 2025-03 repeat every 2 years</strong> -
+              Break down large, less-frequent expenses into manageable monthly
+              expenses
+              <h3>Schedules:</h3>
+              <strong>#template schedule SCHEDULE_NAME</strong> - Fund upcoming
+              scheduled transactions over time <br />
+              {'\n'}
+              <strong>#template schedule full SCHEDULE_NAME</strong> - Fund
+              upcoming scheduled transaction only on needed month
+              <h3>Goals:</h3>
+              <strong>#goal 1000</strong> - Set a long term goal instead of a
+              monthly goal <br /> {'\n'}
+              <div
+                style={{
+                  textAlign: 'right',
+                  fontSize: '0.7em',
+                  color: theme.pageTextLight,
+                  marginTop: 3,
+                }}
+              >
+                <Text>
+                  See{' '}
+                  <Link
+                    variant="external"
+                    linkColor="muted"
+                    to="https://actualbudget.org/docs/experimental/goal-templates"
+                  >
+                    Goal Templates
+                  </Link>{' '}
+                  for more information.
+                </Text>
+              </div>
+            </Text>
+          </View>
+        </>
+      )}
+    </Modal>
+  );
+}

packages/loot-core/src/client/state-types/modals.d.ts

@@ -286,6 +286,7 @@ type FinanceModals = {
     onUnlink: () => void;
   };
   'keyboard-shortcuts': EmptyObject;
+  'goal-templates': EmptyObject;
 };
 
 export type PushModalAction = {

upcoming-release-notes/3691.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [deathblade666]
+---
+
+Add goal template reference guide to help menu