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;
     }
   };
 
@@ -98,7 +103,7 @@ export const HelpMenu = () => {
         onOpenChange={() => setMenuOpen(false)}
       >
         <Menu
-          onMenuSelect={item => {
+          onMenuSelect={(item: HelpMenuItem) => {
             setMenuOpen(false);
             handleItemSelect(item);
           }}
@@ -108,6 +113,9 @@ export const HelpMenu = () => {
               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,170 @@
+import { Heading } from 'react-aria-components';
+import { useTranslation } from 'react-i18next';
+
+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';
+import { TableHeader, Row, Field } from '../table';
+
+export function GoalTemplateModal() {
+  const { t } = useTranslation();
+  return (
+    <Modal name="goal-templates" containerProps={{ style: { width: 1000 } }}>
+      {({ state: { close } }) => (
+        <>
+          <ModalHeader
+            title={t('Goal Templates')}
+            rightContent={<ModalCloseButton onPress={close} />}
+          />
+          <Heading level={3}>{t('Weekly')}</Heading>
+          <View>
+            <TableHeader
+              headers={[
+                { name: t('Syntax'), width: 'flex' },
+                { name: t('Description'), width: 'flex' },
+              ]}
+            />
+            <Row style={{ backgroundColor: theme.tableBackground }}>
+              <Field width="flex">
+                {t('#template $10 repeat every week starting 2025-01-03')}
+              </Field>
+              <Field width="flex">{t('$10 a week')}</Field>
+            </Row>
+            <Row style={{ backgroundColor: theme.tableBackground }}>
+              <Field width="flex">
+                {t(
+                  '#template $10 repeat every week starting 2025-01-03 up to $80',
+                )}
+              </Field>
+              <Field width="flex">
+                {t('$10 a week, up to a maximum of $80')}
+              </Field>
+            </Row>
+
+            <Heading level={3}>{t('Monthly')}</Heading>
+            <TableHeader
+              headers={[
+                { name: t('Syntax'), width: 'flex' },
+                { name: t('Description'), width: 'flex' },
+              ]}
+            />
+            <Row style={{ backgroundColor: theme.tableBackground }}>
+              <Field width="flex">{t('#template $50')}</Field>
+              <Field width="flex">{t('$50 each month')}</Field>
+            </Row>
+            <Row style={{ backgroundColor: theme.tableBackground }}>
+              <Field width="flex">{t('#template up to $150')}</Field>
+              <Field width="flex">
+                {t('Up to $150 each month, and remove extra funds over $150')}
+              </Field>
+            </Row>
+            <Row style={{ backgroundColor: theme.tableBackground }}>
+              <Field width="flex">{t('#template up to $150 hold')}</Field>
+              <Field width="flex">
+                {t('Up to $150 each month, but retain any funds over $150')}
+              </Field>
+            </Row>
+
+            <Heading level={3}>{t('Longer Term')}</Heading>
+            <TableHeader
+              headers={[
+                { name: t('Syntax'), width: 'flex' },
+                { name: t('Description'), width: 'flex' },
+              ]}
+            />
+            <Row style={{ backgroundColor: theme.tableBackground }}>
+              <Field width="flex">
+                {t('#template $500 by 2025-03 repeat every 6 months')}
+              </Field>
+              <Field width="flex">
+                {t(
+                  'Break down large, less-frequent expenses into manageable monthly expenses',
+                )}
+              </Field>
+            </Row>
+            <Row style={{ backgroundColor: theme.tableBackground }}>
+              <Field width="flex">
+                {t('#template $500 by 2025-03 repeat every year')}
+              </Field>
+              <Field width="flex">
+                {t(
+                  'Break down large, less-frequent expenses into manageable monthly expenses',
+                )}
+              </Field>
+            </Row>
+            <Row style={{ backgroundColor: theme.tableBackground }}>
+              <Field width="flex">
+                {t('#template $500 by 2025-03 repeat every 2 years')}
+              </Field>
+              <Field width="flex">
+                {t(
+                  'Break down large, less-frequent expenses into manageable monthly expenses',
+                )}
+              </Field>
+            </Row>
+
+            <Heading level={3}>{t('Schedules')}</Heading>
+            <TableHeader
+              headers={[
+                { name: t('Syntax'), width: 'flex' },
+                { name: t('Description'), width: 'flex' },
+              ]}
+            />
+            <Row style={{ backgroundColor: theme.tableBackground }}>
+              <Field width="flex">
+                {t('#template schedule SCHEDULE_NAME')}
+              </Field>
+              <Field width="flex">
+                {t('Fund upcoming scheduled transactions over time')}
+              </Field>
+            </Row>
+            <Row style={{ backgroundColor: theme.tableBackground }}>
+              <Field width="flex">
+                {t('#template schedule full SCHEDULE_NAME')}
+              </Field>
+              <Field width="flex">
+                {t('Fund upcoming scheduled transaction only on needed month')}
+              </Field>
+            </Row>
+
+            <Heading level={3}>{t('Goals')}</Heading>
+            <TableHeader
+              headers={[
+                { name: t('Syntax'), width: 'flex' },
+                { name: t('Description'), width: 'flex' },
+              ]}
+            />
+            <Row style={{ backgroundColor: theme.tableBackground }}>
+              <Field width="flex">{t('#goal 1000')}</Field>
+              <Field width="flex">
+                {t('Set a long-term goal instead of a monthly goal')}
+              </Field>
+            </Row>
+            <div
+              style={{
+                textAlign: 'right',
+                fontSize: '1em',
+                color: theme.pageTextLight,
+                marginTop: 3,
+              }}
+            >
+              <Text>
+                {t('See')}{' '}
+                <Link
+                  variant="external"
+                  linkColor="muted"
+                  to="https://actualbudget.org/docs/experimental/goal-templates"
+                >
+                  {t('Goal Templates')}
+                </Link>{' '}
+                {t('for more information.')}
+              </Text>
+            </div>
+          </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