From 1fe945a0059235668e0e866710326af17bf4a10f Mon Sep 17 00:00:00 2001
From: Ludovic Morin <LudovicMorin357@hotmail.com>
Date: Sat, 11 Jan 2025 16:04:39 -0500
Subject: [PATCH 1/9] refactor: simplify UI components and improve
 language/theme switchers

---
 .../src/components/CouponsPage.tsx            | 44 ++++---------------
 .../src/components/LanguageSwitcher.tsx       | 38 +++-------------
 Extension-React/src/components/Settings.tsx   | 14 +++---
 .../src/components/ThemeProvider.tsx          |  4 +-
 .../src/components/ThemeSwitcher.tsx          | 42 +++---------------
 5 files changed, 31 insertions(+), 111 deletions(-)

diff --git a/Extension-React/src/components/CouponsPage.tsx b/Extension-React/src/components/CouponsPage.tsx
index 570f3f13..555aba45 100644
--- a/Extension-React/src/components/CouponsPage.tsx
+++ b/Extension-React/src/components/CouponsPage.tsx
@@ -49,9 +49,8 @@ const CouponsPage: React.FC<CouponData> = ({
     const subDomainName: string = getSubDomainName(parsedSubDomain);
 
     const handleDomain = () => {
-        const domain = document.querySelector(
-            'input[name="couponType"]:checked'
-        )?.id;
+
+        const domain = document.querySelector('input[name="couponType"]:checked')?.id;
         if (domain === "domain") {
             document.querySelector(".Domain")?.classList.remove("hidden");
             document.querySelector(".SubDomain")?.classList.add("hidden");
@@ -80,46 +79,19 @@ const CouponsPage: React.FC<CouponData> = ({
                     <>
                         {isSubDomain ? (
                             <>
-                                <label
-                                    htmlFor="domain"
-                                    className="DomainLabel w-[50%] m-1.5 flex items-center justify-center rounded-lg text-foreground text-sm hover:cursor-pointer bg-card"
-                                >
+                                <label htmlFor="domain" className="DomainLabel w-[50%] m-1.5 flex items-center justify-center rounded-lg text-foreground text-sm hover:cursor-pointer bg-card">
                                     {domainName}
-                                    <input
-                                        className="hidden"
-                                        type="radio"
-                                        name="couponType"
-                                        id="domain"
-                                        onChange={handleDomain}
-                                        defaultChecked
-                                    />
+                                    <input className="hidden" type="radio" name="couponType" id="domain" onChange={handleDomain} defaultChecked/>
                                 </label>
-                                <label
-                                    htmlFor="subDomain"
-                                    className="SubDomainLabel w-[50%] m-1.5 flex items-center justify-center rounded-lg text-foreground text-sm hover:cursor-pointer"
-                                >
+                                <label htmlFor="subDomain" className="SubDomainLabel w-[50%] m-1.5 flex items-center justify-center rounded-lg text-foreground text-sm hover:cursor-pointer">
                                     {subDomainName}
-                                    <input
-                                        className="hidden"
-                                        type="radio"
-                                        name="couponType"
-                                        id="subDomain"
-                                        onChange={handleDomain}
-                                    />
+                                    <input className="hidden" type="radio" name="couponType" id="subDomain" onChange={handleDomain}/>
                                 </label>
                             </>
                         ) : (
-                            <label
-                                htmlFor="domain"
-                                className="w-[100%] m-1.5 flex items-center justify-center bg-card rounded-lg text-foreground text-sm cursor-pointer"
-                            >
+                            <label htmlFor="domain" className="w-[100%] m-1.5 flex items-center justify-center bg-card rounded-lg text-foreground text-sm cursor-pointer">
                                 {domainName}
-                                <input
-                                    className="hidden"
-                                    type="radio"
-                                    name="couponType"
-                                    id="domain"
-                                />
+                                <input className="hidden" type="radio" name="couponType" id="domain"/>
                             </label>
                         )}
                     </>
diff --git a/Extension-React/src/components/LanguageSwitcher.tsx b/Extension-React/src/components/LanguageSwitcher.tsx
index a3cbca16..44fdc71d 100644
--- a/Extension-React/src/components/LanguageSwitcher.tsx
+++ b/Extension-React/src/components/LanguageSwitcher.tsx
@@ -1,7 +1,5 @@
-import { Button } from "@/components/ui/button";
 import { getLanguage, languageNames, languages, switchLanguage } from "@/i18n";
 import { useEffect, useState } from "react";
-import CenteredScrollZone from "@/components/ui/CenteredScrollZone";
 
 export function LanguageSwitcher() {
     // defaults to english, will be updated on mount
@@ -13,11 +11,6 @@ export function LanguageSwitcher() {
         setLanguagePath(`/icons/${lang}.svg`);
     }
 
-    const toggleDropdown = () => {
-        const wrapper = document.querySelector('.language') as HTMLDivElement;
-        wrapper.classList.toggle('hidden');
-    }
-
     useEffect(() => {
         getLanguage.then((lang) => {
             setLanguage(lang);
@@ -26,32 +19,11 @@ export function LanguageSwitcher() {
     }, [])
 
     return (
-        <div className="flex relative">
-            <Button
-                variant="ghost"
-                size="icon"
-                onClick={() => {
-                    toggleDropdown();
-                }}>
-                <img src={languagePath} alt={language} className="h-[1.2rem] aspect-auto" />
-            </Button>
-            <CenteredScrollZone className="language">
-                <div className="w-[60%] h-[100%] flex flex-col border-1 border-white border-opacity-70 bg-card rounded-lg dropdown-content">
-                    {
-                        languages.map((lang) => (
-                            <div className="w-[100%] flex flex-row justify-start items-start" onClick={() => {
-                                    switchLanguage(lang);
-                                    toggleDropdown();
-                                }}>
-                                <Button onClick={() => {updateLanguage(lang);}} className="w-[100%] bg-card text-card-foreground flex flex-row items-start hover:text-primary hover:cursor-pointer hover:bg-primary/10">
-                                    <img src={`/icons/${lang}.svg`} alt={lang} className="h-[1.2rem] w-[1.2rem] aspect-auto" />
-                                    <p className="text-card-foreground text-sm ml-2 hover:cursor-pointer">{languageNames[lang]}</p>
-                                </Button>
-                            </div>
-                        ))}
-                    </div>
-            </CenteredScrollZone>
-        </div>
+        <select name="" id="" onChange={(e) => { switchLanguage(e.target.value); updateLanguage(e.target.value); }} value={language} className="bg-card text-card-foreground rounded-lg">
+            {languages.map((lang) => (
+                <option value={lang}><img src={languagePath} alt={lang} /><span className="text-sm">{languageNames[lang]}</span></option>
+            ))}
+        </select>
     );
 }
 
diff --git a/Extension-React/src/components/Settings.tsx b/Extension-React/src/components/Settings.tsx
index 69c0fdcc..652e23e2 100644
--- a/Extension-React/src/components/Settings.tsx
+++ b/Extension-React/src/components/Settings.tsx
@@ -16,11 +16,15 @@ const Settings: React.FC = () => {
                         settings.classList.toggle('hidden');}}><X />
                 </Button>
             </header>
-            <div className="center ">
-                <h1>{ t('Theme') }</h1>
-                <ThemeSwitcher />
-                <h1>{ t('Language') }</h1>
-                <LanguageSwitcher />
+            <div>
+                <div className="flex flex-row">
+                    <h1>{ t('Theme') }</h1>
+                    <ThemeSwitcher />
+                </div>
+                <div className="flex flex-row">
+                    <h1>{ t('Language') }</h1>
+                    <LanguageSwitcher />
+                </div>
             </div>
             <Footer />
         </div>
diff --git a/Extension-React/src/components/ThemeProvider.tsx b/Extension-React/src/components/ThemeProvider.tsx
index 68f919f5..aa2f4d5b 100644
--- a/Extension-React/src/components/ThemeProvider.tsx
+++ b/Extension-React/src/components/ThemeProvider.tsx
@@ -1,6 +1,6 @@
 import { createContext, useContext, useEffect, useState } from "react";
 
-type Theme = "dark" | "light" | "system";
+export type Theme = "dark" | "light" | "system";
 
 type ThemeProviderProps = {
     children: React.ReactNode;
@@ -71,4 +71,4 @@ export const useTheme = () => {
         throw new Error("useTheme must be used within a ThemeProvider");
 
     return context;
-};
+};
\ No newline at end of file
diff --git a/Extension-React/src/components/ThemeSwitcher.tsx b/Extension-React/src/components/ThemeSwitcher.tsx
index fefe8827..04bf733b 100644
--- a/Extension-React/src/components/ThemeSwitcher.tsx
+++ b/Extension-React/src/components/ThemeSwitcher.tsx
@@ -1,45 +1,17 @@
-import { Button } from "@/components/ui/button.tsx";
-import CenteredScrollZone from "@/components/ui/CenteredScrollZone.tsx";
-import { useTheme } from "@/components/ThemeProvider";
-import { Sun, Moon, SunMoon, SwatchBook } from "lucide-react";
+import { useTheme, Theme } from "@/components/ThemeProvider";
 import { useTranslation } from "react-i18next";
 
 export function ThemeSwitcher() {
     const { setTheme } = useTheme();
     const { t } = useTranslation();
-
-    const ToogleDropdown = () => {
-        const wrapper = document.querySelector('.theme') as HTMLDivElement;
-        wrapper.classList.toggle('hidden');
-    }
+    const { theme } = useTheme();
 
     return (
-        <div className="flex relative">
-            <Button
-                variant="ghost"
-                size="icon"
-                onClick={() => {
-                    ToogleDropdown();
-                }}>
-                <SwatchBook className="h-[1.2rem] aspect-auto" />
-            </Button>
-            <CenteredScrollZone className="theme">
-                <div className="w-[60%] h-[100%] flex flex-col border-1 border-white border-opacity-70 bg-card rounded-lg dropdown-content">
-                    <Button className="w-[100%] bg-card text-card-foreground flex flex-row hover:text-primary hover:cursor-pointer hover:bg-primary/10" onClick={() => { setTheme("light"); ToogleDropdown(); }}>
-                        <Sun/>
-                        <p className="text-card-foreground text-sm ml-2 hover:cursor-pointer">{ t('Light') }</p>
-                    </Button>
-                    <Button className="w-[100%] bg-card text-card-foreground flex flex-row hover:text-primary hover:cursor-pointer hover:bg-primary/10" onClick={() => { setTheme("dark"); ToogleDropdown(); }}>
-                        <Moon/>
-                        <p className="text-card-foreground text-sm ml-2 hover:cursor-pointer">{ t('Dark') }</p>
-                    </Button>
-                    <Button className="w-[100%] bg-card text-card-foreground flex flex-row hover:text-primary hover:cursor-pointer hover:bg-primary/10" onClick={() => { setTheme("system"); ToogleDropdown(); }}>
-                        <SunMoon/>
-                        <p className="text-card-foreground text-sm ml-2 hover:cursor-pointer">{ t('System') }</p>
-                    </Button>
-                </div>
-            </CenteredScrollZone>
-        </div>
+        <select value={theme} className="bg-card text-card-foreground rounded-lg" onChange={(e) => {setTheme(e.target.value as Theme);}}>
+            <option value="light">{t('Light')}</option>
+            <option value="dark">{t('Dark')}</option>
+            <option value="system">{t('System')}</option>
+        </select>
     );
 }
 

From c9f1832fb86b5e6f9396045bca319e32f2ac58b6 Mon Sep 17 00:00:00 2001
From: Ludovic Morin <LudovicMorin357@hotmail.com>
Date: Sat, 11 Jan 2025 16:53:49 -0500
Subject: [PATCH 2/9] refactor: update coupon fetching logic to use
 localStorage for domain and coupons

---
 Extension-React/public/background.js | 9 +++++++--
 Extension-React/public/content.js    | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/Extension-React/public/background.js b/Extension-React/public/background.js
index 03aaebe4..360f6944 100644
--- a/Extension-React/public/background.js
+++ b/Extension-React/public/background.js
@@ -1,8 +1,13 @@
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     if (request.action === "getCoupons") {
+        let domain = "";
+        try {
+            domain = localStorage.getItem("domain");
+        } catch (e) {
+            domain = "https://api.discountdb.ch/api/v1/syrup/coupons";
+        }
         fetch(
-            "https://api.discountdb.ch/api/v1/syrup/coupons?domain=" +
-                request.domain
+            domain + "?domain=" + request.domain
         )
             .then((response) => response.json())
             .then((data) => {
diff --git a/Extension-React/public/content.js b/Extension-React/public/content.js
index 2251acd2..5d62632b 100644
--- a/Extension-React/public/content.js
+++ b/Extension-React/public/content.js
@@ -92,7 +92,7 @@
                         ) {
                             coupons = response.coupons;
                             resolve();
-                            chrome.storage.local.set({ coupons });
+                            localStorage.setItem("coupons", JSON.stringify(coupons));
                         } else {
                             logger.warn("No coupons returned from background");
                             resolve();

From c928c6602d16b75c2779b13ab275b2e2cee4a73c Mon Sep 17 00:00:00 2001
From: Ludovic Morin <LudovicMorin357@hotmail.com>
Date: Sat, 11 Jan 2025 16:54:18 -0500
Subject: [PATCH 3/9] feat: add CustomDatabase component and integrate it into
 Settings

---
 Extension-React/src/components/CustomDatabase.tsx | 7 +++++++
 Extension-React/src/components/Settings.tsx       | 9 +++++++--
 Extension-React/src/components/ThemeSwitcher.tsx  | 6 ++----
 3 files changed, 16 insertions(+), 6 deletions(-)
 create mode 100644 Extension-React/src/components/CustomDatabase.tsx

diff --git a/Extension-React/src/components/CustomDatabase.tsx b/Extension-React/src/components/CustomDatabase.tsx
new file mode 100644
index 00000000..b28bcd61
--- /dev/null
+++ b/Extension-React/src/components/CustomDatabase.tsx
@@ -0,0 +1,7 @@
+export default function customDatabase() {
+    return (
+        <div>
+            <input className="bg-card border-white border-1 rounded-sm" type="url" name="" id="" />
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/Extension-React/src/components/Settings.tsx b/Extension-React/src/components/Settings.tsx
index 652e23e2..ed0bb16d 100644
--- a/Extension-React/src/components/Settings.tsx
+++ b/Extension-React/src/components/Settings.tsx
@@ -2,13 +2,14 @@ import { Button } from "@/components/ui/button";
 import Footer from "./Footer";
 import { X } from "lucide-react";
 import { LanguageSwitcher } from "@/components/LanguageSwitcher";
-import { ThemeSwitcher } from "@/components/ThemeSwitcher";
+import ThemeSwitcher from "@/components/ThemeSwitcher";
 import { useTranslation } from "react-i18next";
+import CustomDatabase from "@/components/CustomDatabase";
 
 const Settings: React.FC = () => {
     const { t } = useTranslation();
     return (
-        <div className="settings w-[100%] h-[100%] grid grid-cols-1 grid-rows-[10%,80%,10%] fixed top-0 left-0 hidden bg-background">
+        <div className="settings text-sm w-[100%] h-[100%] grid grid-cols-1 grid-rows-[10%,80%,10%] fixed top-0 left-0 hidden bg-background">
             <header className="flex flex-rows justify-between w-full p-4">
                 <h1 className="text-2xl font-bold">{ t('Settings') }</h1>
                 <Button variant="ghost" size="icon" onClick={() => {
@@ -25,6 +26,10 @@ const Settings: React.FC = () => {
                     <h1>{ t('Language') }</h1>
                     <LanguageSwitcher />
                 </div>
+                <div className="flex flex-col">
+                    <h1>Custom Database For coupons</h1>
+                    <CustomDatabase />
+                </div>
             </div>
             <Footer />
         </div>
diff --git a/Extension-React/src/components/ThemeSwitcher.tsx b/Extension-React/src/components/ThemeSwitcher.tsx
index 04bf733b..ac0e0c7b 100644
--- a/Extension-React/src/components/ThemeSwitcher.tsx
+++ b/Extension-React/src/components/ThemeSwitcher.tsx
@@ -1,7 +1,7 @@
 import { useTheme, Theme } from "@/components/ThemeProvider";
 import { useTranslation } from "react-i18next";
 
-export function ThemeSwitcher() {
+export default function ThemeSwitcher() {
     const { setTheme } = useTheme();
     const { t } = useTranslation();
     const { theme } = useTheme();
@@ -13,6 +13,4 @@ export function ThemeSwitcher() {
             <option value="system">{t('System')}</option>
         </select>
     );
-}
-
-export default ThemeSwitcher;
\ No newline at end of file
+}
\ No newline at end of file

From b029766cab64ba406bda7630d56c803427814f8d Mon Sep 17 00:00:00 2001
From: Ludovic Morin <LudovicMorin357@hotmail.com>
Date: Sun, 12 Jan 2025 12:24:08 -0500
Subject: [PATCH 4/9] feat: enhance CustomDatabase component with URL
 validation and localization support

---
 .../public/_locales/en/translation.json       |  6 ++-
 .../public/_locales/fr/translation.json       |  6 ++-
 Extension-React/public/background.js          |  8 ++--
 Extension-React/public/content.js             |  4 +-
 .../src/components/CustomDatabase.tsx         | 45 ++++++++++++++++++-
 Extension-React/src/components/Settings.tsx   |  2 +-
 6 files changed, 60 insertions(+), 11 deletions(-)

diff --git a/Extension-React/public/_locales/en/translation.json b/Extension-React/public/_locales/en/translation.json
index 20a87a10..052e3642 100644
--- a/Extension-React/public/_locales/en/translation.json
+++ b/Extension-React/public/_locales/en/translation.json
@@ -11,5 +11,9 @@
   "Language": "Language",
   "Browser_domain": "This domain is not supported by the extension",
   "no_coupons_found": "No coupons available",
-  "keep_looking": "I will keep you updated if I find any!"
+  "keep_looking": "I will keep you updated if I find any!",
+  "custom_database": "Custom database",
+  "leave_empty_default": "Leave empty for default",
+  "Updated": "Updated",
+  "url_invalide": "Invalid URL"
 }
\ No newline at end of file
diff --git a/Extension-React/public/_locales/fr/translation.json b/Extension-React/public/_locales/fr/translation.json
index e04de15f..5a74972e 100644
--- a/Extension-React/public/_locales/fr/translation.json
+++ b/Extension-React/public/_locales/fr/translation.json
@@ -14,5 +14,9 @@
     "Settings": "Paramètres",
     "Language": "Langue",
     "no_coupons_found": "Aucun coupon trouvé",
-    "keep_looking": "Je vous tiendrai informé si j'en trouve un!"
+    "keep_looking": "Je vous tiendrai informé si j'en trouve un!",
+    "custom_database": "Base de données personnalisée",
+    "leave_empty_default": "Laissez vide pour le paramètre par défaut",
+    "Updated": "Mis à jour",
+    "url_invalide": "URL invalide"
 }
\ No newline at end of file
diff --git a/Extension-React/public/background.js b/Extension-React/public/background.js
index 360f6944..adaf344d 100644
--- a/Extension-React/public/background.js
+++ b/Extension-React/public/background.js
@@ -1,13 +1,13 @@
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     if (request.action === "getCoupons") {
-        let domain = "";
+        let database = "";
         try {
-            domain = localStorage.getItem("domain");
+            database = localStorage.getItem("database");
         } catch (e) {
-            domain = "https://api.discountdb.ch/api/v1/syrup/coupons";
+            database = "https://api.discountdb.ch/api/v1/syrup/coupons";
         }
         fetch(
-            domain + "?domain=" + request.domain
+            database + "?domain=" + request.domain
         )
             .then((response) => response.json())
             .then((data) => {
diff --git a/Extension-React/public/content.js b/Extension-React/public/content.js
index 5d62632b..a8126f98 100644
--- a/Extension-React/public/content.js
+++ b/Extension-React/public/content.js
@@ -75,7 +75,7 @@
             try {
                 chrome.runtime.sendMessage(
                     { action: "getCoupons", domain },
-                    (response) => {
+                    async (response) => {
                         if (chrome.runtime.lastError) {
                             logger.error(
                                 "Runtime error during message passing:",
@@ -91,8 +91,8 @@
                             response.coupons.length > 0
                         ) {
                             coupons = response.coupons;
+                            await browser.storage.local.set({ coupons });
                             resolve();
-                            localStorage.setItem("coupons", JSON.stringify(coupons));
                         } else {
                             logger.warn("No coupons returned from background");
                             resolve();
diff --git a/Extension-React/src/components/CustomDatabase.tsx b/Extension-React/src/components/CustomDatabase.tsx
index b28bcd61..65d860b4 100644
--- a/Extension-React/src/components/CustomDatabase.tsx
+++ b/Extension-React/src/components/CustomDatabase.tsx
@@ -1,7 +1,48 @@
+import { useTranslation } from "react-i18next";
+
 export default function customDatabase() {
+    const { t } = useTranslation();
+
+    const handleDatabase = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const inputValue = event.target.value;
+
+        if (inputValue === '') {
+            localStorage.removeItem('database');
+            return;
+        }
+        try {
+            const url = new URL(inputValue);
+            fetch(url.toString())
+                .then(() => {
+                    localStorage.setItem('database', inputValue);
+                    const updated = document.querySelector('#customDatabase .update') as HTMLParagraphElement;
+                    updated.classList.remove('hidden');
+                    setTimeout(() => {
+                        updated.classList.add('hidden');
+                    }, 2000);
+                })
+                .catch(() => {
+                    const error = document.querySelector('#customDatabase .invalid') as HTMLParagraphElement;
+                    error.classList.remove('hidden');
+                    setTimeout(() => {
+                        error.classList.add('hidden');
+                    }, 2000);
+                });
+        } catch (e) {
+            const error = document.querySelector('#customDatabase .invalid') as HTMLParagraphElement;
+            error.classList.remove('hidden');
+            setTimeout(() => {
+                error.classList.add('hidden');
+            }, 2000);
+        }
+    }
+
     return (
-        <div>
-            <input className="bg-card border-white border-1 rounded-sm" type="url" name="" id="" />
+        <div id="customDatabase" className="flex flex-col">
+            <input onChange={handleDatabase} className="bg-card border-white border-1 rounded-sm" type="url" name="" id="" defaultValue={localStorage.getItem("database") || ''} />
+            <p className="text-xs">{t("leave_empty_default")}</p>
+            <p className="update hidden">{t("Updated")}</p>
+            <p className="invalid text-red hidden">{t("url_invalide")}</p>
         </div>
     );
 }
\ No newline at end of file
diff --git a/Extension-React/src/components/Settings.tsx b/Extension-React/src/components/Settings.tsx
index ed0bb16d..076e9755 100644
--- a/Extension-React/src/components/Settings.tsx
+++ b/Extension-React/src/components/Settings.tsx
@@ -27,7 +27,7 @@ const Settings: React.FC = () => {
                     <LanguageSwitcher />
                 </div>
                 <div className="flex flex-col">
-                    <h1>Custom Database For coupons</h1>
+                    <h1>{t("custom_database")}</h1>
                     <CustomDatabase />
                 </div>
             </div>

From d22f0e944d22f6f6be409e6d49375a8f6795976b Mon Sep 17 00:00:00 2001
From: Ludovic Morin <LudovicMorin357@hotmail.com>
Date: Mon, 13 Jan 2025 00:31:08 -0500
Subject: [PATCH 5/9] feat: improve coupon fetching and storage logic, add
 support for fossil.com

---
 Extension-React/public/background.js | 19 ++++++---
 Extension-React/public/content.js    | 63 ++++++++++++++++------------
 Extension-React/public/manifest.json |  2 +-
 3 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/Extension-React/public/background.js b/Extension-React/public/background.js
index adaf344d..fb636ffc 100644
--- a/Extension-React/public/background.js
+++ b/Extension-React/public/background.js
@@ -2,16 +2,25 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     if (request.action === "getCoupons") {
         let database = "";
         try {
-            database = localStorage.getItem("database");
+            if (localStorage.getItem("database") === null) {
+                database = "https://api.discountdb.ch/api/v1/syrup/coupons";
+            } else {
+                database = localStorage.getItem("database");
+            }
         } catch (e) {
             database = "https://api.discountdb.ch/api/v1/syrup/coupons";
         }
-        fetch(
-            database + "?domain=" + request.domain
-        )
+        fetch(database + "?domain=" + request.domain)
             .then((response) => response.json())
             .then((data) => {
-                sendResponse({ coupons: data });
+                chrome.storage.local.set({ coupons: data }, () => {
+                    if (chrome.runtime.lastError) {
+                        console.error("Error setting coupons:", chrome.runtime.lastError);
+                        sendResponse({ coupons: [] });
+                    } else {
+                        sendResponse({ coupons: data });
+                    }
+                });
             })
             .catch((err) => {
                 sendResponse({ coupons: [] });
diff --git a/Extension-React/public/content.js b/Extension-React/public/content.js
index a8126f98..061534c1 100644
--- a/Extension-React/public/content.js
+++ b/Extension-React/public/content.js
@@ -33,6 +33,15 @@
             removeCouponButtonSelector:
                 "button[data-testid='coupon-delete-applied-button']",
         },
+        "fossil.com": {
+            inputSelector: ".coupon-code-field",
+            preApplyButtonSelector: ".optional-promo",
+            applyButtonSelector: ".promo-code-btn",
+            successSelector: ".coupon-code-applied",
+            failureSelector: ".coupon-error-message",
+            priceSelector: ".grand-total",
+            removeCouponButtonSelector: ".remove-coupon",
+        },
     };
 
     const platformConfigs = {
@@ -75,29 +84,29 @@
             try {
                 chrome.runtime.sendMessage(
                     { action: "getCoupons", domain },
-                    async (response) => {
-                        if (chrome.runtime.lastError) {
-                            logger.error(
-                                "Runtime error during message passing:",
-                                chrome.runtime.lastError
-                            );
-                            reject(chrome.runtime.lastError.message);
-                            return;
-                        }
-
-                        if (
-                            response &&
-                            response.coupons &&
-                            response.coupons.length > 0
-                        ) {
-                            coupons = response.coupons;
-                            await browser.storage.local.set({ coupons });
-                            resolve();
-                        } else {
-                            logger.warn("No coupons returned from background");
-                            resolve();
+                        (response) => {
+                            const fetchedCoupons = JSON.stringify(response.coupons);
+                            if (chrome.runtime.lastError) {
+                                logger.error(
+                                    "Runtime error during message passing:",
+                                    chrome.runtime.lastError
+                                );
+                                reject(chrome.runtime.lastError.message);
+                                return;
+                            }
+
+                            if (
+                                fetchedCoupons &&
+                                fetchedCoupons.length > 0
+                            ) {
+                                localStorage.setItem("database", fetchedCoupons);
+                                coupons = fetchedCoupons;
+                                resolve();
+                            } else {
+                                logger.warn("No coupons returned from background");
+                                resolve();
+                            }
                         }
-                    }
                 );
             } catch (error) {
                 logger.error("Error fetching coupons:", error);
@@ -408,13 +417,14 @@
 
         showTestingPopover(coupons.length);
 
-        for (let i = 0; i < coupons.length; i++) {
+        logger.warn("Parsed coupons:", coupons.length);
+        for (let i = 0; i < parseCoupons.length; i++) {
             if (stopTesting || useBestNow) {
                 break;
             }
 
-            const coupon = coupons[i];
-            const couponCode = coupon.couponCode || coupon; // handle either {couponCode: "..."} or raw string
+            const coupon = parseCoupons[i];
+            const couponCode = coupon.code || coupon; // handle either {couponCode: "..."} or raw string
 
             updateTestingPopover(i + 1, coupons.length, couponCode, bestPrice);
 
@@ -844,7 +854,8 @@
      *******************************************************/
     async function main() {
         await logger.init();
-        let domain = window.location.hostname.replace("www.", "");
+        let domain = window.location.hostname.replace("www.", "").replace("https://", "").replace("http://", "");
+        console.error(domain);
         if (domainReplacements[domain]) domain = domainReplacements[domain];
         const path = window.location.pathname;
 
diff --git a/Extension-React/public/manifest.json b/Extension-React/public/manifest.json
index 03ddbc3c..1454a651 100644
--- a/Extension-React/public/manifest.json
+++ b/Extension-React/public/manifest.json
@@ -4,7 +4,7 @@
     "description": "A Honey alternative, find and apply the best coupons automatically.",
     "version": "0.4",
     "default_locale": "en",
-    "permissions": ["activeTab", "storage"],
+    "permissions": ["storage", "activeTab"],
     "background": {
         "service_worker": "background.js",
         "scripts": ["background.js"]

From 2cb87fc150a65eb4b0a620860a66445ae5b61ec1 Mon Sep 17 00:00:00 2001
From: Ludovic Morin <LudovicMorin357@hotmail.com>
Date: Mon, 13 Jan 2025 00:33:07 -0500
Subject: [PATCH 6/9] fix: correct coupon iteration logic in content.js

---
 Extension-React/public/content.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Extension-React/public/content.js b/Extension-React/public/content.js
index 061534c1..889c554a 100644
--- a/Extension-React/public/content.js
+++ b/Extension-React/public/content.js
@@ -418,12 +418,12 @@
         showTestingPopover(coupons.length);
 
         logger.warn("Parsed coupons:", coupons.length);
-        for (let i = 0; i < parseCoupons.length; i++) {
+        for (let i = 0; i < coupons.length; i++) {
             if (stopTesting || useBestNow) {
                 break;
             }
 
-            const coupon = parseCoupons[i];
+            const coupon = coupons[i];
             const couponCode = coupon.code || coupon; // handle either {couponCode: "..."} or raw string
 
             updateTestingPopover(i + 1, coupons.length, couponCode, bestPrice);

From 71d144df49f6920f309bda7ae70f437b9001d28b Mon Sep 17 00:00:00 2001
From: Ludovic Morin <LudovicMorin357@hotmail.com>
Date: Tue, 14 Jan 2025 13:16:56 -0500
Subject: [PATCH 7/9] feat: add coupon data for Fossil and enhance coupon
 handling logic

---
 Extension-React/coupons.json      | 146 ++++++++++++++++++++++++++++++
 Extension-React/public/content.js |  20 ++--
 2 files changed, 159 insertions(+), 7 deletions(-)
 create mode 100644 Extension-React/coupons.json

diff --git a/Extension-React/coupons.json b/Extension-React/coupons.json
new file mode 100644
index 00000000..0936238c
--- /dev/null
+++ b/Extension-React/coupons.json
@@ -0,0 +1,146 @@
+{
+    "coupons": [
+        {
+            "id": "39067",
+            "title": "Take 40% Off Your Order",
+            "description": "Enjoy 40% off wallets, bags and more at Fossil.",
+            "code": "OUTLET40",
+            "score": 0.28
+        },
+        {
+            "id": "39074",
+            "title": "Fossil Discount Code: Extra 40% Off Your Order",
+            "description": "Shop using Fossil's discount code and get an additional 40% off your purchase at checkout.",
+            "code": "EXTRA40",
+            "score": 0.28
+        },
+        {
+            "id": "39065",
+            "title": "Get Up to 30% Off Your Fossil Order With Promo Code",
+            "description": "Use this promo code at checkout and save up to 30% off your order.",
+            "code": "INDPUKGRS9",
+            "score": 0.24
+        },
+        {
+            "id": "39082",
+            "title": "Fossil Coupon: 30% Off Your Order",
+            "description": "Take 30% off your Fossil purchase with this code.",
+            "code": "9L79B9VPDN",
+            "score": 0.24
+        },
+        {
+            "id": "39068",
+            "title": "Score Up to 30% Off Your Purchase",
+            "description": "Simply use this Fossil coupon code at checkout to get up to 30% off your select order.",
+            "code": "PYB3NQKL4P",
+            "score": 0.24
+        },
+        {
+            "id": "30564",
+            "title": "Fossil Coupon: Get 30% Off",
+            "description": "Shop your favorite Fossil items and get 30% off your entire order when using this Fossil discount code.",
+            "code": "TAKE30",
+            "score": 0.24
+        },
+        {
+            "id": "30565",
+            "title": "Get 25% Off Your Order",
+            "description": "Shop and take 25% off your entire purchase purchase when using this Fossil promo code at checkout.",
+            "code": "FOSSIL25",
+            "score": 0.22
+        },
+        {
+            "id": "39076",
+            "title": "Fossil Promo Code: 25% Off Your Order",
+            "description": "Take an extra 25% off your purchase when this discount code is applied.",
+            "code": "ADD25",
+            "score": 0.22
+        },
+        {
+            "id": "39073",
+            "title": "Fossil Coupon: 25% Off Your Order",
+            "description": "Enjoy extra 25% off your purchase by adding this Fossil code.",
+            "code": "QV43P4QRI5",
+            "score": 0.22
+        },
+        {
+            "id": "39081",
+            "title": "Get Up to 20% Off Any Order",
+            "description": "Paste this promo code at checkout and save up to 20% on any order.",
+            "code": "8270SHIP",
+            "score": 0.2
+        },
+        {
+            "id": "30567",
+            "title": "Fossil Promo Code: Take 10% Off",
+            "description": "Shop and take 10% off your purchase when you use this Fossil promo code on your cart.",
+            "code": "24HX6DQYYU",
+            "score": 0.16
+        },
+        {
+            "id": "39072",
+            "title": "10% Off Your Order",
+            "description": "Shop and take 10% off your purchase using a promo code on your cart.",
+            "code": "24HX6DQYYU",
+            "score": 0.16
+        },
+        {
+            "id": "39069",
+            "title": "Take Up to 10% Off Any Purchase",
+            "description": "Enjoy shopping and get up to a 10% discount on any purchase when you enter this coupon code at checkout.",
+            "code": "CAN5910SHIP",
+            "score": 0.16
+        },
+        {
+            "id": "39080",
+            "title": "Fossil Promo Code: Get Extra 10% Off Your Order",
+            "description": "Redeem this promo code at checkout and save an extra 10% on your order.",
+            "code": "H5EGDPA4E6",
+            "score": 0.16
+        },
+        {
+            "id": "39078",
+            "title": "Take $25 Off Your Purchase",
+            "description": "Enjoy $25 off with minimum orders $75 and more at Fossil.",
+            "code": "IQ4GXDQM9I",
+            "score": 0.13
+        },
+        {
+            "id": "39075",
+            "title": "Fossil Discount Code: Save $25 on Your Purchase",
+            "description": "Shop at Fossil and enjoy a $25 discount on your purchase. Apply this discount code at checkout.",
+            "code": "TEHKSFTSFS",
+            "score": 0.13
+        },
+        {
+            "id": "39083",
+            "title": "Fossil Discount Code: $25 Off Your Order",
+            "description": "Save $25 using this coupon code on your $75+ storewide purchase at Fossil.",
+            "code": "VBERBYFXU2",
+            "score": 0.13
+        },
+        {
+            "id": "39071",
+            "title": "Fossil Coupon: $25 Off Your Order",
+            "description": "Take $25 off when you purchase $75 and more at Fossil.",
+            "code": "K9I6QUS76O",
+            "score": 0.13
+        },
+        {
+            "id": "30566",
+            "title": "Take $25 Off Orders $75+ with Coupon",
+            "description": "Get a $25 discount on orders over $75 when you enter this Fossil coupon code at checkout.",
+            "code": "ANVVVUTTNH",
+            "score": 0.13
+        },
+        {
+            "id": "30568",
+            "title": "Fossil Promo Code: Score $25 Off",
+            "description": "Use this Fossil discount code at checkout to receive $25 off your eligible order.",
+            "code": "GH3PFG3DEH",
+            "score": 0.13
+        }
+    ],
+    "total": 25,
+    "merchant_name": "Fossil Coupons"
+}
\ No newline at end of file
diff --git a/Extension-React/public/content.js b/Extension-React/public/content.js
index 889c554a..35cb48b5 100644
--- a/Extension-React/public/content.js
+++ b/Extension-React/public/content.js
@@ -41,6 +41,7 @@
             failureSelector: ".coupon-error-message",
             priceSelector: ".grand-total",
             removeCouponButtonSelector: ".remove-coupon",
+            removeCouponButtonSelectorConfirm: ".delete-coupon-confirmation-btn",
         },
     };
 
@@ -85,7 +86,7 @@
                 chrome.runtime.sendMessage(
                     { action: "getCoupons", domain },
                         (response) => {
-                            const fetchedCoupons = JSON.stringify(response.coupons);
+                            const fetchedCoupons = JSON.stringify(response.coupons.coupons);
                             if (chrome.runtime.lastError) {
                                 logger.error(
                                     "Runtime error during message passing:",
@@ -101,6 +102,7 @@
                             ) {
                                 localStorage.setItem("database", fetchedCoupons);
                                 coupons = fetchedCoupons;
+                                logger.warn("Coupons fetched:", coupons);
                                 resolve();
                             } else {
                                 logger.warn("No coupons returned from background");
@@ -223,7 +225,7 @@
         }
     }
 
-    async function revertCoupon(inputSelector, removeCouponButtonSelector) {
+    async function revertCoupon(inputSelector, removeCouponButtonSelector, removeCouponButtonSelectorConfirm) {
         try {
             if (inputSelector) {
                 const input = document.querySelector(inputSelector);
@@ -234,6 +236,9 @@
             if (removeCouponButtonSelector) {
                 document.querySelector(removeCouponButtonSelector)?.click();
             }
+            if (removeCouponButtonSelectorConfirm) {
+                document.querySelector(removeCouponButtonSelectorConfirm)?.click();
+            }
             await new Promise((resolve) => setTimeout(resolve, 1000));
         } catch (error) {
             logger.error("Error reverting coupon:", error);
@@ -417,16 +422,16 @@
 
         showTestingPopover(coupons.length);
 
-        logger.warn("Parsed coupons:", coupons.length);
-        for (let i = 0; i < coupons.length; i++) {
+        const ParseCoupons = JSON.parse(coupons);
+        for (let i = 0; i < ParseCoupons.length; i++) {
             if (stopTesting || useBestNow) {
                 break;
             }
 
-            const coupon = coupons[i];
+            const coupon = ParseCoupons[i];
             const couponCode = coupon.code || coupon; // handle either {couponCode: "..."} or raw string
 
-            updateTestingPopover(i + 1, coupons.length, couponCode, bestPrice);
+            updateTestingPopover(i + 1, coupons.length, couponCode, bestPrice); 
 
             try {
                 const result = await applySingleCoupon(
@@ -450,7 +455,8 @@
 
                 await revertCoupon(
                     config.inputSelector,
-                    config.removeCouponButtonSelector
+                    config.removeCouponButtonSelector,
+                    config.removeCouponButtonSelectorConfirm
                 );
             } catch (error) {
                 logger.error(`Error testing coupon ${couponCode}:`, error);

From c26f36ee60458fa605d8b3861938ece8c9a981d8 Mon Sep 17 00:00:00 2001
From: Ludovic Morin <LudovicMorin357@hotmail.com>
Date: Tue, 14 Jan 2025 13:22:40 -0500
Subject: [PATCH 8/9] chore: remove outdated coupon data from coupons.json

---
 Extension-React/coupons.json | 146 -----------------------------------
 1 file changed, 146 deletions(-)
 delete mode 100644 Extension-React/coupons.json

diff --git a/Extension-React/coupons.json b/Extension-React/coupons.json
deleted file mode 100644
index 0936238c..00000000
--- a/Extension-React/coupons.json
+++ /dev/null
@@ -1,146 +0,0 @@
-{
-    "coupons": [
-        {
-            "id": "39067",
-            "title": "Take 40% Off Your Order",
-            "description": "Enjoy 40% off wallets, bags and more at Fossil.",
-            "code": "OUTLET40",
-            "score": 0.28
-        },
-        {
-            "id": "39074",
-            "title": "Fossil Discount Code: Extra 40% Off Your Order",
-            "description": "Shop using Fossil's discount code and get an additional 40% off your purchase at checkout.",
-            "code": "EXTRA40",
-            "score": 0.28
-        },
-        {
-            "id": "39065",
-            "title": "Get Up to 30% Off Your Fossil Order With Promo Code",
-            "description": "Use this promo code at checkout and save up to 30% off your order.",
-            "code": "INDPUKGRS9",
-            "score": 0.24
-        },
-        {
-            "id": "39082",
-            "title": "Fossil Coupon: 30% Off Your Order",
-            "description": "Take 30% off your Fossil purchase with this code.",
-            "code": "9L79B9VPDN",
-            "score": 0.24
-        },
-        {
-            "id": "39068",
-            "title": "Score Up to 30% Off Your Purchase",
-            "description": "Simply use this Fossil coupon code at checkout to get up to 30% off your select order.",
-            "code": "PYB3NQKL4P",
-            "score": 0.24
-        },
-        {
-            "id": "30564",
-            "title": "Fossil Coupon: Get 30% Off",
-            "description": "Shop your favorite Fossil items and get 30% off your entire order when using this Fossil discount code.",
-            "code": "TAKE30",
-            "score": 0.24
-        },
-        {
-            "id": "30565",
-            "title": "Get 25% Off Your Order",
-            "description": "Shop and take 25% off your entire purchase purchase when using this Fossil promo code at checkout.",
-            "code": "FOSSIL25",
-            "score": 0.22
-        },
-        {
-            "id": "39076",
-            "title": "Fossil Promo Code: 25% Off Your Order",
-            "description": "Take an extra 25% off your purchase when this discount code is applied.",
-            "code": "ADD25",
-            "score": 0.22
-        },
-        {
-            "id": "39073",
-            "title": "Fossil Coupon: 25% Off Your Order",
-            "description": "Enjoy extra 25% off your purchase by adding this Fossil code.",
-            "code": "QV43P4QRI5",
-            "score": 0.22
-        },
-        {
-            "id": "39081",
-            "title": "Get Up to 20% Off Any Order",
-            "description": "Paste this promo code at checkout and save up to 20% on any order.",
-            "code": "8270SHIP",
-            "score": 0.2
-        },
-        {
-            "id": "30567",
-            "title": "Fossil Promo Code: Take 10% Off",
-            "description": "Shop and take 10% off your purchase when you use this Fossil promo code on your cart.",
-            "code": "24HX6DQYYU",
-            "score": 0.16
-        },
-        {
-            "id": "39072",
-            "title": "10% Off Your Order",
-            "description": "Shop and take 10% off your purchase using a promo code on your cart.",
-            "code": "24HX6DQYYU",
-            "score": 0.16
-        },
-        {
-            "id": "39069",
-            "title": "Take Up to 10% Off Any Purchase",
-            "description": "Enjoy shopping and get up to a 10% discount on any purchase when you enter this coupon code at checkout.",
-            "code": "CAN5910SHIP",
-            "score": 0.16
-        },
-        {
-            "id": "39080",
-            "title": "Fossil Promo Code: Get Extra 10% Off Your Order",
-            "description": "Redeem this promo code at checkout and save an extra 10% on your order.",
-            "code": "H5EGDPA4E6",
-            "score": 0.16
-        },
-        {
-            "id": "39078",
-            "title": "Take $25 Off Your Purchase",
-            "description": "Enjoy $25 off with minimum orders $75 and more at Fossil.",
-            "code": "IQ4GXDQM9I",
-            "score": 0.13
-        },
-        {
-            "id": "39075",
-            "title": "Fossil Discount Code: Save $25 on Your Purchase",
-            "description": "Shop at Fossil and enjoy a $25 discount on your purchase. Apply this discount code at checkout.",
-            "code": "TEHKSFTSFS",
-            "score": 0.13
-        },
-        {
-            "id": "39083",
-            "title": "Fossil Discount Code: $25 Off Your Order",
-            "description": "Save $25 using this coupon code on your $75+ storewide purchase at Fossil.",
-            "code": "VBERBYFXU2",
-            "score": 0.13
-        },
-        {
-            "id": "39071",
-            "title": "Fossil Coupon: $25 Off Your Order",
-            "description": "Take $25 off when you purchase $75 and more at Fossil.",
-            "code": "K9I6QUS76O",
-            "score": 0.13
-        },
-        {
-            "id": "30566",
-            "title": "Take $25 Off Orders $75+ with Coupon",
-            "description": "Get a $25 discount on orders over $75 when you enter this Fossil coupon code at checkout.",
-            "code": "ANVVVUTTNH",
-            "score": 0.13
-        },
-        {
-            "id": "30568",
-            "title": "Fossil Promo Code: Score $25 Off",
-            "description": "Use this Fossil discount code at checkout to receive $25 off your eligible order.",
-            "code": "GH3PFG3DEH",
-            "score": 0.13
-        }
-    ],
-    "total": 25,
-    "merchant_name": "Fossil Coupons"
-}
\ No newline at end of file

From e2f0f800436aca4b8e10b0e36962a45db24d7455 Mon Sep 17 00:00:00 2001
From: Ludovic Morin <LudovicMorin357@hotmail.com>
Date: Wed, 15 Jan 2025 09:16:19 -0500
Subject: [PATCH 9/9] chore: remove debug logging from content.js

---
 Extension-React/public/content.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/Extension-React/public/content.js b/Extension-React/public/content.js
index 35cb48b5..9766478e 100644
--- a/Extension-React/public/content.js
+++ b/Extension-React/public/content.js
@@ -861,7 +861,6 @@
     async function main() {
         await logger.init();
         let domain = window.location.hostname.replace("www.", "").replace("https://", "").replace("http://", "");
-        console.error(domain);
         if (domainReplacements[domain]) domain = domainReplacements[domain];
         const path = window.location.pathname;