v12.1.0

Author: boehlerlukas

build/index.js

@@ -155,10 +155,10 @@ export default class GleapNotificationManager {
           return `${notification.data.sender ? `
           <div class="gleap-notification-item-news-sender">
             ${notification.data.sender.profileImageUrl &&
-          `<img src="${notification.data.sender.profileImageUrl}" />`
-          } ${notification.data.sender.name}</div>`
-          : ""
-        }`;
+            `<img src="${notification.data.sender.profileImageUrl}" />`
+            } ${notification.data.sender.name}</div>`
+            : ""
+            }`;
         };
 
         // News preview
@@ -171,6 +171,29 @@ export default class GleapNotificationManager {
           ${renderDescription()}
           </div>
         </div>`;
+      } else if (notification.data.checklist) {
+        var progress = Math.round(notification.data.currentStep / notification.data.totalSteps * 100);
+        if (progress < 100) {
+          progress += 4;
+        }
+
+        // News preview
+        elem.className = "gleap-notification-item-checklist";
+        elem.innerHTML = `
+        <div class="gleap-notification-item-checklist-container">
+          <div class="gleap-notification-item-checklist-content">
+            <div class="gleap-notification-item-checklist-content-title">${notification.data.text}</div>
+            <div class="gleap-notification-item-checklist-content-progress">
+              <div class="gleap-notification-item-checklist-content-progress-inner" style="width: ${progress}%;"></div>
+            </div>
+            <div class="gleap-notification-item-checklist-content-next">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M4 12H20M20 12L14 6M20 12L14 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              ${notification.data.nextStepTitle}
+            </div>
+          </div>
+        </div>`;
       } else {
         // Notification item.
         elem.className = "gleap-notification-item";

published/12.1.0/index.js

@@ -434,6 +434,82 @@ export const injectStyledCSS = (
       fill: ${backgroundColor};
     }
 
+    .gleap-notification-item-checklist-container {
+      display: flex;
+      animation: fadeIn;
+      animation-duration: .45s;
+      background-color: ${backgroundColor};
+      border-radius: ${subTextColor};
+      box-sizing: border-box;
+      cursor: pointer;
+      flex-direction: column;
+      overflow: hidden;
+      box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.2);
+      border-radius: ${chatRadius}px;
+      margin-bottom: 12px;
+    }
+
+    .gleap-notification-item-checklist-content {
+      align-items: flex-start;
+      display: flex;
+      flex-direction: column;
+      padding: 15px;
+      width: 100%;
+      width: min(310px, 70vw);
+      max-width: min(310px, 70vw);
+    }
+
+    .gleap-notification-item-checklist-content-title {
+      color: ${contrastBackgroundColor};
+      font-size: 15px;
+      font-weight: 500;
+      line-height: 21px;
+      margin-bottom: 10px;
+      max-width: 100%;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+
+    .gleap-notification-item-checklist-content-progress {
+      width: 100%;
+      height: 8px;
+      border-radius: 8px;
+      background-color: ${backgroundColorHover};
+    }
+
+    .gleap-notification-item-checklist-content-progress-inner {
+      height: 100%;
+      border-radius: 8px;
+      background-color: ${primaryColor};
+    }
+
+    .gleap-notification-item-checklist-content-next {
+      color: ${subTextColor};
+      font-size: 15px;
+      font-weight: normal;
+      line-height: 21px;
+      margin-top: 10px;
+      max-width: 100%;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: flex;
+      align-items: center;
+    }
+
+    .gleap-notification-item-checklist-content-next svg {
+      height: 18px;
+      margin-right: 5px;
+      width: auto;
+    }
+
+    .gleap-notification-item-checklist-content-next b {
+      font-size: 15px;
+      font-weight: normal;
+      color: ${contrastBackgroundColor};
+    }
+
     .gleap-notification-item-news {
       width: 100%;
       cursor: pointer;