[HOT FIX] change phonNumber to phone to hide from user/self API

app/components/header.hbs

@@ -52,9 +52,6 @@
           href={{this.STATUS_URL}}
         >Status</a></li>
         {{#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/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/controllers/subscribe.js

@@ -4,6 +4,7 @@ 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;
@@ -13,6 +14,8 @@ export default class SubscribeController extends Controller {
   @tracked userData = null;
   @tracked isLoading = false;
   @tracked showSubscribedMessage = false;
+  @service toast;
+  @tracked isPhoneValid = true;
 
   RDS_TWITTER = RDS_TWITTER;
 
@@ -30,7 +33,8 @@ export default class SubscribeController extends Controller {
   }
 
   get isSubmitDisabled() {
-    return !this.email || (this.phone && !/^\+?\d*$/.test(this.phone));
+    const isPhoneValid = !this.phone || phoneNumberRegex.test(this.phone);
+    return !this.email || !isPhoneValid;
   }
 
   @action
@@ -45,11 +49,8 @@ export default class SubscribeController extends Controller {
 
   @action
   updatePhone(event) {
-    const input = event.target.value;
-    const isValidPhone = /^\+?\d*$/.test(input);
-    if (isValidPhone) {
-      this.phone = input;
-    }
+    this.phone = event.target.value;
+    this.isPhoneValid = !this.phone || phoneNumberRegex.test(this.phone);
   }
 
   @action
@@ -63,7 +64,7 @@ export default class SubscribeController extends Controller {
           method: 'POST',
           body: JSON.stringify({
             email: this.email,
-            phoneNumber: this.phone,
+            phone: this.phone,
           }),
           headers: {
             'Content-Type': 'application/json',
@@ -80,7 +81,7 @@ export default class SubscribeController extends Controller {
           this.login.userData.isSubscribed = true;
           this.isFormOpen = false;
           this.showSubscribedMessage = true;
-          this.toast.info('🎉 You are already subscribed!', '', TOAST_OPTIONS);
+          this.toast.success('🎉 Thankyou for subscribing!', '', TOAST_OPTIONS);
         }
       } catch (error) {
         console.log(error);

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/subscribe.module.css

@@ -146,6 +146,10 @@
   color: #374151;
 }
 
+.input__group input::placeholder {
+  color: #6b7280;
+}
+
 .input__group input {
   padding: 0.75rem;
   border: 1px solid #d1d5db;
@@ -155,7 +159,12 @@
   font-weight: 400;
   line-height: 17.5px;
   text-align: left;
-  color: #6b7280;
+  color: #000;
+}
+
+.invalid-input {
+  border-color: #dc2626;
+  color: red;
 }
 
 .submit__btn {

app/templates/subscribe.hbs

@@ -16,20 +16,19 @@
             <form {{on "submit" this.handleSubmit}}>
               <div class="input__group">
                 <label for="email">Email Address</label>
-                <input type="email" id="email" placeholder="eg: [email protected]" required value={{this.email}} {{on "input" this.updateEmail}} />
-              </div>
-
-              <div class="input__group">
-                <label for="phone">Phone Number <span class="input__group__span">(Optional)</span></label>
-                <input 
-                  type="text" 
-                  id="phone"
-                  value={{this.phone}} 
-                  {{on "input" this.updatePhone}}
-                  placeholder="eg: +91 1234567890"
-                >
+                <input type="email" id="email" placeholder="eg: [email protected]" required value={{this.email}} {{on "input" this.updateEmail}} />
               </div>
 
+             <div class="input__group">
+              <label for="phone" class="{{if this.isPhoneValid '' 'invalid-input'}}">Phone Number <span class="input__group__span" >(Optional)</span></label>
+              <input 
+                type="tel" 
+                id="phone"
+                value="{{this.phone}}"
+                {{on "input" this.updatePhone}}
+                placeholder="Please enter with the country code (e.g., +91 1234567890)."
+              >
+            </div>
               <button class="notify__btn subscribe__button" disabled={{this.isSubmitDisabled}} type="submit">{{#if this.isLoading}} Subscribing... {{else}} Subscribe {{/if}}</button>
             </form>
           </div>