From 4c0d6575a3257d56c32973ff45e26632fd8165d9 Mon Sep 17 00:00:00 2001
From: Marcin Drwiega <mdrwiega@divante.pl>
Date: Fri, 6 Mar 2020 06:23:24 +0100
Subject: [PATCH 01/12] interated basic info with API

---
 packages/boilerplate/theme/sfui.scss          |   6 +
 .../api-client/src/api/getMe/defaultQuery.ts  |  14 +++
 packages/core/docs/Theme.vue                  |   2 +-
 .../theme-module/theme/pages/MyAccount.vue    | 115 ++++++++----------
 .../theme/pages/MyAccount/MyProfile.vue       |   2 +-
 .../theme/pages/MyAccount/ShippingDetails.vue |  64 ++++++----
 6 files changed, 109 insertions(+), 94 deletions(-)
 create mode 100644 packages/boilerplate/theme/sfui.scss

diff --git a/packages/boilerplate/theme/sfui.scss b/packages/boilerplate/theme/sfui.scss
new file mode 100644
index 000000000..d303694e0
--- /dev/null
+++ b/packages/boilerplate/theme/sfui.scss
@@ -0,0 +1,6 @@
+/* Here you can override global SCSS variables */
+
+// global override excluding scoped components
+// $button-padding: 5px !default;
+// global override including scoped componentss
+// $button-padding: 50px;
\ No newline at end of file
diff --git a/packages/commercetools/api-client/src/api/getMe/defaultQuery.ts b/packages/commercetools/api-client/src/api/getMe/defaultQuery.ts
index b501513b2..1d1d3b860 100644
--- a/packages/commercetools/api-client/src/api/getMe/defaultQuery.ts
+++ b/packages/commercetools/api-client/src/api/getMe/defaultQuery.ts
@@ -24,6 +24,20 @@ const fullProfile = gql`
       }
       customer {
         ...DefaultCustomer
+        addresses {
+          id
+          title
+          firstName
+          lastName
+          streetName
+          streetNumber
+          postalCode
+          city
+          region
+          state
+          country
+          apartment
+        }
       }
     }
   }
diff --git a/packages/core/docs/Theme.vue b/packages/core/docs/Theme.vue
index e74da451d..1357b1178 100644
--- a/packages/core/docs/Theme.vue
+++ b/packages/core/docs/Theme.vue
@@ -1,4 +1,4 @@
-<template>
+7<template>
   <div>
     <h1>Working with themes</h1>
     <p>
diff --git a/packages/core/theme-module/theme/pages/MyAccount.vue b/packages/core/theme-module/theme/pages/MyAccount.vue
index c3e3b7e53..2df12cdeb 100644
--- a/packages/core/theme-module/theme/pages/MyAccount.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount.vue
@@ -21,6 +21,7 @@
         <SfContentPage title="Shipping details">
           <ShippingDetails
             :account="account"
+            :addresses="user.addresses"
             @update:shipping="account = { ...account, ...$event }"
           />
         </SfContentPage>
@@ -45,6 +46,8 @@
 </template>
 <script>
 import { SfBreadcrumbs, SfContentPages } from '@storefront-ui/vue';
+import { useUser } from '@vue-storefront/commercetools-composables';
+import { computed } from '@vue/composition-api';
 import MyProfile from './MyAccount/MyProfile';
 import ShippingDetails from './MyAccount/ShippingDetails';
 import LoyaltyCard from './MyAccount/LoyaltyCard';
@@ -64,79 +67,61 @@ export default {
     OrderHistory,
     MyReviews
   },
-  data() {
-    return {
-      breadcrumbs: [
-        {
-          text: 'Home',
-          route: {
-            link: '#'
-          }
-        },
-        {
-          text: 'My Account',
-          route: {
-            link: '#'
-          }
+  setup(props, { root }) {
+    const { user } = useUser();
+    const breadcrumbs = [
+      {
+        text: 'Home',
+        route: {
+          link: '#'
+        }
+      },
+      {
+        text: 'My Account',
+        route: {
+          link: '#'
         }
-      ],
-      account: {
-        firstName: 'Sviatlana',
-        lastName: 'Havaka',
-        email: 'example@email.com',
-        password: 'a*23Et',
-        shipping: [
-          {
-            firstName: 'Sviatlana',
-            lastName: 'Havaka',
-            streetName: 'Zielinskiego',
-            apartment: '24/193A',
-            city: 'Wroclaw',
-            state: 'Lower Silesia',
-            zipCode: '53-540',
-            country: 'Poland',
-            phoneNumber: '(00)560 123 456'
-          },
-          {
-            firstName: 'Sviatlana',
-            lastName: 'Havaka',
-            streetName: 'Zielinskiego',
-            apartment: '20/193A',
-            city: 'Wroclaw',
-            state: 'Lower Silesia',
-            zipCode: '53-603',
-            country: 'Poland',
-            phoneNumber: '(00)560 123 456'
-          }
-        ],
-        orders: [
-          ['#35765', '4th Nov, 2019', 'Visa card', '$12.00', 'In process'],
-          ['#35766', '4th Nov, 2019', 'Paypal', '$12.00', 'Finalised'],
-          ['#35768', '4th Nov, 2019', 'Mastercard', '$12.00', 'Finalised'],
-          ['#35769', '4th Nov, 2019', 'Paypal', '$12.00', 'Finalised']
-        ]
       }
-    };
-  },
-  computed: {
-    activePage() {
-      const { pageName } = this.$route.params;
+    ];
 
-      if (pageName) {
-        return (pageName.charAt(0).toUpperCase() + pageName.slice(1)).replace('-', ' ');
-      }
+    const activePage = computed(() => {
+      const { pageName } = root.$route.params;
 
-      return 'My profile';
-    }
-  },
-  methods: {
-    changeActivePage(title) {
+      return pageName
+        ? (pageName.charAt(0).toUpperCase() + pageName.slice(1)).replace('-', ' ')
+        : 'My profile';
+    });
+
+    const changeActivePage = (title) => {
       if (title === 'Log out') {
         return;
       }
 
-      this.$router.push(`/my-account/${title.toLowerCase().replace(' ', '-')}`);
-    }
+      root.$router.push(`/my-account/${title.toLowerCase().replace(' ', '-')}`);
+    };
+
+    const addresses = computed(() => user.addresses || []);
+
+    const account = computed(() => ({
+      firstName: user.value.firstName,
+      lastName: user.value.lastName,
+      email: user.value.email,
+      shipping: addresses,
+      orders: [
+        ['#35765', '4th Nov, 2019', 'Visa card', '$12.00', 'In process'],
+        ['#35766', '4th Nov, 2019', 'Paypal', '$12.00', 'Finalised'],
+        ['#35768', '4th Nov, 2019', 'Mastercard', '$12.00', 'Finalised'],
+        ['#35769', '4th Nov, 2019', 'Paypal', '$12.00', 'Finalised']
+      ]
+    }));
+
+    return {
+      user,
+      account,
+      breadcrumbs,
+      changeActivePage,
+      activePage
+    };
   }
 };
 </script>
diff --git a/packages/core/theme-module/theme/pages/MyAccount/MyProfile.vue b/packages/core/theme-module/theme/pages/MyAccount/MyProfile.vue
index 021d0dd51..66a569500 100644
--- a/packages/core/theme-module/theme/pages/MyAccount/MyProfile.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount/MyProfile.vue
@@ -54,7 +54,7 @@
       <p class="message">
         If you want to change the password to access your account, enter the
         following information:<br />Your current email address is
-        <span class="message__label">example@email.com</span>
+        <span class="message__label">{{account.email}}</span>
       </p>
       <ValidationObserver v-slot="{ handleSubmit }">
         <form class="form" @submit.prevent="handleSubmit(updatePassword)">
diff --git a/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue b/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue
index c9ee1a58b..ff4dd9b0c 100644
--- a/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue
@@ -8,7 +8,7 @@
     >
       <SfTab title="Change the address">
         <p class="message">
-          Keep your addresses and contact details updated.
+          Keep your shipping and contact details updated.
         </p>
 
         <ValidationObserver v-slot="{ handleSubmit }">
@@ -46,8 +46,8 @@
               />
             </ValidationProvider>
             <SfInput
-              v-model="apartment"
-              name="apartment"
+              v-model="streetNumber"
+              name="streetNumber"
               label="House/Apartment number"
               required
               class="form__element"
@@ -77,8 +77,8 @@
             <div class="form__horizontal">
               <ValidationProvider rules="required|min:4" v-slot="{ errors }" class="form__element">
                 <SfInput
-                  v-model="zipCode"
-                  name="zipCode"
+                  v-model="postalCode"
+                  name="postalCode"
                   label="Zip-code"
                   required
                   :valid="!errors[0]"
@@ -106,7 +106,7 @@
             </div>
             <ValidationProvider rules="required|min:8" v-slot="{ errors }" class="form__element">
               <SfInput
-                v-model="phoneNumber"
+                v-model="phone"
                 name="phone"
                 label="Phone number"
                 required
@@ -122,28 +122,28 @@
     <SfTabs v-else key="address-list" :open-tab="1" class="tab-orphan">
       <SfTab title="Shipping details">
         <p class="message">
-          Manage all the shipping addresses you want (work place, home address
+          Manage all the shipping shipping you want (work place, home address
           ...) This way you won"t have to enter the shipping address manually
           with each order.
         </p>
         <transition-group tag="div" name="fade" class="shipping-list">
           <div
-            v-for="(shipping, key) in account.shipping"
-            :key="shipping.streetName + shipping.apartment"
+            v-for="(address, key) in addresses"
+            :key="address.streetName + address.streetNumber"
             class="shipping"
           >
             <div class="shipping__content">
               <p class="shipping__address">
                 <span class="shipping__client-name"
-                  >{{ shipping.firstName }} {{ shipping.lastName }}</span
+                  >{{ address.firstName }} {{ address.lastName }}</span
                 ><br />
-                {{ shipping.streetName }} {{ shipping.apartment }}<br />{{
-                  shipping.zipCode
+                {{ address.streetName }} {{ address.streetNumber }}<br />{{
+                  address.postalCode
                 }}
-                {{ shipping.city }},<br />{{ shipping.country }}
+                {{ address.city }},<br />{{ address.country }}
               </p>
               <p class="shipping__address">
-                {{ shipping.phoneNumber }}
+                {{ address.phone }}
               </p>
             </div>
             <div class="shipping__actions">
@@ -179,6 +179,7 @@ import {
   SfSelect,
   SfIcon
 } from '@storefront-ui/vue';
+import { ref } from '@vue/composition-api';
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
 import { required, min, oneOf } from 'vee-validate/dist/rules';
 
@@ -212,8 +213,17 @@ export default {
     account: {
       type: Object,
       default: () => ({})
+    },
+    addresses: {
+      type: Array,
+      default: () => []
     }
   },
+  setup(props) {
+    const customer = ref(props.account);
+
+    return { customer };
+  },
   data() {
     return {
       editAddress: false,
@@ -221,12 +231,12 @@ export default {
       firstName: '',
       lastName: '',
       streetName: '',
-      apartment: '',
+      streetNumber: '',
       city: '',
       state: '',
-      zipCode: '',
+      postalCode: '',
       country: '',
-      phoneNumber: '',
+      phone: '',
       countries: [
         'Austria',
         'Azerbaijan',
@@ -281,17 +291,17 @@ export default {
   methods: {
     changeAddress(index) {
       const account = this.account;
-      const shipping = account.shipping[index];
+      const shipping = this.$props.addresses[index];
       if (index > -1) {
         this.firstName = account.firstName;
         this.lastName = account.lastName;
         this.streetName = shipping.streetName;
-        this.apartment = shipping.apartment;
+        this.streetNumber = shipping.streetNumber;
         this.city = shipping.city;
         this.state = shipping.state;
-        this.zipCode = shipping.zipCode;
+        this.postalCode = shipping.postalCode;
         this.country = shipping.country;
-        this.phoneNumber = shipping.phoneNumber;
+        this.phone = shipping.phone;
         this.editedAddress = index;
       }
       this.editAddress = true;
@@ -301,27 +311,27 @@ export default {
       const shipping = {
         firstName: this.firstName,
         lastName: this.lastName,
-        apartment: this.apartment,
+        streetNumber: this.streetNumber,
         streetName: this.streetName,
         city: this.city,
         state: this.state,
-        zipCode: this.zipCode,
+        postalCode: this.postalCode,
         country: this.country,
-        phoneNumber: this.phoneNumber
+        phone: this.phone
       };
       const index = this.editedAddress;
       if (index > -1) {
-        account.shipping[index] = shipping;
+        this.$props.addresses[index] = shipping;
         this.editedAddress = -1;
       } else {
-        account.shipping.push(shipping);
+        this.$props.addresses.push(shipping);
       }
       this.editAddress = false;
       this.$emit('update:shipping', account);
     },
     deleteAddress(index) {
       const account = { ...this.account };
-      account.shipping.splice(index, 1);
+      this.$props.addresses.splice(index, 1);
       this.$emit('update:shipping', account);
     }
   }

From 1935190c4504b5be48a5addd5cfc9296544d7cb9 Mon Sep 17 00:00:00 2001
From: Marcin Drwiega <mdrwiega@divante.pl>
Date: Fri, 6 Mar 2020 06:29:20 +0100
Subject: [PATCH 02/12] Removed wrong changes

---
 packages/boilerplate/theme/sfui.scss | 6 ------
 packages/core/docs/Theme.vue         | 2 +-
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/boilerplate/theme/sfui.scss b/packages/boilerplate/theme/sfui.scss
index d303694e0..e69de29bb 100644
--- a/packages/boilerplate/theme/sfui.scss
+++ b/packages/boilerplate/theme/sfui.scss
@@ -1,6 +0,0 @@
-/* Here you can override global SCSS variables */
-
-// global override excluding scoped components
-// $button-padding: 5px !default;
-// global override including scoped componentss
-// $button-padding: 50px;
\ No newline at end of file
diff --git a/packages/core/docs/Theme.vue b/packages/core/docs/Theme.vue
index 1357b1178..e74da451d 100644
--- a/packages/core/docs/Theme.vue
+++ b/packages/core/docs/Theme.vue
@@ -1,4 +1,4 @@
-7<template>
+<template>
   <div>
     <h1>Working with themes</h1>
     <p>

From 965654dccba02fc7cd7e768df0d46b4b7ecaf8dc Mon Sep 17 00:00:00 2001
From: Marcin Drwiega <mdrwiega@divante.pl>
Date: Fri, 6 Mar 2020 08:16:51 +0100
Subject: [PATCH 03/12] Filter shipping addresses

---
 .../api-client/src/api/getMe/defaultQuery.ts              | 1 +
 packages/core/theme-module/theme/pages/MyAccount.vue      | 8 +++++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/commercetools/api-client/src/api/getMe/defaultQuery.ts b/packages/commercetools/api-client/src/api/getMe/defaultQuery.ts
index 1d1d3b860..40af68b11 100644
--- a/packages/commercetools/api-client/src/api/getMe/defaultQuery.ts
+++ b/packages/commercetools/api-client/src/api/getMe/defaultQuery.ts
@@ -38,6 +38,7 @@ const fullProfile = gql`
           country
           apartment
         }
+        shippingAddressIds
       }
     }
   }
diff --git a/packages/core/theme-module/theme/pages/MyAccount.vue b/packages/core/theme-module/theme/pages/MyAccount.vue
index 2df12cdeb..0cc1b23bb 100644
--- a/packages/core/theme-module/theme/pages/MyAccount.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount.vue
@@ -21,7 +21,7 @@
         <SfContentPage title="Shipping details">
           <ShippingDetails
             :account="account"
-            :addresses="user.addresses"
+            :addresses="account.shipping"
             @update:shipping="account = { ...account, ...$event }"
           />
         </SfContentPage>
