move mappings configs to options & update UX

anh-chu · Feb 15, 2024 · 4263ba4 · 4263ba4
1 parent d7ac0a5
commit 4263ba4
Show file tree

Hide file tree

Showing 13 changed files with 122 additions and 170 deletions.
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,5 +1,5 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-ggshield secret scan pre-commit
+gitleaks detect --source . -v
 npx pretty-quick --staged
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,11 +11,6 @@
         "format": "prettier --write --ignore-unknown \"{config,public,src}/**/*.{html,css,js,ts,json}\"",
         "prepare": "husky install"
     },
-    "husky": {
-        "hooks": {
-            "pre-commit": "pretty-quick --staged"
-        }
-    },
     "devDependencies": {
         "@types/chrome": "^0.0.181",
         "@types/json-query": "^2.2.3",

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,22 +1,19 @@
 {
     "manifest_version": 3,
-    "name": "Actual Tcb Sync",
-    "version": "0.3.0",
-    "description": "My Chrome Extension",
+    "name": "Actual TCB Sync",
+    "version": "0.4.0",
+    "description": "Sync transactions between Actual & Techcombank",
     "icons": {
         "92": "favicon.png"
     },
     "action": {
         "default_icon": "favicon.png",
         "default_popup": "popup.html"
     },
-    "options_ui": {
-        "page": "options.html",
-        "open_in_tab": false
-    },
+    "options_page": "options.html",
     "background": {
         "service_worker": "background.js"
     },
     "permissions": ["activeTab", "scripting", "storage", "downloads"],
-    "host_permissions": ["https://*.techcombank.com.vn/*", "*://localhost:*/*", "http://data.fixer.io/*"]
+    "host_permissions": ["https://*.techcombank.com.vn/*", "*://*/*", "http://data.fixer.io/*"]
 }
diff --git a/public/options.html b/public/options.html
@@ -1,38 +1,54 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <title>My Test Extension Options</title>
+        <link
+            rel="stylesheet"
+            href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css"
+            integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls"
+            crossorigin="anonymous"
+        />
+        <title>Actual TCB Sync Options</title>
     </head>
 
-    <body>
-        <label>
-            <input type="text" id="tcbUrl" />
-            TCB base URL
-        </label>
-        <label>
-            <input type="text" id="actualUrl" />
-            Actual Base URL
-        </label>
+    <body class="pure-g" style="padding: 16px" onsubmit="return false;">
+        <form class="pure-form pure-form-aligned pure-u-1">
+            <fieldset>
+                <div class="pure-control-group">
+                    <label> TCB base URL </label>
+                    <input type="text" id="tcbUrl" class="pure-input-rounded" required />
+                </div>
+                <div class="pure-control-group">
+                    <label> Actual Base URL </label>
+                    <input type="text" id="actualUrl" class="pure-input-rounded" required />
+                </div>
 
-        <label>
-            <input type="password" id="actualPassword" />
-            Actual password
-        </label>
-        <label>
-            <input type="text" id="actualBudgetId" />
-            Actual budget ID
-        </label>
-        <label>
-            <input type="password" id="actualBudgetPassword" />
-            Actual budget password
-        </label>
-        <label>
-            <input type="password" id="exchangeRateKey" />
-            Exchange rate API key
-        </label>
+                <div class="pure-control-group">
+                    <label> Actual password </label>
+                    <input type="password" id="actualPassword" class="pure-input-rounded" required />
+                </div>
+                <div class="pure-control-group">
+                    <label> Actual budget ID </label>
+                    <input type="text" id="actualBudgetId" class="pure-input-rounded" required />
+                </div>
+                <div class="pure-control-group">
+                    <label> Actual budget password </label>
+                    <input type="password" id="actualBudgetPassword" class="pure-input-rounded" />
+                </div>
+                <div class="pure-control-group">
+                    <label> Exchange rate API key </label>
+                    <input type="password" id="exchangeRateKey" class="pure-input-rounded" />
+                </div>
+                <div class="pure-control-group">
+                    <label> Mappings (JSON list) </label>
+                    <textarea id="mappings" rows="4" style="min-height: 500px" required></textarea>
+                </div>
+            </fieldset>
+        </form>
 
-        <div id="status"></div>
-        <button id="save">Save</button>
+        <div id="status" class="pure-u-1"></div>
+        <div class="pure-u-1">
+            <button id="save" class="pure-button">Save</button>
+        </div>
 
         <script src="options.js"></script>
     </body>

diff --git a/public/popup.html b/public/popup.html
@@ -12,10 +12,15 @@
         <button id="auto-run">Sync with API</button>
 
         <div id="lastSyncWrap">
-            <b>Last transaction date:</b>
+            <b>Last transaction:</b>
             <i id="lastSync"></i>
         </div>
 
+        <div id="newSyncWrap">
+            <b>Latest transaction:</b>
+            <i id="newSync"></i>
+        </div>
+
         <script src="popup.js"></script>
     </body>
 </html>

diff --git a/src/autorun.ts b/src/autorun.ts
@@ -1,6 +1,7 @@
 import { initActual, getLastTransaction, importTransactions } from "./actual";
 import { getArrangements, getTransactions } from "./tcb";
 import { splitAndProcessTransaction } from "./tcb/process";
+import { sendMessage } from "./util/chrome";
 
 export async function apiSync(startDate: string = "") {
   const tomorrow = new Date(Date.now() + 24 * 60 * 60 * 1000);
@@ -9,10 +10,10 @@ export async function apiSync(startDate: string = "") {
   const token = await initActual();
   const lastTransactions = await getLastTransaction(token);
 
-  chrome.runtime.sendMessage({
+  sendMessage({
     action: "setLastDate",
     body: lastTransactions.data[0].date,
-  });
+  }).then(() => {});
 
   const arrangements = await getArrangements();
   // const goals = await getAccounts(token);
@@ -34,4 +35,10 @@ export async function apiSync(startDate: string = "") {
       arrangement.transactions
     );
   }
+
+  const latestTransaction = await getLastTransaction(token);
+  await sendMessage({
+    action: "setNewDate",
+    body: latestTransaction.data[0].date,
+  }).then(() => {});
 }
diff --git a/src/options.ts b/src/options.ts
@@ -9,6 +9,7 @@ const saveOptions = () => {
     "actualBudgetPassword"
   )?.value;
   const exchangeRateKey = document?.getElementById("exchangeRateKey")?.value;
+  const mappings = document?.getElementById("mappings")?.value;
 
   chrome.storage.sync.set(
     {
@@ -18,6 +19,7 @@ const saveOptions = () => {
       actualBudgetId,
       actualBudgetPassword,
       exchangeRateKey,
+      mappings,
     },
     () => {
       // Update status to let user know options were saved.
@@ -44,6 +46,7 @@ const restoreOptions = () => {
       "actualBudgetId",
       "actualBudgetPassword",
       "exchangeRateKey",
+      "mappings",
     ],
     (items) => {
       document.getElementById("tcbUrl").value = items.tcbUrl;
@@ -53,6 +56,7 @@ const restoreOptions = () => {
       document.getElementById("actualBudgetPassword").value =
         items.actualBudgetPassword;
       document.getElementById("exchangeRateKey").value = items.exchangeRateKey;
+      document.getElementById("mappings").value = items.mappings;
     }
   );
 };

diff --git a/src/popup.ts b/src/popup.ts
@@ -56,13 +56,20 @@ document.getElementById("auto-run")?.addEventListener("click", () => {
 chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
   if (message.action != "download") return true;
   const fileName = `tcb-export ${new Date().toISOString().slice(0, 10)}.zip`;
-  console.log(message.body);
   downloadAsFile(message.body, fileName)
     .then(() => setStatus(fileName))
     .catch((err) => setStatus(err));
+  return true;
 });
 
 chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
   if (message.action != "setLastDate") return true;
   document.getElementById("lastSync")?.textContent = message.body;
+  return true;
+});
+
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.action != "setNewDate") return true;
+  document.getElementById("newSync")?.textContent = message.body;
+  return true;
 });
