From a4d3f277ea2a8cacfe19d2fd7ce10f23ab0b5eb8 Mon Sep 17 00:00:00 2001
From: Matt Fiddaman <github@m.fiddaman.uk>
Date: Tue, 18 Feb 2025 23:06:00 +0000
Subject: [PATCH] update mapping data for existing synced transactions and
 always show direction dropdown (#4403)

* update sync mapping data for existing transactions on sync

* show payment direction dropdown regardless of sample data

* note

* ignore changes in raw_synced_data
---
 .../components/banksync/EditSyncAccount.tsx   |  23 +--
 .../src/components/banksync/FieldMapping.tsx  | 173 ++++++++++--------
 .../loot-core/src/server/accounts/sync.ts     |  13 +-
 upcoming-release-notes/4403.md                |   6 +
 4 files changed, 117 insertions(+), 98 deletions(-)
 create mode 100644 upcoming-release-notes/4403.md

diff --git a/packages/desktop-client/src/components/banksync/EditSyncAccount.tsx b/packages/desktop-client/src/components/banksync/EditSyncAccount.tsx
index f820d99061b..b13efd362f1 100644
--- a/packages/desktop-client/src/components/banksync/EditSyncAccount.tsx
+++ b/packages/desktop-client/src/components/banksync/EditSyncAccount.tsx
@@ -179,22 +179,13 @@ export function EditSyncAccount({ account }: EditSyncAccountProps) {
             <Trans>Field mapping</Trans>
           </Text>
 
-          {fields.length > 0 ? (
-            <FieldMapping
-              transactionDirection={transactionDirection}
-              setTransactionDirection={setTransactionDirection}
-              fields={fields as MappableFieldWithExample[]}
-              mapping={mapping!}
-              setMapping={setMapping}
-            />
-          ) : (
-            <Text style={{ margin: '1em 0 .5em 0' }}>
-              <Trans>
-                No transactions found with mappable fields, accounts must have
-                been synced at least once for this function to be available.
-              </Trans>
-            </Text>
-          )}
+          <FieldMapping
+            transactionDirection={transactionDirection}
+            setTransactionDirection={setTransactionDirection}
+            fields={fields as MappableFieldWithExample[]}
+            mapping={mapping!}
+            setMapping={setMapping}
+          />
 
           <Text style={{ fontSize: 15, margin: '1em 0 .5em 0' }}>
             <Trans>Options</Trans>
diff --git a/packages/desktop-client/src/components/banksync/FieldMapping.tsx b/packages/desktop-client/src/components/banksync/FieldMapping.tsx
index e4b61f71c32..ddf0975cbcd 100644
--- a/packages/desktop-client/src/components/banksync/FieldMapping.tsx
+++ b/packages/desktop-client/src/components/banksync/FieldMapping.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 import { Text } from '@actual-app/components/text';
 
@@ -65,92 +65,103 @@ export function FieldMapping({
         }}
       />
 
-      <TableHeader>
-        <Cell
-          value={t('Actual field')}
-          width={100}
-          style={{ paddingLeft: '10px' }}
-        />
-        <Cell
-          value={t('Bank field')}
-          width={330}
-          style={{ paddingLeft: '10px' }}
-        />
-        <Cell
-          value={t('Example')}
-          width="flex"
-          style={{ paddingLeft: '10px' }}
-        />
-      </TableHeader>
-
-      {fields.map(field => {
-        return (
-          <Row
-            key={field.actualField}
-            style={{
-              fontSize: 13,
-              backgroundColor: theme.tableRowBackgroundHover,
-              display: 'flex',
-              alignItems: 'center',
-              border: '1px solid var(--color-tableBorder)',
-              minHeight: '40px',
-            }}
-            collapsed={true}
-          >
+      {fields.length === 0 ? (
+        <Text style={{ margin: '1em 0 .5em 0' }}>
+          <Trans>
+            No transactions found with mappable fields, accounts must have been
+            synced at least once for this function to be available.
+          </Trans>
+        </Text>
+      ) : (
+        <>
+          <TableHeader>
             <Cell
-              value={field.actualField}
-              width={75}
-              style={{ paddingLeft: '10px', height: '100%', border: 0 }}
+              value={t('Actual field')}
+              width={100}
+              style={{ paddingLeft: '10px' }}
             />
-
-            <Text>
-              <SvgRightArrow2
-                style={{
-                  width: 15,
-                  height: 15,
-                  color: theme.tableText,
-                  marginRight: '20px',
-                }}
-              />
-            </Text>
-
-            <Select
-              aria-label={t('Synced field to map to {{field}}', {
-                field: field.actualField,
-              })}
-              options={field.syncFields.map(({ field }) => [field, field])}
-              value={mapping.get(field.actualField)}
-              style={{
-                width: 290,
-              }}
-              onChange={newValue => {
-                if (newValue) setMapping(field.actualField, newValue);
-              }}
+            <Cell
+              value={t('Bank field')}
+              width={330}
+              style={{ paddingLeft: '10px' }}
             />
-
-            <Text>
-              <SvgEquals
-                style={{
-                  width: 12,
-                  height: 12,
-                  color: theme.tableText,
-                  marginLeft: '20px',
-                }}
-              />
-            </Text>
-
             <Cell
-              value={
-                field.syncFields.find(
-                  f => f.field === mapping.get(field.actualField),
-                )?.example
-              }
+              value={t('Example')}
               width="flex"
-              style={{ paddingLeft: '10px', height: '100%', border: 0 }}
+              style={{ paddingLeft: '10px' }}
             />
-          </Row>
-        );
-      })}
+          </TableHeader>
+
+          {fields.map(field => {
+            return (
+              <Row
+                key={field.actualField}
+                style={{
+                  fontSize: 13,
+                  backgroundColor: theme.tableRowBackgroundHover,
+                  display: 'flex',
+                  alignItems: 'center',
+                  border: '1px solid var(--color-tableBorder)',
+                  minHeight: '40px',
+                }}
+                collapsed={true}
+              >
+                <Cell
+                  value={field.actualField}
+                  width={75}
+                  style={{ paddingLeft: '10px', height: '100%', border: 0 }}
+                />
+
+                <Text>
+                  <SvgRightArrow2
+                    style={{
+                      width: 15,
+                      height: 15,
+                      color: theme.tableText,
+                      marginRight: '20px',
+                    }}
+                  />
+                </Text>
+
+                <Select
+                  aria-label={t('Synced field to map to {{field}}', {
+                    field: field.actualField,
+                  })}
+                  options={field.syncFields.map(({ field }) => [field, field])}
+                  value={mapping.get(field.actualField)}
+                  style={{
+                    width: 290,
+                  }}
+                  onChange={newValue => {
+                    if (newValue) setMapping(field.actualField, newValue);
+                  }}
+                />
+
+                <Text>
+                  <SvgEquals
+                    style={{
+                      width: 12,
+                      height: 12,
+                      color: theme.tableText,
+                      marginLeft: '20px',
+                    }}
+                  />
+                </Text>
+
+                <Cell
+                  value={
+                    field.syncFields.find(
+                      f => f.field === mapping.get(field.actualField),
+                    )?.example
+                  }
+                  width="flex"
+                  style={{ paddingLeft: '10px', height: '100%', border: 0 }}
+                />
+              </Row>
+            );
+          })}
+        </>
+      )}
     </>
   );
 }
