Feature/11

package.json

@@ -21,11 +21,17 @@
     "transform": {
       "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
       ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor"
+    },
+    "globals": {
+      "snowdog": {
+        "baseUrl": "global-base-url"
+      }
     }
   },
   "dependencies": {
     "axios": "^0.18.0",
     "vue": "^2.4.4",
+    "vue-i18n": "^8.4.0",
     "vue-multiselect": "^2.1.0",
     "vuelidate": "^0.7.4",
     "vuex": "^3.0.0"
@@ -41,7 +47,7 @@
     "eslint": "^4.19.1",
     "eslint-config-standard": "^11.0.0",
     "eslint-loader": "^2.0.0",
-    "eslint-plugin-import": "^2.10.0",
+    "eslint-plugin-import": "^2.13.0",
     "eslint-plugin-node": "^6.0.1",
     "eslint-plugin-promise": "^3.7.0",
     "eslint-plugin-standard": "^3.0.1",

test/ProductsList.test.js

@@ -1,15 +1,23 @@
 import Vue from 'vue'
-import { mount } from '@vue/test-utils'
+import Vuei18n from 'vue-i18n'
+import { mount, createLocalVue } from '@vue/test-utils'
+import messages from '../view/frontend/web/js/data/translations-en_US.json'
 import ProductsList from '../view/frontend/web/js/components/ProductsList.vue'
 
+const localVue = createLocalVue()
+localVue.use(Vuei18n)
+const i18n = new Vuei18n({
+  locale: 'en_US',
+  messages
+})
+
 Vue.filter('currency', function (price) {
   const pattern = '$%s'
   price = parseFloat(price).toFixed(2)
   return pattern.replace('%s', price)
 })
 
 describe('ProductsList.test.js', () => {
-
   let wrapper
 
   beforeEach(() => {
@@ -41,7 +49,9 @@ describe('ProductsList.test.js', () => {
           }
         ],
         step: () => 'shipping'
-      }
+      },
+      localVue,
+      i18n
     })
   })
 

test/__snapshots__/ProductsList.test.js.snap

