Dismiss persistent toast (forever) upon clicking "Dismiss" (#2832)

Author: thoughtbot-summer

app/assets/javascripts/application.js

@@ -20,6 +20,7 @@
 //= require fastclick
 //= require readmore
 //= require extended_description
+//= require persistent-toast
 
 $(function() {
   hljs.initHighlightingOnLoad();

app/assets/javascripts/persistent-toast.js

@@ -0,0 +1,76 @@
+Upcase.PersistentToast = class {
+  static dismissedIdsLocalStorageKey = "persistent_toasts-dismissed_ids";
+
+  static get all() {
+    return [...document.getElementsByClassName("persistent-toast")]
+      .map(element => new this(element));
+  }
+
+  static get dismissedIds() {
+    return new Set(
+      JSON.parse(
+        localStorage.getItem(this.dismissedIdsLocalStorageKey)
+      )
+    );
+  }
+
+  static set dismissedIds(value) {
+    localStorage.setItem(
+      this.dismissedIdsLocalStorageKey,
+      JSON.stringify(
+        Array.from(value)
+      )
+    );
+  }
+
+  static addDismissedId(value) {
+    if (!this.dismissedIds.has(value)) {
+      this.dismissedIds = this.dismissedIds.add(value);
+    }
+  }
+
+  static initializeAll() {
+    this.all.forEach((persistentToast) => {
+      persistentToast.initialize();
+    });
+  }
+
+  constructor(element) {
+    this.element = element;
+    this.id = element.id;
+  }
+
+  get dismissButtonElements() {
+    return this.element.getElementsByClassName("toast-button-dismiss");
+  }
+
+  initialize() {
+    if (this.isDismissed()) {
+      this.remove();
+      return;
+    }
+
+    [...this.dismissButtonElements].forEach((dismissButtonElement) => {
+      dismissButtonElement.addEventListener("click", () => {
+        this.dismiss();
+      });
+    })
+  }
+
+  isDismissed() {
+    return this.constructor.dismissedIds.has(this.id);
+  }
+
+  dismiss() {
+    this.remove();
+    this.constructor.addDismissedId(this.id);
+  }
+
+  remove() {
+    this.element.remove();
+  }
+};
+
+window.addEventListener("DOMContentLoaded", () => {
+  Upcase.PersistentToast.initializeAll();
+});

app/views/shared/_persistent_toast.html.erb

@@ -1,5 +1,5 @@
 <% if ActiveModel::Type::Boolean.new.serialize(ENV["ENABLE_MARKETING_REDESIGN"]) %>
-  <div class="persistent-toast">
+  <div class="persistent-toast" id="persistent-toast-upcase_for_teams">
     <div class="icon-container">
       <%= inline_svg_tag "icons/info.svg" %>
     </div>
@@ -11,7 +11,7 @@
         <%= t(".cta_go")%>
         <%= inline_svg_tag "icons/arrow-right.svg" %>
       <% end %>
-      <button class="toast-button">
+      <button class="toast-button toast-button-dismiss">
         <%= t(".cta_dismiss")%>
       </button>
     </div>