Merge pull request #647 from avantifellows/locale_popup_disable_for_tap

Added setting for removing language popup for org plios

src/App.vue

@@ -173,7 +173,13 @@
     <!-- first-time language picker -->
     <div
       class="fixed w-full top-1/4 my-5 flex justify-center"
-      v-if="showLanguagePickerDialog"
+      v-if="(
+        // if user is not SSO user, everything works as defined in this file
+        // if user is SSO user, we take up the setting provided by the org,
+        // and if the setting is not to show language picker, it won't be shown
+        (checkIfIsSSOUser && isFirstTimeLanguagePickerShownBySetting) ||
+        (!checkIfIsSSOUser && showLanguagePickerDialog)
+      )"
     >
       <div
         class="bg-white w-11/12 sm:w-9/12 lg:w-7/12 p-4 sm:p-10 rounded-lg border border-black"
@@ -266,6 +272,7 @@ import UserAPIService from "@/services/API/User.js";
 import OrganizationAPIService from "@/services/API/Organization.js";
 import { mapActions, mapState, mapGetters } from "vuex";
 import { useToast } from "vue-toastification";
+import globalDefaultSettings from "@/services/Config/GlobalDefaultSettings.js";
 
 let clonedeep = require("lodash.clonedeep");
 
@@ -511,18 +518,50 @@ export default {
         let setting = updatedSettings[key];
 
         if (setting.isWorkspaceSetting) {
-          if (newWorkspaceSettings == null)
-            newWorkspaceSettings = clonedeep(this.activeWorkspaceSettings);
-          newWorkspaceSettings
-            .get(setting.headerName)
-            .children.get(setting.tabName)
-            .children.get(setting.leafName).value = setting.newValue;
+          if (newWorkspaceSettings == null) newWorkspaceSettings = clonedeep(this.activeWorkspaceSettings);
+          if (newWorkspaceSettings.has(setting.headerName) == false) {
+            newWorkspaceSettings.set(setting.headerName, clonedeep(globalDefaultSettings.get(setting.headerName)));
+          }
+          const header = newWorkspaceSettings.get(setting.headerName);
+          if (header.children.has(setting.tabName) == false) {
+            header.children.set(
+              setting.tabName,
+              clonedeep(globalDefaultSettings.get(setting.headerName).children.get(setting.tabName))
+            );
+          }
+          const tab = header.children.get(setting.tabName);
+          if (tab.children.has(setting.leafName) == false) {
+            tab.children.set(
+              setting.leafName,
+              clonedeep(globalDefaultSettings.get(setting.headerName).children.get(setting.tabName).children.get(setting.leafName))
+            );
+          }
+          tab.children.get(setting.leafName).value = setting.newValue;
         } else {
           if (newUserSettings == null) newUserSettings = clonedeep(this.userSettings);
-          newUserSettings
-            .get(setting.headerName)
-            .children.get(setting.tabName)
-            .children.get(setting.leafName).value = setting.newValue;
+          // newUserSettings
+          //   .get(setting.headerName)
+          //   .children.get(setting.tabName)
+          //   .children.get(setting.leafName).value = setting.newValue;
+
+          if (newUserSettings.has(setting.headerName) == false) {
+            newUserSettings.set(setting.headerName, clonedeep(globalDefaultSettings.get(setting.headerName)));
+          }
+          const header = newUserSettings.get(setting.headerName);
+          if (header.children.has(setting.tabName) == false) {
+            header.children.set(
+              setting.tabName,
+              clonedeep(globalDefaultSettings.get(setting.headerName).children.get(setting.tabName))
+            );
+          }
+          const tab = header.children.get(setting.tabName);
+          if (tab.children.has(setting.leafName) == false) {
+            tab.children.set(
+              setting.leafName,
+              clonedeep(globalDefaultSettings.get(setting.headerName).children.get(setting.tabName).children.get(setting.leafName))
+            );
+          }
+          tab.children.get(setting.leafName).value = setting.newValue;
         }
       });
 
@@ -810,7 +849,7 @@ export default {
       "userRoleInActiveWorkspace",
       "activeWorkspaceId",
     ]),
