feat(VCST-4046): localization of compare products notifications

client-app/shared/compare/composables/useCompareProducts.ts

@@ -1,6 +1,7 @@
 import { useLocalStorage } from "@vueuse/core";
 import { v4 as uuidv4 } from "uuid";
 import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 import { useThemeContext } from "@/core/composables/useThemeContext";
 import {
   CONFIG_PRODUCTS_TO_COMPARE_LOCAL_STORAGE,
@@ -124,6 +125,7 @@ export function useCompareProducts() {
   const { themeContext } = useThemeContext();
   const notifications = useNotifications();
   const productsLimit = themeContext.value?.settings?.product_compare_limit || DEFAULT_MAX_PRODUCTS;
+  const { t } = useI18n();
 
   function addToCompareList(
     product: Product,
@@ -135,7 +137,7 @@ export function useCompareProducts() {
         duration: 15000,
         group: NOTIFICATIONS_GROUP,
         singleInGroup: true,
-        text: `Only ${productsLimit} products can be compared`,
+        text: t("shared.compare.notifications.limit_reached", { productsLimit }),
       });
 
       return;
@@ -151,12 +153,12 @@ export function useCompareProducts() {
       duration: 15000,
       group: NOTIFICATIONS_GROUP,
       singleInGroup: true,
-      html:
-        `Product <span class="hidden lg:inline">“<strong>${truncate(product.name, NAME_MAX_LENGTH)}</strong>”</span> ` +
-        `is added to compare list ` +
-        `<span class="hidden lg:inline">(${productsLimit - productsIds.value.length - configProductsToCompare.value.length} items left)</span>`,
+      html: t("shared.compare.notifications.added_html", {
+        productName: truncate(product.name, NAME_MAX_LENGTH),
+        itemsLeft: productsLimit - productsIds.value.length - configProductsToCompare.value.length,
+      }),
       button: {
-        text: "Compare",
+        text: t("shared.compare.notifications.compare_button"),
         to: { path: "/compare" },
         clickHandler() {
           notifications.clear(NOTIFICATIONS_GROUP);
@@ -176,9 +178,9 @@ export function useCompareProducts() {
       duration: 15000,
       group: NOTIFICATIONS_GROUP,
       singleInGroup: true,
-      html:
-        `Product <span class="hidden lg:inline">“<strong>${truncate(product.name, NAME_MAX_LENGTH)}</strong>”</span> ` +
-        `was removed from the compare list`,
+      html: t("shared.compare.notifications.removed_html", {
+        productName: truncate(product.name, NAME_MAX_LENGTH),
+      }),
     });
   }
 

locales/de.json

@@ -564,6 +564,12 @@
           "remove": "Vom Vergleich entfernen"
         }
       },
+      "notifications": {
+        "limit_reached": "Es können nur {productsLimit} Produkte verglichen werden",
+        "added_html": "Produkt <span class=\"hidden lg:inline\">„<strong>{productName}</strong>“</span> wurde der Vergleichsliste hinzugefügt <span class=\"hidden lg:inline\">(verbleibende Artikel - {itemsLeft})</span>",
+        "removed_html": "Produkt <span class=\"hidden lg:inline\">„<strong>{productName}</strong>“</span> wurde aus der Vergleichsliste entfernt",
+        "compare_button": "Vergleichen"
+      },
       "clear_list_modal": {
         "title": "Löschung bestätigen",
         "message": "Bestätigen Sie die Entfernung aller Produkte aus der Vergleichsliste?"

locales/en.json

@@ -564,6 +564,12 @@
           "remove": "Remove from Compare"
         }
       },
+      "notifications": {
+        "limit_reached": "Only {productsLimit} products can be compared",
+        "added_html": "Product <span class=\"hidden lg:inline\">“<strong>{productName}</strong>”</span> is added to compare list <span class=\"hidden lg:inline\">(items left - {itemsLeft})</span>",
+        "removed_html": "Product <span class=\"hidden lg:inline\">“<strong>{productName}</strong>”</span> was removed from the compare list",
+        "compare_button": "Compare"
+      },
       "clear_list_modal": {
         "title": "Confirm clear",
         "message": "Do you confirm the removal of all products from the compare list?"

locales/es.json

@@ -564,6 +564,12 @@
           "remove": "Eliminar de Comparar"
         }
       },
