Merge branch 'develop' into chore/mobile-feature-flag

Author: Achintya-Chatterjee

app/components/spinner.hbs

@@ -1 +1 @@
-<i class="fa fa-spinner fa-spin spinner" ...attributes></i>
+<i class="fa fa-spinner fa-spin" ...attributes></i>

app/components/user-status.js

@@ -70,7 +70,7 @@ export default class UserStatusComponent extends Component {
 
   @action async cancelOOOStatus(status) {
     if (status === USER_STATES.OOO) {
-      await this.args.updateStatus({ cancelOOOStatus: true });
+      await this.args.updateStatus({ cancelOoo: true });
     }
   }
 }

app/constants/apis.js

@@ -18,6 +18,8 @@ export const APPLICATION_ID_LINK = (id) => {
   return `${APPS.DASHBOARD}/applications/?id=${id}`;
 };
 
+export const SELF_USER_STATUS_URL = `${APPS.API_BACKEND}/users/status/self`;
+
 export const UPDATE_USER_STATUS = `${APPS.API_BACKEND}/users/status/self?userStatusFlag=true`;
 
 export const UPDATE_USER_STATUS_FOR_DEV = `${APPS.API_BACKEND}/requests?dev=true`;

app/constants/user-status.js

@@ -10,6 +10,8 @@ export const FUTURE_STATUS_UPDATE_SUCCESS =
   'Future status updated successfully.';
 export const STATUS_UPDATE_FAILURE_MESSAGE =
   'Status Update failed. Something went wrong.';
+export const STATUS_NOT_EXIST_FAILURE_MESSAGE =
+  "Your Status data doesn't exist yet. Please choose your status from the options below.";
 export const OOO_STATUS_REQUEST_FAILURE_MESSAGE =
   'OOO status request failed. Something went wrong.';
 export const USER_STATES = {

app/controllers/status.js

@@ -31,7 +31,7 @@ export default class StatusController extends Controller {
 
   @action async updateStatus(newStatus) {
     this.isStatusUpdating = true;
-    if (!('cancelOOOStatus' in newStatus)) {
+    if (!('cancelOoo' in newStatus)) {
       if (newStatus.currentStatus.state !== USER_STATES.ACTIVE) {
         this.toggleUserStateModal();
       }

app/routes/status.js

@@ -2,34 +2,33 @@ import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 import fetch from 'fetch';
 import redirectAuth from '../utils/redirect-auth';
-import { USER_STATES } from '../constants/user-status';
-import { APPS } from '../constants/urls';
+import {
+  STATUS_NOT_EXIST_FAILURE_MESSAGE,
+  USER_STATES,
+} from '../constants/user-status';
 import { TOAST_OPTIONS } from '../constants/toast-options';
-const BASE_URL = APPS.API_BACKEND;
+import { ERROR_MESSAGES } from '../constants/error-messages';
+import { SELF_USER_STATUS_URL } from '../constants/apis';
 
 export default class StatusRoute extends Route {
   @service toast;
   @service router;
 
   async model() {
     try {
-      const response = await fetch(`${BASE_URL}/users/status/self`, {
+      const response = await fetch(SELF_USER_STATUS_URL, {
         credentials: 'include',
       });
       const userData = await response.json();
       if (response.status === 200) {
         return userData?.data?.currentStatus?.state ?? USER_STATES.DNE;
       } else if (response.status === 401) {
-        this.toast.error(
-          'You are not logged in. Please login to continue.',
-          'Error!',
-          TOAST_OPTIONS,
-        );
+        this.toast.error(ERROR_MESSAGES.notLoggedIn, 'Error!', TOAST_OPTIONS);
         // added setTimeout here because before new page opens user should be notified of error by toast
         setTimeout(redirectAuth, 2000);
       } else if (response.status === 404) {
         this.toast.error(
-          "Your Status data doesn't exist yet. Please choose your status from the options below.",
+          STATUS_NOT_EXIST_FAILURE_MESSAGE,
           'Error!',
           TOAST_OPTIONS,
         );

app/styles/app.css

@@ -101,31 +101,10 @@ button {
 }
 
 .loading {
+  width: 100%;
+  height: 70vh;
   display: flex;
-  flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 90vh;
-  width: 100%;
-  text-align: center;
-}
-
-.spinner {
-  display: inline-block;
-  width: 1.875 rem;
-  height: 1.875 rem;
-  border: 4px solid rgb(0 0 0 / 30%);
-  border-radius: 50%;
-  border-top: 4px solid var(--color-black);
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
+  font-size: 2rem;
 }

tests/integration/components/user-status-test.js

@@ -77,8 +77,8 @@ module('Integration | Component | user-status', function (hooks) {
       isStatusUpdating: false,
       changeStatus: () => {},
       updateStatus: (cancelOOOPayload) => {
-        const { cancelOOOStatus } = cancelOOOPayload;
-        assert.true(cancelOOOStatus, 'cancel OOO status');
+        const { cancelOoo } = cancelOOOPayload;
+        assert.true(cancelOoo, 'cancel OOO status');
       },
     });
     await render(hbs`

tests/unit/controllers/status-test.js

@@ -3,8 +3,7 @@ import { setupTest } from 'website-www/tests/helpers';
 import { USER_STATES } from 'website-www/constants/user-status';
 import Service from '@ember/service';
 import sinon from 'sinon';
-import { APPS } from 'website-www/constants/urls';
-const API_BASE_URL = APPS.API_BACKEND;
+import { UPDATE_USER_STATUS } from 'website-www/constants/apis';
 
 class MockToastService extends Service {
   success() {}
@@ -60,9 +59,7 @@ module('Unit | Controller | status', function (hooks) {
 
     assert.ok(this.fetchStub.calledOnce, 'Fetch was called once');
     assert.ok(
-      this.fetchStub.calledWith(
-        `${API_BASE_URL}/users/status/self?userStatusFlag=true`,
-      ),
+      this.fetchStub.calledWith(UPDATE_USER_STATUS),
       'Fetch was called with the correct URL',
     );
   });

tests/unit/routes/status-test.js

@@ -2,8 +2,7 @@ import { module, test } from 'qunit';
 import { setupTest } from 'website-www/tests/helpers';
 import sinon from 'sinon';
 import { USER_STATES } from 'website-www/constants/user-status';
-import { APPS } from 'website-www/constants/urls';
-const API_BASE_URL = APPS.API_BACKEND;
+import { SELF_USER_STATUS_URL } from 'website-www/constants/apis';
 
 module('Unit | Route | status', function (hooks) {
   setupTest(hooks);
@@ -38,7 +37,7 @@ module('Unit | Route | status', function (hooks) {
     const result = await this.route.model();
 
     assert.ok(
-      this.fetchStub.calledOnceWith(`${API_BASE_URL}/users/status/self`),
+      this.fetchStub.calledOnceWith(SELF_USER_STATUS_URL),
       'Fetch called with correct URL',
     );
     assert.strictEqual(result, userStatus, 'Returns the user status from API');