Add rules with splits

packages/desktop-client/src/components/settings/Experimental.tsx

@@ -95,6 +95,7 @@ export function ExperimentalFeatures() {
               Goal templates
             </FeatureToggle>
             <FeatureToggle flag="simpleFinSync">SimpleFIN sync</FeatureToggle>
+            <FeatureToggle flag="splitsInRules">Splits in rules</FeatureToggle>
           </View>
         ) : (
           <LinkButton

packages/desktop-client/src/components/spreadsheet/CellValue.tsx

@@ -5,15 +5,15 @@ import { type CSSProperties, styles } from '../../style';
 import { Text } from '../common/Text';
 import { ConditionalPrivacyFilter } from '../PrivacyFilter';
 
-import { useFormat } from './useFormat';
+import { type FormatType, useFormat } from './useFormat';
 import { useSheetName } from './useSheetName';
 import { useSheetValue } from './useSheetValue';
 
 import { type Binding } from '.';
 
 type CellValueProps = {
   binding: string | Binding;
-  type?: string;
+  type?: FormatType;
   formatter?: (value) => ReactNode;
   style?: CSSProperties;
   getStyle?: (value) => CSSProperties;

packages/desktop-client/src/components/spreadsheet/useFormat.ts

@@ -4,9 +4,15 @@ import { useSelector } from 'react-redux';
 import { selectNumberFormat } from 'loot-core/src/client/selectors';
 import { integerToCurrency } from 'loot-core/src/shared/util';
 
+export type FormatType =
+  | 'string'
+  | 'number'
+  | 'financial'
+  | 'financial-with-sign';
+
 function format(
   value: unknown,
-  type = 'string',
+  type: FormatType = 'string',
   formatter?: Intl.NumberFormat,
 ): string {
   switch (type) {
@@ -49,7 +55,7 @@ export function useFormat() {
   const numberFormat = useSelector(selectNumberFormat);
 
   return useCallback(
-    (value: unknown, type = 'string') =>
+    (value: unknown, type: FormatType = 'string') =>
       format(value, type, numberFormat.formatter),
     [numberFormat],
   );

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

@@ -40,7 +40,7 @@ import {
   mergeConditionalPrivacyFilterProps,
 } from './PrivacyFilter';
 import { type Binding } from './spreadsheet';
-import { useFormat } from './spreadsheet/useFormat';
+import { type FormatType, useFormat } from './spreadsheet/useFormat';
 import { useSheetValue } from './spreadsheet/useSheetValue';
 import { Tooltip, IntersectionBoundary } from './tooltips';
 
@@ -660,7 +660,7 @@ export function SelectCell({
 
 type SheetCellValueProps = {
   binding: Binding;
-  type: string;
+  type: FormatType;
   getValueStyle?: (value: string | number) => CSSProperties;
   formatExpr?: (value) => string;
   unformatExpr?: (value: string) => unknown;

packages/desktop-client/src/components/transactions/MobileTransaction.jsx

@@ -992,27 +992,31 @@ function TransactionEditUnconnected(props) {
     return null;
   }
 
-  const onEdit = async transaction => {
-    let newTransaction = transaction;
+  const onEdit = async serializedTransaction => {
+    const transaction = deserializeTransaction(
+      serializedTransaction,
+      null,
+      dateFormat,
+    );
+
     // Run the rules to auto-fill in any data. Right now we only do
     // this on new transactions because that's how desktop works.
     if (isTemporary(transaction)) {
       const afterRules = await send('rules-run', { transaction });
       const diff = getChangedValues(transaction, afterRules);
 
-      newTransaction = { ...transaction };
       if (diff) {
         Object.keys(diff).forEach(field => {
-          if (newTransaction[field] == null) {
-            newTransaction[field] = diff[field];
+          if (transaction[field] == null) {
+            transaction[field] = diff[field];
           }
         });
       }
     }
 
     const { data: newTransactions } = updateTransaction(
       transactions,
-      deserializeTransaction(newTransaction, null, dateFormat),
+      transaction,
     );
     setTransactions(newTransactions);
   };

packages/desktop-client/src/components/transactions/TransactionsTable.jsx

@@ -35,6 +35,8 @@ import {
   updateTransaction,
   deleteTransaction,
   addSplitTransaction,
+  groupTransaction,
+  ungroupTransactions,
 } from 'loot-core/src/shared/transactions';
 import {
   integerToCurrency,
@@ -689,6 +691,7 @@ function PayeeIcons({
 const Transaction = memo(function Transaction(props) {
   const {
     transaction: originalTransaction,
+    subtransactions,
     editing,
     showAccount,
     showBalance,
@@ -827,7 +830,8 @@ const Transaction = memo(function Transaction(props) {
       // Run the transaction through the formatting so that we know
       // it's always showing the formatted result
       setTransaction(serializeTransaction(deserialized, showZeroInDeposit));
-      onSave(deserialized);
+
+      onSave(deserialized, subtransactions);
     }
   }
 
@@ -1473,9 +1477,10 @@ function NewTransaction({
   const error = transactions[0].error;
   const isDeposit = transactions[0].amount > 0;
 
-  const emptyChildTransactions = transactions.filter(
-    t => t.parent_id === transactions[0].id && t.amount === 0,
+  const childTransactions = transactions.filter(
+    t => t.parent_id === transactions[0].id,
   );
+  const emptyChildTransactions = childTransactions.filter(t => t.amount === 0);
 
   return (
     <View
@@ -1497,6 +1502,7 @@ function NewTransaction({
           key={transaction.id}
           editing={editingTransaction === transaction.id}
           transaction={transaction}
+          subtransactions={transaction.is_parent ? childTransactions : null}
           showAccount={showAccount}
           showCategory={showCategory}
           showBalance={showBalance}
@@ -2048,18 +2054,28 @@ export const TransactionTable = forwardRef((props, ref) => {
   }, [props.onAdd, newNavigator.onEdit]);
 
   const onSave = useCallback(
-    async transaction => {
+    async (transaction, subtransactions = null) => {
       savePending.current = true;
 
+      let groupedTransaction = subtransactions
+        ? groupTransaction([transaction, ...subtransactions])
+        : transaction;
+
       if (isTemporaryId(transaction.id)) {
         if (props.onApplyRules) {
-          transaction = await props.onApplyRules(transaction);
+          groupedTransaction = await props.onApplyRules(groupedTransaction);
         }
 
         const newTrans = latestState.current.newTransactions;
-        setNewTransactions(updateTransaction(newTrans, transaction).data);
+        // Future refactor: we shouldn't need to iterate through the entire
+        // transaction list to ungroup, just the new transactions.
+        setNewTransactions(
+          ungroupTransactions(
+            updateTransaction(newTrans, groupedTransaction).data,
+          ),
+        );
       } else {
-        props.onSave(transaction);
+        props.onSave(groupedTransaction);
       }
     },
     [props.onSave],

packages/desktop-client/src/hooks/useFeatureFlag.ts

@@ -10,6 +10,7 @@ const DEFAULT_FEATURE_FLAG_STATE: Record<FeatureFlag, boolean> = {
   goalTemplatesEnabled: false,
   customReports: false,
   simpleFinSync: false,
+  splitsInRules: false,
 };
 
 export function useFeatureFlag(name: FeatureFlag): boolean {