Custom upcoming length

packages/desktop-client/src/components/schedules/CustomUpcomingLength.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Input } from '../common/Input';
+import { Select } from '../common/Select';
+
+type CustomUpcomingLengthProps = {
+  onChange: (value: string) => void;
+  tempValue: string;
+};
+
+export function CustomUpcomingLength({
+  onChange,
+  tempValue,
+}: CustomUpcomingLengthProps) {
+  const { t } = useTranslation();
+
+  const options = [
+    { value: 'day', label: t('Days') },
+    { value: 'week', label: t('Weeks') },
+    { value: 'month', label: t('Months') },
+    { value: 'year', label: t('Years') },
+  ];
+
+  let timePeriod = [];
+  if (tempValue === 'custom') {
+    timePeriod = ['1', 'day'];
+  } else {
+    timePeriod = tempValue.split('-');
+  }
+
+  const [numValue, setNumValue] = useState(parseInt(timePeriod[0]));
+  const [unit, setUnit] = useState(timePeriod[1]);
+
+  useEffect(() => {
+    onChange(`${numValue}-${unit}`);
+  }, [numValue, onChange, unit]);
+
+  return (
+    <div
+      style={{ display: 'flex', alignItems: 'center', gap: 5, marginTop: 10 }}
+    >
+      <Input
+        id="length"
+        style={{ width: 40 }}
+        type="number"
+        min={numValue}
+        onChange={e => setNumValue(parseInt(e.target.value))}
+        defaultValue={numValue}
+      />
+      <Select
+        options={options.map(x => [x.value, x.label])}
+        value={unit}
+        onChange={newValue => setUnit(newValue)}
+      />
+    </div>
+  );
+}

packages/desktop-client/src/components/schedules/UpcomingLength.tsx

@@ -1,14 +1,17 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
 import { type SyncedPrefs } from 'loot-core/types/prefs';
 
 import { useSyncedPref } from '../../hooks/useSyncedPref';
+import { Button } from '../common/Button2';
 import { Modal, ModalCloseButton, ModalHeader } from '../common/Modal';
 import { Paragraph } from '../common/Paragraph';
 import { Select } from '../common/Select';
 import { View } from '../common/View';
 
+import { CustomUpcomingLength } from './CustomUpcomingLength';
+
 function useUpcomingLengthOptions() {
   const { t } = useTranslation();
 
@@ -20,22 +23,48 @@ function useUpcomingLengthOptions() {
     { value: '7', label: t('1 week') },
     { value: '14', label: t('2 weeks') },
     { value: 'oneMonth', label: t('1 month') },
-    { value: 'currentMonth', label: t('end of the current month') },
+    { value: 'currentMonth', label: t('End of the current month') },
+    { value: 'custom', label: t('Custom length') },
   ];
 
   return { upcomingLengthOptions };
 }
 
+function nonCustomUpcomingLengthValues(value: string) {
+  return (
+    ['1', '7', '14', 'oneMonth', 'currentMonth'].findIndex(x => x === value) ===
+    -1
+  );
+}
+
 export function UpcomingLength() {
   const { t } = useTranslation();
   const [_upcomingLength, setUpcomingLength] = useSyncedPref(
     'upcomingScheduledTransactionLength',
   );
 
+  const saveUpcomingLength = () => {
+    setUpcomingLength(tempUpcomingLength);
+  };
+
   const { upcomingLengthOptions } = useUpcomingLengthOptions();
 
   const upcomingLength = _upcomingLength || '7';
 
+  const [tempUpcomingLength, setTempUpcomingLength] = useState(upcomingLength);
+  const [useCustomLength, setUseCustomLength] = useState(
+    nonCustomUpcomingLengthValues(tempUpcomingLength),
+  );
+  const [saveActive, setSaveActive] = useState(false);
+
+  useEffect(() => {
+    if (tempUpcomingLength !== upcomingLength) {
+      setSaveActive(true);
+    } else {
+      setSaveActive(false);
+    }
+  }, [tempUpcomingLength, upcomingLength]);
+
   return (
     <Modal
       name="schedules-upcoming-length"
@@ -65,10 +94,43 @@ export function UpcomingLength() {
                 x.value || '7',
                 x.label,
               ])}
-              value={upcomingLength}
-              onChange={newValue => setUpcomingLength(newValue)}
+              value={
+                nonCustomUpcomingLengthValues(tempUpcomingLength)
+                  ? 'custom'
+                  : tempUpcomingLength
+              }
+              onChange={newValue => {
+                setUseCustomLength(newValue === 'custom');
+                setTempUpcomingLength(newValue);
+              }}
             />
+            {useCustomLength && (
+              <CustomUpcomingLength
+                onChange={setTempUpcomingLength}
+                tempValue={tempUpcomingLength}
+              />
+            )}
           </View>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              justifyContent: 'end',
+              marginTop: 20,
+            }}
+          >
+            <Button
+              isDisabled={!saveActive}
+              onPress={() => {
+                saveUpcomingLength();
+                close();
+              }}
+              type="submit"
+              variant="primary"
+            >
+              <Trans>Save</Trans>
+            </Button>
+          </div>
         </>
       )}
     </Modal>

packages/loot-core/src/shared/schedules.test.ts

@@ -1,7 +1,11 @@
 import MockDate from 'mockdate';
 
 import * as monthUtils from './months';
-import { getRecurringDescription, getStatus } from './schedules';
+import {
+  getRecurringDescription,
+  getStatus,
+  getUpcomingDays,
+} from './schedules';
 
 describe('schedules', () => {
   const today = new Date(2017, 0, 1); // Global date when testing is set to 2017-01-01 per monthUtils.currentDay()
@@ -339,4 +343,20 @@ describe('schedules', () => {
       ).toBe('Every 2 months on the 17th, until 2021-06-01');
     });
   });
+
+  describe('getUpcomingDays', () => {
+    it.each([
+      ['1', 1],
+      ['7', 7],
+      ['14', 14],
+      ['oneMonth', 32],
+      ['currentMonth', 31],
+      ['2-day', 2],
+      ['5-week', 35],
+      ['3-month', 90],
+      ['4-year', 1460],
+    ])('value of %s returns %i days', (value: string, expected: number) => {
+      expect(getUpcomingDays(value)).toEqual(expected);
+    });
+  });
 });

packages/loot-core/src/shared/schedules.ts

@@ -369,6 +369,21 @@ export function getUpcomingDays(upcomingLength = '7'): number {
       );
     }
     default:
+      if (upcomingLength.includes('-')) {
+        const [num, unit] = upcomingLength.split('-');
+        switch (unit) {
+          case 'day':
+            return parseInt(num, 10);
+          case 'week':
+            return parseInt(num, 10) * 7;
+          case 'month':
+            return parseInt(num, 10) * 30;
+          case 'year':
+            return parseInt(num, 10) * 365;
+          default:
+            return 7;
+        }
+      }
       return parseInt(upcomingLength, 10);
   }
 }

upcoming-release-notes/4206.md

@@ -0,0 +1,6 @@
+---
+category: Features
+authors: [ SamBobBarnes ]
+---
+
+Add option for custom upcoming length