Dev to Main Sync (#949)

* Subscription feature (#936)

* feat: add form to collect subscription data

* feat: add form to collect subscription data

* WIP: add ember-phone-input

* feat: add not loggedin and subscribed screen and integreate API

* feat: fixing bug

* fix: bug to show form even if user is already subscribed

* fix: urls

* fix: urls

* fix: urls

* delete: service subscribe test

* fix: resolve comments

* Update app/components/header.hbs

Co-authored-by: Mehul Kiran Chaudhari <[email protected]>

* fix: comments and remove modal

* fix: phone number input

* fix: content change

* fix: remove card

* fix: remove comments

* fix:subscribe message

---------

Co-authored-by: Vinit khandal <[email protected]>
Co-authored-by: Mehul Kiran Chaudhari <[email protected]>

* subscription feature fixes (#944)

* fix: navbar & css & phone validation

* fix: PR comments

* feat: add error to in valid input

* fix: lint

---------

Co-authored-by: Vinit khandal <[email protected]>
Co-authored-by: Mehul Kiran Chaudhari <[email protected]>

app/components/header.hbs

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

app/components/join-section.hbs

@@ -11,7 +11,10 @@
       yet, but it won't be okay to not put in any efforts for yourself. We want
       to value everyone's time and efforts.
     </p>
+    <div class='links__container'>
+    <LinkTo data-test-join-link @route='subscribe' class='subscribe__link join__link'>Subscribe <span>🔔</span></LinkTo>
     <LinkTo data-test-join-link @route='join' class='join__link'>Join the Squad</LinkTo>
+    </div>
   </section>
 {{else}}
   <section data-test-join class='join'>

app/constants/regex.js

@@ -0,0 +1,2 @@
+export const phoneNumberRegex =
+  /^[+]{1}(?:[0-9\-\\(\\)\\/.]\s?){6,15}[0-9]{1}$/;

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,100 @@
+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';
+import { phoneNumberRegex } from '../constants/regex';
+
+export default class SubscribeController extends Controller {
+  @service login;
+  @tracked isFormOpen = false;
+  @tracked email = '';
+  @tracked phone = '';
+  @tracked userData = null;
+  @tracked isLoading = false;
+  @tracked showSubscribedMessage = false;
+  @service toast;
+  @tracked isPhoneValid = true;
+
+  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() {
+    const isPhoneValid = !this.phone || phoneNumberRegex.test(this.phone);
+    return !this.email || !isPhoneValid;
+  }
+
+  @action
+  toggleFormModal() {
+    this.isFormOpen = !this.isFormOpen;
+  }
+
+  @action
+  updateEmail(event) {
+    this.email = event.target.value;
+  }
+
+  @action
+  updatePhone(event) {
+    this.phone = event.target.value;
+    this.isPhoneValid = !this.phone || phoneNumberRegex.test(this.phone);
+  }
+
+  @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.showSubscribedMessage = true;
+          this.toast.success('🎉 Thankyou 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/join-section.module.css

@@ -41,6 +41,13 @@
   line-height: 175%;
 }
 
+.links__container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
 .join__link {
   display: inline-block;
   margin-top: 2rem;
@@ -54,11 +61,23 @@
   padding: 1.25rem 3rem;
 }
 
+.subscribe__link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+  padding: 1.125rem 3.75rem;
+}
+
 .join__link:hover {
   background-color: var(--color-pink);
   transition-duration: 250ms;
 }
 
+.subscribe__link span {
+  font-size: 1.125rem;
+}
+
 .join__link--new {
   background-color: var(--color-button-disabled);
   cursor: not-allowed;
@@ -126,6 +145,10 @@
     font-size: 1.25rem;
     padding: 1rem 2.5rem;
   }
+
+  .subscribe__link span {
+    font-size: 0.75rem;
+  }
 }
 
 @media (width <=425px) {
@@ -147,4 +170,8 @@
     font-size: 1rem;
     padding: 0.75rem 2rem;
   }
+
+  .subscribe__link span {
+    font-size: 0.75rem;
+  }
 }

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;
+}