-    ...mapGetters("generic", ["isMobileScreen"]),
+    ...mapGetters("generic", ["isMobileScreen", "isFirstTimeLanguagePickerShownBySetting"]),
     ...mapState("auth", ["config", "user", "activeWorkspace", "userId", "userSettings"]),
     ...mapState("generic", [
       "isSharePlioDialogShown",
@@ -1137,19 +1176,28 @@ export default {
     onLoginPage() {
       return this.$route.name == "Login";
     },
+    checkIfIsSSOUser() {
+      const output = (
+        "api_key" in this.$route.query &&
+        "unique_id" in this.$route.query
+      )
+      return output
+    },
     /**
      * whether the background should be disabled
      */
     isBackgroundDisabled() {
-      return (
-        this.showLanguagePickerDialog ||
+      const output = (
+        (this.checkIfIsSSOUser && this.isFirstTimeLanguagePickerShownBySetting) ||
+        (!this.checkIfIsSSOUser && this.showLanguagePickerDialog) ||
         this.isSharePlioDialogShown ||
         this.isEmbedPlioDialogShown ||
         this.isDialogBoxShown ||
         this.isSpinnerShown ||
         this.isSettingsMenuShown ||
         this.isSingleSelectorShown
       );
+      return output
     },
     /**
      * list of shortcodes of all workspaces that the user is a part of

src/assets/locales/en.js

@@ -571,9 +571,13 @@ export default {
     menu: {
       title: {
         skipEnabled: "Viewers can skip questions while attempting plios",
+        firstTimeLanguagePickerPopup:
+          "Viewers will see the language picker on first login",
       },
       description: {
         skipEnabled: "Provide viewers the option to skip a question",
+        firstTimeLanguagePickerPopup:
+          "Your users will see the language picker on their first login. This sets what language they will see the platform in. Currently only two values, English and Hindi, are supported.",
       },
       info:
         "The new settings will only apply to plios created in the future and not the existing plios",
@@ -584,6 +588,7 @@ export default {
       },
       tab: {
         configuration: "Configuration",
+        ui: "UI",
       },
     },
     badge: {

src/assets/locales/hi.js

@@ -573,9 +573,14 @@ export default {
       title: {
         skipEnabled:
           "प्लायो का प्रयास करते समय दर्शक प्रश्नों को छोड़ सकते हैं",
+        // firstTimeLanguagePickerPopup: "Viewers will see the language picker on first login",
+        firstTimeLanguagePickerPopup:
+          "दर्शकों को पहली बार लॉगिन करते समय भाषा चुनने का विकल्प प्रदान करें",
       },
       description: {
         skipEnabled: "दर्शकों को प्रश्न छोड़ने का विकल्प प्रदान करें",
+        firstTimeLanguagePickerPopup:
+          "आपके दर्शक अपनी पहली लॉगिन पर भाषा चुनने का विकल्प देखेंगे। यह निर्धारित करता है कि वे प्लेटफ़ॉर्म को किस भाषा में देखेंगे। वर्तमान में केवल दो, अंग्रेजी और हिंदी, का समर्थन किया जाता है।",
       },
       info:
         "नई सेटिंग्स केवल भविष्य में बनाए जाने वाले प्लायो पर लागू होंगी, न कि पहले से बनाए गए प्लायो पर",
@@ -586,6 +591,7 @@ export default {
       },
       tab: {
         configuration: "विन्यास",
+        ui: "यूआई",
       },
     },
     badge: {

src/pages/Embeds/Plio.vue

@@ -281,6 +281,7 @@ export default {
 
           // if for some reason the API call didn't go through and there's no response
           // object, then redirect the user to a 404 page
+          console.log("error", error)
           if (error.response != undefined && error.response.status === 400) {
             this.$router.replace({
               name: "Player",
@@ -362,6 +363,9 @@ export default {
     numItems() {
       return this.items.length;
     },
+    shouldFirstTimeLanguagePickerBeShown() {
+      return this.uiSettings.get("firstTimeLanguagePickerPopup").value;
+    },
     isSkipEnabled() {
       // if a custom configuration is provided, then use that otherwise
       // use the global settings
@@ -375,6 +379,12 @@ export default {
     configuration() {
       return this.plioSettings.get("player").children.get("configuration").children;
     },
+    defaultUISettings() {
+      return globalDefaultSettings.get("player").children.get("ui").children;
+    },
+    uiSettings() {
+      return this.plioSettings.get("player").children.get("ui").children;
+    },
     /**
      * whether player has the correct aspect ratio as desired
      */
@@ -554,6 +564,7 @@ export default {
     },
   },
   methods: {
+    ...mapActions("generic", ["unsetFirstTimeLanguagePickerShownBySetting"]),
     ...mapActions("auth", ["setAccessToken", "setActiveWorkspace"]),
     /**
      * @param {Number} itemIndex - the index of the item whose response is to be checked
@@ -847,6 +858,11 @@ export default {
           this.videoId = this.getVideoIDfromURL(plioDetails.videoURL);
           this.plioTitle = plioDetails.plioTitle;
           this.plioSettings = SettingsUtilities.setPlioSettings(plioDetails.config);
+
+          // apply the setting of showing the first time language picker or not
+          if (
+            !this.shouldFirstTimeLanguagePickerBeShown
+          ) this.unsetFirstTimeLanguagePickerShownBySetting();
         })
         .then(() => this.createSession())
         .then(() => this.logData());

src/services/Config/GlobalDefaultSettings.js

@@ -16,6 +16,11 @@ export let settingsMetadata = {
     description: "settings.menu.description.skipEnabled",
     type: "checkbox",
   },
+  firstTimeLanguagePickerPopup: {
+    title: "settings.menu.title.firstTimeLanguagePickerPopup",
+    description: "settings.menu.description.firstTimeLanguagePickerPopup",
+    type: "checkbox",
+  },
 };
 
 /**
@@ -51,6 +56,17 @@ let globalDefaultSetings = new Map(
               })
             ),
           },
+          ui: {
+            scope: ["org-admin", "super-admin"],
+            children: new Map(
+              Object.entries({
+                firstTimeLanguagePickerPopup: {
+                  scope: ["org-admin", "super-admin"],
+                  value: true,
+                },
+              })
+            ),
+          },
         })
       ),
     },

src/services/Config/User.js

@@ -22,7 +22,7 @@ export default {
           userConfig["locale"] || process.env.VUE_APP_I18N_LOCALE;
         clearInterval(redirectId);
       }
-    }, 10);
+    }, 50);
   },
 
   updateLocale() {

src/store/modules/generic.js

@@ -1,4 +1,5 @@
 const state = {
+  isFirstTimeLanguagePickerShownBySetting: true,
   isSharePlioDialogShown: false,
   isEmbedPlioDialogShown: false, // whether to show the dialog with info on embedding plio
   plioLinkToShare: null,
@@ -22,6 +23,9 @@ const getters = {
   isTabScreen: (state) => {
     return state.windowInnerWidth < 640;
   },
+  isFirstTimeLanguagePickerShownBySetting: (state) => {
+    return state.isFirstTimeLanguagePickerShownBySetting;
+  },
 };
 const actions = {
   showSharePlioDialog({ commit, dispatch }, plioLink) {
@@ -59,6 +63,12 @@ const actions = {
   hideSpinner({ commit }) {
     commit("hideSpinner");
   },
+  setFirstTimeLanguagePickerShownBySetting({ commit }) {
+    commit("setFirstTimeLanguagePickerShownBySetting");
+  },
+  unsetFirstTimeLanguagePickerShownBySetting({ commit }) {
+    commit("unsetFirstTimeLanguagePickerShownBySetting");
+  },
 };
 
 const mutations = {
@@ -92,6 +102,12 @@ const mutations = {
   hideSpinner(state) {
     state.isSpinnerShown = false;
   },
+  setFirstTimeLanguagePickerShownBySetting(state) {
+    state.isFirstTimeLanguagePickerShownBySetting = true;
+  },
+  unsetFirstTimeLanguagePickerShownBySetting(state) {
+    state.isFirstTimeLanguagePickerShownBySetting = false;
+  },
 };
 
 export default {