feat(970): moves notices for joining to its own component

We were copying the same notice for joining in two places. This moves it to its own component, so future changes are easier.

app/components/join-section.hbs

@@ -34,8 +34,19 @@
       @route='index'
       class='join__link join__link--new'
       @disabled={{true}}
-    >Join the Squad</LinkTo>
+    >
+      Join the Squad
+    </LinkTo>
+
+    {{!-- NOTE: This has the new code on feature flag off --}}
+    {{!-- If something goes wrong, we can enable a flag to restore previous behaviour --}}
+    {{!-- TODO: Clean up by Jan, 2025 --}}
     <p data-test-join-later-text class='join__later-text'>
-      We're currently not accepting new applications. Please check back in 2024.</p>
+      {{#if this.isDevMode}}
+      We're currently not accepting new applications. Please check back in 2024.
+      {{else}}
+      <NoticeForJoining />
+      {{/if}}
+      </p>
   </section>
-{{/if}}
+{{/if}}

app/components/notice-for-joining.hbs

@@ -0,0 +1 @@
+We're currently not accepting new applications. Please check back in 2024.

app/controllers/subscribe.js

@@ -15,6 +15,7 @@ export default class SubscribeController extends Controller {
   @tracked isLoading = false;
   @tracked showSubscribedMessage = false;
   @service toast;
+  @service featureFlag;
   @tracked isPhoneValid = true;
 
   RDS_TWITTER = RDS_TWITTER;
@@ -24,6 +25,10 @@ export default class SubscribeController extends Controller {
     this.userData = this.login.userData;
   }
 
+  get isDevMode() {
+    return this.featureFlag.isDevMode;
+  }
+
   get isLoggedIn() {
     return this.login.isLoggedIn;
   }

app/templates/subscribe.hbs

@@ -35,7 +35,17 @@
         </div>
       {{else}}
         <h1>Join the Real Dev Squad Community</h1>
-        <p class="notification__text">We're currently not accepting new applications. Please check back in 2024.</p>
+        <p class="notification__text">
+          {{!-- NOTE: This has the new code on feature flag off. --}}
+          {{!-- If something goes wrong, we can enable a flag to restore previous behaviour --}}
+          {{!-- TODO: Clean up by Jan, 2025 --}}
+          {{#if this.isDevMode}}
+          We're currently not accepting new applications. Please check back in 2024.
+          {{else}}
+          <NoticeForJoining />
+          {{/if}}
+        </p>
+
         <p class="sub__text">Be the first to know when applications open!</p>
         <button class="notify__btn" type="button" {{on "click" this.toggleFormModal}}>Notify Me When Applications Open</button>
       {{/if}}

tests/integration/components/notice-for-joining-test.js

@@ -0,0 +1,17 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'website-www/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | notice-for-joining', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<NoticeForJoining />`);
+    assert.dom().includesText('not accepting new');
+    assert.dom().includesText('check back in 2024');
+  });
+});