#68 - added customer addresses component

view/frontend/web/js/App.vue

@@ -37,7 +37,10 @@ export default {
   },
   mounted () {
     if (this.isCustomerLoggedIn) {
-      this.$store.dispatch('getCustomerData')
+      this.$store.commit('setItem', {
+        item: 'customer',
+        value: window.config.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

@@ -5,6 +5,7 @@
   >
     <h2>Shipping address</h2>
     <form>
+      <CustomerAddresses />
       <CustomerEmailField
         v-if="!isCustomerLoggedIn"
         ref="customerEmail"
@@ -29,13 +30,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