diff --git a/packages/loot-core/src/server/accounts/sync.ts b/packages/loot-core/src/server/accounts/sync.ts
index ac2c1dc0ccc..44fac2eeb6d 100644
--- a/packages/loot-core/src/server/accounts/sync.ts
+++ b/packages/loot-core/src/server/accounts/sync.ts
@@ -474,9 +474,20 @@ export async function reconcileTransactions(
         imported_payee: trans.imported_payee || null,
         notes: existing.notes || trans.notes || null,
         cleared: trans.cleared ?? existing.cleared,
+        raw_synced_data:
+          existing.raw_synced_data ?? trans.raw_synced_data ?? null,
       };
 
-      if (hasFieldsChanged(existing, updates, Object.keys(updates))) {
+      const fieldsToMarkUpdated = Object.keys(updates).filter(k => {
+        // do not mark raw_synced_data if it's gone from falsy to falsy
+        if (!existing.raw_synced_data && !trans.raw_synced_data) {
+          return k !== 'raw_synced_data';
+        }
+
+        return true;
+      });
+
+      if (hasFieldsChanged(existing, updates, fieldsToMarkUpdated)) {
         updated.push({ id: existing.id, ...updates });
         if (!existingPayeeMap.has(existing.payee)) {
           const payee = await db.getPayee(existing.payee);
diff --git a/upcoming-release-notes/4403.md b/upcoming-release-notes/4403.md
new file mode 100644
index 00000000000..b57e3f0e466
--- /dev/null
+++ b/upcoming-release-notes/4403.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [matt-fidd]
+---
+
+Update bank sync mapping data for existing transactions on sync