From e1916f828225f3fdb3c147a03f15cb72f6055232 Mon Sep 17 00:00:00 2001
From: Dhruv Sharma <56362412+dhruv036@users.noreply.github.com>
Date: Thu, 23 Nov 2023 04:05:39 +0530
Subject: [PATCH] naming convention resolved (#528)

* naming convention resolved

* naming convention changes

* naming resolved
---
 app/components/mobile-dialog.hbs                   | 10 +++++-----
 app/components/mobile-dialog.js                    | 14 +++++++-------
 app/controllers/application.js                     |  4 ++--
 app/styles/components/mobile-dialog.css            |  4 ++--
 app/templates/application.hbs                      |  4 ++--
 config/environment.js                              |  3 +++
 tests/integration/components/mobile-dialog-test.js | 10 +++++-----
 7 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/app/components/mobile-dialog.hbs b/app/components/mobile-dialog.hbs
index 96ef3046..e8145324 100644
--- a/app/components/mobile-dialog.hbs
+++ b/app/components/mobile-dialog.hbs
@@ -1,10 +1,10 @@
-{{#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__close-button" type="button" {{on 'click' (fn this.closeDialog)}} >Cancel</button>
       <button id="mobile-dialog__open-button" type="button" {{on 'click' (fn this.openRDSApp)}}>Okay</button>
     </dialog>
     {{/if}}
diff --git a/app/components/mobile-dialog.js b/app/components/mobile-dialog.js
index 87a44996..23f968c4 100644
--- a/app/components/mobile-dialog.js
+++ b/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);
     }
   }
diff --git a/app/controllers/application.js b/app/controllers/application.js
index 93b6b412..a6d408b5 100644
--- a/app/controllers/application.js
+++ b/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);
diff --git a/app/styles/components/mobile-dialog.css b/app/styles/components/mobile-dialog.css
index 3f5d3d3d..901d7483 100644
--- a/app/styles/components/mobile-dialog.css
+++ b/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;
     }
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
index ff91e959..1d062460 100644
--- a/app/templates/application.hbs
+++ b/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}}
diff --git a/config/environment.js b/config/environment.js
index 5962ca27..798a2d1a 100644
--- a/config/environment.js
+++ b/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';
diff --git a/tests/integration/components/mobile-dialog-test.js b/tests/integration/components/mobile-dialog-test.js
index a6d05943..c0bc2883 100644
--- a/tests/integration/components/mobile-dialog-test.js
+++ b/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();