diff --git a/src/tcb/process.ts b/src/tcb/process.ts
@@ -1,10 +1,12 @@
 import jsonQuery from "json-query";
-import { arrangementMapping, goalMapping } from "../util/mapping";
+import { getMappings } from "../util/mapping";
 import { getEURtoVNDrate, getUSDtoVNDrate } from "../util/currency";
 
 // convert transaction of type Transaction to actual transaction of type ActualTransaction
 export async function convertToActualTransaction(
-  transaction: Transaction
+  transaction: Transaction,
+  arrangementMapping: { [key: string]: string },
+  goalMapping: { [key: string]: string }
 ): Promise<ActualTransaction> {
   const a: ActualTransaction = {
     imported_id: transaction.id,
@@ -39,6 +41,7 @@ export async function splitAndProcessTransaction(
   arrangements: Arrangement[],
   forApi: boolean = false
 ) {
+  const { am: arrangementMapping, gm: goalMapping } = await getMappings();
   const converted = await Promise.all(
     arrangements.map(async (arrangement) => {
       const group = jsonQuery(
@@ -55,8 +58,22 @@ export async function splitAndProcessTransaction(
               : +transaction.transactionAmountCurrency.amount;
           if (transaction.counterPartyAccountNumber)
             transaction.description += ` @ ${transaction.counterPartyAccountNumber}`;
+          // remove "Giao dich thanh toan/Purchase - So The/Card No:" from beginning of transaction description
+          if (
+            transaction.description.startsWith(
+              "Giao dich thanh toan/Purchase - So The/Card No:"
+            )
+          )
+            transaction.description = transaction.description.replace(
+              "Giao dich thanh toan/Purchase - So The/Card No:",
+              ""
+            );
           return forApi
-            ? await convertToActualTransaction(transaction)
+            ? await convertToActualTransaction(
+                transaction,
+                arrangementMapping,
+                goalMapping
+              )
             : transaction;
         })
       );

diff --git a/src/util/chrome.ts b/src/util/chrome.ts
@@ -4,3 +4,9 @@ export async function getCurrentTab() {
   let [tab] = await chrome.tabs.query(queryOptions);
   return tab;
 }
+
+export function sendMessage(message: any) {
+  return new Promise((resolve) => {
+    chrome.runtime.sendMessage(message, resolve);
+  });
+}