SThor · SThor · Jul 17, 2026 · Jul 17, 2026 · Jul 17, 2026 · Jul 17, 2026
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,3 @@
+#!/usr/bin/env sh
+
+npm run precommit
diff --git a/api-sync-status-preview.html b/api-sync-status-preview.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ApiSyncStatus Preview</title>
+    <script type="module" src="/src/api-sync-status-preview.jsx"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,8 +20,12 @@
     "test:run": "vitest run",
     "test:watch": "vitest --watch",
     "test:coverage": "vitest run --coverage",
+    "format:check": "prettier --check .",
+    "format:check:staged": "node scripts/check-staged-format.js",
     "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
+    "lint:fix": "eslint . --fix",
+    "precommit": "npm run lint && npm run format:check:staged",
+    "prepare": "husky"
   },
   "dependencies": {
     "@emoji-mart/data": "^1.2.1",
@@ -51,6 +55,7 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "globals": "^16.3.0",
+    "husky": "^9.1.7",
     "jsdom": "^26.1.0",
     "postcss": "^8.5.6",
     "prettier": "^3.5.3",

diff --git a/scripts/check-staged-format.js b/scripts/check-staged-format.js
@@ -0,0 +1,37 @@
+/* eslint-disable import/no-nodejs-modules */
+import { execFileSync } from "child_process";
+import { resolve } from "path";
+
+const prettierCliPath = resolve(
+  "node_modules",
+  "prettier",
+  "bin",
+  "prettier.cjs",
+);
+
+function getStagedFiles() {
+  const output = execFileSync(
+    "git",
+    ["diff", "--cached", "--name-only", "--diff-filter=ACMR"],
+    { encoding: "utf8" },
+  ).trim();
+
+  if (!output) {
+    return [];
+  }
+
+  return output.split(/\r?\n/).filter(Boolean);
+}
+
+const stagedFiles = getStagedFiles();
+
+if (stagedFiles.length === 0) {
+  console.log("No staged files to check with Prettier.");
+  globalThis.process.exit(0);
+}
+
+execFileSync(
+  globalThis.process.execPath,
+  [prettierCliPath, "--check", "--ignore-unknown", ...stagedFiles],
+  { stdio: "inherit" },
+);
diff --git a/src/ReviewPage.jsx b/src/ReviewPage.jsx
@@ -1,201 +1,40 @@
 import PropTypes from "prop-types";
-import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
-import {
-  addSettleUpTransaction,
-  fetchSettleUpPermissions,
-} from "./api/settleup";
 import { useAppContext } from "./AppContext.jsx";
 import { useAuth } from "./AuthProvider.jsx";
+import ApiSyncStatus from "./components/ApiSyncStatus.jsx";
 import CenteredCardLayout from "./components/CenteredCardLayout.jsx";
 import ReviewSection from "./components/ReviewSection.jsx";
-import { BOURSO_TRANSFER_PAYEE_ID } from "./constants.js";
+import { API_STATUS, useApiSync } from "./hooks/useApiSync";
 import { formStatePropType } from "./propTypes.js";
-import { formatYYYYMMDDLocal } from "./utils/dateUtils";
-import { getAccountIdByName } from "./utils/ynabUtils";
 
 export default function ReviewPage({ formState, onBack, onSubmitted }) {
   const navigate = useNavigate();
-  const [loading, setLoading] = useState(false);
-  const [result, setResult] = useState("");
   const { ynabAPI, budgetId, accounts } = useAppContext();
   const { token, user } = useAuth();
 
-  // Helper function to create base transaction object
-  function createBaseTransaction(accountId, amount) {
-    return {
-      account_id: accountId,
-      date: formatYYYYMMDDLocal(formState.date),
-      amount: amount,
-      payee_id: formState.payeeId || null,
-      payee_name: !formState.payeeId ? formState.payee : undefined,
-      category_id: formState.categoryId,
-      memo: formState.description,
-      approved: true,
-    };
-  }
-
-  // Helper function to execute YNAB API call
-  async function executeYnabTransaction(transaction, successMessage) {
-    try {
-      setLoading(true);
-      const res = await ynabAPI.transactions.createTransaction(budgetId, {
-        transaction,
-      });
-      setResult(successMessage + "\n" + JSON.stringify(res, null, 2));
-    } catch (err) {
-      setResult("YNAB API error: " + (err?.message || err));
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  async function handleYnabSubmit() {
-    if (!ynabAPI || !budgetId) {
-      setResult("YNAB not configured.");
-      return;
-    }
-
-    // Split transaction logic
-    if (formState.account.swile && formState.account.bourso) {
-      const swileAccountId = getAccountIdByName(accounts, "Swile");
-      const boursoAccountId = getAccountIdByName(accounts, "Boursorama");
-
-      if (!swileAccountId || !boursoAccountId) {
-        setResult("No matching YNAB account found for Swile or Bourso.");
-        return;
-      }
+  const { ynab, settleup, anyInFlight, startSync, retryFetch, retryEnter } =
+    useApiSync({ ynabAPI, budgetId, accounts, token, user });
 
-      const transferInflowMilliunits =
-        formState.swileMilliunits - formState.amountMilliunits;
+  async function handleConfirmSubmit() {
+    const results = await startSync(formState);
 
-      // If Swile covers the full amount, create a simple transaction
-      if (transferInflowMilliunits === 0) {
-        const transaction = createBaseTransaction(
-          swileAccountId,
-          formState.amountMilliunits,
-        );
-        await executeYnabTransaction(transaction, "✅ YNAB transaction sent!");
-        return;
-      }
+    const allTargetedSucceeded =
+      (!formState.target.ynab || results.ynab === API_STATUS.SUCCESS) &&
+      (!formState.target.settleup || results.settleup === API_STATUS.SUCCESS);
 
-      // Create split transaction
-      const transaction = {
-        ...createBaseTransaction(swileAccountId, formState.swileMilliunits),
-        category_id: null, // Override for split transactions
-        subtransactions: [
-          {
-            amount: formState.amountMilliunits,
-            category_id: formState.categoryId,
-            memo: formState.description,
-            payee_id: formState.payeeId || null,
-          },
-          {
-            amount: transferInflowMilliunits,
-            payee_id: BOURSO_TRANSFER_PAYEE_ID,
-            transfer_account_id: boursoAccountId,
-            memo: "Bourso completion",
-          },
-        ],
-      };
-
-      await executeYnabTransaction(
-        transaction,
-        "✅ YNAB split transaction sent!",
-      );
-      return;
-    }
-
-    // Single-account transaction
-    const accountId = formState.account.bourso
-      ? getAccountIdByName(accounts, "Boursorama")
-      : formState.account.swile
-        ? getAccountIdByName(accounts, "Swile")
-        : getAccountIdByName(accounts, "Boursorama"); // Default fallback
-
-    if (!accountId) {
-      setResult("No matching YNAB account found for the selected button.");
-      return;
-    }
-
-    const transaction = createBaseTransaction(
-      accountId,
-      formState.amountMilliunits,
-    );
-    await executeYnabTransaction(transaction, "✅ YNAB transaction sent!");
+    if (allTargetedSucceeded && onSubmitted) onSubmitted();
   }
 
-  async function handleSettleUpSubmit() {
-    setResult("");
-    if (
-      !token ||
-      !formState.settleUpGroup?.groupId ||
-      formState.amountMilliunits === 0 ||
-      !formState.settleUpPayerId ||
-      !formState.settleUpMembers?.length
-    ) {
-      console.warn("[ReviewPage] Missing required fields for SettleUp submit");
-      setResult("❌ Please fill all required fields before submitting.");
-      return;
-    }
-    const permissions = await fetchSettleUpPermissions(
-      token,
-      formState.settleUpGroup.groupId,
-    );
-    if (!permissions[user.uid] || permissions[user.uid].level < 20) {
-      console.warn("[ReviewPage] Insufficient permissions for user:", user.uid);
-      setResult("❌ You do not have permission to submit this transaction.");
-      return;
-    }
-    const amount = (-formState.amountMilliunits / 1000).toFixed(2);
-    const tx = {
-      category:
-        formState.settleUpCategory === "∅"
-          ? undefined
-          : formState.settleUpCategory,
-      currencyCode: formState.settleUpCurrency || "EUR",
-      dateTime: formState.date.getTime(),
-      items: [
-        {
-          amount: amount,
-          forWhom: formState.settleUpMembers.map((member) => ({
-            memberId: member.id,
-            weight: (member.defaultWeight || "1").toString(),
-          })),
-        },
-      ],
-      purpose:
-        formState.payee +
-        (formState.description ? ` - ${formState.description}` : ""),
-      type: "expense",
-      whoPaid: [{ memberId: formState.settleUpPayerId, weight: "1" }],
-      exchangeRates: [],
-      fixedExchangeRate: true,
-    };
-    try {
-      setLoading(true);
-      const data = await addSettleUpTransaction(
-        token,
-        formState.settleUpGroup.groupId,
-        tx,
-      );
-      if (data && data.name) {
-        setResult("✅ SettleUp transaction sent!");
-      } else {
-        setResult("Error adding transaction: " + JSON.stringify(data));
-      }
-    } catch (e) {
-      setResult("Error adding transaction: " + e.message);
-    } finally {
-      setLoading(false);
-    }
+  function handleRetryYnab() {
+    if (ynab.status === API_STATUS.FETCH_ERROR) retryFetch("ynab");
+    else retryEnter("ynab");
   }
 
-  async function handleSubmit() {
-    if (formState.target.ynab) await handleYnabSubmit();
-    if (formState.target.settleup) await handleSettleUpSubmit();
-    if (onSubmitted) onSubmitted();
+  function handleRetrySettleup() {
+    if (settleup.status === API_STATUS.FETCH_ERROR) retryFetch("settleup");
+    else retryEnter("settleup");
   }
 
   return (
@@ -212,20 +51,18 @@ export default function ReviewPage({ formState, onBack, onSubmitted }) {
         </a>
       </div>
       <ReviewSection {...formState} />
-      {result && (
-        <div
-          className="text-sm mt-2"
-          style={{ color: result.startsWith("✅") ? "green" : "red" }}
-        >
-          {result}
-        </div>
-      )}
+      <ApiSyncStatus
+        ynab={ynab}
+        settleup={settleup}
+        onRetryYnab={handleRetryYnab}
+        onRetrySettleup={handleRetrySettleup}
+      />
       <button
         className="bg-sky-500 hover:bg-sky-600 text-white font-semibold px-4 py-2 rounded-sm w-full mt-4"
-        onClick={handleSubmit}
-        disabled={loading}
+        onClick={handleConfirmSubmit}
+        disabled={anyInFlight}
       >
-        {loading ? "Submitting..." : "Confirm & Submit"}
+        {anyInFlight ? "Submitting…" : "Confirm & Submit"}
       </button>
     </CenteredCardLayout>
   );
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		#!/usr/bin/env sh

		npm run precommit
Comment thread Copilot marked this conversation as resolved.