Added Open RDS app from my-site (#506)

* Added Open RDS app from my-site

* Removed service and added Test case to verify dialog

* Added Feature flag, Refactored code

* Refactored test cases

* Resolved style and test case

* Refactored style

app/components/mobile-dialog.hbs

@@ -0,0 +1,12 @@
+{{#if @dev}}
+  {{#if @deviceType}}
+    {{#if this.toShow}}
+    <dialog data-test-mobile-dialog  class="mobile-dialog">
+        Open RDS in 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>
+    </dialog>
+    {{/if}}
+  {{/if}}
+{{/if}}

app/components/mobile-dialog.js

@@ -0,0 +1,52 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class MobileDialogComponent extends Component {
+  @tracked toShow = true;
+
+  @action
+  closeDialog() {
+    this.toShow = false;
+  }
+
+  @action
+  openRDSApp() {
+    this.openApp();
+  }
+
+  openApp() {
+    let isAppInstalled = false;
+    const appScheme = 'app://realdevsquad.com';
+    const fallbackURL =
+      'https://play.google.com/store/apps/details?id=com.github.android';
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+    const MAXTIME = 1000;
+
+    if (/android/i.test(userAgent)) {
+      const startTime = Date.now();
+      const iframe = document.createElement('iframe');
+      iframe.style.display = 'none';
+      iframe.src = appScheme;
+      document.body.appendChild(iframe);
+      this.toShow = false;
+
+      window.addEventListener('blur', function () {
+        document.body.removeChild(iframe);
+
+        const timeTaken = Date.now() - startTime;
+        if (timeTaken <= MAXTIME) {
+          isAppInstalled = true;
+        }
+      });
+
+      setTimeout(function () {
+        if (!isAppInstalled) {
+          document.body.removeChild(iframe);
+          window.location.href = fallbackURL;
+        }
+        this.toShow = false;
+      }, 1000);
+    }
+  }
+}

app/controllers/application.js

@@ -1,18 +1,26 @@
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
 import { MAIN_SITE_URL } from '../constants/url';
 import { action } from '@ember/object';
 import { GITHUB_URL } from '../constants/url';
 import ENV from 'website-my/config/environment';
 
 export default class ApplicationController extends Controller {
   @service router;
+  @service featureFlag;
+  @tracked toVisible = this.checkDeviceType();
+
   GITHUB_URL = GITHUB_URL;
   BASE_API_URL = ENV.BASE_API_URL;
   get canShowNavBar() {
     return this.router.currentRouteName != 'signup';
   }
 
+  get isDevMode() {
+    return this.featureFlag.isDevMode;
+  }
+
   @action async signOutHandler() {
     try {
       const response = await fetch(`${this.BASE_API_URL}/auth/signout`, {
@@ -27,4 +35,16 @@ export default class ApplicationController extends Controller {
       console.error('Error: ', err);
     }
   }
+
+  checkDeviceType() {
+    let regexp = /android|iphone|kindle|ipad/i;
+    let details = navigator.userAgent;
+    let isMobileDevice = regexp.test(details);
+
+    if (isMobileDevice) {
+      return true;
+    } else {
+      return false;
+    }
+  }
 }

app/styles/app.css

@@ -19,6 +19,7 @@
 @import 'qrcode.css';
 @import 'progress-bar.css';
 @import 'mobile.css';
+@import 'components/mobile-dialog.css';
 
 html,
 body {
@@ -40,7 +41,7 @@ body {
 .main-container {
   margin: 0;
   padding: 0;
-  flex: 100%;
+  flex: 100%;            
   display: flex;
   flex-direction: column;
 }

app/styles/components/mobile-dialog.css

@@ -0,0 +1,30 @@
+.mobile-dialog {
+    display: block;
+    border-radius: 3px;
+    padding: 0.5rem 1rem;
+    font-weight: 900;
+    margin: 0 auto;
+    font-size:large;
+    text-align: center;
+    background-color: var(--form--bg);
+    border: none;
+    box-shadow: 4px 8px 8px var(--mobile-dialog-box-shadow);
+    & button {
+      padding: 0.5rem 1rem;
+      margin: 1rem;
+      font-size:medium;
+      border: none;
+      border-radius: 3px;
+      color: var(--body-bg-color);
+      font-weight: 600;
+    }
+  }
+
+  #mobile-dialog__open-button {
+    background-color: var(--mobile-dialog--open-button);
+  }
+
+  #mobile-dialog__close-button {
+    background-color: var(--body-bg-color);
+    color: var(--landing-page--main-heading);
+  }

app/styles/variables.css

@@ -181,4 +181,7 @@
   --profile-edit-btn-clr: #1e429f;
   --profile-disabled-btn-bg-clr: #e5efeb;
   --profile-disabled-btn-text-clr: #9ca3af;
+
+  --mobile-dialog-box-shadow: hsl(0deg 0% 0% / 0.38);
+  --mobile-dialog--open-button: #1d1283;
 }

app/templates/application.hbs

@@ -1,16 +1,20 @@
 {{page-title "My | Real Dev Squad"}}
 
+<MobileDialog
+@dev ={{this.isDevMode}}
+@deviceType = {{this.toVisible}}
+/>
 <Navbar
   @firstName={{@model.firstName}}
   @profilePictureURL={{@model.profilePictureURL}}
   @signOutHandler={{this.signOutHandler}}
 />
 
 <div class="main-container">
-  {{outlet}}
+    {{outlet}}
 </div>
 <footer class="footer">Contents of this website are deployed from this
-  <a href={{this.GITHUB_URL}} target="_blank" rel="noopener noreferrer">
-    open sourced repo
-  </a>
+    <a href={{this.GITHUB_URL}} target="_blank" rel="noopener noreferrer">
+      open sourced repo
+    </a>
 </footer>

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

@@ -0,0 +1,31 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | mobile-dialog', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('Mobile-Dialog does not renders', async function (assert) {
+    this.setProperties({
+      dev: false,
+      deviceType: false,
+    });
+    await render(hbs`<MobileDialog @dev={{this.dev}}/>`);
+
+    assert.dom('[data-test-mobile-dialog]').doesNotExist();
+  });
+
+  test('Mobile-Dialog should renders', async function (assert) {
+    this.setProperties({
+      dev: true,
+      deviceType: true,
+    });
+
+    await render(
+      hbs`<MobileDialog @dev={{this.dev}} @deviceType={{this.deviceType}}  />`
+    );
+
+    assert.dom('[data-test-mobile-dialog]').exists();
+  });
+});