Merge pull request #95 from PrestaShop/feature/faq-tab

Feature/faq tab

_dev/App.vue

@@ -4,7 +4,7 @@
       <MenuItem route="/authentication">{{ $t('menu.authentication') }}</MenuItem>
       <MenuItem route="/customize">{{ $t('menu.customizeCheckout') }}</MenuItem>
       <MenuItem route="/activity">{{ $t('menu.manageActivity') }}</MenuItem>
-      <MenuItem route="/advanced">{{ $t('menu.advancedSettings') }}</MenuItem>
+      <!-- <MenuItem route="/advanced">{{ $t('menu.advancedSettings') }}</MenuItem> -->
       <MenuItem route="/help">{{ $t('menu.help') }}</MenuItem>
     </Menu>
     <div v-if="paymentMode === 'SANDBOX'" class="row">

_dev/components/panel/help.vue

@@ -2,68 +2,126 @@
   <form class="form form-horizontal">
     <div class="card">
       <h3 class="card-header">
-        <i class="material-icons">help</i> {{ $t('panel.help.title') }} {{ moduleName }}
+        <i class="material-icons">help</i> {{ $t('panel.help.title') }}
       </h3>
       <div class="card-block row">
-        <div class="card-text">
-          <template v-if="faq && faq.categories.lenfth != 0">
-            <div v-for="(categorie, index) in faq.categories" :key="index">
+        <div class="card-text d-flex">
+          <div class="left-block">
+            <div class="module-desc d-flex mb-4">
+              <div class="module-img mr-3">
+                <img src="@/assets/images/logo.png" width="75" height="75" alt="">
+              </div>
               <div>
-                <h2 class="categorie-title">{{ categorie.title }}</h2>
-                <div v-for="(item, index) in categorie.blocks" :key="index">
-                  <!-- <template slot="title"> -->
-                    <b>{{ item.question }}</b>
-                  <!-- </template> -->
-                  <div>{{ item.answer }}</div>
-                </div>
+                <b>{{ $t('panel.help.allowsYou') }}</b>
+                <ul class="mt-3">
+                  <li>{{ $t('panel.help.tip1') }}</li>
+                  <li>{{ $t('panel.help.tip2') }}</li>
+                  <li>{{ $t('panel.help.tip3') }}</li>
+                  <li>{{ $t('panel.help.tip4') }}</li>
+                </ul>
               </div>
             </div>
-          </template>
+            <div class="faq">
+              <h1>FAQ</h1>
+              <div class="separator my-3" />
+              <template v-if="faq && faq.categories.lenfth != 0">
+                <v-collapse-group class="my-3" v-for="(categorie, index) in faq.categories" :key="index" :only-one-active="true">
+                  <h3 class="categorie-title">{{ categorie.title }}</h3>
+                  <v-collapse-wrapper :ref="index+'_'+i" v-for="(item, i) in categorie.blocks" :key="i">
+                    <div class="my-3 question" v-collapse-toggle>
+                      <a href="#" @click.prevent><i class="material-icons">keyboard_arrow_right</i> {{ item.question }}</a>
+                    </div>
+                    <div class="answer" v-collapse-content>
+                      {{ item.answer }}
+                    </div>
+                  </v-collapse-wrapper>
+                </v-collapse-group>
+              </template>
+              <template v-else>
+                <PSAlert :alert-type="ALERT_TYPE_WARNING">
+                  <p>{{ $t('panel.help.noFaqAvailable') }}</p>
+                </PSAlert>
+              </template>
+            </div>
+          </div>
+          <div class="right-block">
+            <div class="doc">
+              <b class="text-muted">{{ $t('panel.help.needHelp') }}</b>
+              <br>
+              <a :href="readmeUrl" target="_blank" class="btn btn-primary mt-3">{{ $t('panel.help.downloadDoc') }}</a>
+            </div>
+            <div class="contact mt-4">
+              <div>{{ $t('panel.help.couldntFindAnswer') }}</div>
+              <div class="mt-2">
+                <a href="https://support.prestashop.com/hc/requests/new?ticket_form_id=" target="_blank">
+                  {{ $t('panel.help.contactUs') }} <i class="material-icons">arrow_right_alt</i>
+                </a>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
   </form>
 </template>
 
 <script>
