dev to main sync

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/components/task/holder.js

@@ -16,20 +16,14 @@ export default class TasksHolderComponent extends Component {
 
   get taskStatusList() {
     const statusToDisplay = this.availabletaskStatusList.filter(
-      (taskStatus) => {
-        if (this.args.dev === true) {
-          return taskStatus.key !== 'ALL' && taskStatus.key !== 'COMPLETED';
-        } else {
-          return taskStatus.key !== 'ALL' && taskStatus.key !== 'DONE';
-        }
-      }
+      (taskStatus) => taskStatus.key !== 'ALL'
     );
     return statusToDisplay;
   }
 
   get taskStyleClass() {
     const statusNotOverDueList = [
-      this.args.dev === true ? TASK_KEYS.DONE : TASK_KEYS.COMPLETED,
+      TASK_KEYS.DONE,
       TASK_KEYS.VERIFIED,
       TASK_KEYS.AVAILABLE,
     ];

app/constants/tasks.js

@@ -5,7 +5,6 @@ const TASK_KEYS = {
   IN_PROGRESS: 'IN_PROGRESS',
   BLOCKED: 'BLOCKED',
   SMOKE_TESTING: 'SMOKE_TESTING',
-  COMPLETED: 'COMPLETED',
   DONE: 'DONE',
   NEEDS_REVIEW: 'NEEDS_REVIEW',
   IN_REVIEW: 'IN_REVIEW',
@@ -24,7 +23,6 @@ const {
   IN_PROGRESS,
   BLOCKED,
   SMOKE_TESTING,
-  COMPLETED,
   DONE,
   NEEDS_REVIEW,
   IN_REVIEW,
@@ -61,10 +59,6 @@ const TASK_STATUS_LIST = [
     displayLabel: 'Smoke Testing',
     key: SMOKE_TESTING,
   },
-  {
-    displayLabel: 'Completed',
-    key: COMPLETED,
-  },
   {
     displayLabel: 'Done',
     key: DONE,

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/controllers/tasks.js

@@ -16,7 +16,6 @@ const API_BASE_URL = ENV.BASE_API_URL;
 export default class TasksController extends Controller {
   queryParams = ['dev'];
   @service toast;
-  @service featureFlag;
   TASK_KEYS = TASK_KEYS;
   taskStatusList = TASK_STATUS_LIST;
   tabsTaskStatusList = TABS_TASK_STATUS_LIST;
@@ -43,10 +42,6 @@ export default class TasksController extends Controller {
   @tracked showFetchButton = this.isShowFetchButton() && !this.alreadyFetched;
   alreadyFetched = localStorage.getItem('already-fetched');
 
-  get isDevMode() {
-    return this.featureFlag.isDevMode;
-  }
-
   @action toggleDropDown() {
     this.showDropDown = !this.showDropDown;
   }
@@ -98,9 +93,7 @@ export default class TasksController extends Controller {
     const taskCompletionPercentage = object.percentCompleted;
     if (taskCompletionPercentage) {
       if (taskCompletionPercentage === TASK_PERCENTAGE.completedPercentage) {
-        this.isDevMode === true
-          ? (requestBody.status = 'DONE')
-          : (requestBody.status = 'COMPLETED');
+        requestBody.status = 'DONE';
       }
       requestBody.percentCompleted = parseInt(taskCompletionPercentage);
     }

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

tests/integration/components/tasks/holder-test.js

@@ -199,41 +199,6 @@ module('Integration | Component | Tasks Holder', function (hooks) {
     @disabled={{this.disabled}}
   />`);
 
-    assert
-      .dom('[data-test-task-status-select]')
-      .hasValue(TASK_KEYS.IN_PROGRESS);
-
-    await select('[data-test-task-status-select]', TASK_KEYS.COMPLETED);
-
-    assert
-      .dom('[data-test-task-status-select]')
-      .hasValue(TASK_KEYS.IN_PROGRESS);
-  });
-
-  test('Verify values of task status upon api failures under feature flag', async function (assert) {
-    const testTask = tasksData[3];
-    testTask.status = TASK_KEYS.IN_PROGRESS;
-
-    this.set('task', testTask);
-    this.set('mock', () => {});
-    this.set('onTaskUpdate', (taskId, error) => {
-      error();
-    });
-    this.set('isLoading', false);
-    this.set('disabled', false);
-    this.set('defaultType', DEFAULT_TASK_TYPE);
-    this.set('dev', true);
-
-    await render(hbs`<Task::Holder
-    @task={{this.task}}
-    @onTaskChange={{this.mock}}
-    @onStausChange={{this.mock}}
-    @onTaskUpdate={{this.onTaskUpdate}}
-    @userSelectedTask={{this.defaultType}}
-    @disabled={{this.disabled}}
-    @dev={{this.dev}}
-  />`);
-
     assert
       .dom('[data-test-task-status-select]')
       .hasValue(TASK_KEYS.IN_PROGRESS);
@@ -284,7 +249,6 @@ module('Integration | Component | Tasks Holder', function (hooks) {
     this.set('isLoading', false);
     this.set('disabled', false);
     this.set('defaultType', DEFAULT_TASK_TYPE);
-    this.set('dev', true);
 
     await render(hbs`<Task::Holder
     @task={{this.task}} 
@@ -294,7 +258,6 @@ module('Integration | Component | Tasks Holder', function (hooks) {
     @isLoading={{this.isLoading}} 
     @userSelectedTask={{this.defaultType}} 
     @disabled={{this.disabled}}
-    @dev={{this.dev}}
   />`);
 
     assert.dom('[data-test-task-status-select]').exists();