+      "notifications": {
+        "limit_reached": "Solo se pueden comparar {productsLimit} productos",
+        "added_html": "Producto <span class=\"hidden lg:inline\">“<strong>{productName}</strong>”</span> añadido a la lista de comparación <span class=\"hidden lg:inline\">(artículos restantes: {itemsLeft})</span>",
+        "removed_html": "Producto <span class=\"hidden lg:inline\">“<strong>{productName}</strong>”</span> eliminado de la lista de comparación",
+        "compare_button": "Comparar"
+      },
       "clear_list_modal": {
         "title": "Confirmar limpieza",
         "message": "¿Confirmas la eliminación de todos los productos de la lista de comparación?"

locales/fi.json

@@ -564,6 +564,12 @@
           "remove": "Poista vertailusta"
         }
       },
+      "notifications": {
+        "limit_reached": "Vain {productsLimit} tuotetta voidaan vertailla",
+        "added_html": "Tuote <span class=\"hidden lg:inline\">“<strong>{productName}</strong>”</span> on lisätty vertailulistalle <span class=\"hidden lg:inline\">(jäljellä {itemsLeft} tuotetta)</span>",
+        "removed_html": "Tuote <span class=\"hidden lg:inline\">“<strong>{productName}</strong>”</span> on poistettu vertailulistalta",
+        "compare_button": "Vertaile"
+      },
       "clear_list_modal": {
         "title": "Vahvista tyhjennys",
         "message": "Vahvistatko, että kaikki tuotteet poistetaan vertailulistalta?"

locales/fr.json

@@ -564,6 +564,12 @@
           "remove": "Retirer du comparateur"
         }
       },
+      "notifications": {
+        "limit_reached": "Seulement {productsLimit} produits peuvent être comparés",
+        "added_html": "Le produit <span class=\"hidden lg:inline\">« <strong>{productName}</strong> »</span> a été ajouté à la liste de comparaison <span class=\"hidden lg:inline\">({itemsLeft} articles restants)</span>",
+        "removed_html": "Le produit <span class=\"hidden lg:inline\">« <strong>{productName}</strong> »</span> a été retiré de la liste de comparaison",
+        "compare_button": "Comparer"
+      },
       "clear_list_modal": {
         "title": "Confirmer la suppression",
         "message": "Confirmez-vous la suppression de tous les produits de la liste de comparaison ?"

locales/it.json

@@ -564,6 +564,12 @@
           "remove": "Rimuovi dal confronto"
         }
       },
+      "notifications": {
+        "limit_reached": "È possibile confrontare solo {productsLimit} prodotti",
+        "added_html": "Prodotto <span class=\"hidden lg:inline\">“<strong>{productName}</strong>”</span> aggiunto alla lista di confronto <span class=\"hidden lg:inline\">(elementi rimanenti - {itemsLeft})</span>",
+        "removed_html": "Prodotto <span class=\"hidden lg:inline\">“<strong>{productName}</strong>”</span> rimosso dalla lista di confronto",
+        "compare_button": "Confronta"
+      },
       "clear_list_modal": {
         "title": "Conferma cancellazione",
         "message": "Confermi la rimozione di tutti i prodotti dalla lista di confronto?"

locales/ja.json

@@ -564,6 +564,12 @@
           "remove": "比較リストから削除"
         }
       },
+      "notifications": {
+        "limit_reached": "{productsLimit}個の商品のみ比較できます",
+        "added_html": "商品<span class=\"hidden lg:inline\">「<strong>{productName}</strong>」</span>を比較リストに追加しました<span class=\"hidden lg:inline\">（残り{itemsLeft}個）</span>",
+        "removed_html": "商品<span class=\"hidden lg:inline\">「<strong>{productName}</strong>」</span>を比較リストから削除しました",
+        "compare_button": "比較"
+      },
       "clear_list_modal": {
         "title": "クリアの確認",
         "message": "比較リストから全ての商品を削除しますか？"

locales/no.json

@@ -564,6 +564,12 @@
           "remove": "Fjern fra sammenligning"
         }
       },
+      "notifications": {
+        "limit_reached": "Bare {productsLimit} produkter kan sammenlignes",
+        "added_html": "Produktet <span class=\"hidden lg:inline\">«<strong>{productName}</strong>»</span> er lagt til sammenligningslisten <span class=\"hidden lg:inline\">(antall igjen – {itemsLeft})</span>",
+        "removed_html": "Produktet <span class=\"hidden lg:inline\">«<strong>{productName}</strong>»</span> er fjernet fra sammenligningslisten",
+        "compare_button": "Sammenlign"
+      },
       "clear_list_modal": {
         "title": "Bekreft tømming",
         "message": "Bekrefter du at alle produkter fjernes fra sammenligningslisten?"

locales/pl.json

@@ -564,6 +564,12 @@
           "remove": "Usuń z Porównania"
         }
       },