@@ -100,13 +100,15 @@ export default {
       root.$router.push(`/my-account/${title.toLowerCase().replace(' ', '-')}`);
     };
 
-    const addresses = computed(() => user.addresses || []);
+    const getShippingAddresses = () => (
+      (user.value.addresses || []).filter(address => (user.value.shippingAddressIds || []).includes(address.id))
+    );
 
     const account = computed(() => ({
       firstName: user.value.firstName,
       lastName: user.value.lastName,
       email: user.value.email,
-      shipping: addresses,
+      shipping: getShippingAddresses(),
       orders: [
         ['#35765', '4th Nov, 2019', 'Visa card', '$12.00', 'In process'],
         ['#35766', '4th Nov, 2019', 'Paypal', '$12.00', 'Finalised'],

From f347abd3e220c2a413dbb9eb76ed394183eef6af Mon Sep 17 00:00:00 2001
From: Marcin Drwiega <mdrwiega@divante.pl>
Date: Fri, 6 Mar 2020 09:20:48 +0100
Subject: [PATCH 04/12] refactored shipping details

---
 .../api-client/src/api/getMe/defaultQuery.ts  |   3 +
 .../theme-module/theme/pages/MyAccount.vue    |   1 -
 .../theme/pages/MyAccount/ShippingDetails.vue | 257 +++++++++---------
 3 files changed, 139 insertions(+), 122 deletions(-)

diff --git a/packages/commercetools/api-client/src/api/getMe/defaultQuery.ts b/packages/commercetools/api-client/src/api/getMe/defaultQuery.ts
index 40af68b11..dd306d849 100644
--- a/packages/commercetools/api-client/src/api/getMe/defaultQuery.ts
+++ b/packages/commercetools/api-client/src/api/getMe/defaultQuery.ts
@@ -37,6 +37,9 @@ const fullProfile = gql`
           state
           country
           apartment
+          contactInfo {
+            phone
+          }
         }
         shippingAddressIds
       }
diff --git a/packages/core/theme-module/theme/pages/MyAccount.vue b/packages/core/theme-module/theme/pages/MyAccount.vue
index 0cc1b23bb..43f4bde11 100644
--- a/packages/core/theme-module/theme/pages/MyAccount.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount.vue
@@ -21,7 +21,6 @@
         <SfContentPage title="Shipping details">
           <ShippingDetails
             :account="account"
-            :addresses="account.shipping"
             @update:shipping="account = { ...account, ...$event }"
           />
         </SfContentPage>
diff --git a/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue b/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue
index ff4dd9b0c..7702e92bd 100644
--- a/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue
@@ -128,8 +128,8 @@
         </p>
         <transition-group tag="div" name="fade" class="shipping-list">
           <div
-            v-for="(address, key) in addresses"
-            :key="address.streetName + address.streetNumber"
+            v-for="(address) in account.shipping"
+            :key="address.id"
             class="shipping"
           >
             <div class="shipping__content">
@@ -153,12 +153,12 @@
                 size="14px"
                 role="button"
                 class="mobile-only"
-                @click="deleteAddress(key)"
+                @click="deleteAddress(address.id)"
               />
-              <SfButton @click="changeAddress(key)">Change</SfButton>
+              <SfButton @click="changeAddress(address.id)">Change</SfButton>
               <SfButton
                 class="shipping__button-delete desktop-only"
-                @click="deleteAddress(key)"
+                @click="deleteAddress(address.id)"
                 >Delete</SfButton
               >
             </div>
@@ -213,127 +213,142 @@ export default {
     account: {
       type: Object,
       default: () => ({})
-    },
-    addresses: {
-      type: Array,
-      default: () => []
     }
   },
-  setup(props) {
-    const customer = ref(props.account);
+  setup({ account }) {
+    const editAddress = ref(false);
+    const editedAddress = ref(-1);
+    const countries = [
+      'Austria',
+      'Azerbaijan',
+      'Belarus',
+      'Belgium',
+      'Bosnia and Herzegovina',
+      'Bulgaria',
+      'Croatia',
+      'Cyprus',
+      'Czech Republic',
+      'Denmark',
+      'Estonia',
+      'Finland',
+      'France',
+      'Georgia',
+      'Germany',
+      'Greece',
+      'Hungary',
+      'Iceland',
+      'Ireland',
+      'Italy',
+      'Kosovo',
+      'Latvia',
+      'Liechtenstein',
+      'Lithuania',
+      'Luxembourg',
+      'Macedonia',
+      'Malta',
+      'Moldova',
+      'Monaco',
+      'Montenegro',
+      'The Netherlands',
+      'Norway',
+      'Poland',
+      'Portugal',
+      'Romania',
+      'Russia',
+      'San Marino',
+      'Serbia',
+      'Slovakia',
+      'Slovenia',
+      'Spain',
+      'Sweden',
+      'Switzerland',
+      'Turkey',
+      'Ukraine',
+      'United Kingdom',
+      'Vatican City'
+    ];
+    const firstName = ref('');
+    const lastName = ref('');
+    const streetName = ref('');
+    const streetNumber = ref('');
+    const city = ref('');
+    const state = ref('');
+    const postalCode = ref('');
+    const country = ref('');
+    const phone = ref('');
+
+    const changeAddress = (id) => {
+      const address = account.shipping.find(shippingAddress => id === shippingAddress.id);
+
+      if (!address) {
+        return;
+      }
+
+      firstName.value = address.firstName || account.firstName || '';
+      lastName.value = address.lastName || account.lastName || '';
+      streetName.value = address.streetName || '';
+      city.value = address.city || '';
+      state.value = address.state || '';
+      postalCode.value = address.postalCode || '';
+      country.value = address.country || '';
+      phone.value = address.contactInfo ? address.contactInfo.phone || '' : '';
+
+      editAddress.value = true;
+    };
+
+    const updateAddress = (id) => {
+      console.log(`updateAddress: ${id}`);
+      // TODO: Integrate with API in other task
+      // OLD CODE HERE:
+      // const account = { ...this.account };
+      // const shipping = {
+      //   firstName: this.firstName,
+      //   lastName: this.lastName,
+      //   streetNumber: this.streetNumber,
+      //   streetName: this.streetName,
+      //   city: this.city,
+      //   state: this.state,
+      //   postalCode: this.postalCode,
+      //   country: this.country,
+      //   phone: this.phone
+      // };
+      // const index = this.editedAddress;
+      // if (index > -1) {
+      //   this.$props.addresses[index] = shipping;
+      //   this.editedAddress = -1;
+      // } else {
+      //   this.$props.addresses.push(shipping);
+      // }
+      // this.editAddress = false;
+      // this.$emit('update:shipping', account);
+    };
+
+    const deleteAddress = (id) => {
+      console.log(`deleteAddress: ${id}`);
+      // TODO: Integrate with API in other task
+      // OLD CODE HERE:
+      // const account = { ...this.account };
+      // this.$props.addresses.splice(index, 1);
+      // this.$emit('update:shipping', account);
+    };
 
-    return { customer };
-  },
-  data() {
     return {
-      editAddress: false,
-      editedAddress: -1,
-      firstName: '',
-      lastName: '',
-      streetName: '',
-      streetNumber: '',
-      city: '',
-      state: '',
-      postalCode: '',
-      country: '',
-      phone: '',
-      countries: [
-        'Austria',
-        'Azerbaijan',
-        'Belarus',
-        'Belgium',
-        'Bosnia and Herzegovina',
-        'Bulgaria',
-        'Croatia',
-        'Cyprus',
-        'Czech Republic',
-        'Denmark',
-        'Estonia',
-        'Finland',
-        'France',
-        'Georgia',
-        'Germany',
-        'Greece',
-        'Hungary',
-        'Iceland',
-        'Ireland',
-        'Italy',
-        'Kosovo',
-        'Latvia',
-        'Liechtenstein',
-        'Lithuania',
-        'Luxembourg',
-        'Macedonia',
-        'Malta',
-        'Moldova',
-        'Monaco',
-        'Montenegro',
-        'The Netherlands',
-        'Norway',
-        'Poland',
-        'Portugal',
-        'Romania',
-        'Russia',
-        'San Marino',
-        'Serbia',
-        'Slovakia',
-        'Slovenia',
-        'Spain',
-        'Sweden',
-        'Switzerland',
-        'Turkey',
-        'Ukraine',
-        'United Kingdom',
-        'Vatican City'
-      ]
+      countries,
+      firstName,
+      lastName,
+      streetName,
+      streetNumber,
+      city,
+      state,
+      postalCode,
+      country,
+      phone,
+      editAddress,
+      editedAddress,
+      changeAddress,
+      updateAddress,
+      deleteAddress
     };
-  },
-  methods: {
-    changeAddress(index) {
-      const account = this.account;
-      const shipping = this.$props.addresses[index];
-      if (index > -1) {
-        this.firstName = account.firstName;
-        this.lastName = account.lastName;
-        this.streetName = shipping.streetName;
-        this.streetNumber = shipping.streetNumber;
-        this.city = shipping.city;
-        this.state = shipping.state;
-        this.postalCode = shipping.postalCode;
-        this.country = shipping.country;
-        this.phone = shipping.phone;
-        this.editedAddress = index;
-      }
-      this.editAddress = true;
-    },
-    updateAddress() {
-      const account = { ...this.account };
-      const shipping = {
-        firstName: this.firstName,
-        lastName: this.lastName,
-        streetNumber: this.streetNumber,
-        streetName: this.streetName,
-        city: this.city,
-        state: this.state,
-        postalCode: this.postalCode,
-        country: this.country,
-        phone: this.phone
-      };
-      const index = this.editedAddress;
-      if (index > -1) {
-        this.$props.addresses[index] = shipping;
-        this.editedAddress = -1;
-      } else {
-        this.$props.addresses.push(shipping);
-      }
-      this.editAddress = false;
-      this.$emit('update:shipping', account);
-    },
-    deleteAddress(index) {
-      const account = { ...this.account };
-      this.$props.addresses.splice(index, 1);
-      this.$emit('update:shipping', account);
-    }
   }
 };
 </script>

From 9c4c3cad94e1a113c76dd728ca47a23a516ded39 Mon Sep 17 00:00:00 2001
From: Marcin Drwiega <mdrwiega@divante.pl>
Date: Fri, 6 Mar 2020 13:54:36 +0100
Subject: [PATCH 05/12] changes according to the CR

---
 .../api-client/src/api/getMe/defaultQuery.ts  | 26 +++++++------------
 .../api-client/src/fragments/index.ts         |  8 ++++++
 .../theme/pages/MyAccount/ShippingDetails.vue |  2 +-
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/packages/commercetools/api-client/src/api/getMe/defaultQuery.ts b/packages/commercetools/api-client/src/api/getMe/defaultQuery.ts
index dd306d849..29d46aad5 100644
--- a/packages/commercetools/api-client/src/api/getMe/defaultQuery.ts
+++ b/packages/commercetools/api-client/src/api/getMe/defaultQuery.ts
@@ -1,5 +1,5 @@
 import gql from 'graphql-tag';
-import { CartFragment, CustomerFragment } from './../../fragments';
+import { CartFragment, CustomerFragment, AddressFragment } from './../../fragments';
 
 const basicProfile = gql`
   ${CartFragment}
@@ -16,6 +16,7 @@ const basicProfile = gql`
 const fullProfile = gql`
   ${CartFragment}
   ${CustomerFragment}
+  ${AddressFragment}
 
   query getMe($locale: Locale!) {
     me {
@@ -25,23 +26,16 @@ const fullProfile = gql`
       customer {
         ...DefaultCustomer
         addresses {
-          id
-          title
-          firstName
-          lastName
-          streetName
-          streetNumber
-          postalCode
-          city
-          region
-          state
-          country
-          apartment
-          contactInfo {
-            phone
-          }
+          ...DefaultAddress
+        }
+        defaultBillingAddress {
+          ...DefaultAddress
+        }
+        defaultShippingAddress {
+          ...DefaultAddress
         }
         shippingAddressIds
+        billingAddressIds
       }
     }
   }
diff --git a/packages/commercetools/api-client/src/fragments/index.ts b/packages/commercetools/api-client/src/fragments/index.ts
index d9d7136d8..586b622b0 100644
--- a/packages/commercetools/api-client/src/fragments/index.ts
+++ b/packages/commercetools/api-client/src/fragments/index.ts
@@ -1,6 +1,7 @@
 
 export const AddressFragment = `
   fragment DefaultAddress on Address {
+    id
     title
     firstName
     lastName
@@ -11,6 +12,13 @@ export const AddressFragment = `
     region
     country
     company
+    apartment
+    contactInfo {
+      phone
+      mobile
+      email
+      fax
+    }
   }
 `;
 
diff --git a/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue b/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue
index 7702e92bd..432f1cb88 100644
--- a/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue
@@ -122,7 +122,7 @@
     <SfTabs v-else key="address-list" :open-tab="1" class="tab-orphan">
       <SfTab title="Shipping details">
         <p class="message">
-          Manage all the shipping shipping you want (work place, home address
+          Manage all the shipping addresses you want (work place, home address
           ...) This way you won"t have to enter the shipping address manually
           with each order.
         </p>

From 779a2695b9bd7494d34626b382f7ac9fa119b048 Mon Sep 17 00:00:00 2001
From: Marcin Drwiega <mdrwiega@divante.pl>
Date: Wed, 18 Mar 2020 08:49:22 +0100
Subject: [PATCH 06/12] user address factory

---
 .../commercetools/composables/src/index.ts    |  2 +
 .../composables/src/useUser/index.ts          |  3 +-
 .../composables/src/useUserAddress/index.ts   | 26 ++++++++++
 packages/core/factories/src/index.ts          |  2 +-
 .../factories/src/useUserAddressFactory.ts    | 50 +++++++++++++++++++
 packages/core/interfaces/index.ts             |  4 +-
 .../theme-module/theme/pages/MyAccount.vue    | 11 ++--
 7 files changed, 92 insertions(+), 6 deletions(-)
 create mode 100644 packages/commercetools/composables/src/useUserAddress/index.ts
 create mode 100644 packages/core/factories/src/useUserAddressFactory.ts

diff --git a/packages/commercetools/composables/src/index.ts b/packages/commercetools/composables/src/index.ts
index 89b65b420..9c15e6239 100644
--- a/packages/commercetools/composables/src/index.ts
+++ b/packages/commercetools/composables/src/index.ts
@@ -4,6 +4,7 @@ import useProduct from './useProduct';
 import useCart from './useCart';
 import useCheckout from './useCheckout';
 import useUser from './useUser';
+import useUserAddress from './useUserAddress';
 import useLocale from './useLocale';
 
 export {
@@ -12,6 +13,7 @@ export {
   useCart,
   useCheckout,
   useUser,
+  useUserAddress,
   useLocale
 };
 
diff --git a/packages/commercetools/composables/src/useUser/index.ts b/packages/commercetools/composables/src/useUser/index.ts
index e110fb693..33c263890 100644
--- a/packages/commercetools/composables/src/useUser/index.ts
+++ b/packages/commercetools/composables/src/useUser/index.ts
@@ -16,7 +16,8 @@ import { cart } from './../useCart';
 
 type UserData = CustomerSignMeUpDraft | CustomerSignMeInDraft
 
-const user: Ref<Customer> = ref({});
+export const user: Ref<Customer> = ref({});
+
 const loading: Ref<boolean> = ref(false);
 const isAuthenticated = computed(() => user.value && Object.keys(user.value).length > 0);
 
diff --git a/packages/commercetools/composables/src/useUserAddress/index.ts b/packages/commercetools/composables/src/useUserAddress/index.ts
new file mode 100644
index 000000000..99876baa3
--- /dev/null
+++ b/packages/commercetools/composables/src/useUserAddress/index.ts
@@ -0,0 +1,26 @@
+import { UseUserAddress } from '@vue-storefront/interfaces';
+import { AddressInput } from '../types/GraphQL';
+import { useUserAddressFactory, UseUserAddressFactoryParams } from '@vue-storefront/factories';
+import { user } from '../useUser';
+
+const params: UseUserAddressFactoryParams<AddressInput> = {
+  addresses: user.value && user.value.id ? user.value.addresses : [],
+  addAddress: async () => {},
+  updateAddress: async () => {},
+  deleteAddress: async () => {},
+  getBillingAddresses: () => {
+    const { addresses, billingAddressIds } = user.value;
+
+    return (addresses || []).filter(({ id }) => (billingAddressIds || []).includes(id));
+  },
+  getShippingAddresses: () => {
+    const { addresses, shippingAddressIds } = user.value;
+
+    return (addresses || []).filter(({ id }) => (shippingAddressIds || []).includes(id));
+  },
+  searchAddresses: async () => user.value.addresses
+};
+
+const useUserAddress: () => UseUserAddress<AddressInput> = useUserAddressFactory<AddressInput>(params);
+
+export default useUserAddress;
diff --git a/packages/core/factories/src/index.ts b/packages/core/factories/src/index.ts
index 73aac7bee..2ddc3d8c4 100644
--- a/packages/core/factories/src/index.ts
+++ b/packages/core/factories/src/index.ts
@@ -1,4 +1,4 @@
-
 export * from './useCartFactory';
 export * from './useCategoryFactory';
 export * from './useProductFactory';
+export * from './useUserAddressFactory';
diff --git a/packages/core/factories/src/useUserAddressFactory.ts b/packages/core/factories/src/useUserAddressFactory.ts
new file mode 100644
index 000000000..3bfbfc5c0
--- /dev/null
+++ b/packages/core/factories/src/useUserAddressFactory.ts
@@ -0,0 +1,50 @@
+import { UseUserAddress } from '@vue-storefront/interfaces';
+import { Ref, ref, computed } from '@vue/composition-api';
+
+export type UseUserAddressFactoryParams<ADDRESS> = {
+  addresses: ADDRESS[];
+  searchAddresses: (params?: {
+    [x: string]: any;
+  }) => Promise<ADDRESS[]>;
+  addAddress: (address: ADDRESS) => Promise<void>;
+  deleteAddress: (address: ADDRESS) => Promise<void>;
+  updateAddress: (address: ADDRESS) => Promise<void>;
+  getBillingAddresses: () => ADDRESS[];
+  getShippingAddresses: () => ADDRESS[];
+}
+
+export function useUserAddressFactory<ADDRESS> (factoryParams: UseUserAddressFactoryParams<ADDRESS>) {
+  const loading: Ref<boolean> = ref(false);
+
+  const searchAddresses = async (params) => {
+    loading.value = true;
+    await factoryParams.searchAddresses(params).then(addresses => {
+      factoryParams.addresses.length = 0;
+      addresses.forEach(address => factoryParams.addresses.push(address));
+    });
+    loading.value = false;
+  };
+
+  const getBillingAddresses = () => factoryParams.getBillingAddresses();
+
+  const getShippingAddresses = () => factoryParams.getShippingAddresses();
+
+  const addAddress = async () => console.log('useUserAddressFactory::addAddress');
+
+  const deleteAddress = async () => console.log('useUserAddressFactory::deleteAddress');
+
+  const updateAddress = async () => console.log('useUserAddressFactory::updateAddress');
+
+  return function useUserAddress(): UseUserAddress<ADDRESS> {
+    return {
+      addresses: computed(() => factoryParams.addresses),
+      searchAddresses,
+      addAddress,
+      updateAddress,
+      deleteAddress,
+      getBillingAddresses,
+      getShippingAddresses,
+      loading
+    };
+  };
+}
diff --git a/packages/core/interfaces/index.ts b/packages/core/interfaces/index.ts
index f72c4875d..2e9a75dca 100644
--- a/packages/core/interfaces/index.ts
+++ b/packages/core/interfaces/index.ts
@@ -63,8 +63,10 @@ export interface UseUserOrders<ORDER> {
 export interface UseUserAddress<ADDRESS> {
   addresses: ComputedProperty<ADDRESS[]>;
   addAddress: (address: ADDRESS) => Promise<void>;
-  deleteAddress: (address: ADDRESS) => Promise<void>;
   updateAddress: (address: ADDRESS) => Promise<void>;
+  deleteAddress: (address: ADDRESS) => Promise<void>;
+  getBillingAddresses: () => ADDRESS[];
+  getShippingAddresses: () => ADDRESS[];
   searchAddresses: (params?: {
     [x: string]: any;
   }) => Promise<void>;
diff --git a/packages/core/theme-module/theme/pages/MyAccount.vue b/packages/core/theme-module/theme/pages/MyAccount.vue
index 7e4762b92..9285ffa1b 100644
--- a/packages/core/theme-module/theme/pages/MyAccount.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount.vue
@@ -52,6 +52,7 @@ import LoyaltyCard from './MyAccount/LoyaltyCard';
 import MyNewsletter from './MyAccount/MyNewsletter';
 import OrderHistory from './MyAccount/OrderHistory';
 import MyReviews from './MyAccount/MyReviews';
+import useUserAddress from '@vue-storefront/commercetools-composables';
 
 export default {
   name: 'MyAccount',
@@ -67,6 +68,8 @@ export default {
   },
   setup(props, { root }) {
     const { user } = useUser();
+    const { getShippingAddresses, searchAddresses } = useUserAddress();
+
     const breadcrumbs = [
       {
         text: 'Home',
@@ -90,6 +93,8 @@ export default {
         : 'My profile';
     });
 
+    searchAddresses();
+
     const changeActivePage = (title) => {
       if (title === 'Log out') {
         return;
@@ -98,9 +103,9 @@ export default {
       root.$router.push(`/my-account/${title.toLowerCase().replace(' ', '-')}`);
     };
 
-    const getShippingAddresses = () => (
-      (user.value.addresses || []).filter(address => (user.value.shippingAddressIds || []).includes(address.id))
-    );
+    // const getShippingAddresses = () => (
+    //   (user.value.addresses || []).filter(address => (user.value.shippingAddressIds || []).includes(address.id))
+    // );
 
     const account = computed(() => ({
       firstName: user.value.firstName,

From b9e27dc48e41917b7c74cebf42ba166e53885193 Mon Sep 17 00:00:00 2001
From: Marcin Drwiega <mdrwiega@divante.pl>
Date: Wed, 18 Mar 2020 10:50:34 +0100
Subject: [PATCH 07/12] working with my account with factories

---
 .../composables/src/useUser/index.ts          |  4 +-
 packages/core/interfaces/src/index.ts         |  1 +
 .../theme-module/theme/pages/MyAccount.vue    | 10 +--
 .../theme/pages/MyAccount/MyProfile.vue       | 75 +++++++++----------
 .../theme/pages/MyAccount/ShippingDetails.vue |  2 +-
 5 files changed, 43 insertions(+), 49 deletions(-)

diff --git a/packages/commercetools/composables/src/useUser/index.ts b/packages/commercetools/composables/src/useUser/index.ts
index 33c263890..92c681dc7 100644
--- a/packages/commercetools/composables/src/useUser/index.ts
+++ b/packages/commercetools/composables/src/useUser/index.ts
@@ -34,6 +34,7 @@ const authenticate = async (userData: UserData, fn) => {
 };
 
 export default function useUser(): UseUser<Customer, any> {
+  const error = ref(null);
 
   watch(user, async () => {
     if (isAuthenticated.value) {
@@ -78,7 +79,7 @@ export default function useUser(): UseUser<Customer, any> {
       await authenticate({ email: userResponse.data.user.email, password: newPassword }, customerSignMeIn);
       user.value = userResponse.data.user;
     } catch (err) {
-      console.error(err.graphQLErrors ? err.graphQLErrors[0].message : err);
+      error.value = err.graphQLErrors ? err.graphQLErrors[0].message : err;
     }
     loading.value = false;
   };
@@ -91,6 +92,7 @@ export default function useUser(): UseUser<Customer, any> {
     logout,
     changePassword,
     isAuthenticated,
+    error,
     loading: computed(() => loading.value)
   };
 }
diff --git a/packages/core/interfaces/src/index.ts b/packages/core/interfaces/src/index.ts
index ae651fb93..1608dd277 100644
--- a/packages/core/interfaces/src/index.ts
+++ b/packages/core/interfaces/src/index.ts
@@ -43,6 +43,7 @@ export interface UseUser
   ) => Promise<void>;
   isAuthenticated: Ref<boolean>;
   loading: Ref<boolean>;
+  error: Ref<any>;
 }
 
 export interface UseUserOrders<ORDER> {
diff --git a/packages/core/theme-module/theme/pages/MyAccount.vue b/packages/core/theme-module/theme/pages/MyAccount.vue
index f84caddbf..c665818a7 100644
--- a/packages/core/theme-module/theme/pages/MyAccount.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount.vue
@@ -44,7 +44,7 @@
 </template>
 <script>
 import { SfBreadcrumbs, SfContentPages } from '@storefront-ui/vue';
-import { useUser } from '@vue-storefront/commercetools-composables';
+import { useUser, useUserAddress } from '@vue-storefront/commercetools-composables';
 import { computed } from '@vue/composition-api';
 import MyProfile from './MyAccount/MyProfile';
 import ShippingDetails from './MyAccount/ShippingDetails';
@@ -53,7 +53,6 @@ import MyNewsletter from './MyAccount/MyNewsletter';
 import OrderHistory from './MyAccount/OrderHistory';
 import MyReviews from './MyAccount/MyReviews';
 import auth from '../middleware/auth';
-import useUserAddress from '@vue-storefront/commercetools-composables';
 
 export default {
   name: 'MyAccount',
@@ -105,15 +104,12 @@ export default {
       root.$router.push(`/my-account/${title.toLowerCase().replace(' ', '-')}`);
     };
 
-    // const getShippingAddresses = () => (
-    //   (user.value.addresses || []).filter(address => (user.value.shippingAddressIds || []).includes(address.id))
-    // );
-
     const account = computed(() => ({
       firstName: user.value.firstName,
       lastName: user.value.lastName,
       email: user.value.email,
-      shipping: getShippingAddresses(),
+      getShippingAddresses,
+      // TODO: User orders list
       orders: [
         ['#35765', '4th Nov, 2019', 'Visa card', '$12.00', 'In process'],
         ['#35766', '4th Nov, 2019', 'Paypal', '$12.00', 'Finalised'],
diff --git a/packages/core/theme-module/theme/pages/MyAccount/MyProfile.vue b/packages/core/theme-module/theme/pages/MyAccount/MyProfile.vue
index bfe49d46e..ee68cf2ad 100644
--- a/packages/core/theme-module/theme/pages/MyAccount/MyProfile.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount/MyProfile.vue
@@ -60,7 +60,7 @@
         <form class="form" @submit.prevent="handleSubmit(updatePassword)">
           <ValidationProvider rules="required" v-slot="{ errors }" vid="password" class="form__element">
             <SfInput
-              v-model="form.currentPassword"
+              v-model="currentPassword"
               type="password"
               name="currentPassword"
               label="Current Password"
@@ -72,7 +72,7 @@
           <div class="form__horizontal">
             <ValidationProvider rules="required|password" v-slot="{ errors }" vid="password" class="form__element">
               <SfInput
-                v-model="form.newPassword"
+                v-model="newPassword"
                 type="password"
                 name="newPassword"
                 label="New Password"
@@ -83,7 +83,7 @@
             </ValidationProvider>
             <ValidationProvider rules="required|confirmed:password" v-slot="{ errors }" class="form__element">
               <SfInput
-                v-model="form.repeatPassword"
+                v-model="repeatPassword"
                 type="password"
                 name="repeatPassword"
                 label="Repeat Password"
@@ -93,7 +93,7 @@
               />
             </ValidationProvider>
           </div>
-          <SfAlert v-if="error" class="alert" type="danger" :message="error" />
+          <SfAlert v-if="error" class="alert" type="danger" :message="error || {}" />
           <SfButton class="form__button">Update password</SfButton>
         </form>
       </ValidationObserver>
@@ -148,51 +148,46 @@ export default {
       default: () => ({})
     }
   },
-  setup() {
-    const resetPassForm = () => ({ currentPassword: '', newPassword: '', repeatPassword: '' });
+  setup({ account }, { emit }) {
     const { user, changePassword, error } = useUser();
-    const form = ref(resetPassForm());
+
+    const currentPassword = ref('');
+    const repeatPassword = ref('');
+    const newPassword = ref('');
+    const firstName = ref(account.firstName || '');
+    const lastName = ref(account.lastName || '');
+    const email = ref(account.email || '');
+
+    const resetPassForm = () => {
+      currentPassword.value = '';
+      repeatPassword.value = '';
+      newPassword.value = '';
+    };
 
     const updatePassword = async () => {
-      await changePassword(form.value.currentPassword, form.value.newPassword);
-      if (!error.value) {
-        form.value = resetPassForm();
-      }
+      await changePassword(currentPassword.value, newPassword.value);
+
+      resetPassForm();
     };
 
+    const updatePersonal = async () => emit('update:personal', {
+      firstName: firstName.value,
+      lastName: lastName.value,
+      email: email.value
+    });
+
     return {
       user,
       error,
-      form,
-      updatePassword
-    };
-  },
-  data() {
-    return {
-      firstName: '',
-      lastName: '',
-      email: ''
+      currentPassword,
+      newPassword,
+      repeatPassword,
+      firstName,
+      lastName,
+      email,
+      updatePassword,
+      updatePersonal
     };
-  },
-  watch: {
-    account: {
-      handler(value) {
-        this.firstName = value.firstName;
-        this.lastName = value.lastName;
-        this.email = value.email;
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    updatePersonal() {
-      const personal = {
-        firstName: this.firstName,
-        lastName: this.lastName,
-        email: this.email
-      };
-      this.$emit('update:personal', personal);
-    }
   }
 };
 </script>
diff --git a/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue b/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue
index 432f1cb88..2fab3028c 100644
--- a/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue
@@ -128,7 +128,7 @@
         </p>
         <transition-group tag="div" name="fade" class="shipping-list">
           <div
-            v-for="(address) in account.shipping"
+            v-for="(address) in account.getShippingAddresses()"
             :key="address.id"
             class="shipping"
           >

From f23ce85869547265f4abb188a4b94bb9ed1e4917 Mon Sep 17 00:00:00 2001
From: Marcin Drwiega <mdrwiega@divante.pl>
Date: Thu, 19 Mar 2020 14:20:05 +0100
Subject: [PATCH 08/12] Removed unnecesarry tests

---
 .../components/prismic/PrismicBlock.spec.js   | 129 ------------------
 1 file changed, 129 deletions(-)
 delete mode 100644 packages/commercetools/theme/test/components/prismic/PrismicBlock.spec.js

diff --git a/packages/commercetools/theme/test/components/prismic/PrismicBlock.spec.js b/packages/commercetools/theme/test/components/prismic/PrismicBlock.spec.js
deleted file mode 100644
index f646aa99e..000000000
--- a/packages/commercetools/theme/test/components/prismic/PrismicBlock.spec.js
+++ /dev/null
@@ -1,129 +0,0 @@
-/* eslint-disable camelcase, @typescript-eslint/camelcase */
-import { transformToBlocks } from '@/components/prismic/CustomPage.vue';
-
-describe('[theme/components/prismic] transformToBlocks', () => {
-  let supportedBlocks;
-  let unsupportedBlocks;
-
-  beforeEach(() => {
-    supportedBlocks = {
-      header: [
-        {
-          type: 'heading1',
-          text: 'Privacy Policy',
-          spans: []
-        }
-      ],
-      content: [
-        {
-          type: 'paragraph',
-          text: 'Some law things here...',
-          spans: []
-        },
-        {
-          type: 'paragraph',
-          text: 'Content other stuff..',
-          spans: []
-        }
-      ],
-      sample_image: {
-        dimensions: {
-          width: 250,
-          height: 250
-        },
-        alt: 'love crafts',
-        copyright: null,
-        url: 'https://images.prismic.io/lovecrafts-dev/8763e78f-6e93-4e52-bdcd-9e3915f38655_image+%281%29.png?auto=compress,format&rect=285,0,630,630&w=250&h=250'
-      },
-      'media-link': {
-        link_type: 'Media',
-        name: 'star.gif',
-        kind: 'image',
-        url: 'https://wroomdev.s3.amazonaws.com/tutoblanktemplate%2F97109f41-140e-4dc9-a2c8-96fb10f14051_star.gif?auto=compress,format',
-        size: '627291',
-        height: '800',
-        width: '960'
-      },
-      'embed-field': {
-        version: '1.0',
-        url: 'https://divante.com/',
-        type: 'link',
-        title: 'Divante.com - eCommerce Software House',
-        provider_name: 'website',
-        thumbnail_url: 'https://divante.com/ogTags/image-thumb__1063__ogImage/ogImage.png',
-        html: '<div data-type="website"><a ' +
-          'href="https://divante.com/"><h1>Divante.com - ' +
-          'eCommerce Software House</h1><img ' +
-          'src="https://divante.com/ogTags/image-thumb__1063__ogImage/ogImage.png"><p>We’re ' +
-          'experts in providing top-notch eCommerce solutions ' +
-          'and products for both B2B and B2C segments. By ' +
-          'supporting our clients in sales growth, we define ' +
-          'completely novel ideas, implement the latest ' +
-          'technologies, and deliver an unprecedented user ' +
-          'experience. </p></a></div>',
-        embed_url: 'https://divante.com/'
-      }
-    };
-    unsupportedBlocks = {
-      geopoint: {
-        latitude: 51.114299564839285,
-        longitude: 17.041683197021484
-      }
-    };
-  });
-
-  it('should transform primitive values into text objects', () => {
-    const primiteValues = {
-      price: 123.45,
-      'text-field': 'some text here',
-      'select-field': 'option1',
-      'timestamp-field': '2020-01-13T23:00:00+0000'
-    };
-
-    const getParagraphObject = (text) => ([
-      {
-        spans: [],
-        text,
-        type: 'paragraph'
-      }
-    ]);
-
-    const response = transformToBlocks({ data: primiteValues });
-
-    expect(response.length).toEqual(4);
-
-    response.forEach((value) => {
-      expect(value.type).toBe('text');
-    });
-
-    expect(response[0].document).toStrictEqual(getParagraphObject(123.45));
-    expect(response[1].document).toStrictEqual(getParagraphObject('some text here'));
-    expect(response[2].document).toStrictEqual(getParagraphObject('option1'));
-    expect(response[3].document).toStrictEqual(getParagraphObject('2020-01-13T23:00:00+0000'));
-  });
-
-  it('should transform supported blocks correctly', () => {
-    const response = transformToBlocks({ data: supportedBlocks });
-
-    expect(response.length).toEqual(5);
-
-    expect(response[0].type).toBe('html');
-    expect(response[1].type).toBe('html');
-    expect(response[2].type).toBe('image');
-    expect(response[3].type).toBe('image');
-    expect(response[4].type).toBe('embed');
-
-    expect(response[0].document).toStrictEqual(supportedBlocks.header);
-    expect(response[1].document).toStrictEqual(supportedBlocks.content);
-    expect(response[2].document).toStrictEqual(supportedBlocks.sample_image);
-    expect(response[3].document).toStrictEqual(supportedBlocks['media-link']);
-    expect(response[4].document).toStrictEqual(supportedBlocks['embed-field']);
-  });
-
-  it('should return undefined for each unsupported blocks', () => {
-    const response = transformToBlocks({ data: unsupportedBlocks });
-
-    expect(response).toBeInstanceOf(Array);
-    expect(response.length).toEqual(0);
-  });
-});

From 70957694bd2288fb6a8f52c375f5ce3318b5fbd0 Mon Sep 17 00:00:00 2001
From: Marcin Drwiega <mdrwiega@divante.pl>
Date: Fri, 20 Mar 2020 08:55:27 +0100
Subject: [PATCH 09/12] integration with API

---
 .../src/api/addCustomerAddress/index.ts       |  17 +++
 .../src/api/assignCustomerAddress/index.ts    |  29 +++++
 .../src/api/removeCustomerAddress/index.ts    |  18 +++
 .../src/api/updateCustomerAddress/index.ts    |  19 +++
 .../updateCustomerPersonalDetails/index.ts    |  44 +++++++
 .../api/updateMyCustomer/defaultMutation.ts   |  18 +++
 .../commercetools/api-client/src/index.ts     |  10 ++
 .../commercetools/api-client/src/types/Api.ts |   1 +
 .../composables/src/useUser/index.ts          |  10 +-
 .../composables/src/useUserAddress/index.ts   |  32 ++++-
 packages/commercetools/theme/nuxt.config.js   |  16 ---
 .../factories/src/useUserAddressFactory.ts    |  28 +++--
 packages/core/interfaces/src/index.ts         |   6 +-
 .../theme/pages/MyAccount/MyProfile.vue       |   6 +-
 .../theme/pages/MyAccount/ShippingDetails.vue | 110 ++++++++++--------
 15 files changed, 281 insertions(+), 83 deletions(-)
 create mode 100644 packages/commercetools/api-client/src/api/addCustomerAddress/index.ts
 create mode 100644 packages/commercetools/api-client/src/api/assignCustomerAddress/index.ts
 create mode 100644 packages/commercetools/api-client/src/api/removeCustomerAddress/index.ts
 create mode 100644 packages/commercetools/api-client/src/api/updateCustomerAddress/index.ts
 create mode 100644 packages/commercetools/api-client/src/api/updateCustomerPersonalDetails/index.ts
 create mode 100644 packages/commercetools/api-client/src/api/updateMyCustomer/defaultMutation.ts

diff --git a/packages/commercetools/api-client/src/api/addCustomerAddress/index.ts b/packages/commercetools/api-client/src/api/addCustomerAddress/index.ts
new file mode 100644
index 000000000..37f2a1489
--- /dev/null
+++ b/packages/commercetools/api-client/src/api/addCustomerAddress/index.ts
@@ -0,0 +1,17 @@
+import { Customer, AddressInput } from '../../types/GraphQL';
+import { apolloClient } from '../../index';
+import updateMyCustomer from '../updateMyCustomer/defaultMutation';
+import { UpdateMyCustomerResponse } from '../../types/Api';
+
+const addCustomerAddress = (customer: Customer, address: AddressInput): Promise<UpdateMyCustomerResponse> => apolloClient.mutate({
+  mutation: updateMyCustomer,
+  variables: {
+    version: customer.version,
+    actions: [{
+      addAddress: { address }
+    }]
+  },
+  fetchPolicy: 'no-cache'
+});
+
+export default addCustomerAddress;
diff --git a/packages/commercetools/api-client/src/api/assignCustomerAddress/index.ts b/packages/commercetools/api-client/src/api/assignCustomerAddress/index.ts
new file mode 100644
index 000000000..fbad25ac7
--- /dev/null
+++ b/packages/commercetools/api-client/src/api/assignCustomerAddress/index.ts
@@ -0,0 +1,29 @@
+import { Customer, Address } from '../../types/GraphQL';
+import { UpdateMyCustomerResponse } from '../../types/Api';
+import updateMyCustomer from '../updateMyCustomer/defaultMutation';
+import { apolloClient } from '../..';
+
+const getActionKey = (type: 'billing' | 'shipping'): string => {
+  switch (type) {
+    case 'billing':
+      return 'addBillingAddressId';
+    case 'shipping':
+      return 'addShippingAddressId';
+    default:
+      throw new Error('Unknown action type');
+  }
+};
+
+const assignCustomerAddress = (customer: Customer, address: Address, type: 'billing' | 'shipping'): Promise<UpdateMyCustomerResponse> => apolloClient.mutate({
+  mutation: updateMyCustomer,
+  variables: {
+    version: customer.version,
+    actions: [{
+      [getActionKey(type)]: {
+        addressId: address.id
+      }
+    }]
+  }
+});
+
+export default assignCustomerAddress;
diff --git a/packages/commercetools/api-client/src/api/removeCustomerAddress/index.ts b/packages/commercetools/api-client/src/api/removeCustomerAddress/index.ts
new file mode 100644
index 000000000..708c0620d
--- /dev/null
+++ b/packages/commercetools/api-client/src/api/removeCustomerAddress/index.ts
@@ -0,0 +1,18 @@
+import { Customer, AddressInput } from '../../types/GraphQL';
+import { UpdateMyCustomerResponse } from '../../types/Api';
+import { apolloClient } from '../../index';
+import updateMyCustomer from '../updateMyCustomer/defaultMutation';
+
+const removeCustomerAddress = (customer: Customer, address: AddressInput): Promise<UpdateMyCustomerResponse> => apolloClient.mutate({
+  mutation: updateMyCustomer,
+  variables: {
+    version: customer.version,
+    actions: [{
+      removeAddress: {
+        addressId: address.id
+      }
+    }]
+  }
+});
+
+export default removeCustomerAddress;
diff --git a/packages/commercetools/api-client/src/api/updateCustomerAddress/index.ts b/packages/commercetools/api-client/src/api/updateCustomerAddress/index.ts
new file mode 100644
index 000000000..fb0d8f04d
--- /dev/null
+++ b/packages/commercetools/api-client/src/api/updateCustomerAddress/index.ts
@@ -0,0 +1,19 @@
+import { Customer, AddressInput } from '../../types/GraphQL';
+import { UpdateMyCustomerResponse } from '../../types/Api';
+import { apolloClient } from '../../index';
+import updateMyCustomer from '../updateMyCustomer/defaultMutation';
+
+const updateCustomerAddress = (customer: Customer, address: AddressInput): Promise<UpdateMyCustomerResponse> => apolloClient.mutate({
+  mutation: updateMyCustomer,
+  variables: {
+    version: customer.version,
+    actions: [{
+      changeAddress: {
+        addressId: address.id,
+        address
+      }
+    }]
+  }
+});
+
+export default updateCustomerAddress;
diff --git a/packages/commercetools/api-client/src/api/updateCustomerPersonalDetails/index.ts b/packages/commercetools/api-client/src/api/updateCustomerPersonalDetails/index.ts
new file mode 100644
index 000000000..5f32139c9
--- /dev/null
+++ b/packages/commercetools/api-client/src/api/updateCustomerPersonalDetails/index.ts
@@ -0,0 +1,44 @@
+import { Customer } from '../../types/GraphQL';
+import { UpdateMyCustomerResponse } from '../../types/Api';
+import { apolloClient } from '../../index';
+import updateMyCustomer from '../updateMyCustomer/defaultMutation';
+
+interface PersonalDetails {
+  firstName?: string;
+  lastName?: string;
+  email?: string;
+}
+
+const generateActions = (personalDetails: PersonalDetails): any[] => {
+  const actions = [];
+
+  personalDetails.email && actions.push({
+    changeEmail: {
+      email: personalDetails.email
+    }
+  });
+
+  personalDetails.firstName && actions.push({
+    setFirstName: {
+      firstName: personalDetails.firstName
+    }
+  });
+
+  personalDetails.lastName && actions.push({
+    setLastName: {
+      lastName: personalDetails.lastName
+    }
+  });
+
+  return actions;
+};
+
+const updateCustomerPersonalDetails = (customer: Customer, personalDetails: PersonalDetails): Promise<UpdateMyCustomerResponse> => apolloClient.mutate({
+  mutation: updateMyCustomer,
+  variables: {
+    version: customer.version,
+    actions: generateActions(personalDetails)
+  }
+});
+
+export default updateCustomerPersonalDetails;
diff --git a/packages/commercetools/api-client/src/api/updateMyCustomer/defaultMutation.ts b/packages/commercetools/api-client/src/api/updateMyCustomer/defaultMutation.ts
new file mode 100644
index 000000000..52c461e28
--- /dev/null
+++ b/packages/commercetools/api-client/src/api/updateMyCustomer/defaultMutation.ts
@@ -0,0 +1,18 @@
+import gql from 'graphql-tag';
+import { CustomerFragment, AddressFragment } from '../../fragments';
+
+export default gql`
+  ${AddressFragment}
+  ${CustomerFragment}
+
+  mutation updateMyCustomer($version: Long!, $actions: [MyCustomerUpdateAction!]!, $storeKey: KeyReferenceInput) {
+    updateMyCustomer(version: $version, actions: $actions, storeKey: $storeKey) {
+      shippingAddressIds
+      billingAddressIds
+      addresses {
+        ...DefaultAddress
+      }
+      ...DefaultCustomer
+    }
+  }
+`;
diff --git a/packages/commercetools/api-client/src/index.ts b/packages/commercetools/api-client/src/index.ts
index 8427988df..59730a88f 100644
--- a/packages/commercetools/api-client/src/index.ts
+++ b/packages/commercetools/api-client/src/index.ts
@@ -7,6 +7,11 @@ import getCategory from './api/getCategory';
 import createCart from './api/createCart';
 import updateCart from './api/updateCart';
 import getCart from './api/getCart';
+import addCustomerAddress from './api/addCustomerAddress';
+import assignCustomerAddress from './api/assignCustomerAddress';
+import removeCustomerAddress from './api/removeCustomerAddress';
+import updateCustomerAddress from './api/updateCustomerAddress';
+import updateCustomerPersonalDetails from './api/updateCustomerPersonalDetails';
 import addToCart from './api/addToCart';
 import removeFromCart from './api/removeFromCart';
 import updateCartQuantity from './api/updateCartQuantity';
@@ -71,6 +76,11 @@ export {
   updateCart,
   getCart,
   addToCart,
+  addCustomerAddress,
+  assignCustomerAddress,
+  removeCustomerAddress,
+  updateCustomerAddress,
+  updateCustomerPersonalDetails,
   removeFromCart,
   getMe,
   updateCartQuantity,
diff --git a/packages/commercetools/api-client/src/types/Api.ts b/packages/commercetools/api-client/src/types/Api.ts
index a5dac1303..3a21883b1 100644
--- a/packages/commercetools/api-client/src/types/Api.ts
+++ b/packages/commercetools/api-client/src/types/Api.ts
@@ -37,3 +37,4 @@ export type OrderResponse = OrderQueryResponse | OrderMutationResponse
 export type ShippingMethodsResponse = QueryResponse<'shippingMethods', ShippingMethod>
 export type SignInResponse = QueryResponse<'user', CustomerSignInResult>
 export type ChangeMyPasswordResponse = QueryResponse<'user', Customer>
+export type UpdateMyCustomerResponse = MutationResponse<'updateMyCustomer', Customer>
diff --git a/packages/commercetools/composables/src/useUser/index.ts b/packages/commercetools/composables/src/useUser/index.ts
index 92c681dc7..aee406516 100644
--- a/packages/commercetools/composables/src/useUser/index.ts
+++ b/packages/commercetools/composables/src/useUser/index.ts
@@ -10,7 +10,8 @@ import {
   customerSignMeIn,
   customerSignOut,
   getMe,
-  customerChangeMyPassword
+  customerChangeMyPassword,
+  updateCustomerPersonalDetails
 } from '@vue-storefront/commercetools-api';
 import { cart } from './../useCart';
 
@@ -52,7 +53,12 @@ export default function useUser(): UseUser<Customer, any> {
   });
 
   const updateUser = async (params: any) => {
-    console.log(params);
+    const { data } = await updateCustomerPersonalDetails(user.value, params);
+
+    user.value = {
+      ...user.value,
+      ...data.updateMyCustomer
+    };
   };
 
   const register = async (userData) => {
diff --git a/packages/commercetools/composables/src/useUserAddress/index.ts b/packages/commercetools/composables/src/useUserAddress/index.ts
index 99876baa3..42874695b 100644
--- a/packages/commercetools/composables/src/useUserAddress/index.ts
+++ b/packages/commercetools/composables/src/useUserAddress/index.ts
@@ -1,13 +1,39 @@
 import { UseUserAddress } from '@vue-storefront/interfaces';
 import { AddressInput } from '../types/GraphQL';
+import { addCustomerAddress, assignCustomerAddress, removeCustomerAddress, updateCustomerAddress } from '@vue-storefront/commercetools-api';
 import { useUserAddressFactory, UseUserAddressFactoryParams } from '@vue-storefront/factories';
 import { user } from '../useUser';
+import { Customer } from '@vue-storefront/commercetools-api/lib/src/types/GraphQL';
+
+const updateUser = (newUserData: Customer) => {
+  user.value = {
+    ...user.value,
+    ...newUserData
+  };
+};
 
 const params: UseUserAddressFactoryParams<AddressInput> = {
   addresses: user.value && user.value.id ? user.value.addresses : [],
-  addAddress: async () => {},
-  updateAddress: async () => {},
-  deleteAddress: async () => {},
+  addAddress: async (address, type) => {
+    const { data } = await addCustomerAddress(user.value, address);
+
+    updateUser(data.updateMyCustomer);
+
+    const newAddress = data.updateMyCustomer.addresses.pop();
+    const { data: data2 } = await assignCustomerAddress(user.value, newAddress, type);
+
+    updateUser(data2.updateMyCustomer);
+  },
+  updateAddress: async (address) => {
+    const { data } = await updateCustomerAddress(user.value, address);
+
+    updateUser(data.updateMyCustomer);
+  },
+  deleteAddress: async (address) => {
+    const { data } = await removeCustomerAddress(user.value, address);
+
+    updateUser(data.updateMyCustomer);
+  },
   getBillingAddresses: () => {
     const { addresses, billingAddressIds } = user.value;
 
diff --git a/packages/commercetools/theme/nuxt.config.js b/packages/commercetools/theme/nuxt.config.js
index bdfd9da30..8ff66ccb8 100644
--- a/packages/commercetools/theme/nuxt.config.js
+++ b/packages/commercetools/theme/nuxt.config.js
@@ -26,22 +26,8 @@ export default {
     ]
   },
   loading: { color: '#fff' },
-  router: {
-    extendRoutes(routes, resolve) {
-      // TEMPORARY, will be removed
-      // @todo move to common middleware in core module and cover use case where we don't have slug at all
-      // aka URL dispatcher
-      // TEMPORARY: just to show example prismic page
-      routes.push({
-        name: 'prismic',
-        path: '/prismic',
-        component: resolve(__dirname, 'pages/Prismic.vue')
-      });
-    }
-  },
   plugins: [
     './plugins/commercetools.js',
-    './plugins/prismic.js',
     './plugins/i18n.js'
   ],
   buildModules: [
@@ -52,13 +38,11 @@ export default {
       useRawSource: {
         dev: [
           '@vue-storefront/commercetools-composables',
-          '@vue-storefront/prismic',
           '@vue-storefront/utils',
           '@vue-storefront/factories'
         ],
         prod: [
           '@vue-storefront/commercetools-composables',
-          '@vue-storefront/prismic',
           '@vue-storefront/utils',
           '@vue-storefront/factories'
 
diff --git a/packages/core/factories/src/useUserAddressFactory.ts b/packages/core/factories/src/useUserAddressFactory.ts
index 3bfbfc5c0..2fb2ee31f 100644
--- a/packages/core/factories/src/useUserAddressFactory.ts
+++ b/packages/core/factories/src/useUserAddressFactory.ts
@@ -1,19 +1,19 @@
-import { UseUserAddress } from '@vue-storefront/interfaces';
+import { UseUserAddress, UserAddressType } from '@vue-storefront/interfaces';
 import { Ref, ref, computed } from '@vue/composition-api';
 
-export type UseUserAddressFactoryParams<ADDRESS> = {
+export type UseUserAddressFactoryParams<ADDRESS, ADDRESS_TYPE = UserAddressType> = {
   addresses: ADDRESS[];
   searchAddresses: (params?: {
     [x: string]: any;
   }) => Promise<ADDRESS[]>;
-  addAddress: (address: ADDRESS) => Promise<void>;
+  addAddress: (address: ADDRESS, type: ADDRESS_TYPE) => Promise<void>;
   deleteAddress: (address: ADDRESS) => Promise<void>;
   updateAddress: (address: ADDRESS) => Promise<void>;
   getBillingAddresses: () => ADDRESS[];
   getShippingAddresses: () => ADDRESS[];
 }
 
-export function useUserAddressFactory<ADDRESS> (factoryParams: UseUserAddressFactoryParams<ADDRESS>) {
+export function useUserAddressFactory<ADDRESS, ADDRESS_TYPE = UserAddressType> (factoryParams: UseUserAddressFactoryParams<ADDRESS, ADDRESS_TYPE>) {
   const loading: Ref<boolean> = ref(false);
 
   const searchAddresses = async (params) => {
@@ -29,13 +29,25 @@ export function useUserAddressFactory<ADDRESS> (factoryParams: UseUserAddressFac
 
   const getShippingAddresses = () => factoryParams.getShippingAddresses();
 
-  const addAddress = async () => console.log('useUserAddressFactory::addAddress');
+  const addAddress = async (address: ADDRESS, type: ADDRESS_TYPE) => {
+    loading.value = true;
+    await factoryParams.addAddress(address, type);
+    loading.value = false;
+  };
 
-  const deleteAddress = async () => console.log('useUserAddressFactory::deleteAddress');
+  const deleteAddress = async (address) => {
+    loading.value = true;
+    await factoryParams.deleteAddress(address);
+    loading.value = false;
+  };
 
-  const updateAddress = async () => console.log('useUserAddressFactory::updateAddress');
+  const updateAddress = async (address) => {
+    loading.value = true;
+    await factoryParams.updateAddress(address);
+    loading.value = false;
+  };
 
-  return function useUserAddress(): UseUserAddress<ADDRESS> {
+  return function useUserAddress(): UseUserAddress<ADDRESS, ADDRESS_TYPE> {
     return {
       addresses: computed(() => factoryParams.addresses),
       searchAddresses,
diff --git a/packages/core/interfaces/src/index.ts b/packages/core/interfaces/src/index.ts
index 1608dd277..0d05184fe 100644
--- a/packages/core/interfaces/src/index.ts
+++ b/packages/core/interfaces/src/index.ts
@@ -60,10 +60,12 @@ export interface UseUserOrders<ORDER> {
   loading: Ref<boolean>;
 }
 
+export type UserAddressType = 'billing' | 'shipping';
+
 /** check if we always have those addresses together or we need pagination  */
-export interface UseUserAddress<ADDRESS> {
+export interface UseUserAddress<ADDRESS, ADDRESS_TYPE = UserAddressType> {
   addresses: ComputedProperty<ADDRESS[]>;
-  addAddress: (address: ADDRESS) => Promise<void>;
+  addAddress: (address: ADDRESS, type: ADDRESS_TYPE) => Promise<void>;
   updateAddress: (address: ADDRESS) => Promise<void>;
   deleteAddress: (address: ADDRESS) => Promise<void>;
   getBillingAddresses: () => ADDRESS[];
diff --git a/packages/core/theme-module/theme/pages/MyAccount/MyProfile.vue b/packages/core/theme-module/theme/pages/MyAccount/MyProfile.vue
index ee68cf2ad..0e3c7837c 100644
--- a/packages/core/theme-module/theme/pages/MyAccount/MyProfile.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount/MyProfile.vue
@@ -148,8 +148,8 @@ export default {
       default: () => ({})
     }
   },
-  setup({ account }, { emit }) {
-    const { user, changePassword, error } = useUser();
+  setup({ account }) {
+    const { user, changePassword, updateUser, error } = useUser();
 
     const currentPassword = ref('');
     const repeatPassword = ref('');
@@ -170,7 +170,7 @@ export default {
       resetPassForm();
     };
 
-    const updatePersonal = async () => emit('update:personal', {
+    const updatePersonal = () => updateUser({
       firstName: firstName.value,
       lastName: lastName.value,
       email: email.value
diff --git a/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue b/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue
index 2fab3028c..efd438193 100644
--- a/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue
@@ -1,7 +1,7 @@
 <template>
   <transition name="fade">
     <SfTabs
-      v-if="editAddress"
+      v-if="showAddUpdateForm"
       key="edit-address"
       :open-tab="1"
       class="tab-orphan"
@@ -12,7 +12,7 @@
         </p>
 
         <ValidationObserver v-slot="{ handleSubmit }">
-          <form id="shipping-details-form" class="form" @submit.prevent="handleSubmit(updateAddress)">
+          <form id="shipping-details-form" class="form" @submit.prevent="handleSubmit(handleForm)">
             <div class="form__horizontal">
               <ValidationProvider rules="required|min:2" v-slot="{ errors }" class="form__element">
                 <SfInput
@@ -114,7 +114,8 @@
                 :errorMessage="errors[0]"
               />
             </ValidationProvider>
-            <SfButton class="form__button">Update the address</SfButton>
+            <SfButton v-if="formType === 'UPDATE'" :type="submit" class="form__button">Update the address</SfButton>
+            <SfButton v-if="formType === 'CREATE'" :type="submit" class="form__button">Create a new address</SfButton>
           </form>
         </ValidationObserver>
       </SfTab>
@@ -153,18 +154,18 @@
                 size="14px"
                 role="button"
                 class="mobile-only"
-                @click="deleteAddress(address.id)"
+                @click="deleteAddress(address)"
               />
               <SfButton @click="changeAddress(address.id)">Change</SfButton>
               <SfButton
                 class="shipping__button-delete desktop-only"
-                @click="deleteAddress(address.id)"
+                @click="deleteAddress(address)"
                 >Delete</SfButton
               >
             </div>
           </div>
         </transition-group>
-        <SfButton class="action-button" @click="changeAddress(-1)"
+        <SfButton class="action-button" @click="changeAddress()"
           >Add new address</SfButton
         >
       </SfTab>
@@ -180,6 +181,7 @@ import {
   SfIcon
 } from '@storefront-ui/vue';
 import { ref } from '@vue/composition-api';
+import { useUserAddress } from '@vue-storefront/commercetools-composables';
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
 import { required, min, oneOf } from 'vee-validate/dist/rules';
 
@@ -216,9 +218,14 @@ export default {
     }
   },
   setup({ account }) {
-    const editAddress = ref(false);
+    const userAddress = useUserAddress();
+    const showAddUpdateForm = ref(false);
+    const formType = ref('CREATE');
     const editedAddress = ref(-1);
     const countries = [
+      'PL',
+      'DE',
+      'US',
       'Austria',
       'Azerbaijan',
       'Belarus',
@@ -267,6 +274,7 @@ export default {
       'United Kingdom',
       'Vatican City'
     ];
+    const addressId = ref('');
     const firstName = ref('');
     const lastName = ref('');
     const streetName = ref('');
@@ -277,13 +285,15 @@ export default {
     const country = ref('');
     const phone = ref('');
 
-    const changeAddress = (id) => {
-      const address = account.shipping.find(shippingAddress => id === shippingAddress.id);
+    const changeAddress = (id = null) => {
+      const address = id !== null
+        ? account.getShippingAddresses().find(shippingAddress => id === shippingAddress.id)
+        : {};
 
-      if (!address) {
-        return;
-      }
+      formType.value = id === null ? 'CREATE' : 'UPDATE';
+      showAddUpdateForm.value = true;
 
+      addressId.value = id || '';
       firstName.value = address.firstName || account.firstName || '';
       lastName.value = address.lastName || account.lastName || '';
       streetName.value = address.streetName || '';
@@ -292,45 +302,44 @@ export default {
       postalCode.value = address.postalCode || '';
       country.value = address.country || '';
       phone.value = address.contactInfo ? address.contactInfo.phone || '' : '';
-
-      editAddress.value = true;
     };
 
-    const updateAddress = (id) => {
-      console.log(`updateAddress: ${id}`);
-      // TODO: Integrate with API in other task
-      // OLD CODE HERE:
-      // const account = { ...this.account };
-      // const shipping = {
-      //   firstName: this.firstName,
-      //   lastName: this.lastName,
-      //   streetNumber: this.streetNumber,
-      //   streetName: this.streetName,
-      //   city: this.city,
-      //   state: this.state,
-      //   postalCode: this.postalCode,
-      //   country: this.country,
-      //   phone: this.phone
-      // };
-      // const index = this.editedAddress;
-      // if (index > -1) {
-      //   this.$props.addresses[index] = shipping;
-      //   this.editedAddress = -1;
-      // } else {
-      //   this.$props.addresses.push(shipping);
-      // }
-      // this.editAddress = false;
-      // this.$emit('update:shipping', account);
-    };
+    const addAddress = () => userAddress.addAddress(
+      {
+        firstName: firstName.value,
+        lastName: lastName.value,
+        streetName: streetName.value,
+        city: city.value,
+        state: state.value,
+        postalCode: postalCode.value,
+        country: country.value,
+        phone: phone.value
+      },
+      'shipping'
+    );
 
-    const deleteAddress = (id) => {
-      console.log(`deleteAddress: ${id}`);
-      // TODO: Integrate with API in other task
-      // OLD CODE HERE:
-      // const account = { ...this.account };
-      // this.$props.addresses.splice(index, 1);
-      // this.$emit('update:shipping', account);
-    };
+    const updateAddress = () => userAddress.updateAddress({
+      id: addressId.value,
+      firstName: firstName.value,
+      lastName: lastName.value,
+      streetName: streetName.value,
+      city: city.value,
+      state: state.value,
+      postalCode: postalCode.value,
+      country: country.value,
+      phone: phone.value
+    });
+
+    const deleteAddress = (address) => userAddress.deleteAddress(address);
+
+    const handleForm = () => (formType.value === 'CREATE' ? addAddress : updateAddress)()
+      .then(() => {
+        showAddUpdateForm.value = false;
+      })
+      .catch((err) => {
+        // TODO: Need to handle it somehow
+        console.log(err, 'error');
+      });
 
     return {
       countries,
@@ -343,8 +352,11 @@ export default {
       postalCode,
       country,
       phone,
-      editAddress,
+      showAddUpdateForm,
+      formType,
+      handleForm,
       editedAddress,
+      addAddress,
       changeAddress,
       updateAddress,
       deleteAddress

From f5cc0cf459c90b95e9b7af2dfd72e9f96fa79b5c Mon Sep 17 00:00:00 2001
From: Marcin Drwiega <mdrwiega@divante.pl>
Date: Fri, 27 Mar 2020 09:22:04 +0100
Subject: [PATCH 10/12] refactored + tests

---
 .../composables/src/useUser/index.ts          |  41 ++++---
 .../composables/src/useUserAddress/index.ts   |  34 ++---
 .../tests/useUserAddress/useUserAddress.ts    | 108 ++++++++++++++++
 .../__tests__/useCartFactory.spec.ts          |   4 +-
 .../__tests__/useCategoryFactory.spec.ts      |   4 +-
 .../__tests__/useUserAddress.spec.ts          | 116 ++++++++++++++++++
 packages/core/factories/jest.config.js        |   2 +-
 .../factories/src/useUserAddressFactory.ts    |  71 ++++++++---
 packages/core/interfaces/src/index.ts         |   4 +-
 .../theme/components/LoginModal.vue           |   2 +-
 .../theme/pages/MyAccount/MyProfile.vue       |   4 +-
 11 files changed, 325 insertions(+), 65 deletions(-)
 create mode 100644 packages/commercetools/composables/tests/useUserAddress/useUserAddress.ts
 create mode 100644 packages/core/factories/__tests__/useUserAddress.spec.ts

diff --git a/packages/commercetools/composables/src/useUser/index.ts b/packages/commercetools/composables/src/useUser/index.ts
index aee406516..269ded593 100644
--- a/packages/commercetools/composables/src/useUser/index.ts
+++ b/packages/commercetools/composables/src/useUser/index.ts
@@ -24,19 +24,15 @@ const isAuthenticated = computed(() => user.value && Object.keys(user.value).len
 
 const authenticate = async (userData: UserData, fn) => {
   loading.value = true;
-  try {
-    const userResponse = await fn(userData);
-    user.value = userResponse.data.user.customer;
-    cart.value = userResponse.data.user.cart;
-  } catch (err) {
-    console.error(err.graphQLErrors ? err.graphQLErrors[0].message : err);
-  }
+
+  const userResponse = await fn(userData);
+  user.value = userResponse.data.user.customer;
+  cart.value = userResponse.data.user.cart;
+
   loading.value = false;
 };
 
 export default function useUser(): UseUser<Customer, any> {
-  const error = ref(null);
-
   watch(user, async () => {
     if (isAuthenticated.value) {
       return;
@@ -52,7 +48,14 @@ export default function useUser(): UseUser<Customer, any> {
     loading.value = false;
   });
 
-  const updateUser = async (params: any) => {
+  const updateUser = (data: Customer) => {
+    user.value = {
+      ...user.value,
+      ...data
+    };
+  };
+
+  const updatePersonalDetails = async (params: any) => {
     const { data } = await updateCustomerPersonalDetails(user.value, params);
 
     user.value = {
@@ -78,27 +81,25 @@ export default function useUser(): UseUser<Customer, any> {
 
   const changePassword = async (currentPassword: string, newPassword: string) => {
     loading.value = true;
-    try {
-      const userResponse = await customerChangeMyPassword(user.value.version, currentPassword, newPassword);
-      // we do need to re-authenticate user to acquire new token - otherwise all subsequent requests will fail as unauthorized
-      await logout();
-      await authenticate({ email: userResponse.data.user.email, password: newPassword }, customerSignMeIn);
-      user.value = userResponse.data.user;
-    } catch (err) {
-      error.value = err.graphQLErrors ? err.graphQLErrors[0].message : err;
-    }
+
+    const userResponse = await customerChangeMyPassword(user.value.version, currentPassword, newPassword);
+    // we do need to re-authenticate user to acquire new token - otherwise all subsequent requests will fail as unauthorized
+    await logout();
+    await authenticate({ email: userResponse.data.user.email, password: newPassword }, customerSignMeIn);
+    user.value = userResponse.data.user;
+
     loading.value = false;
   };
 
   return {
     user: computed(() => user.value),
     updateUser,
+    updatePersonalDetails,
     register,
     login,
     logout,
     changePassword,
     isAuthenticated,
-    error,
     loading: computed(() => loading.value)
   };
 }
diff --git a/packages/commercetools/composables/src/useUserAddress/index.ts b/packages/commercetools/composables/src/useUserAddress/index.ts
index 42874695b..07aa1a2d4 100644
--- a/packages/commercetools/composables/src/useUserAddress/index.ts
+++ b/packages/commercetools/composables/src/useUserAddress/index.ts
@@ -1,38 +1,38 @@
 import { UseUserAddress } from '@vue-storefront/interfaces';
-import { AddressInput } from '../types/GraphQL';
+import { Address } from '../types/GraphQL';
 import { addCustomerAddress, assignCustomerAddress, removeCustomerAddress, updateCustomerAddress } from '@vue-storefront/commercetools-api';
-import { useUserAddressFactory, UseUserAddressFactoryParams } from '@vue-storefront/factories';
+import { useUserAddressFactory, UseUserAddressFactoryParams, UpdatedUserAddresses } from '@vue-storefront/factories';
 import { user } from '../useUser';
 import { Customer } from '@vue-storefront/commercetools-api/lib/src/types/GraphQL';
 
-const updateUser = (newUserData: Customer) => {
-  user.value = {
-    ...user.value,
-    ...newUserData
-  };
-};
+const transformAddresses = (customer: Customer): UpdatedUserAddresses<Customer, Address> => ({
+  addresses: customer.addresses,
+  user: customer
+});
 
-const params: UseUserAddressFactoryParams<AddressInput> = {
+const params: UseUserAddressFactoryParams<Customer, Address> = {
   addresses: user.value && user.value.id ? user.value.addresses : [],
   addAddress: async (address, type) => {
     const { data } = await addCustomerAddress(user.value, address);
-
-    updateUser(data.updateMyCustomer);
-
     const newAddress = data.updateMyCustomer.addresses.pop();
-    const { data: data2 } = await assignCustomerAddress(user.value, newAddress, type);
 
-    updateUser(data2.updateMyCustomer);
+    const { data: { updateMyCustomer } } = await assignCustomerAddress(
+      { ...user.value, ...data.updateMyCustomer },
+      newAddress,
+      type
+    );
+
+    return transformAddresses(updateMyCustomer);
   },
   updateAddress: async (address) => {
     const { data } = await updateCustomerAddress(user.value, address);
 
-    updateUser(data.updateMyCustomer);
+    return transformAddresses(data.updateMyCustomer);
   },
   deleteAddress: async (address) => {
     const { data } = await removeCustomerAddress(user.value, address);
 
-    updateUser(data.updateMyCustomer);
+    return transformAddresses(data.updateMyCustomer);
   },
   getBillingAddresses: () => {
     const { addresses, billingAddressIds } = user.value;
@@ -47,6 +47,6 @@ const params: UseUserAddressFactoryParams<AddressInput> = {
   searchAddresses: async () => user.value.addresses
 };
 
-const useUserAddress: () => UseUserAddress<AddressInput> = useUserAddressFactory<AddressInput>(params);
+const useUserAddress: () => UseUserAddress<Address> = useUserAddressFactory<Address>(params);
 
 export default useUserAddress;
diff --git a/packages/commercetools/composables/tests/useUserAddress/useUserAddress.ts b/packages/commercetools/composables/tests/useUserAddress/useUserAddress.ts
new file mode 100644
index 000000000..bd1ba7f4e
--- /dev/null
+++ b/packages/commercetools/composables/tests/useUserAddress/useUserAddress.ts
@@ -0,0 +1,108 @@
+import useUserAddress from '../../src/useUserAddress';
+
+const defaultUserAddresses = Object.freeze({
+  billingAddressIds: ['1'],
+  shippingAddressIds: ['2', '3'],
+  addresses: [
+    {
+      id: '1',
+      country: 'EN'
+    },
+    {
+      id: '2',
+      country: 'EN'
+    },
+    {
+      id: '3',
+      country: 'EN'
+    }
+  ]
+});
+
+const mockResponse = (customerData) => ({
+  data: {
+    updateMyCustomer: customerData
+  }
+});
+
+jest.mock('@vue-storefront/commercetools-api', () => ({
+  addCustomerAddress: async (customer, address) => mockResponse({
+    ...defaultUserAddresses,
+    addresses: [
+      ...defaultUserAddresses.addresses,
+      address
+    ]
+  }),
+  assignCustomerAddress: async (customer, address) => mockResponse({
+    ...defaultUserAddresses,
+    billingAddressIds: [
+      ...defaultUserAddresses.billingAddressIds,
+      address.id
+    ]
+  }),
+  removeCustomerAddress: async (customer, address) => mockResponse({
+    ...defaultUserAddresses,
+    addresses: defaultUserAddresses.addresses.filter(a => a.id !== address.id)
+  }),
+  updateCustomerAddress: async (customer, address) => mockResponse({
+    ...defaultUserAddresses,
+    addresses: defaultUserAddresses.addresses.map(a => a.id === address.id ? address : a)
+  })
+}));
+
+describe('[commercetools-composables] useUserAddress', () => {
+  it('creates properties', () => {
+    const { addresses, loading } = useUserAddress();
+
+    expect(Array.isArray(addresses.value)).toBeTruthy();
+    expect(addresses.value).toHaveLength(0);
+    expect(loading.value).toBeFalsy();
+  });
+
+  it('should add a new address', async () => {
+    const { addAddress } = useUserAddress();
+
+    const { user, addresses } = await addAddress({ id: '4', country: 'EN' } as any, 'billing');
+
+    expect(addresses).toHaveLength(4);
+    expect(addresses[3].id).toEqual('4');
+    expect(user.billingAddressIds).toHaveLength(2);
+    expect(user.billingAddressIds[1]).toEqual('4');
+  });
+
+  it('should remove an address', async () => {
+    const { deleteAddress } = useUserAddress();
+
+    const { addresses } = await deleteAddress({ id: '1' } as any);
+
+    expect(addresses).toHaveLength(2);
+  });
+
+  it('should update an address', async () => {
+    const { updateAddress } = useUserAddress();
+
+    const { addresses } = await updateAddress({ id: '1', country: 'PL' } as any);
+
+    expect(addresses).toHaveLength(3);
+    expect(addresses[0].country).toBe('PL');
+  });
+
+  it('should return billing addresses', async () => {
+    const { getBillingAddresses } = useUserAddress();
+
+    const addresses = getBillingAddresses();
+
+    expect(addresses).toHaveLength(1);
+    expect(addresses[0].id).toEqual('1');
+  });
+
+  it('should return shipping addresses', async () => {
+    const { getShippingAddresses } = useUserAddress();
+
+    const addresses = getShippingAddresses();
+
+    expect(addresses).toHaveLength(2);
+    expect(addresses[0].id).toEqual('2');
+    expect(addresses[1].id).toEqual('3');
+  });
+});
diff --git a/packages/core/factories/__tests__/useCartFactory.spec.ts b/packages/core/factories/__tests__/useCartFactory.spec.ts
index aaee7eedd..22d82d100 100644
--- a/packages/core/factories/__tests__/useCartFactory.spec.ts
+++ b/packages/core/factories/__tests__/useCartFactory.spec.ts
@@ -1,8 +1,8 @@
-import { useCartFactory, UseCartFactoryParams } from '../src';
-import { UseCart } from '@vue-storefront/interfaces';
 import Vue from 'vue';
 import VueCompositionApi, { ref } from '@vue/composition-api';
 Vue.use(VueCompositionApi);
+import { useCartFactory, UseCartFactoryParams } from '../src';
+import { UseCart } from '@vue-storefront/interfaces';
 
 let useCart: () => UseCart<any, any, any, any>;
 let params: UseCartFactoryParams<any, any, any, any>;
diff --git a/packages/core/factories/__tests__/useCategoryFactory.spec.ts b/packages/core/factories/__tests__/useCategoryFactory.spec.ts
index f2543567d..215d150a9 100644
--- a/packages/core/factories/__tests__/useCategoryFactory.spec.ts
+++ b/packages/core/factories/__tests__/useCategoryFactory.spec.ts
@@ -1,8 +1,8 @@
-import { useCategoryFactory, UseCategoryFactoryParams } from '../src';
-import { UseCategory } from '@vue-storefront/interfaces';
 import Vue from 'vue';
 import VueCompositionApi from '@vue/composition-api';
 Vue.use(VueCompositionApi);
+import { useCategoryFactory, UseCategoryFactoryParams } from '../src';
+import { UseCategory } from '@vue-storefront/interfaces';
 // mock persisted state
 import * as vsfUtils from '@vue-storefront/utils';
 jest.mock('@vue-storefront/utils');
diff --git a/packages/core/factories/__tests__/useUserAddress.spec.ts b/packages/core/factories/__tests__/useUserAddress.spec.ts
new file mode 100644
index 000000000..d7f943cfa
--- /dev/null
+++ b/packages/core/factories/__tests__/useUserAddress.spec.ts
@@ -0,0 +1,116 @@
+import Vue from 'vue';
+import VueCompositionApi, { ref } from '@vue/composition-api';
+Vue.use(VueCompositionApi);
+import { useUserAddressFactory, UseUserAddressFactoryParams } from '../src';
+import { UseUserAddress } from '@vue-storefront/interfaces';
+
+let useUserAddress: () => UseUserAddress<any, any>;
+let params: UseUserAddressFactoryParams<any, any>;
+let inputAddresses: any = [];
+
+const transform = (addresses: any[]) => ({
+  addresses
+});
+
+const createComposable = () => {
+  params = {
+    addresses: inputAddresses,
+    loading: ref(false),
+    searchAddresses: jest.fn().mockResolvedValueOnce(['address1', 'address2', 'address3']),
+    addAddress: jest.fn().mockResolvedValueOnce(transform(['address1', 'address2', 'address3', 'address4'])),
+    deleteAddress: jest.fn().mockResolvedValueOnce(transform(['address1', 'address2'])),
+    getBillingAddresses: jest.fn().mockResolvedValueOnce(['address1']),
+    getShippingAddresses: jest.fn().mockResolvedValueOnce(['address2', 'address3']),
+    updateAddress: jest.fn().mockResolvedValueOnce(transform(['address1', 'updatedAddress', 'address3']))
+  };
+
+  useUserAddress = useUserAddressFactory<any, any>(params);
+};
+
+describe('[CORE - factories] useUserAddressFactory', () => {
+  beforeEach(() => {
+    inputAddresses = [];
+    jest.clearAllMocks();
+    createComposable();
+  });
+
+  describe('initial setup', () => {
+    it('should have proper initial properties', () => {
+      const { addresses, loading } = useUserAddress();
+
+      expect(Array.isArray(addresses)).toBeTruthy();
+      expect(addresses).toHaveLength(3);
+      expect(loading.value).toBeFalsy();
+    });
+
+    it('should load user addresses if not proided during factory creation', async () => {
+      useUserAddress();
+
+      expect(params.searchAddresses).toHaveBeenCalled();
+    });
+
+    it('should not load user addresses if is provided during factory creation', () => {
+      inputAddresses = ['testAddress'];
+      createComposable();
+      useUserAddress();
+
+      expect(params.searchAddresses).not.toHaveBeenCalled();
+      expect(params.addresses).toHaveLength(1);
+    });
+  });
+
+  describe('methods', () => {
+    describe('addAddress', () => {
+      it('should add an address', async () => {
+        const { addAddress, addresses } = useUserAddress();
+
+        await addAddress('any address', 'billing');
+
+        expect(addresses.value).toHaveLength(4);
+        expect(addresses.value[3]).toEqual('address4');
+      });
+    });
+
+    describe('deleteAddress', () => {
+      it('should remove an address', async () => {
+        const { deleteAddress, addresses } = useUserAddress();
+
+        await deleteAddress('any adresss');
+
+        expect(addresses.value).toHaveLength(2);
+      });
+    });
+
+    describe('updateAddress', () => {
+      it('should update an address', async () => {
+        const { updateAddress, addresses } = useUserAddress();
+
+        await updateAddress('any address');
+
+        expect(addresses.value).toHaveLength(3);
+        expect(addresses.value[1]).toEqual('updatedAddress');
+      });
+    });
+
+    describe('getBillingAddresses', () => {
+      it('should return billing addresses', async () => {
+        const { getBillingAddresses } = useUserAddress();
+
+        const addresses = getBillingAddresses();
+
+        expect(addresses).toHaveLength(1);
+        expect(addresses[0]).toEqual('address1');
+      });
+    });
+
+    describe('getShippingAddresses', () => {
+      const { getShippingAddresses } = useUserAddress();
+
+      const addresses = getShippingAddresses();
+
+      expect(addresses).toHaveLength(2);
+      expect(addresses[0]).toEqual('address2');
+      expect(addresses[1]).toEqual('address3');
+    });
+  });
+});
diff --git a/packages/core/factories/jest.config.js b/packages/core/factories/jest.config.js
index c896271c3..1c1741263 100644
--- a/packages/core/factories/jest.config.js
+++ b/packages/core/factories/jest.config.js
@@ -2,5 +2,5 @@ const baseConfig = require('./../../jest.base.config');
 
 module.exports = {
   ...baseConfig,
-  setupFilesAfterEnv: ['./tests/setup.ts']
+  setupFilesAfterEnv: ['./__tests__/setup.ts']
 };
diff --git a/packages/core/factories/src/useUserAddressFactory.ts b/packages/core/factories/src/useUserAddressFactory.ts
index 2fb2ee31f..8eaca2e46 100644
--- a/packages/core/factories/src/useUserAddressFactory.ts
+++ b/packages/core/factories/src/useUserAddressFactory.ts
@@ -1,27 +1,57 @@
 import { UseUserAddress, UserAddressType } from '@vue-storefront/interfaces';
+import { useUser } from '@vue-storefront/commercetools-composables';
 import { Ref, ref, computed } from '@vue/composition-api';
+import { Customer } from 'commercetools/api-client/lib/src/types/GraphQL';
 
-export type UseUserAddressFactoryParams<ADDRESS, ADDRESS_TYPE = UserAddressType> = {
+export interface UpdatedUserAddresses<USER, ADDRESS> {
   addresses: ADDRESS[];
-  searchAddresses: (params?: {
-    [x: string]: any;
-  }) => Promise<ADDRESS[]>;
-  addAddress: (address: ADDRESS, type: ADDRESS_TYPE) => Promise<void>;
-  deleteAddress: (address: ADDRESS) => Promise<void>;
-  updateAddress: (address: ADDRESS) => Promise<void>;
+  user?: USER;
+}
+
+export type UseUserAddressFactoryParams<
+  USER,
+  ADDRESS,
+  ADDRESS_TYPE = UserAddressType,
+  SEARCH_PARAMS = { [x: string]: any }
+> = {
+  addresses: ADDRESS[];
+  loading: Ref<boolean>;
+  searchAddresses: (params?: SEARCH_PARAMS) => Promise<ADDRESS[]>;
+  addAddress: (address: ADDRESS, type: ADDRESS_TYPE) => Promise<UpdatedUserAddresses<USER, ADDRESS>>;
+  deleteAddress: (address: ADDRESS) => Promise<UpdatedUserAddresses<USER, ADDRESS>>;
+  updateAddress: (address: ADDRESS) => Promise<UpdatedUserAddresses<USER, ADDRESS>>;
   getBillingAddresses: () => ADDRESS[];
   getShippingAddresses: () => ADDRESS[];
 }
 
-export function useUserAddressFactory<ADDRESS, ADDRESS_TYPE = UserAddressType> (factoryParams: UseUserAddressFactoryParams<ADDRESS, ADDRESS_TYPE>) {
+export function useUserAddressFactory<USER, ADDRESS, ADDRESS_TYPE = UserAddressType, SEARCH_PARAMS = { [x: string]: any }> (factoryParams: UseUserAddressFactoryParams<USER, ADDRESS, ADDRESS_TYPE, SEARCH_PARAMS>) {
   const loading: Ref<boolean> = ref(false);
 
+  const { updateUser } = useUser();
+
+  const updateData = (data: UpdatedUserAddresses<USER, ADDRESS>) => {
+    factoryParams.addresses.length = 0;
+    data.addresses.forEach(address => factoryParams.addresses.push(address));
+    // TODO: waiting for user factory
+    data.user && updateUser(data.user as any as Customer);
+
+    loading.value = false;
+  };
+
+  const logError = (error: any) => {
+    console.log(error);
+    loading.value = false;
+
+    throw error;
+  };
+
   const searchAddresses = async (params) => {
     loading.value = true;
-    await factoryParams.searchAddresses(params).then(addresses => {
-      factoryParams.addresses.length = 0;
-      addresses.forEach(address => factoryParams.addresses.push(address));
-    });
+
+    const addresses = await factoryParams.searchAddresses(params);
+
+    updateData({ addresses });
+
     loading.value = false;
   };
 
@@ -31,20 +61,25 @@ export function useUserAddressFactory<ADDRESS, ADDRESS_TYPE = UserAddressType> (
 
   const addAddress = async (address: ADDRESS, type: ADDRESS_TYPE) => {
     loading.value = true;
-    await factoryParams.addAddress(address, type);
-    loading.value = false;
+
+    await factoryParams.addAddress(address, type)
+      .then(updateData)
+      .catch(logError);
   };
 
   const deleteAddress = async (address) => {
     loading.value = true;
-    await factoryParams.deleteAddress(address);
-    loading.value = false;
+
+    await factoryParams.deleteAddress(address)
+      .then(updateData)
+      .catch(logError);
   };
 
   const updateAddress = async (address) => {
     loading.value = true;
-    await factoryParams.updateAddress(address);
-    loading.value = false;
+    await factoryParams.updateAddress(address)
+      .then(updateData)
+      .catch(logError);
   };
 
   return function useUserAddress(): UseUserAddress<ADDRESS, ADDRESS_TYPE> {
diff --git a/packages/core/interfaces/src/index.ts b/packages/core/interfaces/src/index.ts
index 0d05184fe..df060f68c 100644
--- a/packages/core/interfaces/src/index.ts
+++ b/packages/core/interfaces/src/index.ts
@@ -23,7 +23,8 @@ export interface UseUser
   UPDATE_USER_PARAMS
 > {
   user: ComputedProperty<USER>;
-  updateUser: (params: UPDATE_USER_PARAMS) => Promise<void>;
+  updatePersonalDetails: (params: UPDATE_USER_PARAMS) => Promise<void>;
+  updateUser: (data: USER) => void;
   register: (user: {
     email: string;
     password: string;
@@ -43,7 +44,6 @@ export interface UseUser
   ) => Promise<void>;
   isAuthenticated: Ref<boolean>;
   loading: Ref<boolean>;
-  error: Ref<any>;
 }
 
 export interface UseUserOrders<ORDER> {
diff --git a/packages/core/theme-module/theme/components/LoginModal.vue b/packages/core/theme-module/theme/components/LoginModal.vue
index ef91ad9a7..a6e3af35d 100644
--- a/packages/core/theme-module/theme/components/LoginModal.vue
+++ b/packages/core/theme-module/theme/components/LoginModal.vue
@@ -43,7 +43,7 @@
                   <div>Login</div>
                 </SfLoader>
               </SfButton>
-              <SfAlert v-if="error" class="alert" type="danger" :message="error" />
+              <!-- <SfAlert v-if="error" class="alert" type="danger" :message="error" /> -->
             </form>
           </ValidationObserver>
           <div class="action">
diff --git a/packages/core/theme-module/theme/pages/MyAccount/MyProfile.vue b/packages/core/theme-module/theme/pages/MyAccount/MyProfile.vue
index 0e3c7837c..07c261168 100644
--- a/packages/core/theme-module/theme/pages/MyAccount/MyProfile.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount/MyProfile.vue
@@ -149,7 +149,7 @@ export default {
     }
   },
   setup({ account }) {
-    const { user, changePassword, updateUser, error } = useUser();
+    const { user, changePassword, updatePersonalDetails, error } = useUser();
 
     const currentPassword = ref('');
     const repeatPassword = ref('');
@@ -170,7 +170,7 @@ export default {
       resetPassForm();
     };
 
-    const updatePersonal = () => updateUser({
+    const updatePersonal = () => updatePersonalDetails({
       firstName: firstName.value,
       lastName: lastName.value,
       email: email.value

From 05c67c554e9b865ee5afd90d80eb8e69b8a4a775 Mon Sep 17 00:00:00 2001
From: Marcin Drwiega <mdrwiega@divante.pl>
Date: Fri, 27 Mar 2020 09:35:58 +0100
Subject: [PATCH 11/12] updated return data

---
 packages/core/factories/src/useUserAddressFactory.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/core/factories/src/useUserAddressFactory.ts b/packages/core/factories/src/useUserAddressFactory.ts
index 8eaca2e46..f44f32f0a 100644
--- a/packages/core/factories/src/useUserAddressFactory.ts
+++ b/packages/core/factories/src/useUserAddressFactory.ts
@@ -85,6 +85,7 @@ export function useUserAddressFactory<USER, ADDRESS, ADDRESS_TYPE = UserAddressT
   return function useUserAddress(): UseUserAddress<ADDRESS, ADDRESS_TYPE> {
     return {
       addresses: computed(() => factoryParams.addresses),
+      totalAddresses: computed(() => (factoryParams.addresses || []).length),
       searchAddresses,
       addAddress,
       updateAddress,

From e8f8c21c0365a117d4a04ffa82bda72051cce341 Mon Sep 17 00:00:00 2001
From: Marcin Drwiega <mdrwiega@divante.pl>
Date: Tue, 31 Mar 2020 08:23:54 +0200
Subject: [PATCH 12/12] refactored and updated factories + tests

---
 .../composables/src/useUser/factoryParams.ts  | 25 ++++--
 .../src/useUserAddress/factoryParams.ts       | 52 +++++++++++++
 .../composables/src/useUserAddress/index.ts   | 51 +------------
 .../__tests__/useUserAddress.spec.ts          | 76 +++++++++++++------
 .../factories/src/useUserAddressFactory.ts    | 33 ++++----
 packages/core/interfaces/src/index.ts         |  5 +-
 .../theme-module/theme/pages/MyAccount.vue    | 12 +--
 .../theme/pages/MyAccount/MyProfile.vue       |  8 +-
 .../theme/pages/MyAccount/ShippingDetails.vue |  2 +-
 9 files changed, 154 insertions(+), 110 deletions(-)
 create mode 100644 packages/commercetools/composables/src/useUserAddress/factoryParams.ts

diff --git a/packages/commercetools/composables/src/useUser/factoryParams.ts b/packages/commercetools/composables/src/useUser/factoryParams.ts
index 42947620a..355db71cb 100644
--- a/packages/commercetools/composables/src/useUser/factoryParams.ts
+++ b/packages/commercetools/composables/src/useUser/factoryParams.ts
@@ -1,7 +1,8 @@
-import {UseUserFactoryParams} from '@vue-storefront/factories';
-import {Customer} from '@vue-storefront/commercetools-api/lib//types/GraphQL';
+import { UseUserFactoryParams } from '@vue-storefront/factories';
+import { Customer } from '@vue-storefront/commercetools-api/lib//types/GraphQL';
 import { authenticate } from './authenticate';
 import {
+  updateCustomerPersonalDetails,
   customerSignMeUp as apiCustomerSignMeUp,
   customerSignMeIn as apiCustomerSignMeIn,
   customerSignOut as apiCustomerSignOut,
@@ -10,7 +11,9 @@ import {
 } from '@vue-storefront/commercetools-api';
 import useCart from '../useCart';
 
-export const params: UseUserFactoryParams<Customer, any, any> = {
+export type UpdateUserParams = Customer & { clientSideOnly?: boolean };
+
+export const params: UseUserFactoryParams<Customer, UpdateUserParams, any> = {
   loadUser: async () => {
     try {
       const profile = await apiGetMe({ customer: true });
@@ -27,9 +30,19 @@ export const params: UseUserFactoryParams<Customer, any, any> = {
     await useCart().refreshCart();
     await apiCustomerSignOut();
   },
-  updateUser: async ({currentUser, updatedUserData}): Promise<Customer> => {
-    // Change code below if the apiClient receive userUpdate method
-    return Promise.resolve({currentUser, updatedUserData} as any);
+  updateUser: async ({ currentUser, updatedUserData }): Promise<Customer> => {
+    if (updatedUserData.clientSideOnly) {
+      return Promise.resolve({currentUser, updatedUserData} as any);
+    }
+
+    const { firstName, lastName, email } = updatedUserData;
+
+    const { data } = await updateCustomerPersonalDetails(currentUser, { firstName, lastName, email });
+
+    return {
+      ...currentUser,
+      ...data.updateMyCustomer
+    };
   },
   register: async ({email, password, firstName, lastName}) => {
     return await authenticate({email, password, firstName, lastName}, apiCustomerSignMeUp);
diff --git a/packages/commercetools/composables/src/useUserAddress/factoryParams.ts b/packages/commercetools/composables/src/useUserAddress/factoryParams.ts
new file mode 100644
index 000000000..1cd5992a8
--- /dev/null
+++ b/packages/commercetools/composables/src/useUserAddress/factoryParams.ts
@@ -0,0 +1,52 @@
+import { addCustomerAddress, assignCustomerAddress, removeCustomerAddress, updateCustomerAddress } from '@vue-storefront/commercetools-api';
+import { UseUserAddressFactoryParams, UpdatedUserAddresses } from '@vue-storefront/factories';
+import { Customer } from '@vue-storefront/commercetools-api/lib//types/GraphQL';
+import { Address } from '../types/GraphQL';
+import useUser from '../useUser';
+import { UpdateUserParams } from '../useUser/factoryParams';
+import { UserAddressType } from '@vue-storefront/interfaces';
+
+const userComposable = useUser();
+
+const transformAddresses = (customer: Customer): UpdatedUserAddresses<Address, UpdateUserParams> => ({
+  addresses: customer.addresses,
+  updateUserParams: { ...customer, clientSideOnly: true }
+});
+
+export const params: UseUserAddressFactoryParams<Customer, Address, UserAddressType, { [x: string]: any }, UpdateUserParams> = {
+  userComposable,
+  addresses: userComposable.user.value && userComposable.user.value.id ? userComposable.user.value.addresses : [],
+  addAddress: async (address, type) => {
+    const { data } = await addCustomerAddress(userComposable.user.value, address);
+    const newAddress = data.updateMyCustomer.addresses.pop();
+
+    const { data: { updateMyCustomer } } = await assignCustomerAddress(
+      { ...userComposable.user.value, ...data.updateMyCustomer },
+      newAddress,
+      type
+    );
+
+    return transformAddresses(updateMyCustomer);
+  },
+  updateAddress: async (address) => {
+    const { data } = await updateCustomerAddress(userComposable.user.value, address);
+
+    return transformAddresses(data.updateMyCustomer);
+  },
+  deleteAddress: async (address) => {
+    const { data } = await removeCustomerAddress(userComposable.user.value, address);
+
+    return transformAddresses(data.updateMyCustomer);
+  },
+  getBillingAddresses: () => {
+    const { addresses, billingAddressIds } = userComposable.user.value;
+
+    return (addresses || []).filter(({ id }) => (billingAddressIds || []).includes(id));
+  },
+  getShippingAddresses: () => {
+    const { addresses, shippingAddressIds } = userComposable.user.value;
+
+    return (addresses || []).filter(({ id }) => (shippingAddressIds || []).includes(id));
+  },
+  searchAddresses: async () => userComposable.user.value.addresses
+};
diff --git a/packages/commercetools/composables/src/useUserAddress/index.ts b/packages/commercetools/composables/src/useUserAddress/index.ts
index 07aa1a2d4..5e1439da6 100644
--- a/packages/commercetools/composables/src/useUserAddress/index.ts
+++ b/packages/commercetools/composables/src/useUserAddress/index.ts
@@ -1,52 +1,9 @@
 import { UseUserAddress } from '@vue-storefront/interfaces';
 import { Address } from '../types/GraphQL';
-import { addCustomerAddress, assignCustomerAddress, removeCustomerAddress, updateCustomerAddress } from '@vue-storefront/commercetools-api';
-import { useUserAddressFactory, UseUserAddressFactoryParams, UpdatedUserAddresses } from '@vue-storefront/factories';
-import { user } from '../useUser';
-import { Customer } from '@vue-storefront/commercetools-api/lib/src/types/GraphQL';
+import { useUserAddressFactory } from '@vue-storefront/factories';
+import { Customer } from '@vue-storefront/commercetools-api/lib//types/GraphQL';
+import { params } from './factoryParams';
 
-const transformAddresses = (customer: Customer): UpdatedUserAddresses<Customer, Address> => ({
-  addresses: customer.addresses,
-  user: customer
-});
-
-const params: UseUserAddressFactoryParams<Customer, Address> = {
-  addresses: user.value && user.value.id ? user.value.addresses : [],
-  addAddress: async (address, type) => {
-    const { data } = await addCustomerAddress(user.value, address);
-    const newAddress = data.updateMyCustomer.addresses.pop();
-
-    const { data: { updateMyCustomer } } = await assignCustomerAddress(
-      { ...user.value, ...data.updateMyCustomer },
-      newAddress,
-      type
-    );
-
-    return transformAddresses(updateMyCustomer);
-  },
-  updateAddress: async (address) => {
-    const { data } = await updateCustomerAddress(user.value, address);
-
-    return transformAddresses(data.updateMyCustomer);
-  },
-  deleteAddress: async (address) => {
-    const { data } = await removeCustomerAddress(user.value, address);
-
-    return transformAddresses(data.updateMyCustomer);
-  },
-  getBillingAddresses: () => {
-    const { addresses, billingAddressIds } = user.value;
-
-    return (addresses || []).filter(({ id }) => (billingAddressIds || []).includes(id));
-  },
-  getShippingAddresses: () => {
-    const { addresses, shippingAddressIds } = user.value;
-
-    return (addresses || []).filter(({ id }) => (shippingAddressIds || []).includes(id));
-  },
-  searchAddresses: async () => user.value.addresses
-};
-
-const useUserAddress: () => UseUserAddress<Address> = useUserAddressFactory<Address>(params);
+const useUserAddress: () => UseUserAddress<Address> = useUserAddressFactory<Customer, Address>(params);
 
 export default useUserAddress;
diff --git a/packages/core/factories/__tests__/useUserAddress.spec.ts b/packages/core/factories/__tests__/useUserAddress.spec.ts
index d7f943cfa..20a13e21f 100644
--- a/packages/core/factories/__tests__/useUserAddress.spec.ts
+++ b/packages/core/factories/__tests__/useUserAddress.spec.ts
@@ -1,26 +1,30 @@
 import Vue from 'vue';
-import VueCompositionApi, { ref } from '@vue/composition-api';
+import VueCompositionApi from '@vue/composition-api';
 Vue.use(VueCompositionApi);
 import { useUserAddressFactory, UseUserAddressFactoryParams } from '../src';
 import { UseUserAddress } from '@vue-storefront/interfaces';
 
 let useUserAddress: () => UseUserAddress<any, any>;
+
 let params: UseUserAddressFactoryParams<any, any>;
 let inputAddresses: any = [];
 
 const transform = (addresses: any[]) => ({
-  addresses
+  addresses,
+  updateUserParams: {}
 });
 
-const createComposable = () => {
-  params = {
+const createComposable = (overrideParams?: UseUserAddressFactoryParams<any, any>) => {
+  params = overrideParams || {
+    userComposable: {
+      updateUser: async () => {}
+    } as any,
     addresses: inputAddresses,
-    loading: ref(false),
     searchAddresses: jest.fn().mockResolvedValueOnce(['address1', 'address2', 'address3']),
     addAddress: jest.fn().mockResolvedValueOnce(transform(['address1', 'address2', 'address3', 'address4'])),
     deleteAddress: jest.fn().mockResolvedValueOnce(transform(['address1', 'address2'])),
-    getBillingAddresses: jest.fn().mockResolvedValueOnce(['address1']),
-    getShippingAddresses: jest.fn().mockResolvedValueOnce(['address2', 'address3']),
+    getBillingAddresses: jest.fn().mockReturnValueOnce(['address1']),
+    getShippingAddresses: jest.fn().mockReturnValueOnce(['address2', 'address3']),
     updateAddress: jest.fn().mockResolvedValueOnce(transform(['address1', 'updatedAddress', 'address3']))
   };
 
@@ -38,24 +42,42 @@ describe('[CORE - factories] useUserAddressFactory', () => {
     it('should have proper initial properties', () => {
       const { addresses, loading } = useUserAddress();
 
-      expect(Array.isArray(addresses)).toBeTruthy();
-      expect(addresses).toHaveLength(3);
+      expect(Array.isArray(addresses.value)).toBeTruthy();
+      expect(addresses.value).toHaveLength(0);
       expect(loading.value).toBeFalsy();
     });
+  });
+
+  describe('error handling', () => {
+    it('should throw an error', async () => {
+      createComposable({
+        ...params,
+        addAddress: async () => {
+          throw new Error('mocked error');
+        }
+      });
+
+      const { addAddress } = useUserAddress();
+
+      let errorMessage = '';
 
-    it('should load user addresses if not proided during factory creation', async () => {
-      useUserAddress();
+      try {
+        await addAddress('any', 'any');
+      } catch (error) {
+        errorMessage = error.message;
+      }
 
-      expect(params.searchAddresses).toHaveBeenCalled();
+      expect(errorMessage).toBe('mocked error');
     });
+  });
+
+  describe('computed', () => {
+    it('should have correct totalAddresses', async () => {
+      const { searchAddresses, totalAddresses } = useUserAddress();
 
-    it('should not load user addresses if is provided during factory creation', () => {
-      inputAddresses = ['testAddress'];
-      createComposable();
-      useUserAddress();
+      await searchAddresses();
 
-      expect(params.searchAddresses).not.toHaveBeenCalled();
-      expect(params.addresses).toHaveLength(1);
+      expect(totalAddresses.value).toEqual(3);
     });
   });
 
@@ -94,7 +116,9 @@ describe('[CORE - factories] useUserAddressFactory', () => {
 
     describe('getBillingAddresses', () => {
       it('should return billing addresses', async () => {
-        const { getBillingAddresses } = useUserAddress();
+        const { searchAddresses, getBillingAddresses } = useUserAddress();
+
+        await searchAddresses();
 
         const addresses = getBillingAddresses();
 
@@ -104,13 +128,17 @@ describe('[CORE - factories] useUserAddressFactory', () => {
     });
 
     describe('getShippingAddresses', () => {
-      const { getShippingAddresses } = useUserAddress();
+      it('should return shipping addresses', async () => {
+        const { searchAddresses, getShippingAddresses } = useUserAddress();
 
-      const addresses = getShippingAddresses();
+        await searchAddresses();
 
-      expect(addresses).toHaveLength(2);
-      expect(addresses[0]).toEqual('address2');
-      expect(addresses[1]).toEqual('address3');
+        const addresses = getShippingAddresses();
+
+        expect(addresses).toHaveLength(2);
+        expect(addresses[0]).toEqual('address2');
+        expect(addresses[1]).toEqual('address3');
+      });
     });
   });
 });
diff --git a/packages/core/factories/src/useUserAddressFactory.ts b/packages/core/factories/src/useUserAddressFactory.ts
index f44f32f0a..69a65f245 100644
--- a/packages/core/factories/src/useUserAddressFactory.ts
+++ b/packages/core/factories/src/useUserAddressFactory.ts
@@ -1,39 +1,38 @@
-import { UseUserAddress, UserAddressType } from '@vue-storefront/interfaces';
-import { useUser } from '@vue-storefront/commercetools-composables';
+import { UseUserAddress, UserAddressType, UseUser } from '@vue-storefront/interfaces';
 import { Ref, ref, computed } from '@vue/composition-api';
-import { Customer } from 'commercetools/api-client/lib/src/types/GraphQL';
 
-export interface UpdatedUserAddresses<USER, ADDRESS> {
+export interface UpdatedUserAddresses<ADDRESS, UPDATE_USER_PARAMS> {
   addresses: ADDRESS[];
-  user?: USER;
+  updateUserParams?: UPDATE_USER_PARAMS;
 }
 
 export type UseUserAddressFactoryParams<
   USER,
   ADDRESS,
   ADDRESS_TYPE = UserAddressType,
-  SEARCH_PARAMS = { [x: string]: any }
+  SEARCH_PARAMS = { [x: string]: any },
+  UPDATE_USER_PARAMS = any,
 > = {
   addresses: ADDRESS[];
-  loading: Ref<boolean>;
   searchAddresses: (params?: SEARCH_PARAMS) => Promise<ADDRESS[]>;
-  addAddress: (address: ADDRESS, type: ADDRESS_TYPE) => Promise<UpdatedUserAddresses<USER, ADDRESS>>;
-  deleteAddress: (address: ADDRESS) => Promise<UpdatedUserAddresses<USER, ADDRESS>>;
-  updateAddress: (address: ADDRESS) => Promise<UpdatedUserAddresses<USER, ADDRESS>>;
+  addAddress: (address: ADDRESS, type: ADDRESS_TYPE) => Promise<UpdatedUserAddresses<ADDRESS, UPDATE_USER_PARAMS>>;
+  deleteAddress: (address: ADDRESS) => Promise<UpdatedUserAddresses<ADDRESS, UPDATE_USER_PARAMS>>;
+  updateAddress: (address: ADDRESS) => Promise<UpdatedUserAddresses<ADDRESS, UPDATE_USER_PARAMS>>;
   getBillingAddresses: () => ADDRESS[];
   getShippingAddresses: () => ADDRESS[];
+  userComposable?: UseUser<USER, UPDATE_USER_PARAMS>;
 }
 
-export function useUserAddressFactory<USER, ADDRESS, ADDRESS_TYPE = UserAddressType, SEARCH_PARAMS = { [x: string]: any }> (factoryParams: UseUserAddressFactoryParams<USER, ADDRESS, ADDRESS_TYPE, SEARCH_PARAMS>) {
+export function useUserAddressFactory<USER, ADDRESS, ADDRESS_TYPE = UserAddressType, SEARCH_PARAMS = { [x: string]: any }, UPDATE_USER_PARAMS = any> (factoryParams: UseUserAddressFactoryParams<USER, ADDRESS, ADDRESS_TYPE, SEARCH_PARAMS>) {
   const loading: Ref<boolean> = ref(false);
 
-  const { updateUser } = useUser();
-
-  const updateData = (data: UpdatedUserAddresses<USER, ADDRESS>) => {
+  const updateData = async (data: UpdatedUserAddresses<ADDRESS, UPDATE_USER_PARAMS>) => {
     factoryParams.addresses.length = 0;
     data.addresses.forEach(address => factoryParams.addresses.push(address));
-    // TODO: waiting for user factory
-    data.user && updateUser(data.user as any as Customer);
+
+    if (factoryParams.userComposable && data.updateUserParams) {
+      await factoryParams.userComposable.updateUser(data.updateUserParams);
+    }
 
     loading.value = false;
   };
@@ -85,7 +84,7 @@ export function useUserAddressFactory<USER, ADDRESS, ADDRESS_TYPE = UserAddressT
   return function useUserAddress(): UseUserAddress<ADDRESS, ADDRESS_TYPE> {
     return {
       addresses: computed(() => factoryParams.addresses),
-      totalAddresses: computed(() => (factoryParams.addresses || []).length),
+      totalAddresses: computed(() => factoryParams.addresses.length),
       searchAddresses,
       addAddress,
       updateAddress,
diff --git a/packages/core/interfaces/src/index.ts b/packages/core/interfaces/src/index.ts
index 05491737e..be754fe29 100644
--- a/packages/core/interfaces/src/index.ts
+++ b/packages/core/interfaces/src/index.ts
@@ -23,8 +23,7 @@ export interface UseUser
   UPDATE_USER_PARAMS
 > {
   user: ComputedProperty<USER>;
-  updatePersonalDetails: (params: UPDATE_USER_PARAMS) => Promise<void>;
-  updateUser: (data: USER) => void;
+  updateUser: (params: UPDATE_USER_PARAMS) => void;
   register: (user: {
     email: string;
     password: string;
@@ -61,7 +60,7 @@ export interface UseUserOrders<ORDER> {
 export type UserAddressType = 'billing' | 'shipping';
 
 /** check if we always have those addresses together or we need pagination  */
-export interface UseUserAddress<ADDRESS, ADDRESS_TYPE = UserAddressType, SEARCH_PARAMS = { [x: string]: any; }> {
+export interface UseUserAddress<ADDRESS, ADDRESS_TYPE = UserAddressType, SEARCH_PARAMS = { [x: string]: any }> {
   addresses: ComputedProperty<ADDRESS[]>;
   totalAddresses: ComputedProperty<number>;
   addAddress: (address: ADDRESS, type: ADDRESS_TYPE) => Promise<void>;
diff --git a/packages/core/theme-module/theme/pages/MyAccount.vue b/packages/core/theme-module/theme/pages/MyAccount.vue
index 07924cec2..7d60d90b1 100644
--- a/packages/core/theme-module/theme/pages/MyAccount.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount.vue
@@ -12,16 +12,10 @@
     >
       <SfContentCategory title="Personal Details">
         <SfContentPage title="My profile">
-          <MyProfile
-            :account="account"
-            @update:personal="account = { ...account, ...$event }"
-          />
+          <MyProfile :account="account" />
         </SfContentPage>
         <SfContentPage title="Shipping details">
-          <ShippingDetails
-            :account="account"
-            @update:shipping="account = { ...account, ...$event }"
-          />
+          <ShippingDetails :account="account" />
         </SfContentPage>
         <SfContentPage title="Loyalty card">
           <LoyaltyCard />
@@ -44,7 +38,7 @@
 </template>
 <script>
 import { SfBreadcrumbs, SfContentPages } from '@storefront-ui/vue';
-import { useUser, useUserAddress } from '@vue-storefront/commercetools-composables';
+import { useUser, useUserAddress } from '<%= options.composables %>';
 import { computed } from '@vue/composition-api';
 import MyProfile from './MyAccount/MyProfile';
 import ShippingDetails from './MyAccount/ShippingDetails';
diff --git a/packages/core/theme-module/theme/pages/MyAccount/MyProfile.vue b/packages/core/theme-module/theme/pages/MyAccount/MyProfile.vue
index 834917c96..c38d78f03 100644
--- a/packages/core/theme-module/theme/pages/MyAccount/MyProfile.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount/MyProfile.vue
@@ -93,7 +93,7 @@
               />
             </ValidationProvider>
           </div>
-          <SfAlert v-if="error" class="alert" type="danger" :message="error || {}" />
+          <SfAlert v-if="error" class="alert" type="danger" :message="'Something went wrong'" />
           <SfButton class="form__button">Update password</SfButton>
         </form>
       </ValidationObserver>
@@ -149,7 +149,9 @@ export default {
     }
   },
   setup({ account }) {
-    const { user, changePassword, updatePersonalDetails, error } = useUser();
+    const { user, changePassword, updateUser } = useUser();
+
+    const error = ref(false);
 
     const currentPassword = ref('');
     const repeatPassword = ref('');
@@ -170,7 +172,7 @@ export default {
       resetPassForm();
     };
 
-    const updatePersonal = () => updatePersonalDetails({
+    const updatePersonal = () => updateUser({
       firstName: firstName.value,
       lastName: lastName.value,
       email: email.value
diff --git a/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue b/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue
index ee3c4d087..0a285e0da 100644
--- a/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount/ShippingDetails.vue
@@ -181,7 +181,7 @@ import {
   SfIcon
 } from '@storefront-ui/vue';
 import { ref } from '@vue/composition-api';
-import { useUserAddress } from '@vue-storefront/commercetools-composables';
+import { useUserAddress } from '<%= options.composables %>';
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
 import { required, min, oneOf } from 'vee-validate/dist/rules';