[semver:patch] Open panel only if triggered course requires that

dist/development/strigo.sdk.js

@@ -11468,6 +11468,12 @@ ${JSON.stringify(parsedContext)}` : "");
   function removeWidget(hostingAppWindow) {
     hostingAppWindow.document.getElementById("strigo-widget").remove();
   }
+  function removeLoader() {
+    const loader = document.getElementById("loader");
+    loader.remove();
+    const academyHatIcon = document.getElementById("strigo-academy-hat-icon");
+    academyHatIcon.classList.remove("loader");
+  }
   function openWidget() {
     const widget = document.getElementById("strigo-widget");
     widget.classList.add("slide-in");
@@ -11477,7 +11483,7 @@ ${JSON.stringify(parsedContext)}` : "");
     const academyHat = document.getElementById("strigo-academy-hat");
     academyHat.classList.remove("slide-in");
   }
-  function collapseWidget() {
+  function collapse() {
     const widget = document.getElementById("strigo-widget");
     widget.classList.remove("slide-in");
     widget.classList.remove("loaded");
@@ -11486,6 +11492,10 @@ ${JSON.stringify(parsedContext)}` : "");
     const academyHat = document.getElementById("strigo-academy-hat");
     academyHat.classList.add("slide-in");
   }
+  function collapseWidget() {
+    setSessionValue("shouldPanelBeOpen", false);
+    collapse();
+  }
   var navigationObserver = function(pageMutations) {
     const filteredMutations = pageMutations.filter((mutation) => {
       return ["HTML", "BODY"].includes(mutation.target.nodeName);
@@ -11507,7 +11517,7 @@ ${JSON.stringify(parsedContext)}` : "");
     if (shouldPanelBeOpen2) {
       openWidget();
     } else {
-      collapseWidget();
+      collapse();
     }
   }
   function createWidget(url) {
@@ -11520,10 +11530,14 @@ ${JSON.stringify(parsedContext)}` : "");
       toggleWidget();
     };
     const academyHatIcon = document.createElement("div");
-    academyHatIcon.className = "strigo-academy-hat-icon";
+    academyHatIcon.className = "strigo-academy-hat-icon loader";
     academyHatIcon.id = "strigo-academy-hat-icon";
     academyHatIcon.innerHTML = ACADEMY_HAT;
     academyHatDiv.appendChild(academyHatIcon);
+    const loaderElement = document.createElement("div");
+    loaderElement.className = "loader";
+    loaderElement.id = "loader";
+    academyHatDiv.appendChild(loaderElement);
     const collapseDiv = document.createElement("div");
     collapseDiv.className = "strigo-collapse-div";
     collapseDiv.id = "strigo-collapse-div";
@@ -11545,7 +11559,7 @@ ${JSON.stringify(parsedContext)}` : "");
     if (shouldPanelBeOpen2) {
       openWidget();
     } else {
-      collapseWidget();
+      collapse();
     }
     return strigoExercisesIframe;
   }
@@ -12632,7 +12646,7 @@ ${JSON.stringify(parsedContext)}` : "");
     return {
       setSizes,
       getSizes,
-      collapse: function collapse(i) {
+      collapse: function collapse2(i) {
         adjustToMin(elements[i]);
       },
       destroy,
@@ -13173,20 +13187,28 @@ ${JSON.stringify(parsedContext)}` : "");
     if (!urlTriggers) {
       return;
     }
