Merge pull request #11492 from ozer550/Fix_Welcome_Modal_Message_Devi…

…ce_Learn_Page Fix Welcome Modal for different browser sessions
learningequality · Nov 16, 2023 · 4859a9a · 4859a9a
2 parents d70502b + 3bf129a
commit 4859a9a
Show file tree

Hide file tree

Showing 4 changed files with 189 additions and 178 deletions.
diff --git a/kolibri/plugins/device/assets/src/views/DeviceIndex.vue b/kolibri/plugins/device/assets/src/views/DeviceIndex.vue
@@ -16,12 +16,7 @@
       />
     </transition>
 
-    <transition name="delay-entry">
-      <PostSetupModalGroup
-        v-if="welcomeModalVisible"
-        @cancel="hideWelcomeModal"
-      />
-    </transition>
+
 
     <router-view />
   </NotificationsRoot>
@@ -40,17 +35,14 @@
   import redirectBrowser from 'kolibri.utils.redirectBrowser';
   import urls from 'kolibri.urls';
   import { PageNames } from '../constants';
-  import PostSetupModalGroup from './PostSetupModalGroup';
+
   import PinAuthenticationModal from './PinAuthenticationModal';
   import plugin_data from 'plugin_data';
 
-  const welcomeDismissalKey = 'DEVICE_WELCOME_MODAL_DISMISSED';
-
   export default {
     name: 'DeviceIndex',
     components: {
       NotificationsRoot,
-      PostSetupModalGroup,
       PinAuthenticationModal,
     },
     mixins: [commonCoreStrings],
@@ -63,9 +55,6 @@
     computed: {
       ...mapGetters(['isUserLoggedIn', 'userFacilityId']),
       ...mapState(['authenticateWithPin', 'grantPluginAccess']),
-      ...mapState({
-        welcomeModalVisibleState: 'welcomeModalVisible',
-      }),
       facilities() {
         return this.$store.state.core.facilities;
       },
@@ -82,12 +71,6 @@
           (plugin_data.allowGuestAccess && this.$store.getters.allowAccess) || this.isUserLoggedIn
         );
       },
-      welcomeModalVisible() {
-        return (
-          this.welcomeModalVisibleState &&
-          window.localStorage.getItem(welcomeDismissalKey) !== 'true'
-        );
-      },
       pageName() {
         return this.$route.name;
       },
@@ -111,10 +94,6 @@
       },
     },
     methods: {
-      hideWelcomeModal() {
-        window.localStorage.setItem(welcomeDismissalKey, true);
-        this.$store.commit('SET_WELCOME_MODAL_VISIBLE', false);
-      },
       closePinModal() {
         redirectBrowser(urls['kolibri:kolibri.plugins.learn:learn']());
         return (this.showModal = false);

diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/index.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/index.vue
@@ -1,6 +1,12 @@
 <template>
 
   <DeviceAppBarPage :title="pageTitle">
+    <transition name="delay<-entry">
+      <PostSetupModalGroup
+        v-if="!channelListLoading && welcomeModalVisible && !areChannelsImported"
+        @cancel="hideWelcomeModal"
+      />
+    </transition>
 
     <KPageContainer class="device-container">
 
@@ -94,11 +100,14 @@
   import { PageNames } from '../../constants';
   import HeaderWithOptions from '../HeaderWithOptions';
   import { deviceString } from '../commonDeviceStrings';
+  import PostSetupModalGroup from '../PostSetupModalGroup';
   import SelectTransferSourceModal from './SelectTransferSourceModal';
   import ChannelPanel from './ChannelPanel/WithSizeAndOptions';
   import DeleteChannelModal from './DeleteChannelModal';
   import TasksBar from './TasksBar';
 
+  const welcomeDismissalKey = 'DEVICE_WELCOME_MODAL_DISMISSED';
+
   export default {
     name: 'ManageContentPage',
     metaInfo() {
@@ -109,6 +118,7 @@
     components: {
       DeviceAppBarPage,
       ChannelPanel,
+      PostSetupModalGroup,
       DeleteChannelModal,
       HeaderWithOptions,
       SelectTransferSourceModal,
@@ -132,6 +142,9 @@
       ]),
       ...mapState('manageContent/wizard', ['pageName']),
       ...mapState('manageContent', ['channelListLoading']),
+      ...mapState({
+        welcomeModalVisibleState: 'welcomeModalVisible',
+      }),
       pageTitle() {
         return deviceString('deviceManagementTitle');
       },
@@ -166,6 +179,15 @@
           },
         ];
       },
+      welcomeModalVisible() {
+        return (
+          this.welcomeModalVisibleState &&
+          window.localStorage.getItem(welcomeDismissalKey) !== 'true'
+        );
+      },
+      areChannelsImported() {
+        return this.installedChannelsWithResources.length > 0;
+      },
     },
     watch: {
       installedChannelsWithResources: {
@@ -195,6 +217,10 @@
     },
     methods: {
       ...mapActions('manageContent', ['refreshChannelList', 'startImportWorkflow']),
+      hideWelcomeModal() {
+        window.localStorage.setItem(welcomeDismissalKey, true);
+        this.$store.commit('SET_WELCOME_MODAL_VISIBLE', false);
+      },
       handleSelect({ value }) {
         const nextRoute = {
           DELETE: PageNames.DELETE_CHANNELS,

diff --git a/kolibri/plugins/learn/assets/src/views/LearnIndex.vue b/kolibri/plugins/learn/assets/src/views/LearnIndex.vue
@@ -4,13 +4,6 @@
     :authorized="userIsAuthorized"
     authorizedRole="registeredUser"
   >
-    <transition name="delay-entry">
-      <PostSetupModalGroup
-        v-if="welcomeModalVisible"
-        isOnMyOwnUser
-        @cancel="hideWelcomeModal"
-      />
-    </transition>
     <router-view :loading="loading" />
   </NotificationsRoot>
 
@@ -23,30 +16,18 @@
   import NotificationsRoot from 'kolibri.coreVue.components.NotificationsRoot';
   import plugin_data from 'plugin_data';
   import { PageNames } from '../constants';
-  import PostSetupModalGroup from '../../../../device/assets/src/views/PostSetupModalGroup.vue';
-
-  const welcomeDismissalKey = 'DEVICE_WELCOME_MODAL_DISMISSED';
 
   export default {
     name: 'LearnIndex',
     components: {
       NotificationsRoot,
-      PostSetupModalGroup,
     },
     computed: {
       ...mapGetters(['isUserLoggedIn']),
-      ...mapState({
-        welcomeModalVisibleState: 'welcomeModalVisible',
-      }),
       ...mapState({
         loading: state => state.core.loading,
       }),
-      welcomeModalVisible() {
-        return (
-          this.welcomeModalVisibleState &&
-          window.localStorage.getItem(welcomeDismissalKey) !== 'true'
-        );
-      },
+
       userIsAuthorized() {
         if (this.pageName === PageNames.BOOKMARKS) {
           return this.isUserLoggedIn;
@@ -56,12 +37,7 @@
         );
       },
     },
-    methods: {
-      hideWelcomeModal() {
-        window.localStorage.setItem(welcomeDismissalKey, true);
-        this.$store.commit('SET_WELCOME_MODAL_VISIBLE', false);
-      },
-    },
+    methods: {},
   };
 
 </script>