Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 18 commits into from
Oct 21, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
df137c5
Adding a help modal for qucik reference to goal template syntax
deathblade666 Oct 19, 2024
5c75194
added release notes
deathblade666 Oct 19, 2024
089d551
fixed misspelling of Enhancements
deathblade666 Oct 19, 2024
867b835
fix lint errors
deathblade666 Oct 19, 2024
5a9a436
Only show when Goal Template Flag is enabled
deathblade666 Oct 20, 2024
cc647b2
fix lint
deathblade666 Oct 20, 2024
c074d94
Only show on Budget page
deathblade666 Oct 20, 2024
7319dbe
fix lint
deathblade666 Oct 20, 2024
5e462fa
Merge branch 'master' into Goal-Template-Help-Modal
deathblade666 Oct 20, 2024
45bf31d
Added Translation, change text formating to table (styling wip), chan…
deathblade666 Oct 20, 2024
c37200f
fix lint, made requested change to HelpMenuItem type
deathblade666 Oct 20, 2024
6d45de3
Merge branch 'master' into Goal-Template-Help-Modal
deathblade666 Oct 20, 2024
e74258f
stylized tables
deathblade666 Oct 20, 2024
334ba9a
fixed type error
deathblade666 Oct 20, 2024
cf33b76
Merge branch 'master' into Goal-Template-Help-Modal
deathblade666 Oct 21, 2024
d152f47
Moved section headers to within Table Headers
deathblade666 Oct 21, 2024
ba8d86c
fix lint
deathblade666 Oct 21, 2024
f51a12f
added space between last table and see more statement
deathblade666 Oct 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions packages/desktop-client/src/components/HelpMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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;
Expand Down Expand Up @@ -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);
Expand All @@ -81,6 +83,9 @@ export const HelpMenu = () => {
case 'keyboard-shortcuts':
dispatch(pushModal('keyboard-shortcuts'));
break;
case 'goal-templates':
dispatch(pushModal('goal-templates'));
break;
}
};

Expand All @@ -98,7 +103,7 @@ export const HelpMenu = () => {
onOpenChange={() => setMenuOpen(false)}
>
<Menu
onMenuSelect={item => {
onMenuSelect={(item: HelpMenuItem) => {
setMenuOpen(false);
handleItemSelect(item);
}}
Expand All @@ -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>
Expand Down
4 changes: 4 additions & 0 deletions packages/desktop-client/src/components/Modals.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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;
Expand Down
179 changes: 179 additions & 0 deletions packages/desktop-client/src/components/modals/GoalTemplateModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
1 change: 1 addition & 0 deletions packages/loot-core/src/client/state-types/modals.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -286,6 +286,7 @@ type FinanceModals = {
onUnlink: () => void;
};
'keyboard-shortcuts': EmptyObject;
'goal-templates': EmptyObject;
};

export type PushModalAction = {
Expand Down
6 changes: 6 additions & 0 deletions upcoming-release-notes/3691.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
category: Enhancements
authors: [deathblade666]
---

Add goal template reference guide to help menu