+    const urlTriggeredCourses = getSessionValue("urlTriggeredCourses") || [];
     for (const urlTrigger of urlTriggers) {
       const { publishmentId, urlTriggerMatchType, urlTriggerUrl } = urlTrigger;
+      LoggerInstance.info("Detect URL trigger invoked", { publishmentId, urlTriggeredCourses });
+      if (!publishmentId) {
+        LoggerInstance.info("URL trigger detected without course id");
+        continue;
+      }
+      if (urlTriggeredCourses.includes(publishmentId)) {
+        LoggerInstance.info("Detected URL trigger for a course that was already opened, doing nothing");
+        continue;
+      }
       switch (urlTriggerMatchType) {
         case "exact" /* EXACT */: {
           if (urlTriggerUrl.trim() === currentHref.trim()) {
             strigoIframe.contentWindow.postMessage({ selectedCourseId: publishmentId }, "*");
-            openWidget();
           }
           break;
         }
         case "starts_with" /* STARTS_WITH */: {
           if (currentHref.trim().startsWith(urlTriggerUrl.trim())) {
             strigoIframe.contentWindow.postMessage({ selectedCourseId: publishmentId }, "*");
-            openWidget();
           }
           break;
         }
@@ -13240,7 +13262,7 @@ ${JSON.stringify(parsedContext)}` : "");
   // src/modules/widgets/overlay.ts
   var MINIMUM_WIDTH = 342;
   function postDockableStateToStrigo() {
-    LoggerInstance.info("Posting dockable state to Strigo...");
+    LoggerInstance.info("Posting dockable state to Strigo", {});
     const dockingSide = getConfigValue("dockingSide");
     const strigoIframe = document.getElementById("strigo-exercises");
     strigoIframe.contentWindow.postMessage({ dockable: true, dockingSide }, "*");
@@ -13316,7 +13338,7 @@ ${JSON.stringify(parsedContext)}` : "");
     }
     collapse() {
       LoggerInstance.info("overlay collapse called");
-      toggleWidget();
+      collapseWidget();
     }
     open() {
       openWidget();
@@ -13337,7 +13359,28 @@ ${JSON.stringify(parsedContext)}` : "");
 
   // src/modules/listeners/listeners.ts
   function onHostEventHandler(ev) {
-    if (!ev || !ev.data) {
+    const message = ev?.data;
+    if (!message) {
+      return;
+    }
+    if (message.startsWith("url-triggered" /* URL_TRIGGERED */)) {
+      const urlTriggeredCourses = getSessionValue("urlTriggeredCourses") || [];
+      const selectedCourseId = message.split("/")[1];
+      LoggerInstance.info("URL trigger message received", { selectedCourseId, urlTriggeredCourses });
+      if (!selectedCourseId) {
+        LoggerInstance.info("URL trigger message received without course id");
+        return;
+      }
+      if (urlTriggeredCourses.includes(selectedCourseId)) {
+        LoggerInstance.info("URL trigger message received for a course that was already opened, doing nothing");
+        return;
+      }
+      LoggerInstance.info("URL trigger message received for a new course, opening it");
+      urlTriggeredCourses.push(selectedCourseId);
+      setSessionValue("urlTriggeredCourses", urlTriggeredCourses);
+      if (getWidgetFlavor() === "overlay" /* OVERLAY */) {
+        openWidget();
+      }
       return;
     }
     switch (ev.data) {
@@ -13359,12 +13402,18 @@ ${JSON.stringify(parsedContext)}` : "");
         break;
       }
       case "challenge-success" /* CHALLENGE_SUCCESS */: {
-        LoggerInstance.info("Challenge event success received");
+        LoggerInstance.info("Challenge event success message received");
         if (getWidgetFlavor() === "overlay" /* OVERLAY */) {
           overlay_default.open();
         }
         break;
       }
+      case "rendered" /* RENDERED */: {
+        LoggerInstance.info("Panel rendered message received");
+        setSessionValue("isRendered", true);
+        window.Strigo?.expandPanel();
+        break;
+      }
       default: {
         break;
       }
@@ -13629,6 +13678,8 @@ ${JSON.stringify(parsedContext)}` : "");
         LoggerInstance.info("Finished SDK setup.");
         if (openWidget2) {
           this.open();
+          setSessionValue("shouldPanelBeOpen", false);
+          this.collapse();
         }
       } catch (err) {
         LoggerInstance.error("Could not setup SDK", { err });
@@ -13651,6 +13702,7 @@ ${JSON.stringify(parsedContext)}` : "");
           currentUrl: config.initSite.href,
           shouldPanelBeOpen: shouldPanelBeOpen(),
           isLoading: true,
+          isRendered: false,
           widgetFlavor: config.selectedWidgetFlavor
         });
         const widget = getWidget(config.selectedWidgetFlavor);
