FEATURE: add tag-based gated content (#13)

* add tags + minor css change

* Update settings.yml

* fix tag filtering

* change var scope

* FIX: Allow for topics with no tags

Topics will sometimes have a null amount of tags. This change allows for those situations.

* DEV: Add tests for gated tags

* Joffrey's idiotmatic way

Co-authored-by: David Taylor <david@taylorhq.com>
Co-authored-by: Jamie Wilson <jamie.wilson@discourse.org>

common/common.scss

@@ -54,23 +54,25 @@
     overflow: hidden;
   }
 
-  .container.posts::before {
+  .container.posts {
-    // ensure to cover most of the content when zoomed out
+    position: relative;
-    content: "";
+    &:before {
-    position: absolute;
+      // ensure to cover most of the content when zoomed out
-    bottom: 0;
+      content: "";
-    left: 0;
+      position: absolute;
-    right: 0;
+      top: 0;
-    width: 100%;
+      left: 0;
-    height: 90%;
+      right: 0;
-    z-index: 50;
+      width: 100%;
-    background: rgb(255, 255, 255);
+      height: 100%;
-    background: linear-gradient(
+      z-index: 50;
-      0deg,
+      background: rgb(255, 255, 255);
-      rgba(255, 255, 255, 1) 0%,
+      background: linear-gradient(
-      rgba(255, 255, 255, 1) 60%,
+        180deg,
-      rgba(255, 255, 255, 1) 70%,
+        rgba(255, 255, 255, 0) 10%,
-      rgba(255, 255, 255, 0) 100%
+        rgba(255, 255, 255, 0.6) 60%,
-    );
+        rgba(255, 255, 255, 1) 100%
+      );
+    }
   }
 }

javascripts/discourse/components/topic-in-gated-category.js

@@ -6,6 +6,8 @@ const enabledCategories = settings.enabled_categories
   .map((id) => parseInt(id, 10))
   .filter((id) => id);
 
+const enabledTags = settings.enabled_tags.split("|").filter(Boolean);
+
 export default Component.extend({
   tagName: "",
   hidden: true,
@@ -26,18 +28,20 @@ export default Component.extend({
 
   recalculate() {
     // do nothing if:
-    // a) topic does not have a category
+    // a) topic does not have a category and does not have a gated tag
     // b) component setting is empty
     // c) user is logged in
+    const gatedByTag = this.tags?.some((t) => enabledTags.includes(t));
+
     if (
-      !this.categoryId ||
+      (!this.categoryId && !gatedByTag) ||
-      enabledCategories.length === 0 ||
+      (enabledCategories.length === 0 && enabledTags.length === 0) ||
       this.currentUser
     ) {
       return;
     }
 
-    if (enabledCategories.includes(this.categoryId)) {
+    if (enabledCategories.includes(this.categoryId) || gatedByTag) {
       document.body.classList.add("topic-in-gated-category");
       this.set("hidden", false);
     }

javascripts/discourse/connectors/topic-above-post-stream/topic-in-gated-category.hbs

@@ -1 +1 @@
-{{topic-in-gated-category categoryId=model.category_id}}
+{{topic-in-gated-category categoryId=model.category_id tags=model.tags}}

settings.yml

@@ -3,3 +3,8 @@ enabled_categories:
   list_type: category
   default: ""
   description: "Choose which categories that users need to sign up for."
+enabled_tags:
+  type: list
+  list_type: tag
+  default: ""
+  description: "Choose which tags that users need to sign up for. The default is 'gated'."

test/acceptance/gated-category-test.js

@@ -2,13 +2,16 @@ import { acceptance, query } from "discourse/tests/helpers/qunit-helpers";
 import { visit } from "@ember/test-helpers";
 import { test } from "qunit";
 
-acceptance("Gated Category - Anonymous", function (needs) {
+acceptance("Gated Topics - Anonymous", function (needs) {
+  needs.settings({ tagging_enabled: true });
   needs.hooks.beforeEach(() => {
     settings.enabled_categories = "2";
+    settings.enabled_tags = "foo|baz";
   });
 
   needs.hooks.afterEach(() => {
     settings.enabled_categories = "";
+    settings.enabled_tags = "";
   });
 
   test("Viewing Topic in gated category", async function (assert) {
@@ -28,16 +31,28 @@ acceptance("Gated Category - Anonymous", function (needs) {
       "gated category prompt shown for anons on selected category"
     );
   });
+
+  test("Viewing Topic with gated tag", async function (assert) {
+    await visit("/t/2480");
+
+    assert.ok(
+      query(".topic-in-gated-category .custom-gated-topic-content"),
+      "gated category prompt shown for anons on topic with selected tag"
+    );
+  });
 });
 
-acceptance("Gated Category - Logged In", function (needs) {
+acceptance("Gated Topics - Logged In", function (needs) {
   needs.user();
+  needs.settings({ tagging_enabled: true });
   needs.hooks.beforeEach(() => {
     settings.enabled_categories = "2";
+    settings.enabled_tags = "foo|baz";
   });
 
   needs.hooks.afterEach(() => {
     settings.enabled_categories = "";
+    settings.enabled_tags = "";
   });
 
   test("Viewing Topic in gated category", async function (assert) {
@@ -48,4 +63,13 @@ acceptance("Gated Category - Logged In", function (needs) {
       "gated category prompt not shown on selected category"
     );
   });
+
+  test("Viewing Topic with gated tag", async function (assert) {
+    await visit("/t/2480");
+
+    assert.notOk(
+      query(".topic-in-gated-category .custom-gated-topic-content"),
+      "gated category prompt not shown on topic with selected tag"
+    );
+  });
 });