Before entering Main, check for showPolicy query param to show policy

contentcuration/contentcuration/frontend/accounts/pages/Create.vue

@@ -413,12 +413,11 @@
     },
     methods: {
       ...mapActions('account', ['register']),
-      ...mapActions('policies', ['openPolicy']),
       showTermsOfService() {
-        this.openPolicy(policies.TERMS_OF_SERVICE);
+        this.$router.push({ query: { showPolicy: policies.TERMS_OF_SERVICE } });
       },
       showPrivacyPolicy() {
-        this.openPolicy(policies.PRIVACY);
+        this.$router.push({ query: { showPolicy: policies.PRIVACY } });
       },
       showStorageField(id) {
         return id === uses.STORING && this.form.uses.includes(id);

contentcuration/contentcuration/frontend/accounts/pages/Main.vue

@@ -153,12 +153,11 @@
     },
     methods: {
       ...mapActions(['login']),
-      ...mapActions('policies', ['openPolicy']),
       showTermsOfService() {
-        this.openPolicy(policies.TERMS_OF_SERVICE);
+        this.$router.push({ query: { showPolicy: policies.TERMS_OF_SERVICE } });
       },
       showPrivacyPolicy() {
-        this.openPolicy(policies.PRIVACY);
+        this.$router.push({ query: { showPolicy: policies.PRIVACY } });
       },
       submit() {
         if (this.$refs.form.validate()) {

contentcuration/contentcuration/frontend/settings/pages/UsingStudio/index.vue

@@ -83,21 +83,19 @@
 
 <script>
 
-  import { mapActions } from 'vuex';
   import { policies } from 'shared/constants';
 
   export default {
     name: 'UsingStudio',
     methods: {
-      ...mapActions('policies', ['openPolicy']),
       showTermsOfService() {
-        this.openPolicy(policies.TERMS_OF_SERVICE);
+        this.$router.push({ query: { showPolicy: policies.TERMS_OF_SERVICE } });
       },
       showPrivacyPolicy() {
-        this.openPolicy(policies.PRIVACY);
+        this.$router.push({ query: { showPolicy: policies.PRIVACY } });
       },
       showCommunityStandards() {
-        this.openPolicy(policies.COMMUNITY_STANDARDS);
+        this.$router.push({ query: { showPolicy: policies.COMMUNITY_STANDARDS } });
       },
     },
     $trs: {

contentcuration/contentcuration/frontend/settings/pages/__tests__/usingStudio.spec.js

@@ -1,11 +1,16 @@
 import Vuex, { Store } from 'vuex';
+import VueRouter from 'vue-router';
 import { mount, createLocalVue } from '@vue/test-utils';
+import router from '../../../accounts/router';
 
 import UsingStudio from '../UsingStudio/index';
 import { policies } from 'shared/constants';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
+localVue.use(VueRouter);
+
+jest.spyOn(router, 'push');
 
 function makeWrapper({ methods = {} } = {}) {
   const store = new Store({
@@ -18,34 +23,35 @@ function makeWrapper({ methods = {} } = {}) {
       },
     },
   });
-
   return mount(UsingStudio, {
     localVue,
     store,
     methods,
+    router,
     stubs: ['PolicyModals'],
   });
 }
 
 describe('usingStudio tab', () => {
   let wrapper;
-  let openPolicy;
 
   beforeEach(() => {
-    openPolicy = jest.fn();
-    wrapper = makeWrapper({ methods: { openPolicy } });
+    wrapper = makeWrapper();
   });
 
   it('clicking privacy link should open policies modal', () => {
     wrapper.find('[data-test="policy-link"]').trigger('click');
-    expect(openPolicy).toHaveBeenCalledWith(policies.PRIVACY);
+    const query = { query: { showPolicy: policies.PRIVACY } };
+    expect(wrapper.vm.$router.push).toHaveBeenCalledWith(query);
   });
   it('clicking terms of service link should open tos modal', () => {
     wrapper.find('[data-test="tos-link"]').trigger('click');
-    expect(openPolicy).toHaveBeenCalledWith(policies.TERMS_OF_SERVICE);
+    const query = { query: { showPolicy: policies.TERMS_OF_SERVICE } };
+    expect(wrapper.vm.$router.push).toHaveBeenCalledWith(query);
   });
   it('clicking community standards link should open standards modal', () => {
     wrapper.find('[data-test="communitystandards-link"]').trigger('click');
-    expect(openPolicy).toHaveBeenCalledWith(policies.COMMUNITY_STANDARDS);
+    const query = { query: { showPolicy: policies.COMMUNITY_STANDARDS } };
+    expect(wrapper.vm.$router.push).toHaveBeenCalledWith(query);
   });
 });

contentcuration/contentcuration/frontend/shared/views/policies/PolicyModals.vue

@@ -4,28 +4,29 @@
     <TermsOfServiceModal
       v-if="showTermsOfService"
       :needsAcceptance="isPolicyUnaccepted(policies.TERMS_OF_SERVICE)"
-      @accept="acceptPolicy(getPolicyAcceptedData(policies.TERMS_OF_SERVICE))"
-      @close="closePolicy(policies.TERMS_OF_SERVICE)"
-      @open="policy => openPolicy(policy)"
+      @accept="handleAcceptPolicy"
+      @open="openPolicy"
+      @close="closePolicy"
     />
     <PrivacyPolicyModal
       v-if="showPrivacyPolicy"
       :needsAcceptance="isPolicyUnaccepted(policies.PRIVACY)"
-      @accept="acceptPolicy(getPolicyAcceptedData(policies.PRIVACY))"
-      @close="closePolicy(policies.PRIVACY)"
-      @open="policy => openPolicy(policy)"
+      @accept="handleAcceptPolicy"
+      @open="openPolicy"
+      @close="closePolicy"
     />
     <CommunityStandardsModal
       v-if="showCommunityStandards"
       :needsAcceptance="false"
-      @close="closePolicy(policies.COMMUNITY_STANDARDS)"
+      @close="closePolicy"
     />
   </div>
 
 </template>
 
 <script>
 
+  import get from 'lodash/get';
   import { mapActions, mapGetters } from 'vuex';
   import PrivacyPolicyModal from './PrivacyPolicyModal';
   import TermsOfServiceModal from './TermsOfServiceModal';
@@ -40,13 +41,10 @@
       TermsOfServiceModal,
     },
     data() {
-      return {
-        policies,
-      };
+      return { policies };
     },
     computed: {
       ...mapGetters('policies', [
-        'selectedPolicy',
         'getPolicyAcceptedData',
         'isPolicyUnaccepted',
         'firstUnacceptedPolicy',
@@ -66,9 +64,24 @@
       showCommunityStandards() {
         return this.selectedPolicy === policies.COMMUNITY_STANDARDS;
       },
+      selectedPolicy() {
+        // Effectively results in watching the route query
+        return get(this, '$route.query.showPolicy', this.firstUnacceptedPolicy);
+      },
     },
     methods: {
-      ...mapActions('policies', ['acceptPolicy', 'openPolicy', 'closePolicy']),
+      ...mapActions('policies', ['acceptPolicy']),
+      openPolicy(policy) {
+        const toRoute = this.$route;
+        toRoute.query.showPolicy = policy;
+        this.$router.push(toRoute);
+      },
+      closePolicy() {
+        this.$router.push({ query: {} });
+      },
+      handleAcceptPolicy(policy) {
+        this.acceptPolicy(this.getPolicyAcceptedData(policy)).then(this.closePolicy);
+      },
     },
   };
 

contentcuration/contentcuration/frontend/shared/views/policies/PrivacyPolicyModal.vue

@@ -16,7 +16,7 @@
         {{ $untranslated('introductionP1Part1') }}
         <ActionLink
           :text="$untranslated('introductionP1TC')"
-          @click="$emit('open', policies.TERMS_OF_SERVICE)"
+          @click="$router.push({ query: { showPolicy: policies.COMMUNITY_STANDARDS } })"
         />
         {{ $untranslated('introductionP1Part2') }}
         <b>{{ $untranslated('introductionP1TU') }}</b>
@@ -204,7 +204,7 @@
           {{ $untranslated('expectationOfPrivacyP1') }}
           <ActionLink
             :text="$untranslated('expectationOfPrivacyP1TC')"
-            @click="$emit('open', policies.TERMS_OF_SERVICE)"
+            @click="$router.push({ query: { showPolicy: policies.TERMS_OF_SERVICE } })"
           />
         </p>
       </div>

contentcuration/contentcuration/frontend/shared/views/policies/TermsOfServiceModal.vue

@@ -186,7 +186,7 @@
         <p>
           <ActionLink
             :text="$tr('communityStandardsLink')"
-            @click="$emit('open', policies.COMMUNITY_STANDARDS)"
+            @click="$router.push({ query: { showPolicy: policies.COMMUNITY_STANDARDS } })"
           />
         </p>
       </div>
@@ -198,7 +198,7 @@
         <p>
           <ActionLink
             :text="$tr('yourPrivacyLink')"
-            @click="$emit('open', policies.PRIVACY)"
+            @click="$router.push({ query: { showPolicy: policies.PRIVACY } })"
           />
         </p>
       </div>

contentcuration/contentcuration/frontend/shared/views/policies/__tests__/policyModals.spec.js

@@ -1,6 +1,8 @@
 import { mount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
+import VueRouter from 'vue-router';
 import cloneDeep from 'lodash/cloneDeep';
+import router from '../../../../accounts/router';
 
 import PolicyModals from '../PolicyModals.vue';
 import storeFactory from 'shared/vuex/baseStore';
@@ -9,6 +11,7 @@ import POLICIES_MODULE_CONFIG from 'shared/vuex/policies';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
+localVue.use(VueRouter);
 
 function getTermsOfServiceModal(wrapper) {
   return wrapper.find('[data-test="tos-modal"]');
@@ -22,18 +25,26 @@ function getCommunityStandardsModal(wrapper) {
   return wrapper.find('[data-test="community-standards-modal"]');
 }
 
-function makeWrapper({ propsData, store }) {
+function makeWrapper({ propsData, store, showPolicy }) {
+  if (showPolicy) {
+    router.replace({ query: { showPolicy } });
+  } else {
+    router.replace({ query: {} });
+  }
   return mount(PolicyModals, {
     propsData,
     localVue,
+    router,
     store,
   });
 }
 
 describe('policyModals', () => {
   it('smoke test', () => {
     const store = storeFactory();
-    const wrapper = makeWrapper({ store });
+    const wrapper = makeWrapper({
+      store: { ...store, state: { ...store.state, loggedIn: false } },
+    });
 
     expect(wrapper.isVueInstance()).toBe(true);
     expect(wrapper.is(PolicyModals)).toBe(true);
@@ -42,8 +53,7 @@ describe('policyModals', () => {
   it(`should show only terms of service modal
     when terms of service policy is selected`, () => {
     const store = storeFactory();
-    store.commit('policies/SET_SELECTED_POLICY', policies.TERMS_OF_SERVICE);
-    const wrapper = makeWrapper({ store });
+    const wrapper = makeWrapper({ store, showPolicy: policies.TERMS_OF_SERVICE });
 
     expect(getTermsOfServiceModal(wrapper).exists()).toBe(true);
     expect(getTermsOfServiceModal(wrapper).isVisible()).toBe(true);
@@ -60,8 +70,8 @@ describe('policyModals', () => {
       .mockReturnValue(policies.TERMS_OF_SERVICE);
     const store = storeFactory({ modules: { policies: policiesModule } });
     const wrapper = makeWrapper({ store });
-    // make sure that no policy is selected
-    expect(wrapper.vm.$store.getters['policies/selectedPolicy']).toBeNull();
+    // make sure that the selected policy defaults to first unaccepted policy
+    expect(wrapper.vm.selectedPolicy).toBe(policies.TERMS_OF_SERVICE);
 
     expect(getTermsOfServiceModal(wrapper).exists()).toBe(true);
     expect(getTermsOfServiceModal(wrapper).isVisible()).toBe(true);
@@ -72,8 +82,7 @@ describe('policyModals', () => {
   it(`should show only privacy policy modal
     when privacy policy is selected`, () => {
     const store = storeFactory();
-    store.commit('policies/SET_SELECTED_POLICY', policies.PRIVACY);
-    const wrapper = makeWrapper({ store });
+    const wrapper = makeWrapper({ store, showPolicy: policies.PRIVACY });
 
     expect(getPrivacyModal(wrapper).exists()).toBe(true);
     expect(getPrivacyModal(wrapper).isVisible()).toBe(true);
@@ -88,8 +97,8 @@ describe('policyModals', () => {
     jest.spyOn(policiesModule.getters, 'firstUnacceptedPolicy').mockReturnValue(policies.PRIVACY);
     const store = storeFactory({ modules: { policies: policiesModule } });
     const wrapper = makeWrapper({ store });
-    // make sure that no policy is selected
-    expect(wrapper.vm.$store.getters['policies/selectedPolicy']).toBeNull();
+    // make sure that the selected policy defaults to first unaccepted policy
+    expect(wrapper.vm.selectedPolicy).toBe(policies.PRIVACY);
 
     expect(getPrivacyModal(wrapper).exists()).toBe(true);
     expect(getPrivacyModal(wrapper).isVisible()).toBe(true);
@@ -100,8 +109,7 @@ describe('policyModals', () => {
   it(`should should show only community standards modal
     when community standards policy is selected`, () => {
     const store = storeFactory();
-    store.commit('policies/SET_SELECTED_POLICY', policies.COMMUNITY_STANDARDS);
-    const wrapper = makeWrapper({ store });
+    const wrapper = makeWrapper({ store, showPolicy: policies.COMMUNITY_STANDARDS });
 
     expect(getCommunityStandardsModal(wrapper).exists()).toBe(true);
     expect(getCommunityStandardsModal(wrapper).isVisible()).toBe(true);
@@ -117,8 +125,7 @@ describe('policyModals', () => {
     const policiesModule = cloneDeep(POLICIES_MODULE_CONFIG);
     jest.spyOn(policiesModule.getters, 'firstUnacceptedPolicy').mockReturnValue(policies.PRIVACY);
     const store = storeFactory({ modules: { policies: policiesModule } });
-    store.commit('policies/SET_SELECTED_POLICY', policies.TERMS_OF_SERVICE);
-    const wrapper = makeWrapper({ store });
+    const wrapper = makeWrapper({ store, showPolicy: policies.TERMS_OF_SERVICE });
 
     expect(getTermsOfServiceModal(wrapper).exists()).toBe(true);
     expect(getTermsOfServiceModal(wrapper).isVisible()).toBe(true);

contentcuration/contentcuration/frontend/shared/vuex/policies/index.js

@@ -62,9 +62,6 @@ export const getters = {
       return getters.nonAcceptedPolicies.includes(policy);
     };
   },
-  selectedPolicy(state) {
-    return state.selectedPolicy;
-  },
   /**
    * @returns There can be more unaccepted policies.
    * This getter returns the first of them when sorted
@@ -85,9 +82,6 @@ export const getters = {
 };
 
 export const mutations = {
-  SET_SELECTED_POLICY(state, policy) {
-    state.selectedPolicy = policy;
-  },
   SET_POLICIES(state, policies) {
     for (const policy in policies) {
       Vue.set(state.policies, policy, policies[policy]);
@@ -99,14 +93,6 @@ export const actions = {
   setPolicies(context, policies) {
     context.commit('SET_POLICIES', policies);
   },
-  openPolicy(context, policy) {
-    context.commit('SET_SELECTED_POLICY', policy);
-  },
-  closePolicy(context, policy) {
-    if (context.state.selectedPolicy === policy) {
-      context.commit('SET_SELECTED_POLICY', null);
-    }
-  },
   /**
    * Accept a policy
    *
@@ -118,11 +104,7 @@ export const actions = {
   acceptPolicy(context, policyAcceptedData) {
     return client
       .post(window.Urls.policy_update(), { policy: JSON.stringify(policyAcceptedData) })
-      .then(() => {
-        return context
-          .dispatch('setPolicies', policyAcceptedData)
-          .then(() => context.dispatch('closePolicy'));
-      });
+      .then(() => context.dispatch('setPolicies', policyAcceptedData));
   },
 };
 
@@ -131,7 +113,6 @@ export default {
   state() {
     return {
       policies: {},
-      selectedPolicy: null,
     };
   },
   getters,