-  import {getFaq} from '@/requests/ajax.js';
+  import PSAlert from '@/components/form/alert';
+  import {ALERT_TYPE_WARNING} from '@/lib/alert';
 
   export default {
-    data() {
-      return {
-        moduleName: 'PrestaShop Checkout',
-        faq: null,
-      };
+    components: {
+      PSAlert,
     },
-    props: {
-      moduleKey: {
-        type: String,
-        required: true,
-      },
-      psVersion: {
-        type: String,
-        required: true,
+    computed: {
+      ALERT_TYPE_WARNING: () => ALERT_TYPE_WARNING,
+      faq() {
+        return this.$store.state.context.faq;
       },
-      isoCode: {
-        type: String,
-        required: true,
+      readmeUrl() {
+        return this.$store.state.context.readmeUrl;
       },
     },
-    created() {
-      getFaq(this.moduleKey, this.psVersion, this.isoCode).then((response) => {
-        if (response.categories) {
-          this.faq = response;
-        }
-      });
+    methods: {
+      getElementUpdated(payload, index) {
+        return this.$refs[index][0].status;
+      },
     },
   };
 </script>
 
 <style scoped>
-.line-separator {
+.separator {
   height:1px;
   opacity: 0.2;
   background:#6B868F;
   border-bottom: 2px solid #6B868F;
 }
+.left-block {
+  flex-grow: 1;
+}
+.right-block {
+  padding: 15px;
+  min-width: 350px;
+  text-align: center;
+}
+.doc {
+  padding: 20px;
+  background-color: #F7F7F7;
+}
+.answer {
+  margin: 0px 15px 10px 15px;
+  padding: 15px;
+  background-color: #F7F7F7;
+}
+.icon-expand {
+  transform: rotate(90deg);
+  transition: all 0.3s;
+}
+.v-collapse-content {
+  display: none;
+}
+.v-collapse-content-end {
+  display: block;
+}
 </style>

_dev/lib/i18n.js

@@ -1,10 +1,11 @@
 import Vue from 'vue';
 import VueI18n from 'vue-i18n';
+import store from '../store';
 
 Vue.use(VueI18n);
 
-const locale = global.contextLocale;
-const messages = JSON.parse(global.translations);
+const {locale} = store.getters;
+const messages = store.getters.translations;
 
 export default new VueI18n({
   locale,

_dev/main.js

@@ -1,11 +1,14 @@
 import Vue from 'vue';
+import VueCollapse from 'vue2-collapse';
 import i18n from './lib/i18n';
 import App from './App.vue';
 import router from './router';
 import store from './store';
 import './assets/css/compliant.css';
 import './assets/css/ui-kit.css';
 
+Vue.use(VueCollapse);
+
 Vue.config.productionTip = process.env.NODE_ENV === 'production';
 
 new Vue({

_dev/requests/ajax.js

@@ -1,29 +1,18 @@
 import axios from 'axios';
 import {forEach} from 'lodash';
 
-const api = axios.create({
-  baseURL: window.prestashopCheckoutAjax,
-});
-
-export function ajax(params) {
+export default function ajax(params) {
   const form = new FormData();
   form.append('ajax', true);
   form.append('action', params.action);
+
   form.append('controller', 'AdminAjaxPrestashopCheckout');
 
   forEach(params.data, (value, key) => {
     form.append(key, value);
   });
 
-  return api.post('', form)
-    .then(res => res.data)
-    .catch((error) => {
-      console.log(error);
-    });
-}
-
-export function getFaq(moduleKey, psVersion, isoCode) {
-  return api.post(`http://api.addons.prestashop.com/request/faq/${moduleKey}/${psVersion}/${isoCode}`)
+  return axios.post(params.url, form)
     .then(res => res.data)
     .catch((error) => {
       console.log(error);

_dev/router.js

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import Router from 'vue-router';
+import store from './store';
 
 import Signup from '@/pages/Signup.vue';
 import Login from '@/pages/Login.vue';
@@ -11,7 +12,7 @@ import Help from '@/pages/Help.vue';
 
 Vue.use(Router);
 
-export default new Router({
+const router = new Router({
   routes: [
     {
       path: '/',
@@ -43,7 +44,7 @@ export default new Router({
       component: Activity,
     },
     {
-      path: '/advanced',
+      path: '/debugDoNotTouch',
       name: 'Advanced',
       component: Advanced,
     },
@@ -54,3 +55,10 @@ export default new Router({
     },
   ],
 });
+
+// TODO: Make a navigation guard to limit the user to the authentification tab if he does not
+// complete the paypal and firebase onboarding
+// router.beforeEach((to, from, next) => {
+// });
+
+export default router;

_dev/store/modules/configuration/actions.js

@@ -1,9 +1,10 @@
 import * as types from './mutation-types';
-import {ajax} from '@/requests/ajax.js';
+import ajax from '@/requests/ajax.js';
 
 export default {
-  updatePaymentMethods({commit}, payload) {
+  updatePaymentMethods({commit, getters}, payload) {
     return ajax({
+      url: getters.adminController,
       action: 'UpdatePaymentMethodsOrder',
       data: {
         paymentMethods: JSON.stringify(payload.paymentMethods),
@@ -14,8 +15,9 @@ export default {
     });
   },
 
-  updatePaymentMode({commit}, payload) {
+  updatePaymentMode({commit, getters}, payload) {
     return ajax({
+      url: getters.adminController,
       action: 'UpdatePaymentMode',
       data: {
         paymentMode: payload,
@@ -26,8 +28,9 @@ export default {
     });
   },
 
-  updateCaptureMode({commit}, payload) {
+  updateCaptureMode({commit, getters}, payload) {
     return ajax({
+      url: getters.adminController,
       action: 'UpdateCaptureMode',
       data: {
         captureMode: payload,

_dev/store/modules/context/getters.js

@@ -0,0 +1,5 @@
+export default {
+  adminController: state => state.prestashopCheckoutAjax,
+  locale: state => state.language.locale,
+  translations: state => state.translations,
+};

_dev/store/modules/context/index.js

@@ -1,7 +1,10 @@
+import getters from './getters';
+
 const store = JSON.parse(global.store);
 
 const state = store.context;
 
 export default {
   state,
+  getters,
 };

_dev/store/modules/firebase/actions.js

@@ -1,18 +1,20 @@
 import * as types from './mutation-types';
-import {ajax} from '@/requests/ajax.js';
+import ajax from '@/requests/ajax.js';
 
 export default {
-  logout({commit}) {
+  logout({commit, getters}) {
     return ajax({
+      url: getters.adminController,
       action: 'FirebaseLogout',
     }).then(() => {
       commit(types.LOGOUT_ACCOUNT);
       return Promise.resolve(true);
     });
   },
 
-  login({commit}, payload) {
+  login({commit, getters}, payload) {
     return ajax({
+      url: getters.adminController,
       action: 'SignIn',
       data: {
         email: payload.email,
@@ -35,8 +37,9 @@ export default {
     });
   },
 
-  signup({commit}, payload) {
+  signup({commit, getters}, payload) {
     ajax({
+      url: getters.adminController,
       action: 'SignUp',
       data: {
         email: payload.email,

_dev/store/modules/paypal/actions.js

@@ -1,17 +1,19 @@
 import * as types from './mutation-types';
-import {ajax} from '@/requests/ajax.js';
+import ajax from '@/requests/ajax.js';
 
 export default {
-  unlink({commit}) {
+  unlink({commit, getters}) {
     return ajax({
+      url: getters.adminController,
       action: 'UnlinkPaypal',
     }).then(() => {
       commit(types.UNLINK_ACCOUNT);
       return Promise.resolve(true);
     });
   },
-  getOnboardingLink({commit}) {
+  getOnboardingLink({commit, getters}) {
     return ajax({
+      url: getters.adminController,
       action: 'GetOnboardingLink',
     }).then((onboardingLink) => {
       commit(types.UPDATE_ONBOARDING_LINK, onboardingLink);