Subscription feature

app/components/header.hbs

@@ -51,7 +51,10 @@
           class="nav__element"
           href={{this.STATUS_URL}}
         >Status</a></li>
-      {{#if @dev}}
+        {{#if @dev}}
+        <li>
+          <LinkTo @route="subscribe" class="nav__element">Subscribe</LinkTo>
+        </li>
         <li>
           {{! TODO - remove query for dev when it goes to production }}
           <LinkTo

app/constants/urls.js

@@ -99,3 +99,4 @@ export const SOCIALS = {
 };
 
 export const ANKUSH_TWITTER = 'https://twitter.com/ankushdharkar';
+export const RDS_TWITTER = 'https://x.com/realdevsquad';

app/controllers/subscribe.js

@@ -0,0 +1,99 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { RDS_TWITTER, APPS } from '../constants/urls';
+import { TOAST_OPTIONS } from '../constants/toast-options';
+
+export default class SubscribeController extends Controller {
+  @service login;
+  @tracked isFormOpen = false;
+  @tracked email = '';
+  @tracked phone = '';
+  @tracked userData = null;
+  @tracked isLoading = false;
+  @tracked showSubscriptionConfirmation = false;
+
+  RDS_TWITTER = RDS_TWITTER;
+
+  constructor() {
+    super(...arguments);
+    this.userData = this.login.userData;
+  }
+
+  get isLoggedIn() {
+    return this.login.isLoggedIn;
+  }
+
+  get isSubscribed() {
+    return this.login.userData.isSubscribed;
+  }
+
+  get isSubmitDisabled() {
+    return !this.email || (this.phone && !/^\+?\d*$/.test(this.phone));
+  }
+
+  @action
+  toggleFormModal() {
+    this.isFormOpen = !this.isFormOpen;
+  }
+
+  @action
+  updateEmail(event) {
+    this.email = event.target.value;
+  }
+
+  @action
+  updatePhone(event) {
+    const input = event.target.value;
+    const isValidPhone = /^\+?\d*$/.test(input);
+    if (isValidPhone) {
+      this.phone = input;
+    }
+  }
+
+  @action
+  async handleSubmit(event) {
+    event.preventDefault();
+    if (!this.isSubmitDisabled) {
+      this.isLoading = true;
+      try {
+        const url = `${APPS.API_BACKEND}/subscription?dev=true`;
+        const response = await fetch(url, {
+          method: 'POST',
+          body: JSON.stringify({
+            email: this.email,
+            phoneNumber: this.phone,
+          }),
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          credentials: 'include',
+        });
+        if (!response.ok) {
+          this.toast.error(
+            'Something went wrong. Please try again.',
+            '',
+            TOAST_OPTIONS,
+          );
+        } else {
+          this.login.userData.isSubscribed = true;
+          this.isFormOpen = false;
+          this.showSubscriptionConfirmation = true;
+          this.toast.info('🎉 Thank you for subscribing!', '', TOAST_OPTIONS);
+        }
+      } catch (error) {
+        console.log(error);
+        this.toast.error(
+          `Something went wrong. ${error.message}`,
+          '',
+          TOAST_OPTIONS,
+        );
+      } finally {
+        this.isLoading = false;
+      }
+      this.email = '';
+      this.phone = '';
+    }
+  }
+}

app/models/user.js

@@ -20,4 +20,7 @@ export default class UserModel extends Model {
   @attr profileURL;
   @attr profileStatus;
   @attr website;
+  @attr isSubscribed;
+  @attr phoneNumber;
+  @attr email;
 }

app/router.js

@@ -15,4 +15,5 @@ Router.map(function () {
   this.route('goto');
   this.route('events');
   this.route('debug');
+  this.route('subscribe');
 });

app/routes/subscribe.js

@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class SubscribeRoute extends Route {}

app/styles/app.css

@@ -41,6 +41,8 @@
 @import url("tooltip.module.css");
 @import url("debug.module.css");
 @import url("unauthenticated.module.css");
+@import url("subscribe.module.css");
+@import url("phone-input.module.css");
 
 * {
   margin: 0;

app/styles/base-modal.module.css

@@ -9,7 +9,11 @@
 }
 
 .base-modal--show {
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #000000b2;
+  backdrop-filter: blur(5px);
 }
 
 .base-modal--hide {

app/styles/phone-input.module.css

@@ -0,0 +1,23 @@
+.phone-input {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.country-code-select {
+  margin-right: 10px;
+}
+
+.phone-number-input {
+  flex-grow: 1;
+}
+
+.phone-input select,
+.phone-input input[type="tel"] {
+  width: 100%;
+  padding: 5px;
+}
+
+button {
+  padding: 5px 10px;
+}