@@ -13661,6 +13713,15 @@ ${JSON.stringify(parsedContext)}` : "");
         LoggerInstance.error("Could not open academy panel", { err });
       }
     }
+    expandPanel() {
+      LoggerInstance.info("Expanding academy panel");
+      const config = getLocalStorageConfig();
+      const widget = getWidget(config.selectedWidgetFlavor);
+      widget.open();
+      if (getSessionValue("isRendered")) {
+        removeLoader();
+      }
+    }
     collapse() {
       LoggerInstance.info("Collapsing academy panel");
       const { selectedWidgetFlavor } = getLocalStorageConfig();

dist/development/styles/strigo-academy-hat.css

@@ -4,19 +4,35 @@
   --customizable-hat-bg-hover-color: #696cbf;
   --customizable-hat-text-color: #e2e2e7;
 }
+.loader {
+  width: 12px;
+  height: 12px;
+  border: 2px solid #fff;
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 0.6s linear infinite;
+}
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 .strigo-academy-hat {
   position: fixed;
   top: 50%;
   right: 0;
-  width: 24px;
-  height: 28px;
+  width: 32px;
+  height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  border: 1px solid #edf0f3;
-  border-right: none;
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2), 0px 8px 24px rgba(0, 0, 0, 0.14);
+  box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.12), 0px 5px 8px rgba(0, 0, 0, 0.26);
   border-radius: 8px 0px 0px 8px;
   background-color: var(--customizable-hat-bg-color);
   z-index: 9999999999;
@@ -50,7 +66,10 @@
   background-color: var(--customizable-hat-bg-hover-color);
 }
 .strigo-academy-hat .strigo-academy-hat-icon {
-  width: 13px;
-  padding-bottom: 2px;
+  width: 16px;
+  padding-top: 1px;
   fill: var(--customizable-hat-text-color);
 }
+.strigo-academy-hat .strigo-academy-hat-icon.loader {
+  display: none;
+}

src/modules/listeners/listeners.ts

@@ -3,11 +3,44 @@ import * as configManager from '../config/config';
 import overlayWidget from '../widgets/overlay';
 import { Logger } from '../../services/logger';
 import { WidgetFlavors } from '../widgets/widget.types';
+import { openWidget } from '../document/document';
 
 import { EventTypes, MessageTypes } from './listeners.types';
 
-function onHostEventHandler(ev: MessageEvent<any>): void {
-  if (!ev || !ev.data) {
+function onHostEventHandler(ev: MessageEvent<unknown>): void {
+  const message = ev?.data as string;
+
+  if (!message) {
+    return;
+  }
+
+  if (message.startsWith(MessageTypes.URL_TRIGGERED)) {
+    const urlTriggeredCourses = (sessionManager.getSessionValue('urlTriggeredCourses') as string[]) || [];
+    const selectedCourseId = message.split('/')[1];
+
+    Logger.info('URL trigger message received', { selectedCourseId, urlTriggeredCourses });
+
+    if (!selectedCourseId) {
+      Logger.info('URL trigger message received without course id');
+
+      return;
+    }
+
+    if (urlTriggeredCourses.includes(selectedCourseId)) {
+      Logger.info('URL trigger message received for a course that was already opened, doing nothing');
+
+      return;
+    }
+
+    Logger.info('URL trigger message received for a new course, opening it');
+
+    urlTriggeredCourses.push(selectedCourseId);
+    sessionManager.setSessionValue('urlTriggeredCourses', urlTriggeredCourses);
+
+    if (sessionManager.getWidgetFlavor() === WidgetFlavors.OVERLAY) {
+      openWidget();
+    }
+
     return;
   }
 
@@ -37,7 +70,7 @@ function onHostEventHandler(ev: MessageEvent<any>): void {
     }
 
     case MessageTypes.CHALLENGE_SUCCESS: {
-      Logger.info('Challenge event success received');
+      Logger.info('Challenge event success message received');
 
       if (sessionManager.getWidgetFlavor() === WidgetFlavors.OVERLAY) {
         overlayWidget.open();

src/modules/listeners/listeners.types.ts

@@ -10,4 +10,5 @@ export const enum MessageTypes {
   DESTROY = 'destroy',
   RENDERED = 'rendered',
   CHALLENGE_SUCCESS = 'challenge-success',
+  URL_TRIGGERED = 'url-triggered',
 }

src/modules/session/session.types.ts

@@ -6,4 +6,5 @@ export interface StrigoSession {
   widgetFlavor: WidgetFlavors;
   isRecordingMode?: boolean;
   isRendered: boolean;
+  urlTriggeredCourses?: string[];
 }

src/modules/url-trigger/url-trigger.ts

@@ -1,8 +1,11 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import debounce from 'lodash.debounce';
 
 import { Logger } from '../../services/logger';
+import * as sessionManager from '../session/session';
 import { UrlTrigger, UrlTriggerMatchType } from '../config/config.types';
-import { openWidget } from '../document/document';
 import { StorageNames, StorageTypes } from '../storage-utils/storage-utils.types';
 
 const bodyObserverOptions = {
@@ -45,14 +48,29 @@ export function detectUrlTrigger(currentWindow: Window): void {
     return;
   }
 
+  const urlTriggeredCourses = (sessionManager.getSessionValue('urlTriggeredCourses') as string[]) || [];
+
   for (const urlTrigger of urlTriggers) {
     const { publishmentId, urlTriggerMatchType, urlTriggerUrl } = urlTrigger;
 
+    Logger.info('Detect URL trigger invoked', { publishmentId, urlTriggeredCourses });
+
+    if (!publishmentId) {
+      Logger.info('URL trigger detected without course id');
+
+      continue;
+    }
+
+    if (urlTriggeredCourses.includes(publishmentId)) {
+      Logger.info('Detected URL trigger for a course that was already opened, doing nothing');
+
+      continue;
+    }
+
     switch (urlTriggerMatchType) {
       case UrlTriggerMatchType.EXACT: {
         if (urlTriggerUrl.trim() === currentHref.trim()) {
           strigoIframe.contentWindow.postMessage({ selectedCourseId: publishmentId }, '*');
-          openWidget();
         }
 
         break;
@@ -61,7 +79,6 @@ export function detectUrlTrigger(currentWindow: Window): void {
       case UrlTriggerMatchType.STARTS_WITH: {
         if (currentHref.trim().startsWith(urlTriggerUrl.trim())) {
           strigoIframe.contentWindow.postMessage({ selectedCourseId: publishmentId }, '*');
-          openWidget();
         }
 
         break;