From 6e4cbfe275a79d700e3dd9ed8f174934b4fba5a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Szafra=C5=84ski?= <pawel.szafranski@snow.dog>
Date: Fri, 21 Dec 2018 14:24:10 +0100
Subject: [PATCH 1/4] #68 - added customer addresses component

---
 view/frontend/web/js/App.vue                  |  5 ++-
 .../web/js/components/AddressData.vue         | 15 ++++++--
 .../web/js/components/CustomerAddresses.vue   | 35 +++++++++++++++++++
 .../js/components/steps/TheShippingStep.vue   |  3 ++
 4 files changed, 55 insertions(+), 3 deletions(-)
 create mode 100644 view/frontend/web/js/components/CustomerAddresses.vue

diff --git a/view/frontend/web/js/App.vue b/view/frontend/web/js/App.vue
index a5f94f5..8d7c955 100644
--- a/view/frontend/web/js/App.vue
+++ b/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
+      })
     }
   }
 }
diff --git a/view/frontend/web/js/components/AddressData.vue b/view/frontend/web/js/components/AddressData.vue
index 4cced4e..374fa67 100644
--- a/view/frontend/web/js/components/AddressData.vue
+++ b/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>
diff --git a/view/frontend/web/js/components/CustomerAddresses.vue b/view/frontend/web/js/components/CustomerAddresses.vue
new file mode 100644
index 0000000..f8bcc04
--- /dev/null
+++ b/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>
diff --git a/view/frontend/web/js/components/steps/TheShippingStep.vue b/view/frontend/web/js/components/steps/TheShippingStep.vue
index 86fb7ee..8ae5ccf 100644
--- a/view/frontend/web/js/components/steps/TheShippingStep.vue
+++ b/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,6 +30,7 @@
 
 <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'
@@ -36,6 +38,7 @@ import ShippingMethods from '../ShippingMethods.vue'
 export default {
   components: {
     BaseButton,
+    CustomerAddresses,
     CustomerEmailField,
     ShippingAddressForm,
     ShippingMethods

From 5bc8594a277f89e07fa51848448ca2f1e6748ff0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Szafra=C5=84ski?= <pawel.szafranski@snow.dog>
Date: Fri, 21 Dec 2018 14:31:07 +0100
Subject: [PATCH 2/4] #68 - added condition isCustomerLoggedIn for addresses
 component

---
 view/frontend/web/js/components/steps/TheShippingStep.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/view/frontend/web/js/components/steps/TheShippingStep.vue b/view/frontend/web/js/components/steps/TheShippingStep.vue
index 8ae5ccf..7a7f0a6 100644
--- a/view/frontend/web/js/components/steps/TheShippingStep.vue
+++ b/view/frontend/web/js/components/steps/TheShippingStep.vue
@@ -5,12 +5,12 @@
   >
     <h2>Shipping address</h2>
     <form>
-      <CustomerAddresses />
       <CustomerEmailField
         v-if="!isCustomerLoggedIn"
         ref="customerEmail"
         @ready="isReady => customerEmailReadyToSubmit = isReady"
       />
+      <CustomerAddresses v-if="isCustomerLoggedIn"/>
       <ShippingAddressForm
         ref="shippingsAddressForm"
         @ready="isReady => shippingAddressReadyToSubmit = isReady"

From 175fb8facbc02c573e4d966a229f88d5b681aada Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Szafra=C5=84ski?= <pawel.szafranski@snow.dog>
Date: Fri, 21 Dec 2018 14:40:32 +0100
Subject: [PATCH 3/4] #68 - added addNewAddress method to toggle shipping
 address

---
 .../web/js/components/steps/TheShippingStep.vue       | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/view/frontend/web/js/components/steps/TheShippingStep.vue b/view/frontend/web/js/components/steps/TheShippingStep.vue
index 7a7f0a6..a3e66c3 100644
--- a/view/frontend/web/js/components/steps/TheShippingStep.vue
+++ b/view/frontend/web/js/components/steps/TheShippingStep.vue
@@ -11,7 +11,12 @@
         @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"
       />
@@ -48,7 +53,8 @@ export default {
       customerEmailReadyToSubmit: false,
       shippingMethodsReadyToSubmit: false,
       shippingAddressReadyToSubmit: false,
-      loader: false
+      loader: false,
+      newAddress: false
     }
   },
   computed: {
@@ -83,6 +89,9 @@ export default {
       })
 
       this.$store.dispatch('getTotals')
+    },
+    addNewAddress () {
+      this.newAddress = !this.newAddress
     }
   }
 }

From a1f3e46944469aca63260b9edf54c8acfcd35cfe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Szafra=C5=84ski?= <pawel.szafranski@snow.dog>
Date: Fri, 21 Dec 2018 15:13:06 +0100
Subject: [PATCH 4/4] #68 - changed action to mutation i App.test.js file

---
 test/App.test.js             | 11 ++++++-----
 view/frontend/web/js/App.vue |  5 ++++-
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/test/App.test.js b/test/App.test.js
index 2574780..7e5f241 100644
--- a/test/App.test.js
+++ b/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
diff --git a/view/frontend/web/js/App.vue b/view/frontend/web/js/App.vue
index 8d7c955..7829b6f 100644
--- a/view/frontend/web/js/App.vue
+++ b/view/frontend/web/js/App.vue
@@ -33,13 +33,16 @@ export default {
   computed: {
     isCustomerLoggedIn () {
       return this.$store.getters.isCustomerLoggedIn
+    },
+    customerData () {
+      return window.config.customerData
     }
   },
   mounted () {
     if (this.isCustomerLoggedIn) {
       this.$store.commit('setItem', {
         item: 'customer',
-        value: window.config.customerData
+        value: this.customerData
       })
     }
   }