+      "notifications": {
+        "limit_reached": "Można porównać tylko {productsLimit} produkty",
+        "added_html": "Produkt <span class=\"hidden lg:inline\">“<strong>{productName}</strong>”</span> został dodany do listy porównywania <span class=\"hidden lg:inline\">(pozostało pozycji - {itemsLeft})</span>",
+        "removed_html": "Produkt <span class=\"hidden lg:inline\">“<strong>{productName}</strong>”</span> został usunięty z listy porównywania",
+        "compare_button": "Porównaj"
+      },
       "clear_list_modal": {
         "title": "Potwierdź wyczyszczenie",
         "message": "Czy potwierdzasz usunięcie wszystkich produktów z listy porównań?"

locales/pt.json

@@ -564,6 +564,12 @@
           "remove": "Remover de Comparar"
         }
       },
+      "notifications": {
+        "limit_reached": "Apenas {productsLimit} produtos podem ser comparados",
+        "added_html": "Produto <span class=\"hidden lg:inline\">“<strong>{productName}</strong>”</span> foi adicionado à lista de comparação <span class=\"hidden lg:inline\">(itens restantes - {itemsLeft})</span>",
+        "removed_html": "Produto <span class=\"hidden lg:inline\">“<strong>{productName}</strong>”</span> foi removido da lista de comparação",
+        "compare_button": "Comparar"
+      },
       "clear_list_modal": {
         "title": "Confirmar Limpeza",
         "message": "Você confirma a remoção de todos os produtos da lista de comparação?"

locales/ru.json

@@ -564,6 +564,12 @@
           "remove": "Удалить из сравнения"
         }
       },
+      "notifications": {
+        "limit_reached": "Можно сравнить не более {productsLimit} товаров",
+        "added_html": "Товар <span class=\"hidden lg:inline\">“<strong>{productName}</strong>”</span> добавлен в список сравнения <span class=\"hidden lg:inline\">(осталось товаров - {itemsLeft})</span>",
+        "removed_html": "Товар <span class=\"hidden lg:inline\">“<strong>{productName}</strong>”</span> был удален из списка сравнения",
+        "compare_button": "Сравнить"
+      },
       "clear_list_modal": {
         "title": "Подтвердить удаление",
         "message": "Вы подтверждаете удаление всех товаров из списка?"

locales/sv.json

@@ -564,6 +564,12 @@
           "remove": "Ta bort från jämförelse"
         }
       },
+      "notifications": {
+        "limit_reached": "Endast {productsLimit} produkter kan jämföras",
+        "added_html": "Produkten <span class=\"hidden lg:inline\">“<strong>{productName}</strong>”</span> har lagts till i jämförelselistan <span class=\"hidden lg:inline\">(antal kvar - {itemsLeft})</span>",
+        "removed_html": "Produkten <span class=\"hidden lg:inline\">“<strong>{productName}</strong>”</span> har tagits bort från jämförelselistan",
+        "compare_button": "Jämför"
+      },
       "clear_list_modal": {
         "title": "Bekräfta rensning",
         "message": "Bekräftar du att alla produkter ska tas bort från jämförelselistan?"

locales/zh.json

@@ -564,6 +564,12 @@
           "remove": "从比较中移除"
         }
       },
+      "notifications": {
+        "limit_reached": "最多可以比较 {productsLimit} 件商品",
+        "added_html": "商品 <span class=\"hidden lg:inline\">“<strong>{productName}</strong>”</span> 已添加到比较列表 <span class=\"hidden lg:inline\">（剩余 {itemsLeft} 件）</span>",
+        "removed_html": "商品 <span class=\"hidden lg:inline\">“<strong>{productName}</strong>”</span> 已从比较列表中移除",
+        "compare_button": "比较"
+      },
       "clear_list_modal": {
         "title": "确认清空",
         "message": "您确认要从比较列表中移除所有商品吗？"

tailwind.config.ts

@@ -173,6 +173,8 @@ const colorSet = {
 module.exports = {
   content: ["./index.html", "./client-app/**/*.{vue,js,ts,jsx,tsx}", "./node_modules/tw-elements/dist/js/**/*.js"],
 
+  safelist: ["lg:inline"],
+
   theme: {
     ...colorSet,
     screens: BREAKPOINTS,