[WIP] #68 - added customer addresses component

test/App.test.js

@@ -7,20 +7,21 @@ localVue.use(Vuex)
 
 describe('App.test.js', () => {
   let store
-  let actions
+  let mutations
   let wrapper
 
   beforeEach(() => {
-    actions = {
-      getCustomerData: jest.fn()
+    mutations = {
+      setItem: jest.fn()
     }
     store = new Vuex.Store({
-      actions
+      mutations
     })
 
     wrapper = shallowMount(App, {
       computed: {
-        isCustomerLoggedIn: () => true
+        isCustomerLoggedIn: () => true,
+        customerData: () => null
       },
       store,
       localVue

view/frontend/web/js/App.vue

@@ -33,11 +33,17 @@ export default {
   computed: {
     isCustomerLoggedIn () {
       return this.$store.getters.isCustomerLoggedIn
+    },
+    customerData () {
+      return window.config.customerData
     }
   },
   mounted () {
     if (this.isCustomerLoggedIn) {
-      this.$store.dispatch('getCustomerData')
+      this.$store.commit('setItem', {
+        item: 'customer',
+        value: this.customerData
+      })
     }
   }
 }

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

@@ -1,10 +1,15 @@
 <template>
-  <address>
+  <address :class="{ active: address.default_billing }">
     {{ address.firstname }} {{ address.lastname }}<br>
     {{ address.street[0] }} {{ address.street[1] }}<br>
     {{ address.city }}<br>
     {{ address.postcode }}<br>
-    {{ address.region }}<br>
+    <template v-if="typeof address.region === 'object'">
+      {{ address.region.region }}<br>
+    </template>
+    <template v-else>
+      {{ address.region }}<br>
+    </template>
     {{ address.country_id.label }}<br>
     {{ address.telephone }}<br>
     {{ address.company }}
@@ -21,3 +26,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+  .active {
+    border: 1px solid #000;
+  }
+</style>

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

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <AddressData
+      v-for="address in addresses"
+      :address="address"
+      :key="address.id"
+      class="address-item"
+    />
+  </div>
+</template>
+
+<script>
+import AddressData from './AddressData.vue'
+
+export default {
+  components: {
+    AddressData
+  },
+  computed: {
+    addresses () {
+      if (this.$store.state.customer !== null) {
+        return this.$store.state.customer.addresses
+      }
+    }
+  }
+}
+</script>
+
+<style>
+  .address-item {
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #c2c2c2;
+  }
+</style>

view/frontend/web/js/components/steps/TheShippingStep.vue

@@ -10,7 +10,13 @@
         ref="customerEmail"
         @ready="isReady => customerEmailReadyToSubmit = isReady"
       />
+      <CustomerAddresses v-if="isCustomerLoggedIn"/>
+      <BaseButton
+        text="Add new address"
+        @click.native="addNewAddress()"
+      />
       <ShippingAddressForm
+        v-if="!isCustomerLoggedIn || newAddress"
         ref="shippingsAddressForm"
         @ready="isReady => shippingAddressReadyToSubmit = isReady"
       />
@@ -29,13 +35,15 @@
 
 <script>
 import BaseButton from '../BaseButton.vue'
+import CustomerAddresses from '../CustomerAddresses.vue'
 import CustomerEmailField from '../CustomerEmailField.vue'
 import ShippingAddressForm from '../ShippingAddressForm.vue'
 import ShippingMethods from '../ShippingMethods.vue'
 
 export default {
   components: {
     BaseButton,
+    CustomerAddresses,
     CustomerEmailField,
     ShippingAddressForm,
     ShippingMethods
@@ -45,7 +53,8 @@ export default {
       customerEmailReadyToSubmit: false,
       shippingMethodsReadyToSubmit: false,
       shippingAddressReadyToSubmit: false,
-      loader: false
+      loader: false,
+      newAddress: false
     }
   },
   computed: {
@@ -80,6 +89,9 @@ export default {
       })
 
       this.$store.dispatch('getTotals')
+    },
+    addNewAddress () {
+      this.newAddress = !this.newAddress
     }
   }
 }