Merge branch 'main' into a-faq-tracking

Previously all static pages (e.g. login-required landing page) were wrapped in the faq-read-tracking component.

app/assets/javascripts/discourse/app/components/watch-read.js

@@ -1,39 +1,41 @@
-import { bind } from "discourse-common/utils/decorators";
 import Component from "@ember/component";
+import { inject as service } from "@ember/service";
+import { bind } from "discourse-common/utils/decorators";
 import isElementInViewport from "discourse/lib/is-element-in-viewport";
+import { ajax } from "discourse/lib/ajax";
+import { userPath } from "discourse/lib/url";
+
+export default class WatchRead extends Component {
+  @service currentUser;
 
-export default Component.extend({
   didInsertElement() {
-    this._super(...arguments);
+    super.didInsertElement(...arguments);
-    const currentUser = this.currentUser;
+
-    if (!currentUser) {
+    if (!this.currentUser || this.currentUser.read_faq) {
       return;
     }
 
-    const path = this.path;
+    this._checkIfRead();
-    if (path === "faq" || path === "guidelines") {
+    window.addEventListener("resize", this._checkIfRead, false);
-      this._markRead();
+    window.addEventListener("scroll", this._checkIfRead, false);
-      window.addEventListener("resize", this._markRead, false);
+  }
-      window.addEventListener("scroll", this._markRead, false);
-    }
-  },
 
   willDestroyElement() {
-    this._super(...arguments);
+    super.willDestroyElement(...arguments);
 
-    window.removeEventListener("resize", this._markRead);
+    window.removeEventListener("resize", this._checkIfRead);
-    window.removeEventListener("scroll", this._markRead);
+    window.removeEventListener("scroll", this._checkIfRead);
-  },
+  }
 
   @bind
-  _markRead() {
+  async _checkIfRead() {
-    const faqUnread = !this.currentUser.read_faq;
+    const lastParagraph = document.querySelector(".contents p:last-child");
 
-    if (
+    if (!isElementInViewport(lastParagraph)) {
-      faqUnread &&
+      return;
-      isElementInViewport(document.querySelector(".contents p:last-child"))
-    ) {
-      this.action();
     }
-  },
+
-});
+    await ajax(userPath("read-faq"), { type: "POST" });
+    this.currentUser.set("read_faq", true);
+  }
+}

app/assets/javascripts/discourse/app/controllers/static.js

@@ -1,8 +1,6 @@
 import Controller, { inject as controller } from "@ember/controller";
-import { ajax } from "discourse/lib/ajax";
 import discourseComputed from "discourse-common/utils/decorators";
 import { equal, or } from "@ember/object/computed";
-import { userPath } from "discourse/lib/url";
 
 export default Controller.extend({
   application: controller(),
@@ -19,15 +17,4 @@ export default Controller.extend({
       this.get("model.path") === "login" && this.get("application.canSignUp")
     );
   },
-
-  actions: {
-    markFaqRead() {
-      const currentUser = this.currentUser;
-      if (currentUser) {
-        ajax(userPath("read-faq"), { type: "POST" }).then(() => {
-          currentUser.set("read_faq", true);
-        });
-      }
-    },
-  },
 });

app/assets/javascripts/discourse/app/lib/static-route-builder.js

@@ -12,7 +12,7 @@ const configs = {
 export default function (page) {
   return DiscourseRoute.extend({
     renderTemplate() {
-      this.render("static");
+      this.render(this.templateName || "static");
     },
 
     beforeModel(transition) {
@@ -33,7 +33,8 @@ export default function (page) {
     },
 
     setupController(controller, model) {
-      this.controllerFor("static").set("model", model);
+      const controllerName = this.controllerName || "static";
+      this.controllerFor(controllerName).set("model", model);
     },
 
     titleToken() {

app/assets/javascripts/discourse/app/routes/faq.js

@@ -1,3 +1,6 @@
 import staticRouteBuilder from "discourse/lib/static-route-builder";
 
-export default staticRouteBuilder("faq");
+export default class FaqRoute extends staticRouteBuilder("faq") {
+  controllerName = "faq";
+  templateName = "faq";
+}

app/assets/javascripts/discourse/app/routes/guidelines.js

@@ -1,3 +1,6 @@
 import staticRouteBuilder from "discourse/lib/static-route-builder";
 
-export default staticRouteBuilder("guidelines");
+export default class GuidelinesRoute extends staticRouteBuilder("guidelines") {
+  controllerName = "faq";
+  templateName = "faq";
+}

app/assets/javascripts/discourse/app/templates/faq.hbs

@@ -0,0 +1,18 @@
+<DSection @bodyClass="static-{{this.model.path}}" @class="container">
+  <WatchRead>
+    <div class="contents clearfix body-page">
+      <PluginOutlet
+        @name="above-static"
+        @tagName="span"
+        @connectorTagName="div"
+      />
+
+      {{html-safe this.model.html}}
+
+      <PluginOutlet
+        @name="below-static"
+        @connectorTagName="div"
+      />
+    </div>
+  </WatchRead>
+</DSection>

app/assets/javascripts/discourse/app/templates/static.hbs

@@ -1,24 +1,30 @@
 <DSection @bodyClass={{this.bodyClass}} @class="container">
-  <WatchRead @action={{action "markFaqRead"}} @path={{this.model.path}}>
+  <div class="contents clearfix body-page">
-    <div class="contents clearfix body-page">
+    <PluginOutlet
+      @name="above-static"
+      @tagName="span"
+      @connectorTagName="div"
+      @args={{hash model=this.model}}
+    />
 
-      <PluginOutlet @name="above-static" @tagName="span" @connectorTagName="div" />
+    {{html-safe this.model.html}}
 
-      {{html-safe this.model.html}}
+    <PluginOutlet
+      @name="below-static"
+      @connectorTagName="div"
+      @args={{hash model=this.model}}
+    />
 
-      <PluginOutlet @name="below-static" @connectorTagName="div" />
+    {{#if this.anyButtons}}
+      <div class="body-page-button-container">
+        {{#if this.showSignupButton}}
+          <DButton @action={{route-action "showCreateAccount"}} @class="btn-primary sign-up-button" @label="sign_up" />
+        {{/if}}
 
-      {{#if this.anyButtons}}
+        {{#if this.showLoginButton}}
-        <div class="body-page-button-container">
+          <DButton @action={{route-action "showLogin"}} @class="btn-primary login-button" @icon="user" @label="log_in" />
-          {{#if this.showSignupButton}}
+        {{/if}}
-            <DButton @action={{route-action "showCreateAccount"}} @class="btn-primary sign-up-button" @label="sign_up" />
+      </div>
-          {{/if}}
+    {{/if}}
-
+  </div>
-          {{#if this.showLoginButton}}
-            <DButton @action={{route-action "showLogin"}} @class="btn-primary login-button" @icon="user" @label="log_in" />
-          {{/if}}
-        </div>
-      {{/if}}
-    </div>
-  </WatchRead>
 </DSection>