Improve translated content

Author: CKGrafico

components/layout/Donations.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="fixed right-3 bottom-5 z-50">
+  <div v-if="info && info.text" class="fixed right-3 bottom-5 z-50">
     <button
       @click="onClickButton"
       class="text-white px-4 w-auto h-10 bg-blue-700 rounded-full hover:bg-blue-800 active:shadow-lg mouse shadow transition ease-in duration-200 focus:outline-none"
@@ -23,7 +23,7 @@
       icon="info"
       :showCloseButton="true"
       :okButtonText="info.confirm"
-      >{{ settings.bank && info.text }}</t-dialog
+      >{{ info.text }}</t-dialog
     >
   </div>
 </template>
@@ -36,24 +36,11 @@ export default {
       return this.$store.state.settings.donations;
     }
   },
-  data() {
+  data(context) {
     return {
-      info: {}
+      info: context.$store.state.donations.info,
     };
   },
-  async fetch() {
-    context.app.$storyapi
-      .get(`cdn/stories/`, {
-        starts_with: context.localePath('donations'),
-        version: 'published'
-      })
-      .then((donationsRefResponse) => {
-        const stories = donationsRefResponse.data.stories;
-        const info = stories[0].content;
-
-        this.info = info;
-      });
-  },
   setup() {
     const showDialog = ref();
 
@@ -63,6 +50,7 @@ export default {
 
     return {
       showDialog,
+
       onClickButton
     };
   }

helpers/common-page.helper.js

@@ -46,7 +46,10 @@ export function loadPageContentFromApi(context, route, starts_with) {
 }
 
 export function loadMenuFromApi(context) {
-  if (context.store.state.menu.items.length !== 0) {
+  if (
+    context.store.state.menu.locale === context.i18n.locale &&
+    context.store.state.menu.items.length !== 0
+  ) {
     return Promise.resolve(context.store.state.menu.items);
   }
 
@@ -55,11 +58,12 @@ export function loadMenuFromApi(context) {
       starts_with: context.localePath('menu'),
       version: 'published'
     })
-    .then((menuRefResponse) => {
-      const stories = menuRefResponse.data.stories;
+    .then((response) => {
+      const stories = response.data.stories;
       const logo = stories && stories[0].content.logo;
       const items = stories && stories[0].content.items;
 
+      context.store.commit('menu/setLocale', context.i18n.locale);
       context.store.commit('menu/setMenu', items);
       context.store.commit('menu/setLogo', logo.filename);
 
@@ -82,8 +86,50 @@ export function loadMenuFromApi(context) {
     });
 }
 
+export function loadDonationsFromApi(context) {
+  if (
+    context.store.state.donations.locale === context.i18n.locale &&
+    context.store.state.donations.info.cta
+  ) {
+    return Promise.resolve(context.store.state.donations.info);
+  }
+
+  return context.app.$storyapi
+    .get(`cdn/stories/`, {
+      starts_with: context.localePath('donations'),
+      version: 'published'
+    })
+    .then((response) => {
+      const stories = response.data.stories;
+      const content = stories && stories[0].content;
+
+      context.store.commit('donations/setLocale', context.i18n.locale);
+      context.store.commit('donations/setInfo', content);
+
+      return content;
+    })
+    .catch((res) => {
+      if (!res.response) {
+        console.error(res);
+        context.error({
+          statusCode: 404,
+          message: 'Failed to receive content form api'
+        });
+      } else {
+        console.error(res.response.data);
+        context.error({
+          statusCode: res.response.status,
+          message: res.response.data
+        });
+      }
+    });
+}
+
 export function loadPageContent(context, path) {
-  return loadMenuFromApi(context).then((menu) => {
+  return Promise.all([
+    loadMenuFromApi(context),
+    loadDonationsFromApi(context)
+  ]).then(([menu]) => {
     const item = menu.find(
       ({ link }) => link.url === `${path}/` || link.cached_url === `${path}/`
     );

plugins/common-stores.js

@@ -1,3 +1,4 @@
+import * as donationsStore from '../store/donations';
 import * as menuStore from '../store/menu';
 
 export function registerStore(name, store, storeModule) {
@@ -15,4 +16,5 @@ export default async (context) => {
   const { store } = context;
 
   registerStore('menu', store, menuStore);
+  registerStore('donations', store, donationsStore);
 };

store/donations.js

@@ -0,0 +1,13 @@
+export const state = () => ({
+  locale: null,
+  info: {}
+});
+
+export const mutations = {
+  setLocale(state, locale) {
+    state.locale = locale;
+  },
+  setInfo(state, info) {
+    state.info = info;
+  }
+};

store/menu.js

@@ -1,9 +1,13 @@
 export const state = () => ({
+  locale: null,
   items: [],
   logo: null
 });
 
 export const mutations = {
+  setLocale(state, locale) {
+    state.locale = locale;
+  },
   setMenu(state, items) {
     state.items = items;
   },