Adding a help modal for quick reference to goal template syntax (#3691)

* Adding a help modal for qucik reference to goal template syntax * added release notes * fixed misspelling of Enhancements * fix lint errors * Only show when Goal Template Flag is enabled * fix lint * Only show on Budget page * fix lint * Added Translation, change text formating to table (styling wip), change headers to use react-aria-component headings * fix lint, made requested change to HelpMenuItem type * stylized tables * fixed type error * Moved section headers to within Table Headers * fix lint * added space between last table and see more statement
actualbudget · Oct 21, 2024 · a3256f5 · a3256f5
1 parent 715bc00
commit a3256f5
Show file tree

Hide file tree

Showing 5 changed files with 200 additions and 2 deletions.
diff --git a/packages/desktop-client/src/components/HelpMenu.tsx b/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>

diff --git a/packages/desktop-client/src/components/Modals.tsx b/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;

diff --git a/packages/desktop-client/src/components/modals/GoalTemplateModal.tsx b/packages/desktop-client/src/components/modals/GoalTemplateModal.tsx
@@ -0,0 +1,179 @@
+import { Trans, 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: 850 } }}>
+      {({ state: { close } }) => (
+        <>
+          <ModalHeader
+            title={t('Goal Templates')}
+            rightContent={<ModalCloseButton onPress={close} />}
+          />
+          <View>
+            <TableHeader>
+              <Field width="flex">
+                <Trans>Weekly Templates</Trans>
+              </Field>
+              <Field width="flex">
+                <Trans>Description</Trans>
+              </Field>
+            </TableHeader>
+            <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>
+            <span>
+              <br />
+            </span>
+            <TableHeader>
+              <Field width="flex">
+                <Trans>Monthly Templates</Trans>
+              </Field>
+              <Field width="flex">
+                <Trans>Description</Trans>
+              </Field>
+            </TableHeader>
+            <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>
+            <span>
+              <br />
+            </span>
+            <TableHeader>
+              <Field width="flex">
+                <Trans>Multi-month Templates</Trans>
+              </Field>
+              <Field width="flex">
+                <Trans>Description</Trans>
+              </Field>
+            </TableHeader>
+            <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 less-frequent expenses into 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 less-frequent expenses into 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 less-frequent expenses into monthly expenses')}
+              </Field>
+            </Row>
+            <span>
+              <br />
+            </span>
+            <TableHeader>
+              <Field width="flex">
+                <Trans>Schedule Templates</Trans>
+              </Field>
+              <Field width="flex">
+                <Trans>Description</Trans>
+              </Field>
+            </TableHeader>
+            <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>
+            <span>
+              <br />
+            </span>
+            <TableHeader>
+              <Field width="flex">
+                <Trans>Goal Tempaltes</Trans>
+              </Field>
+              <Field width="flex">
+                <Trans>Description</Trans>
+              </Field>
+            </TableHeader>
+            <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,
+              }}
+            >
+              <span>
+                <br />
+              </span>
+              <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>
+  );
+}
diff --git a/packages/loot-core/src/client/state-types/modals.d.ts b/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 = {

diff --git a/upcoming-release-notes/3691.md b/upcoming-release-notes/3691.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [deathblade666]
+---
+
+Add goal template reference guide to help menu