Merge pull request #1 from ellaestigoy/first-take

First take of component logic

common/common.scss

@@ -1,4 +1,22 @@
 .custom-need-access-prompt {
-  background: red;
+  background: var(--tertiary-low);
   display: block;
-}
+  position: fixed;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 2em;
+  z-index: 999;
+}
+
+.topic-in-gated-category {
+  .topic-navigation {
+    visibility: hidden;
+  }
+
+  .post-stream {
+    max-height: 150vh;
+    overflow: hidden;
+  }
+}

javascripts/discourse/components/need-access-prompt.js

@@ -1,8 +1,10 @@
 import Component from "@ember/component";
-import I18n from "I18n";
 import discourseComputed from "discourse-common/utils/decorators";
-import { default as getURL } from "discourse-common/lib/get-url";
-// import cookie from "discourse/lib/cookie";
+
+const enabledCategories = settings.enabled_categories
+  .split("|")
+  .map((id) => parseInt(id, 10))
+  .filter((id) => id);
 
 export default Component.extend({
   tagName: "",
@@ -10,32 +12,39 @@ export default Component.extend({
 
   didInsertElement() {
     this._super(...arguments);
-    this.appEvents.on("cta:shown", this, this._triggerPrompt);
+    this.recalculate();
+  },
+
+  didUpdateAttrs() {
+    this._super(...arguments);
+    this.recalculate();
   },
 
   willDestroyElement() {
-    this.appEvents.off("cta:shown", this, this._triggerPrompt);
+    document.body.classList.remove("topic-in-gated-category");
   },
 
-  _triggerPrompt() {
-    this.set("hidden", false)
+  recalculate() {
+    // do nothing if:
+    // a) topic does not have a category
+    // b) component setting is empty
+    // c) user is logged in
+    if (
+      !this.categoryId ||
+      enabledCategories.length === 0 ||
+      this.currentUser
+    ) {
+      return;
+    }
+
+    if (enabledCategories.includes(this.categoryId)) {
+      document.body.classList.add("topic-in-gated-category");
+      this.set("hidden", false);
+    }
   },
 
   @discourseComputed("hidden")
   shouldShow(hidden) {
     return !hidden;
   },
-
-  // @action
-  // dismissBanner() {
-  //   this.keyValueStore.setItem("anon-cta-never", "t");
-  //   this.session.set("showSignupCta", false);
-  //   this.set("hidden", true);
-  // },
-
-  // @action
-  // showBannerLater() {
-  //   this.keyValueStore.setItem("anon-cta-hidden", Date.now());
-  //   this.set("hidden", true)
-  // },
 });

javascripts/discourse/connectors/topic-above-post-stream/need-access-prompt.hbs

@@ -1 +1 @@
-{{need-access-prompt}}
+{{need-access-prompt categoryId=model.category_id}}

javascripts/discourse/initializers/discourse-gated-category.js

@@ -1,48 +0,0 @@
-import { withPluginApi } from "discourse/lib/plugin-api";
-import discourseComputed from "discourse-common/utils/decorators";
-import { inject as service } from "@ember/service";
-
-const enabledCategories = settings.enabled_categories
-  .split("|")
-  .map((id) => parseInt(id, 10))
-  .filter((id) => id);
-
-const PLUGIN_ID = "discourse-gated-category";
-
-export default {
-  name: "require-signup-on-select-category",
-  initialize() {
-    withPluginApi("0.8.14", (api) => this.initWithApi(api));
-  },
-
-  initWithApi(api) {
-    const site = api.container.lookup("site:main");
-
-    api.modifyClass("component:topic-list-item", {
-      pluginID: PLUGIN_ID,
-      excerptsRouter: service("router"),
-
-      @discourseComputed(
-        "excerptsRouter.currentRouteName",
-        "excerptsRouter.currentRoute.attributes.category.id"
-      )
-      requireSignUpCategoryId(currentRouteName, categoryId) {
-        if (!currentRouteName.match(/^discovery\./)) return;
-        return categoryId;
-      },
-
-      @discourseComputed("requireSignUpCategoryId")
-      expandPinned(viewingCategory) {
-        const overrideEverywhere =
-          enabledCategories.length === 0;
-
-        const overrideInCategory = enabledCategories.includes(viewingCategory);
-
-        return overrideEverywhere || overrideInCategory
-          ? true
-          : this._super();
-      },
-    });
-  },
-};
-  

javascripts/discourse/templates/components/need-access-prompt.hbs

@@ -1,6 +1,6 @@
-{{!-- {{#if shouldShow}} --}}
+{{#if shouldShow}}
   <div class="custom-need-access-prompt">
-    <h1>{{theme-setting "prompt_heading"}}</h1>  
+    <h1>{{theme-setting "prompt_heading"}}</h1>
     {{d-button action=(route-action "showCreateAccount") class="btn-primary sign-up-button" translatedLabel=(theme-setting "prompt_cta_label")}}
   </div>
-{{!-- {{/if}} --}}
+{{/if}}