feat(browser-extension): handle new error cases when reporting

packages/api/src/index.ts

@@ -12,7 +12,6 @@ import v4ReportRoutes from 'routes/v4/report';
 import v5DataRoutes from 'routes/v5/data';
 import v5IssuesRoutes from 'routes/v5/issues';
 import v5ReportRoutes from 'routes/v5/report';
-import v5VersionRoutes from 'routes/v5/version';
 import environment from 'services/environment';
 
 const server = fastify({ logger: true });
@@ -42,7 +41,6 @@ server.register(v4ReportRoutes, { prefix: '/rest/v4' });
 server.register(v5DataRoutes, { prefix: '/rest/v5' });
 server.register(v5IssuesRoutes, { prefix: '/rest/v5' });
 server.register(v5ReportRoutes, { prefix: '/rest/v5' });
-server.register(v5VersionRoutes, { prefix: '/rest/v5' });
 
 server.listen({ host: '0.0.0.0', port: environment.port }, (error, address) => {
   if (error) {

packages/api/src/routes/v5/version.ts

@@ -1,27 +0,0 @@
-import { FastifyInstance, RouteShorthandOptions } from 'fastify';
-import fetch from 'node-fetch';
-import environment from 'services/environment';
-
-export default (server: FastifyInstance, _options: RouteShorthandOptions, done: () => void) => {
-  server.get('/version/', async (_request, reply) => {
-    try {
-      const options = { headers: { 'Cache-Control': 'no-cache' } };
-      const url = `${environment.github.files}/packages/browser-extension/src/manifest.json`;
-      const { version } = await (await fetch(url, options)).json();
-
-      reply.send({
-        data: {
-          version,
-        },
-        success: true,
-      });
-    } catch (error) {
-      reply.send({
-        errors: [error.message],
-        success: false,
-      });
-    }
-  });
-
-  done();
-};

packages/browser-extension/src/_locales/de/messages.json

@@ -68,10 +68,16 @@
   "report_reasonInputPlaceholder": {
     "message": "Popup ist erschienen"
   },
-  "report_submitExtraText": {
+  "report_submitErrorExtraText": {
+    "message": "Es scheint, dass bereits ein Problem geöffnet ist oder als 'wontfix' markiert wurde. Bitte öffnen Sie das Problem und fügen Sie gegebenenfalls weitere Informationen hinzu, indem Sie den folgenden Button verwenden."
+  },
+  "report_submitErrorText": {
+    "message": "Bericht nicht gesendet?"
+  },
+  "report_submitSuccessExtraText": {
     "message": "Während wir daran arbeiten, können Sie diese Website zur Ausschlussliste in den Erweiterungseinstellungen hinzufügen oder einfach die Erweiterung für diese Website deaktivieren, indem Sie auf das Erweiterungssymbol in Ihrer Browser-Symbolleiste klicken."
   },
-  "report_submitText": {
+  "report_submitSuccessText": {
     "message": "Bericht gesendet!"
   },
   "report_urlInputError": {

packages/browser-extension/src/_locales/en/messages.json

@@ -68,10 +68,16 @@
   "report_reasonInputPlaceholder": {
     "message": "Popup showed up"
   },
-  "report_submitExtraText": {
+  "report_submitErrorExtraText": {
+    "message": "It seems that there's an issue open already, or it is marked as wontfix. Please enter the issue if you want to add more information using the following button."
+  },
+  "report_submitErrorText": {
+    "message": "Report not sent?"
+  },
+  "report_submitSuccessExtraText": {
     "message": "While we are working on this, you can add this website to the exclusion list in the extension settings or just disable the extension for this website clicking on the extension icon in your browser toolbar"
   },
-  "report_submitText": {
+  "report_submitSuccessText": {
     "message": "Report sent!"
   },
   "report_urlInputError": {

packages/browser-extension/src/_locales/es/messages.json

@@ -68,11 +68,17 @@
   "report_reasonInputPlaceholder": {
     "message": "Apareció un popup"
   },
-  "report_submitExtraText": {
-    "message": "Mientras trabajamos en esto, puedes agregar este sitio web a la lista de exclusión en la configuración de la extensión o simplemente deshabilitar la extensión para este sitio web haciendo clic en el ícono de la extensión en la barra de herramientas de tu navegador."
+  "report_submitErrorExtraText": {
+    "message": "Reporte no enviado?"
   },
-  "report_submitText": {
-    "message": "¡Informe enviado!"
+  "report_submitErrorText": {
+    "message": "Parece que ya hay un problema abierto o está marcado como 'no se solucionará'. Por favor, ingrese al problema para agregar más información usando el siguiente botón."
+  },
+  "report_submitSuccessExtraText": {
+    "message": "Mientras trabajamos en esto, puedes agregar este sitio web a la lista de exclusiones en la configuración de la extensión o simplemente deshabilitar la extensión para este sitio web haciendo clic en el icono de la extensión en la barra de herramientas de tu navegador."
+  },
+  "report_submitSuccessText": {
+    "message": "Reporte enviado!"
   },
   "report_urlInputError": {
     "message": "Por favor, ingrese una URL válida con no más de 1000 caracteres"

packages/browser-extension/src/_locales/fr/messages.json

@@ -68,10 +68,16 @@
   "report_reasonInputPlaceholder": {
     "message": "Le popup est apparu"
   },
-  "report_submitExtraText": {
+  "report_submitErrorExtraText": {
+    "message": "Il semble qu'un problème soit déjà ouvert ou marqué comme 'ne sera pas corrigé'. Veuillez entrer dans le problème pour ajouter plus d'informations en utilisant le bouton suivant."
+  },
+  "report_submitErrorText": {
+    "message": "Rapport non envoyé?"
+  },
+  "report_submitSuccessExtraText": {
     "message": "Pendant que nous travaillons sur ce point, vous pouvez ajouter ce site web à la liste d'exclusion dans les paramètres de l'extension ou simplement désactiver l'extension pour ce site web en cliquant sur l'icône de l'extension dans la barre d'outils de votre navigateur."
   },
-  "report_submitText": {
+  "report_submitSuccessText": {
     "message": "Rapport envoyé!"
   },
   "report_urlInputError": {

packages/browser-extension/src/_locales/it/messages.json

@@ -68,10 +68,16 @@
   "report_reasonInputPlaceholder": {
     "message": "Popup apparso"
   },
-  "report_submitExtraText": {
+  "report_submitErrorExtraText": {
+    "message": "Sembra che ci sia già un problema aperto o contrassegnato come 'non risolvibile'. Per favore, entra nel problema per aggiungere ulteriori informazioni usando il pulsante seguente."
+  },
+  "report_submitErrorText": {
+    "message": "Segnalazione non inviata?"
+  },
+  "report_submitSuccessExtraText": {
     "message": "Mentre lavoriamo su questo, puoi aggiungere questo sito web alla lista di esclusione nelle impostazioni dell'estensione o semplicemente disattivare l'estensione per questo sito web cliccando sull'icona dell'estensione nella barra degli strumenti del browser."
   },
-  "report_submitText": {
+  "report_submitSuccessText": {
     "message": "Rapporto inviato!"
   },
   "report_urlInputError": {

packages/browser-extension/src/_locales/pl/messages.json

@@ -68,10 +68,16 @@
   "report_reasonInputPlaceholder": {
     "message": "Pojawił się popup"
   },
-  "report_submitExtraText": {
+  "report_submitErrorExtraText": {
+    "message": "Wygląda na to, że istnieje już otwarte zgłoszenie lub zostało oznaczone jako 'nie do rozwiązania'. Wprowadź zgłoszenie, aby dodać więcej informacji, używając poniższego przycisku."
+  },
+  "report_submitErrorText": {
+    "message": "Raport nie został wysłany?"
+  },
+  "report_submitSuccessExtraText": {
     "message": "Podczas gdy nad tym pracujemy, możesz dodać tę stronę do listy wykluczeń w ustawieniach rozszerzenia lub po prostu wyłączyć rozszerzenie dla tej strony, klikając ikonę rozszerzenia na pasku narzędzi przeglądarki."
   },
-  "report_submitText": {
+  "report_submitSuccessText": {
     "message": "Zgłoszenie wysłane!"
   },
   "report_urlInputError": {

packages/browser-extension/src/_locales/pt_BR/messages.json

@@ -68,10 +68,16 @@
   "report_reasonInputPlaceholder": {
     "message": "Popup apareceu"
   },
-  "report_submitExtraText": {
+  "report_submitErrorExtraText": {
+    "message": "Parece que já existe um problema aberto ou marcado como 'não corrigido'. Por favor, acesse o problema para adicionar mais informações usando o botão a seguir."
+  },
+  "report_submitErrorText": {
+    "message": "Relatório não enviado?"
+  },
+  "report_submitSuccessExtraText": {
     "message": "Enquanto estamos trabalhando nisso, você pode adicionar este site à lista de exclusão nas configurações da extensão ou simplesmente desativar a extensão para este site clicando no ícone da extensão na barra de ferramentas do navegador."
   },
-  "report_submitText": {
+  "report_submitSuccessText": {
     "message": "Relatório enviado!"
   },
   "report_urlInputError": {

packages/browser-extension/src/_locales/pt_PT/messages.json

@@ -68,10 +68,16 @@
   "report_reasonInputPlaceholder": {
     "message": "Popup apareceu"
   },
-  "report_submitExtraText": {
+  "report_submitErrorExtraText": {
+    "message": "Parece que já existe um problema aberto ou marcado como 'não corrigido'. Por favor, aceda ao problema para adicionar mais informações usando o botão seguinte."
+  },
+  "report_submitErrorText": {
+    "message": "Relatório não enviado?"
+  },
+  "report_submitSuccessExtraText": {
     "message": "Enquanto trabalhamos nisso, pode adicionar este site à lista de exclusão nas definições da extensão ou simplesmente desativar a extensão para este site clicando no ícone da extensão na barra de ferramentas do navegador."
   },
-  "report_submitText": {
+  "report_submitSuccessText": {
     "message": "Relatório enviado!"
   },
   "report_urlInputError": {

packages/browser-extension/src/_locales/ro/messages.json

@@ -68,10 +68,16 @@
   "report_reasonInputPlaceholder": {
     "message": "A apărut un popup"
   },
-  "report_submitExtraText": {
+  "report_submitErrorExtraText": {
+    "message": "Se pare că există deja o problemă deschisă sau marcată ca 'nu va fi rezolvată'. Vă rugăm să intrați în problemă pentru a adăuga mai multe informații folosind butonul de mai jos."
+  },
+  "report_submitErrorText": {
+    "message": "Raportul nu a fost trimis?"
+  },
+  "report_submitSuccessExtraText": {
     "message": "În timp ce lucrăm la acest aspect, poți adăuga acest site web la lista de excludere din setările extensiei sau poți dezactiva extensia pentru acest site web făcând clic pe pictograma extensiei din bara de instrumente a browserului."
   },
-  "report_submitText": {
+  "report_submitSuccessText": {
     "message": "Raport trimis!"
   },
   "report_urlInputError": {

packages/browser-extension/src/_locales/ru/messages.json

@@ -68,10 +68,16 @@
   "report_reasonInputPlaceholder": {
     "message": "Появилось всплывающее окно"
   },
-  "report_submitExtraText": {
+  "report_submitErrorExtraText": {
+    "message": "Похоже, что уже существует открытая проблема или она помечена как 'не будет исправлено'. Пожалуйста, войдите в проблему, чтобы добавить больше информации, используя следующую кнопку."
+  },
+  "report_submitErrorText": {
+    "message": "Отчет не отправлен?"
+  },
+  "report_submitSuccessExtraText": {
     "message": "Пока мы работаем над этим, вы можете добавить этот сайт в список исключений в настройках расширения или просто отключить расширение для этого сайта, нажав на значок расширения на панели инструментов вашего браузера."
   },
-  "report_submitText": {
+  "report_submitSuccessText": {
     "message": "Отчет отправлен!"
   },
   "report_urlInputError": {

packages/browser-extension/src/popup.html

@@ -244,7 +244,31 @@
             </div>
           </div>
         </div>
-        <div class="report-submit-view" hidden>
+        <div class="report-submit-error-view" hidden>
+          <svg
+            fill="none"
+            height="48"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            stroke="var(--color-error)"
+            viewBox="0 0 24 24"
+            width="48"
+          >
+            <circle cx="12" cy="12" r="10"></circle>
+            <line x1="12" y1="8" x2="12" y2="12"></line>
+            <line x1="12" y1="16" x2="12.01" y2="16"></line>
+          </svg>
+          <div class="report-submit-text" data-i18n="report_submitErrorText"></div>
+          <div class="report-submit-extra-text" data-i18n="report_submitErrorExtraText"></div>
+          <div
+            class="report-issue-button"
+            data-i18n="contextMenu_issueOption"
+            role="button"
+            tabindex="0"
+          ></div>
+        </div>
+        <div class="report-submit-success-view" hidden>
           <svg
             fill="none"
             height="48"
@@ -258,8 +282,8 @@
             <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
             <polyline points="22 4 12 14.01 9 11.01" />
           </svg>
-          <div class="report-submit-text" data-i18n="report_submitText"></div>
-          <div class="report-submit-extra-text" data-i18n="report_submitExtraText"></div>
+          <div class="report-submit-text" data-i18n="report_submitSuccessText"></div>
+          <div class="report-submit-extra-text" data-i18n="report_submitSuccessExtraText"></div>
           <div
             class="report-issue-button"
             data-i18n="contextMenu_issueOption"

packages/browser-extension/src/scripts/background.js

@@ -87,7 +87,7 @@ const stateByDefault = { issue: { expiresIn: 0 }, on: true };
 
 /**
  * @description The storage to use
- * @type {browser.storage.LocalStorageArea}
+ * @type {browser.storage.StorageArea}
  */
 const storage = browser.storage.local;
 
@@ -238,7 +238,7 @@ async function report(message) {
     const headers = { 'Cache-Control': 'no-cache', 'Content-type': 'application/json' };
     const requestInit = { body, headers, method: 'POST' };
 
-    return (await requestManager.fetchData(`${apiUrl}/report/`, requestInit)).data;
+    return await requestManager.fetchData(`${apiUrl}/report/`, requestInit);
   } catch {
     console.error("Can't send report");
   }
@@ -345,7 +345,7 @@ browser.runtime.onMessage.addListener((message, sender, callback) => {
 /**
  * @description Listens to extension installed
  */
-browser.runtime.onInstalled.addListener(() => {
+browser.runtime.onInstalled.addListener((details) => {
   const documentUrlPatterns = browser.runtime.getManifest().content_scripts[0].matches;
 
   browser.contextMenus.create(
@@ -377,6 +377,17 @@ browser.runtime.onInstalled.addListener(() => {
     },
     suppressLastError
   );
+
+  if (details.reason === 'update') {
+    storage.remove('updateAvailable');
+  }
+});
+
+/**
+ * @description Listen to available updates
+ */
+browser.runtime.onUpdateAvailable.addListener((details) => {
+  storage.set({ updateAvailable: details.version }, suppressLastError);
 });
 
 /**

packages/browser-extension/src/scripts/popup.js

@@ -280,7 +280,6 @@ async function handleSubmitButtonClick(event) {
   const reasonText = reasonInput?.value.trim();
   const urlInput = document.getElementById('report-input-url');
   const urlText = urlInput?.value.trim();
-
   const errors = validateForm({ reason: reasonText, url: urlText });
 
   if (errors) {
@@ -298,18 +297,39 @@ async function handleSubmitButtonClick(event) {
     return;
   }
 
+  const issueButtons = document.getElementsByClassName('report-issue-button');
   const formView = document.getElementsByClassName('report-form-view')[0];
-  const issueButton = document.getElementsByClassName('report-issue-button')[0];
-  const submitView = document.getElementsByClassName('report-submit-view')[0];
   const userAgent = window.navigator.userAgent;
-  const issueUrl = await dispatch({ userAgent, reason: reasonText, url: urlText, type: 'REPORT' });
-  const issue = { expiresIn: Date.now() + 8 * 60 * 60 * 1000, flags: ['bug'], url: issueUrl };
+  const response = await dispatch({ userAgent, reason: reasonText, url: urlText, type: 'REPORT' });
+  const hostname = new URL(urlText).hostname.split('.').slice(-3).join('.').replace('www.', '');
+  const issue = { expiresIn: Date.now() + 8 * 60 * 60 * 1000, flags: ['bug'], url: response.data };
+
+  if (response.success) {
+    const successView = document.getElementsByClassName('report-submit-success-view')[0];
 
     await dispatch({ hostname, state: { issue }, type: 'UPDATE_STORE' });
     await dispatch({ hostname, type: 'ENABLE_ICON' });
     formView?.setAttribute('hidden', 'true');
-  issueButton?.addEventListener('click', () => window.open(issueUrl, '_blank'));
-  submitView?.removeAttribute('hidden');
+    issueButtons[1]?.addEventListener('click', () => window.open(response.data, '_blank'));
+    successView?.removeAttribute('hidden');
+    return;
+  }
+
+  if (response.data) {
+    const errorView = document.getElementsByClassName('report-submit-error-view')[0];
+
+    if (response.errors?.some((error) => error.includes('wontfix'))) {
+      issue.flags.push('wontfix');
+    }
+
+    await dispatch({ hostname, state: { issue }, type: 'UPDATE_STORE' });
+    errorView?.removeAttribute('hidden');
+    formView?.setAttribute('hidden', 'true');
+    issueButtons[0]?.addEventListener('click', () => window.open(response.data, '_blank'));
+    return;
+  }
+
+  window.close();
 }
 
 /**

packages/browser-extension/src/styles/popup.css

@@ -360,7 +360,8 @@ popup-data-container {
     text-align: center;
   }
 
-  & .report-submit-view {
+  & .report-submit-error-view,
+  & .report-submit-success-view {
     align-items: center;
     display: flex;
     flex-direction: column;
@@ -370,7 +371,8 @@ popup-data-container {
     margin-top: 16px;
   }
 
-  & .report-submit-view[hidden] {
+  & .report-submit-error-view[hidden],
+  & .report-submit-success-view[hidden] {
     display: none;
   }
 }