naming convention resolved

app/components/mobile-dialog.hbs

@@ -1,8 +1,8 @@
-{{#if @dev}}
-  {{#if @deviceType}}
-    {{#if this.toShow}}
+{{#if @isDevEnv}}
+  {{#if @isMobileDevice}}
+    {{#if this.isDialogVisible}}
     <dialog data-test-mobile-dialog  class="mobile-dialog">
-        Open RDS in app
+        Redirect to RDS App
       <br/>
       <button id="mobile-dialog__close-button" type="button" {{on 'click' (fn this.closeDialog)}} >Cancle</button>
       <button id="mobile-dialog__open-button" type="button" {{on 'click' (fn this.openRDSApp)}}>Okay</button>

app/components/mobile-dialog.js

@@ -1,13 +1,14 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import ENV from 'website-my/config/environment';
 import { tracked } from '@glimmer/tracking';
 
 export default class MobileDialogComponent extends Component {
-  @tracked toShow = true;
+  @tracked isDialogVisible = true;
 
   @action
   closeDialog() {
-    this.toShow = false;
+    this.isDialogVisible = false;
   }
 
   @action
@@ -17,9 +18,8 @@ export default class MobileDialogComponent extends Component {
 
   openApp() {
     let isAppInstalled = false;
-    const appScheme = 'app://realdevsquad.com';
-    const fallbackURL =
-      'https://play.google.com/store/apps/details?id=com.github.android';
+    const appScheme = ENV.RDS_ANDROID_SCHEME;
+    const fallbackURL = ENV.ANDROID_GITHUB_URL;
     const userAgent = navigator.userAgent || navigator.vendor || window.opera;
     const MAXTIME = 1000;
 
@@ -29,7 +29,7 @@ export default class MobileDialogComponent extends Component {
       iframe.style.display = 'none';
       iframe.src = appScheme;
       document.body.appendChild(iframe);
-      this.toShow = false;
+      this.isDialogVisible = false;
 
       window.addEventListener('blur', function () {
         document.body.removeChild(iframe);
@@ -45,7 +45,7 @@ export default class MobileDialogComponent extends Component {
           document.body.removeChild(iframe);
           window.location.href = fallbackURL;
         }
-        this.toShow = false;
+        this.isDialogVisible = false;
       }, 1000);
     }
   }

app/controllers/application.js

@@ -10,7 +10,7 @@ export default class ApplicationController extends Controller {
   @service router;
   @service featureFlag;
   @service toast;
-  @tracked toVisible = this.checkDeviceType();
+  @tracked isMobileDevice = this.detectMobileDevice();
 
   GITHUB_URL = GITHUB_URL;
   BASE_API_URL = ENV.BASE_API_URL;
@@ -40,7 +40,7 @@ export default class ApplicationController extends Controller {
     }
   }
 
-  checkDeviceType() {
+  detectMobileDevice() {
     let regexp = /android|iphone|kindle|ipad/i;
     let details = navigator.userAgent;
     let isMobileDevice = regexp.test(details);

app/styles/components/mobile-dialog.css

@@ -1,6 +1,6 @@
 .mobile-dialog {
     display: block;
-    border-radius: 3px;
+    border-radius: 4px;
     padding: 0.5rem 1rem;
     font-weight: 900;
     margin: 0 auto;
@@ -14,7 +14,7 @@
       margin: 1rem;
       font-size:medium;
       border: none;
-      border-radius: 3px;
+      border-radius: 4px;
       color: var(--body-bg-color);
       font-weight: 600;
     }

app/templates/application.hbs

@@ -1,8 +1,8 @@
 {{page-title "My | Real Dev Squad"}}
 
 <MobileDialog
-@dev ={{this.isDevMode}}
-@deviceType = {{this.toVisible}}
+@isDevEnv = {{this.isDevMode}}
+@isMobileDevice = {{this.isMobileDevice}}
 />
 <Navbar
   @firstName={{@model.firstName}}

config/environment.js

@@ -26,6 +26,9 @@ module.exports = function (environment) {
 
   ENV.BASE_API_URL = 'https://api.realdevsquad.com';
   ENV.MIXPANEL_TOKEN = process.env.MIXPANEL_TOKEN || 'DUMMY_TOKEN';
+  ENV.ANDROID_GITHUB_URL =
+    'https://play.google.com/store/apps/details?id=com.github.android';
+  ENV.RDS_ANDROID_SCHEME = 'app://realdevsquad.com';
 
   if (environment === 'development') {
     ENV.BASE_API_URL = 'http://localhost:3000';

tests/integration/components/mobile-dialog-test.js

@@ -8,8 +8,8 @@ module('Integration | Component | mobile-dialog', function (hooks) {
 
   test('Mobile-Dialog does not renders', async function (assert) {
     this.setProperties({
-      dev: false,
-      deviceType: false,
+      isDevEnv: false,
+      isMobileDevice: false,
     });
     await render(hbs`<MobileDialog @dev={{this.dev}}/>`);
 
@@ -18,12 +18,12 @@ module('Integration | Component | mobile-dialog', function (hooks) {
 
   test('Mobile-Dialog should renders', async function (assert) {
     this.setProperties({
-      dev: true,
-      deviceType: true,
+      isDevEnv: true,
+      isMobileDevice: true,
     });
 
     await render(
-      hbs`<MobileDialog @dev={{this.dev}} @deviceType={{this.deviceType}}  />`
+      hbs`<MobileDialog @isDevEnv={{this.isDevEnv}} @isMobileDevice={{this.isMobileDevice}}  />`
     );
 
     assert.dom('[data-test-mobile-dialog]').exists();