Autocomplete transaction information when selecting the description of a previous transaction

src/components/Forms/TransactionSplitForm.tsx

@@ -32,6 +32,7 @@ export default function TransactionSplitForm({
 }) {
   const [locale] = getLocales();
   const displayForeignCurrency = useSelector((state: RootState) => state.configuration.displayForeignCurrency);
+  const autocompleteTransaction = useSelector((state: RootState) => state.configuration.autocompleteTransaction);
   const dispatch = useDispatch<RootDispatch>();
   const { colorScheme, colors } = useThemeColors();
   const [formData, setData] = useState<TransactionSplitType>({
@@ -73,6 +74,32 @@ export default function TransactionSplitForm({
     });
   };
 
+  const handleAutocompleteDescription = async (autocomplete) => {
+    let updates: Partial<TransactionSplitType> = {
+      description: autocomplete.name,
+    };
+
+    if (autocompleteTransaction) {
+      const existingTransaction = await dispatch.transactions.getTransaction(autocomplete.transactionGroupId);
+      updates = {
+        ...updates,
+        sourceId: existingTransaction.attributes.transactions[0].sourceId,
+        sourceName: existingTransaction.attributes.transactions[0].sourceName,
+        currencyCode: existingTransaction.attributes.transactions[0].currencyCode,
+        currencySymbol: existingTransaction.attributes.transactions[0].currencySymbol,
+        destinationId: existingTransaction.attributes.transactions[0].destinationId,
+        destinationName: existingTransaction.attributes.transactions[0].destinationName,
+        categoryId: existingTransaction.attributes.transactions[0].categoryId,
+        categoryName: existingTransaction.attributes.transactions[0].categoryName,
+      };
+    }
+
+    setTransaction({
+      ...formData,
+      ...updates,
+    });
+  };
+
   const colorItemTypes = {
     withdrawal: colors.red,
     deposit: colors.green,
@@ -298,10 +325,7 @@ export default function TransactionSplitForm({
             description: value,
           });
         }}
-        onSelectAutocomplete={(autocomplete) => setTransaction({
-          ...formData,
-          description: autocomplete.name,
-        })}
+        onSelectAutocomplete={handleAutocompleteDescription}
         InputRightElement={deleteBtn(['description'])}
         routeApi="transactions"
       />

src/components/Screens/ConfigurationScreen.tsx

@@ -33,6 +33,7 @@ import {
 export default function ConfigurationScreen({ navigation }: ScreenType) {
   const { colors } = useThemeColors();
   const closeTransactionScreen = useSelector((state: RootState) => state.configuration.closeTransactionScreen);
+  const autocompleteAccounts = useSelector((state: RootState) => state.configuration.autocompleteTransaction);
   const safeAreaInsets = useSafeAreaInsets();
   const backendURL = useSelector((state: RootState) => state.configuration.backendURL);
   const useBiometricAuth = useSelector((state: RootState) => state.configuration.useBiometricAuth);
@@ -106,11 +107,16 @@ export default function ConfigurationScreen({ navigation }: ScreenType) {
     );
   };
 
-  const handleCheckBoxChange = async (bool: boolean) => {
+  const handleCloseFormCheckBoxChange = async (bool: boolean) => {
     dispatch.configuration.setCloseTransactionScreen(bool);
     return Promise.resolve();
   };
 
+  const handleAutocompleteAccountsCheckBoxChange = async (bool: boolean) => {
+    dispatch.configuration.setAutocompleteTransaction(bool);
+    return Promise.resolve();
+  };
+
   const showLogoutAlert = () => Alert.alert(
     translate('configuration_clear_alert_title'),
     '',
@@ -305,7 +311,28 @@ export default function ConfigurationScreen({ navigation }: ScreenType) {
           }}
         >
           <AText fontSize={14}>{translate('close_after_transaction')}</AText>
-          <Switch thumbColor="white" trackColor={{ false: '#767577', true: selectedBrandStyle }} onValueChange={handleCheckBoxChange} value={closeTransactionScreen} />
+          <Switch thumbColor="white" trackColor={{ false: '#767577', true: selectedBrandStyle }} onValueChange={handleCloseFormCheckBoxChange} value={closeTransactionScreen} />
+        </AStack>
+      </AView>
+      <AView
+        style={{
+          borderTopWidth: 0.5,
+          borderBottomWidth: 0.5,
+          borderColor: colors.listBorderColor,
+          backgroundColor: colors.tileBackgroundColor,
+        }}
+      >
+        <AStack
+          row
+          justifyContent="space-between"
+          style={{
+            paddingHorizontal: 10,
+            paddingVertical: 5,
+            marginLeft: 10,
+          }}
+        >
+          <AText fontSize={14} maxWidth="80%">{translate('configuration_autocomplete_transaction')}</AText>
+          <Switch thumbColor="white" trackColor={{ false: '#767577', true: selectedBrandStyle }} onValueChange={handleAutocompleteAccountsCheckBoxChange} value={autocompleteAccounts} />
         </AStack>
       </AView>
 

src/i18n/locale/translations/en-US.ts

@@ -165,4 +165,7 @@ export default {
   filters_screen_title: 'Filters',
   credentials_done_button: 'Done',
   credentials_edit_button: 'Edit',
+
+  // from X.X.X
+  configuration_autocomplete_transaction: 'Autocomplete transaction information when selecting a previous description', // TODO: explain better
 };

src/models/configuration.ts

@@ -14,6 +14,7 @@ type ConfigurationStateType = {
   apiVersion: string
   serverVersion: string
   closeTransactionScreen: boolean
+  autocompleteTransaction: boolean
   selectedTheme: string
   selectedBrandStyle: string
 }
@@ -52,6 +53,7 @@ const INITIAL_STATE = {
   apiVersion: '',
   serverVersion: '',
   closeTransactionScreen: false,
+  autocompleteTransaction: false,
   selectedTheme: 'gradientOrange',
   selectedBrandStyle: colors.brandStyleOrange,
 } as ConfigurationStateType;
@@ -114,6 +116,12 @@ export default createModel<RootModel>()({
         closeTransactionScreen,
       };
     },
+    setAutocompleteTransaction(state, autocompleteTransaction: boolean): ConfigurationStateType {
+      return {
+        ...state,
+        autocompleteTransaction,
+      };
+    },
     setSelectedTheme(state, selectedTheme: string): ConfigurationStateType {
       return {
         ...state,

src/models/transactions.ts

@@ -354,8 +354,17 @@ export default createModel<RootModel>()({
 
       return response;
     },
+
     async deleteTransaction(id): Promise<AxiosResponse> {
       return dispatch.configuration.apiDelete({ url: `/api/v1/transactions/${id}` });
     },
+
+    async getTransaction(id): Promise<TransactionType> {
+      const { data: transaction } = await dispatch.configuration.apiFetch({ url: `/api/v1/transactions/${id}` }) as {
+        data: TransactionType,
+      };
+
+      return transaction;
+    },
   }),
 });