@@ -34,6 +34,7 @@ exports[`ProductsList.test.js has the expected html structure 1`] = `
       >
 
     Price:
+
 
         <strong>
 

view/frontend/templates/onepage.phtml

@@ -1,8 +1,16 @@
+<?php
+$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
+$store = $objectManager->get('Magento\Framework\Locale\Resolver');
+?>
+
 <div id="checkout" class="checkout-container"></div>
 
 <script>
-  var config = <?= \Zend_Json::encode($block->getCheckoutConfig()) ?>;
-  var baseUrl = '<?= $block->getBaseUrl() ?>';
+  var snowdog = snowdog ? snowdog : {};
+
+  snowdog.config = <?= \Zend_Json::encode($block->getCheckoutConfig()) ?>;
+  snowdog.baseUrl = '<?= $block->getBaseUrl() ?>';
+  snowdog.storeLocale = '<?= $store->getLocale() ?>';
 </script>
 
 <script type="text/x-magento-init">

view/frontend/web/js/components/BillingAddressForm.vue

@@ -3,78 +3,78 @@
     <BaseInput
       v-model="$v.address.firstname.$model"
       :validation="$v.address.firstname"
-      label="First name"
+      :label="$t('First Name')"
       name="firstname"
     />
     <BaseInput
       v-model="$v.address.lastname.$model"
       :validation="$v.address.lastname"
-      label="Last name"
+      :label="$t('Last Name')"
       name="lastname"
     />
     <BaseInput
       v-model="$v.address.telephone.$model"
       :validation="$v.address.telephone"
-      label="Phone Number"
+      :label="$t('Phone Number')"
       name="telephone"
       type="tel"
     />
     <BaseInput
       v-model="$v.address.street0.$model"
       :validation="$v.address.street0"
-      label="Street Address"
+      :label="$t('Street Address')"
       name="street0"
     />
     <BaseInput
       v-model="address.street1"
-      label="Street Address"
+      :label="$t('Street Address')"
       name="street1"
     />
     <div>
       <label for="country">
-        Select Country
+        {{ $t('Select Country') }}
       </label>
       <multiselect
         id="country"
         v-model="$v.address.country_id.$model"
         :options="countries"
         :allow-empty="false"
         :show-labels="false"
+        :placeholder="$t('Select Country')"
         name="country"
         label="label"
-        placeholder="Select country"
       />
       <span
         v-if="
           $v.address.country_id.$error
             && !$v.address.country_id.required
         "
       >
-        This field is required!
+        {{ $t('This field is required!') }}
       </span>
     </div>
     <BaseInput
       v-model="$v.address.city.$model"
       :validation="$v.address.city"
-      label="City"
+      :label="$t('City')"
       name="city"
     />
     <BaseInput
       v-model="$v.address.postcode.$model"
       :validation="$v.address.postcode"
-      label="Zip/Postal Code"
+      :label="$t('Zip Code')"
       name="postcode"
     />
     <BaseInput
       v-if="!regions.length"
       v-model="$v.address.region.$model"
       :validation="$v.address.region"
-      label="State/Province"
+      :label="$t('State')"
       name="region"
     />
     <div v-if="regions.length">
       <label for="region_id">
-        Select State/Province
+        {{ $t('Select State') }}
       </label>
       <multiselect
         id="region_id"
@@ -83,26 +83,26 @@
         :options="regions"
         :allow-empty="false"
         :show-labels="false"
+        :placeholder="$t('State')"
         name="region_id"
         label="label"
-        placeholder="Select State/Province"
       />
       <span
         v-if="
           $v.address.region_id.$error
             && !$v.address.region_id.required
         "
       >
-        This field is required!
+        {{ $t('This field is required!') }}
       </span>
     </div>
     <BaseInput
       v-model="address.company"
-      label="Company"
+      :label="$t('Company')"
       name="company"
     />
     <BaseButton
-      text="Save Address"
+      :text="$t('Save Address')"
       @click.native="saveAddress"
     />
   </form>

view/frontend/web/js/components/CustomerEmailField.vue

@@ -47,12 +47,9 @@ export default {
     emailAvailabilityMessage () {
       if (this.email !== '' && !this.$v.email.$error) {
         if (this.emailAvailable) {
-          return `You can create an account after checkout.`
+          return this.$t('You can create an account after checkout')
         } else {
-          return `
-            You already have an account with us.
-            Sign in <a href="/customer/account/login/">here</a> or continue as guest.
-          `
+          return this.$t('You already have an account with us', { link: '/customer/account/login/' })
         }
       } else {
         return false
@@ -89,7 +86,7 @@ export default {
           this.emailAvailable = data
         })
         .catch(error => {
-          console.error('Looks like there was a problem: \n', error)
+          console.error(`${this.$t('Looks like there was a problem')}: \n`, error)
         })
 
       this.$store.commit('setItem', {

view/frontend/web/js/components/DiscountCodeForm.vue

@@ -1,29 +1,29 @@
 <template>
   <div>
     <h2>
-      Discount
+      {{ $t('Discount') }}
     </h2>
     <div class="discount-code">
       <form class="discount__form">
         <BaseInput
           v-model="discount.code"
           :read-only="couponCode !== ''"
-          label="Apply Discount Code"
+          :label="$t('Apply Discount Code')"
           name="discount-code"
         />
         <BaseButton
           v-if="couponCode === ''"
           :loader="loader"
+          :text="$t('Apply Discount')"
           class="button"
-          text="Apply Discount"
           with-loader
           @click.native="applyDiscount"
         />
         <BaseButton
           v-else
           :loader="loader"
+          :text="$t('Remove Discount')"
           class="button"
-          text="Remove Discount"
           @click.native="removeDiscount"
         />
         <p
@@ -82,9 +82,9 @@ export default {
           this.loader = false
 
           if (error.status === 404) {
-            this.error = `Coupon code not found! Failed when trying to activate: '${this.discount.code}' coupon code. Please use another one.`
+            this.error = this.$t('Coupon code not found!', { code: this.discount.code })
           } else {
-            this.error = 'Something goes wrong when trying to send coupon code. Please try again later.'
+            this.error = this.$t('Something goes wrong when trying to send coupon code. Please try again later.')
           }
         })
     },
@@ -103,9 +103,9 @@ export default {
           this.loader = false
 
           if (error.status === 404) {
-            this.error = `Failed when trying to delete: '${this.discount.code}' coupon code. Coupon code not found!`
+            this.error = this.$t('Failed when trying to delete coupon code', { code: this.discount.code })
           } else {
-            this.error = 'Something goes wrong when trying to delete coupon code. Please try again later.'
+            this.error = this.$t('Something goes wrong when trying to delete coupon code')
           }
         })
     }

view/frontend/web/js/components/PaymentMethods.vue

@@ -1,7 +1,7 @@
 <template>
   <form>
     <h2>
-      Payment methods
+      {{ $t('Payment methods') }}
     </h2>
     <div v-if="paymentMethods.length">
       <div
@@ -26,12 +26,12 @@
             && !$v.selectedPaymentMethod.required
         "
       >
-        This field is required!
+        {{ $t('This field is required!') }}
       </span>
     </div>
     <div v-else>
       <p>
-        In this country we don't handle any payment methods.
+        {{ $t('In this country we don\'t handle any payment methods') }}
       </p>
     </div>
   </form>

view/frontend/web/js/components/ProductsList.vue

@@ -4,7 +4,7 @@
     class="products-list"
   >
     <h2>
-      Product List
+      {{ $t('Product List') }}
     </h2>
     <ul class="products">
       <ProductsListItem

view/frontend/web/js/components/ProductsListItem.vue

@@ -1,22 +1,23 @@
 <template>
   <li class="product">
     <p class="products__title">
-      Product name:
+      {{ $t('Product name') }}:
       <strong>
         {{ product.name }}
       </strong>
     </p>
 
     <span class="product__price">
-      Price:
+      {{ $t('Price') }}:
+
       <strong>
         {{ product.price | currency }}
       </strong>
     </span>
 
     <div class="products__handler">
       <p class="products__information">
-        Product details:
+        {{ $t('Product details') }}:
       </p>
 
       <template v-for="detail in JSON.parse(product.options)">
@@ -32,15 +33,15 @@
       </template>
 
       <span class="products__detail">
-        Qty:
+        {{ $t('Qty') }}:
         <strong>
           {{ product.qty }}
         </strong>
       </span>
 
       <template v-if="product.discount_percent > 0">
         <span class="product__detail">
-          Discount: {{ product.discount_percent }}%
+          {{ $t('Discount') }}: {{ product.discount_percent }}%
         </span>
       </template>
     </div>

view/frontend/web/js/components/ProgressBar.vue

@@ -10,15 +10,15 @@
           { 'progress-bar__item--active': step === 'shipping' }
         ]"
       >
-        Shipping Step
+        {{ $t('Shipping Step') }}
       </span>/
       <span
         :class="[
           'progress-bar__item',
           { 'progress-bar__item--active': step === 'payment' }
         ]"
       >
-        Review & Payments Step
+        {{ $t('Review & Payment Step') }}
       </span>
     </h1>
   </div>