feat(atomic,insight): update locales.json and insights.html to suppor…

…t viewed by customer (#4586) Add **Viewed By Customer** support for hosted insight panel Shows a badge when a customer has viewed the specific result https://coveord.atlassian.net/browse/SVCINT-3062 ![image](https://github.com/user-attachments/assets/2d9d0fda-2148-4dc8-a830-c5fcb75733d9) --------- Co-authored-by: Felix Perron-Brault <[email protected]> Co-authored-by: Michael Grondines <[email protected]>
coveo · Nov 5, 2024 · 38fa9f7 · 38fa9f7
1 parent 5d60308
commit 38fa9f7
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 3 deletions.
diff --git a/packages/atomic/src/locales.json b/packages/atomic/src/locales.json
@@ -5265,6 +5265,33 @@
     "zh-CN": "与本案有关的见解",
     "zh-TW": "與此案件相關的洞見"
   },
+  "viewed-by-customer": {
+    "en": "Viewed by customer",
+    "fr": "Vu par le client",
+    "cs": "Zobrazeno zákazníkovi",
+    "da": "Set af kunden",
+    "de": "Vom Kunden angesehen",
+    "el": "Εμφανίστηκε από τον πελάτη",
+    "es": "Visto por el cliente",
+    "fi": "Nähty asiakkaan toimesta",
+    "hu": "Az ügyfél által megtekintve",
+    "id": "Dilihat oleh pelanggan",
+    "it": "Visualizzato dal cliente",
+    "ja": "顧客によって表示されました",
+    "ko": "고객이 본 내용",
+    "nl": "Bekeken door klant",
+    "no": "Sett av kunde",
+    "pl": "Oglądane przez klienta",
+    "pt": "Visto pelo cliente",
+    "pt-BR": "Visto pelo cliente",
+    "ru": "Просмотрено клиентом",
+    "sv": "Visad av kund",
+    "th": "ลูกค้าเป็นผู้ดู",
+    "tr": "Müşteri tarafından görüntülendi",
+    "zh": "客户查看",
+    "zh-CN": "由客户查看",
+    "zh-TW": "由客戶查看"
+  },
   "full-search": {
     "en": "Button to access full search",
     "fr": "Bouton pour accéder à la recherche complète",

diff --git a/packages/atomic/src/pages/examples/insights.html b/packages/atomic/src/pages/examples/insights.html
@@ -327,6 +327,28 @@
                   .result-root.image-large atomic-result-section-visual {
                     border-radius: var(--atomic-border-radius-xl);
                   }
+
+                  div.result-root.with-sections.display-list.density-normal atomic-result-section-bottom-metadata {
+                    max-height: 4.5rem;
+                  }
+
+                  .viewed-by-customer {
+                    display: inline-flex;
+                    align-items: center;
+                    flex-basis: 100%;
+                    margin-top: 0.5rem;
+                  }
+                  .viewed-by-customer atomic-icon {
+                    background-color: var(--atomic-neutral-dark);
+                    border-radius: 1rem;
+                    width: 0.75rem;
+                    height: 0.75rem;
+                  }
+                  .viewed-by-customer atomic-text {
+                    font-weight: bold;
+                    color: var(--atomic-on-background);
+                    margin-left: 0.25rem;
+                  }
                 </style>
                 <atomic-insight-result-action-bar>
                   <atomic-insight-result-action
@@ -366,9 +388,9 @@
                     <atomic-result-printable-uri max-number-of-parts="3"></atomic-result-printable-uri>
                   </atomic-field-condition>
                 </atomic-result-section-title-metadata>
-                <atomic-result-section-excerpt
-                  ><atomic-result-text field="excerpt"></atomic-result-text
-                ></atomic-result-section-excerpt>
+                <atomic-result-section-excerpt>
+                  <atomic-result-text field="excerpt"></atomic-result-text>
+                </atomic-result-section-excerpt>
                 <atomic-result-section-bottom-metadata>
                   <atomic-result-fields-list>
                     <atomic-field-condition class="field" if-defined="author">
@@ -404,6 +426,11 @@
                         <atomic-result-date format="ddd MMM D YYYY"></atomic-result-date>
                       </span>
                     </atomic-field-condition>
+
+                    <atomic-field-condition class="viewed-by-customer" must-match-is-user-action-view="true">
+                      <atomic-icon icon="assets://user.svg"></atomic-icon>
+                      <atomic-text value="viewed-by-customer"></atomic-text>
+                    </atomic-field-condition>
                   </atomic-result-fields-list>
                 </atomic-result-section-bottom-metadata>
               </template>