Merge pull request #33 from PrestaShopCorp/feature/i18n

Feature/i18n

exporter.js

@@ -37,7 +37,7 @@ const exportAll = (defaultLang, otherLanguages, destination) => {
 };
 
 exportAll(require('./src/locale/lang/en.json'), {
-  // fr: require('./src/locale/lang/fr.json'),
-  // it: require('./src/locale/lang/it.json'),
-  // es: require('./src/locale/lang/es.json')
+  fr: require('./src/locale/lang/fr.json'),
+  it: require('./src/locale/lang/it.json'),
+  es: require('./src/locale/lang/es.json')
 }, process.argv[process.argv.length - 1] || 'translations.csv');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "prestashop_accounts_vue_components",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "main": "./dist/psaccountsVue.common.js",
   "files": [
     "dist/*",

src/Intro.stories.mdx

@@ -41,6 +41,19 @@ panel below this section, and you will be able to call PrestaShop Billing featur
 There are two ways to integrate the needed components. The first is the easiest one, and should be
 sufficient for most cases: a unique component will manage the different status according to the context.
 
+In both cases, you need to install the library as a Vue plugin in your VueJS bootstrap script:
+
+```javascript
+import VueI18n from 'vue-i18n';
+import psAccountsVueComponents from 'prestashop_accounts_vue_components';
+
+Vue.use(VueI18n);
+const i18n = new VueI18n({ ... });
+Vue.use(psAccountsVueComponents);
+psAccountsVueComponents.locale(i18n.locale); // you can also pass 'en', 'fr', 'it', ... directly!
+```
+
+
 ## The easy way
 
 Please see the [PsAccounts component documentation, to integrate to your module page](?path=/docs/integration-psaccounts-panel--connected#psaccounts-component-behavior).

src/full.js

@@ -1,10 +1,24 @@
+/* eslint-disable */
 import Vue from 'vue';
 import PsAccounts from '@/components/PsAccounts';
 import Account from '@/components/panel/Account';
 import AccountNotInstalled from '@/components/alert/AccountNotInstalled';
 import AccountNotEnabled from '@/components/alert/AccountNotEnabled';
 import MultiStoreSelector from '@/components/alert/MultiStoreSelector';
 import {isOnboardingCompleted} from '@/lib/Helpers';
+import {use, i18n} from '@/locale';
+
+const install = function(vue, opts = {}) {
+  if (opts.locale) {
+    use(opts.locale);
+  }
+  if (opts.i18n) {
+    i18n(opts.i18n);
+  }
+  Object.keys(Components).forEach((name) => {
+    vue.component(name, Components[name]);
+  });
+};
 
 const Components = {
   PsAccounts,
@@ -14,17 +28,31 @@ const Components = {
   MultiStoreSelector,
 };
 
-Object.keys(Components).forEach((name) => {
-  Vue.component(name, Components[name]);
-});
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue);
+} else {
+  Object.keys(Components).forEach((name) => {
+    Vue.component(name, Components[name]);
+  });
+}
 
-export default Components;
+export default {
+  version: '0.1.4',
+  locale: use,
+  i18n,
+  install,
+  isOnboardingCompleted,
+  ...Components
+};
 
 export {
+  use as locale,
+  i18n,
+  install,
+  isOnboardingCompleted,
   PsAccounts,
   Account,
   AccountNotInstalled,
   AccountNotEnabled,
   MultiStoreSelector,
-  isOnboardingCompleted,
 };

src/locale/index.js

@@ -1,10 +1,14 @@
-import defaultLang from '@/locale/lang/en.json';
+import en from '@/locale/lang/en.json';
+import fr from '@/locale/lang/fr.json';
+import it from '@/locale/lang/it.json';
+import es from '@/locale/lang/es.json';
+
 import Vue from 'vue';
 import deepmerge from 'deepmerge';
 import Format from './format';
 
 const format = Format(Vue);
-let lang = defaultLang;
+let lang = en;
 let merged = false;
 
 // eslint-disable-next-line consistent-return
@@ -42,7 +46,24 @@ export const t = function t(path, options, ...args) {
 };
 
 export const use = function use(l) {
-  lang = l || lang;
+  if (typeof l !== 'string') {
+    lang = l || lang;
+    return;
+  }
+  switch (l.substr(0, 2)) {
+    case 'fr':
+      lang = fr;
+      break;
+    case 'it':
+      lang = it;
+      break;
+    case 'es':
+      lang = es;
+      break;
+    case 'en':
+    default:
+      lang = en;
+  }
 };
 
 export const i18n = function i18n(fn) {

src/locale/lang/es.json

@@ -0,0 +1,61 @@
+{
+  "psaccounts": {
+    "accountManager": {
+      "errorInstallEnable": "Something went wrong. Please try again."
+    },
+    "alertAccountNotInstalled": {
+      "title": "PrestaShop Accounts module needed",
+      "message": "To enable this module you need to install the PrestaShop Accounts module on your shop",
+      "installButton": "Install",
+      "loading": "Installing PrestaShop Accounts ..."
+    },
+    "alertAccountNotEnabled": {
+      "title": "PrestaShop Accounts module needed",
+      "message": "To enable this module you need to activate the PrestaShop Accounts module on your shop",
+      "enableButton": "Activate",
+      "loading": "Enabling PrestaShop Accounts ..."
+    },
+    "multiShopSelector": {
+      "title": "Multi-store mode activated",
+      "subtitle": "You must configure your stores one by one for this service, but your will be able to use the same account",
+      "selectStore": "Please select the first store to configure from the list below",
+      "tips": "After you are done with the first shop, you can configure the others, by selecting them one by one in the shop selector, in the horizontal menu",
+      "configure": "Configure",
+      "group": "Group"
+    },
+    "account": {
+      "title": "Your PrestaShop account",
+      "authorize": "Authorize your account to manage your shop's services",
+      "authorized": "You authorize this account to manage shop's services",
+      "connectButton": "Connect",
+      "disconnectButton": "Use another account",
+      "emailValidationWarningLabel": "Email validation needed",
+      "emailConfirmationAlert": "A confirmation email has been sent. Check your inbox and click on the link to activate your account",
+      "noEmailReceived": "No confirmation email",
+      "sendEmail": "Send it again",
+      "needToBeAdmin": "In order to proceed, you have to be administrator of the shop",
+      "pleaseContact": "Please contact"
+    }
+  },
+  "billing": {
+    "billing": {
+      "upgradePlanButton": "Upgrade plan",
+      "upgradePlanLink": "See plans",
+      "currentPlan": "Current plan",
+      "paymentMethod": "Payment method",
+      "address": "Billing address",
+      "priceFree": "FREE",
+      "nextInvoicingDate": "Next invoicing date:",
+      "periodicity": {
+        "monthly": "month",
+        "yearly": "year"
+      },
+      "editPaymentMethod": "Edit",
+      "editAddress": "Edit",
+      "noAddress": "Unknown",
+      "noPaymentMethod": "Unknown",
+      "expires": "Expires"
+    },
+    "priceFormat": "{currency} {amount}"
+  }
+}

src/locale/lang/fr.json

@@ -0,0 +1,61 @@
+{
+  "psaccounts": {
+    "accountManager": {
+      "errorInstallEnable": "Something went wrong. Please try again."
+    },
+    "alertAccountNotInstalled": {
+      "title": "PrestaShop Accounts module needed",
+      "message": "To enable this module you need to install the PrestaShop Accounts module on your shop",
+      "installButton": "Install",
+      "loading": "Installing PrestaShop Accounts ..."
+    },
+    "alertAccountNotEnabled": {
+      "title": "PrestaShop Accounts module needed",
+      "message": "To enable this module you need to activate the PrestaShop Accounts module on your shop",
+      "enableButton": "Activate",
+      "loading": "Enabling PrestaShop Accounts ..."
+    },
+    "multiShopSelector": {
+      "title": "Multi-store mode activated",
+      "subtitle": "You must configure your stores one by one for this service, but your will be able to use the same account",
+      "selectStore": "Please select the first store to configure from the list below",
+      "tips": "After you are done with the first shop, you can configure the others, by selecting them one by one in the shop selector, in the horizontal menu",
+      "configure": "Configure",
+      "group": "Group"
+    },
+    "account": {
+      "title": "Votre compte PrestaShop",
+      "authorize": "Authorize your account to manage your shop's services",
+      "authorized": "You authorize this account to manage shop's services",
+      "connectButton": "Connect",
+      "disconnectButton": "Use another account",
+      "emailValidationWarningLabel": "Email validation needed",
+      "emailConfirmationAlert": "A confirmation email has been sent. Check your inbox and click on the link to activate your account",
+      "noEmailReceived": "No confirmation email",
+      "sendEmail": "Send it again",
+      "needToBeAdmin": "In order to proceed, you have to be administrator of the shop",
+      "pleaseContact": "Please contact"
+    }
+  },
+  "billing": {
+    "billing": {
+      "upgradePlanButton": "Upgrade plan",
+      "upgradePlanLink": "See plans",
+      "currentPlan": "Current plan",
+      "paymentMethod": "Payment method",
+      "address": "Billing address",
+      "priceFree": "FREE",
+      "nextInvoicingDate": "Next invoicing date:",
+      "periodicity": {
+        "monthly": "month",
+        "yearly": "year"
+      },
+      "editPaymentMethod": "Edit",
+      "editAddress": "Edit",
+      "noAddress": "Unknown",
+      "noPaymentMethod": "Unknown",
+      "expires": "Expires"
+    },
+    "priceFormat": "{currency} {amount}"
+  }
+}

src/locale/lang/it.json

@@ -0,0 +1,61 @@
+{
+  "psaccounts": {
+    "accountManager": {
+      "errorInstallEnable": "Something went wrong. Please try again."
+    },
+    "alertAccountNotInstalled": {
+      "title": "PrestaShop Accounts module needed",
+      "message": "To enable this module you need to install the PrestaShop Accounts module on your shop",
+      "installButton": "Install",
+      "loading": "Installing PrestaShop Accounts ..."
+    },
+    "alertAccountNotEnabled": {
+      "title": "PrestaShop Accounts module needed",
+      "message": "To enable this module you need to activate the PrestaShop Accounts module on your shop",
+      "enableButton": "Activate",
+      "loading": "Enabling PrestaShop Accounts ..."
+    },
+    "multiShopSelector": {
+      "title": "Multi-store mode activated",
+      "subtitle": "You must configure your stores one by one for this service, but your will be able to use the same account",
+      "selectStore": "Please select the first store to configure from the list below",
+      "tips": "After you are done with the first shop, you can configure the others, by selecting them one by one in the shop selector, in the horizontal menu",
+      "configure": "Configure",
+      "group": "Group"
+    },
+    "account": {
+      "title": "Your PrestaShop account",
+      "authorize": "Authorize your account to manage your shop's services",
+      "authorized": "You authorize this account to manage shop's services",
+      "connectButton": "Connect",
+      "disconnectButton": "Use another account",
+      "emailValidationWarningLabel": "Email validation needed",
+      "emailConfirmationAlert": "A confirmation email has been sent. Check your inbox and click on the link to activate your account",
+      "noEmailReceived": "No confirmation email",
+      "sendEmail": "Send it again",
+      "needToBeAdmin": "In order to proceed, you have to be administrator of the shop",
+      "pleaseContact": "Please contact"
+    }
+  },
+  "billing": {
+    "billing": {
+      "upgradePlanButton": "Upgrade plan",
+      "upgradePlanLink": "See plans",
+      "currentPlan": "Current plan",
+      "paymentMethod": "Payment method",
+      "address": "Billing address",
+      "priceFree": "FREE",
+      "nextInvoicingDate": "Next invoicing date:",
+      "periodicity": {
+        "monthly": "month",
+        "yearly": "year"
+      },
+      "editPaymentMethod": "Edit",
+      "editAddress": "Edit",
+      "noAddress": "Unknown",
+      "noPaymentMethod": "Unknown",
+      "expires": "Expires"
+    },
+    "priceFormat": "{currency} {amount}"
+  }
+}