feat(path-box): update style and better management

giuxtaposition · Jan 6, 2024 · f61cefe · f61cefe
1 parent 28b4e88
commit f61cefe
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 51 deletions.
diff --git a/e2e/path-box.spec.ts b/e2e/path-box.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "./fixtures.ts";
+import { test, expect } from "./fixtures";
 
 test.describe("PathBox", () => {
   const paths = ["vita", "caso-morte", "infortuni"];
@@ -7,8 +7,6 @@ test.describe("PathBox", () => {
     test(`in /${path} path, should render path box`, async ({ page }) => {
       await page.goto(`https://calc-dev.vitesicure.it/${path}`);
 
-      await page.waitForSelector("#vitesicure-path-box", { timeout: 50000 });
-
       await expect(page.locator("#vitesicure-path-box #path-box")).toHaveText(
         path,
         {
@@ -36,10 +34,6 @@ test.describe("PathBox", () => {
       await page.bringToFront();
       await page.waitForURL(/.*(la-tua-offerta)|(la-tua-polizza-infortuni)$/);
 
-      await page.waitForSelector("#vitesicure-path-box", {
-        timeout: 50000,
-      });
-
       await expect(page.locator("#vitesicure-path-box #path-box")).toHaveText(
         path,
         {

diff --git a/playwright.config.ts b/playwright.config.ts
@@ -28,10 +28,5 @@ export default defineConfig({
       name: "chromium",
       use: { ...devices["Desktop Chrome"] },
     },
-
-    {
-      name: "firefox",
-      use: { ...devices["Desktop Firefox"] },
-    },
   ],
 });
diff --git a/src/entries/background/main.ts b/src/entries/background/main.ts
@@ -19,10 +19,6 @@ browser.tabs.onUpdated.addListener(async function (tabId, changeInfo, tab) {
       tab.title?.toLowerCase().includes("bridge insurance services"))
   ) {
     await tabs.addTab(tabId.toString());
-
-    if (await storage.get("showPathBox")) {
-      messenger.send("load-path-box");
-    }
   }
 });
 

diff --git a/src/entries/contentScript/primary/main.ts b/src/entries/contentScript/primary/main.ts
@@ -3,35 +3,38 @@ import PathBoxComponent from "../../../lib/components/PathBox.svelte";
 import { waitForElement } from "../../../lib/utils/waitForElement";
 import prepareComponent from "../renderContent";
 import PageFactory from "../../../lib/pages/pageFactory";
+import OptionsSyncStorage from "../../../lib/services/storage";
 
-browser.runtime.onMessage.addListener(
-  async function (message, sender, sendResponse) {
-    if (message.message === "load-path-box") {
-      const pathBox = await prepareComponent((appRoot) => {
-        new PathBoxComponent({
-          target: appRoot,
-          props: {
-            currentPath: window.location.pathname.split("/")[1],
-          },
-        });
-      });
+const storage = OptionsSyncStorage.getInstance();
+
+let lastUrl = location.href;
+new MutationObserver(() => {
+  const url = location.href;
+  if (url !== lastUrl) {
+    lastUrl = url;
+    loadPathBox();
+  }
+}).observe(document, { subtree: true, childList: true });
 
-      Promise.any([
-        waitForElement("#vite-sicure-logo"),
-        waitForElement('img[alt="vite-sicure-logo"]'),
-      ]).then((viteSicureLogo) => {
-        let header: HTMLElement;
-        if (viteSicureLogo!.tagName === "IMG") {
-          header = viteSicureLogo!.parentElement!;
-        } else {
-          header = viteSicureLogo!.parentElement!.parentElement!;
-        }
-        if (header.querySelector("#vitesicure-path-box")) return;
-        header.appendChild(pathBox);
+async function loadPathBox() {
+  if (await storage.get("showPathBox")) {
+    const pathBox = await prepareComponent((appRoot) => {
+      new PathBoxComponent({
+        target: appRoot,
+        props: {
+          currentPath: window.location.pathname.split("/")[1],
+        },
       });
-    }
-  },
-);
+    });
+
+    Promise.any([waitForElement("#root")]).then((root) => {
+      if (root.querySelector("#vitesicure-path-box")) return;
+      root.appendChild(pathBox);
+    });
+  }
+}
+
+loadPathBox();
 
 browser.runtime.onMessage.addListener(
   async function (message, sender, sendResponse) {
@@ -58,3 +61,11 @@ browser.runtime.onMessage.addListener(
     }
   },
 );
+
+browser.runtime.onMessage.addListener(
+  async function (message, sender, sendResponse) {
+    if (message.message === "load-path-box") {
+      loadPathBox();
+    }
+  },
+);
diff --git a/src/lib/components/PathBox.svelte b/src/lib/components/PathBox.svelte
@@ -13,21 +13,30 @@
 <style lang="scss">
   #path-box {
     margin: 0 20px;
-    padding: 12px;
+    padding: 16px 12px 16px 16px;
+    font-size: 20px;
     font-weight: bold;
     text-transform: uppercase;
-    border-radius: 8px;
+    position: fixed;
+    top: 20%;
+    left: -3%;
+    border-radius: 0 25px 25px 0;
+    border: 2px solid;
+    min-width: 60px;
   }
   .vita {
-    color: rgb(185 28 28);
-    background: rgb(252 165 165);
+    background: rgba(210, 82, 127, 0.1);
+    border-color: #d2527f;
+    color: #d2527f;
   }
   .caso-morte {
-    color: rgb(21 128 61);
-    background: rgb(134 239 172);
+    background: rgba(39, 174, 96, 0.1);
+    border-color: #27ae60;
+    color: #27ae60;
   }
   .infortuni {
-    color: rgb(29 78 216);
-    background: rgb(147 197 253);
+    background: rgba(34, 167, 240, 0.1);
+    border-color: #22a7f0;
+    color: #22a7f0;
   }
 </style>
diff --git a/src/lib/pages/life/preventivatore-page.ts b/src/lib/pages/life/preventivatore-page.ts
@@ -4,14 +4,16 @@ import Page from "../page";
 export default class PreventivatorePage extends Page {
   public static path: string = "preventivatore";
 
+  private duration =
+    "[data-testid='duration-slider'] [data-testid='slider.bar'] [data-index='2'][aria-hidden=true]";
   private birthDate = "input[name='birthDate']";
   private smoker = "input[name='smoker'][value='N']";
   private privacyPolicy = "input[name='privacyPolicyAccepted']";
 
   autofill(): void {
     this.changeInputValue(this.birthDate, FakeDataService.birthdate(74));
-
     this.clickInputElement(this.smoker);
     this.clickInputElement(this.privacyPolicy);
+    this.clickInputElement(this.duration);
   }
 }