feat(theme): show list of all saved addresses. (#279)

packages/composables/src/hooks/useUser.ts

@@ -4,11 +4,13 @@ import {
   logout as apiLogout,
   getCustomer,
   getCustomerOrders,
-  getCustomerOrderDetails
+  getCustomerOrderDetails,
+  getCustomerAddresses
 } from "@shopware-pwa/shopware-6-client";
 import { Customer } from "packages/shopware-6-client/src/interfaces/models/checkout/customer/Customer";
 import { getStore } from "@shopware-pwa/composables";
 import { Order } from "@shopware-pwa/shopware-6-client/src/interfaces/models/checkout/order/Order";
+import { CustomerAddress } from "@shopware-pwa/shopware-6-client/src/interfaces/models/checkout/customer/CustomerAddress";
 
 interface UseUser {
   login: ({
@@ -27,6 +29,7 @@ interface UseUser {
   logout: () => Promise<void>;
   loadOrders: () => Promise<void>;
   getOrderDetails: (orderId: string) => Promise<Order>;
+  getAddresses: () => Promise<CustomerAddress[]>;
 }
 
 export const useUser = (): UseUser => {
@@ -81,6 +84,8 @@ export const useUser = (): UseUser => {
     return getCustomerOrderDetails(orderId);
   };
 
+  const getAddresses = (): Promise<CustomerAddress[]> => getCustomerAddresses();
+
   const isLoggedIn = computed(() => !!user.value);
 
   return {
@@ -93,6 +98,7 @@ export const useUser = (): UseUser => {
     logout,
     orders,
     loadOrders,
-    getOrderDetails
+    getOrderDetails,
+    getAddresses
   };
 };

packages/default-theme/components/account/Address.vue

@@ -1,7 +1,6 @@
 <template>
   <SfList>
-    {{address.id}}
-    <hr/>
+    <SfBadge class="sf-badge--full-width"><strong>#{{address.id}}</strong></SfBadge>
     <SfProperty
         name="name"
         :value="name" />
@@ -17,20 +16,21 @@
     <SfProperty
         name="country"
         :value="country" />    
+    <SfDivider/>
   </SfList>
 </template>
 <script>
 
-import { SfList, SfProperty } from '@storefront-ui/vue'
+import { SfList, SfProperty, SfBadge, SfDivider } from '@storefront-ui/vue'
 import { VuelidateMixin } from '@vuelidate/core'
 import { required } from '@vuelidate/validators'
 import { useUser } from '@shopware-pwa/composables'
 import { CustomerAddress } from '@shopware-pwa/shopware-6-client'
 
 export default {
-  name: "MyProfile",
+  name: "Address",
   mixins: [VuelidateMixin],
-  components: {SfList, SfProperty},
+  components: {SfList, SfProperty, SfBadge, SfDivider},
   props: {
     address: {
       type: CustomerAddress,

packages/default-theme/components/account/OrderHistory/OrderDetails.vue

@@ -24,7 +24,7 @@ import { Order } from '@shopware-pwa/shopware-6-client'
 export default {
   name: "OrderDetail",
   mixins: [VuelidateMixin],
-  components: {SfButton, SfProperty},
+  components: {SfButton, SfProperty, SfBadge},
   props: {
     order: {
       type: Order,

packages/default-theme/pages/account.vue

@@ -10,11 +10,14 @@
           </SfContentPage>
           <SfContentPage title="Shipping details">
             <SfTabs :open-tab="1">
-              <SfTab title="Shipping address">
-                <Address :address="activeShippingAddress"/>
+              <SfTab title="Active shipping address">
+                <Address :key="activeShippingAddress.id" :address="activeShippingAddress"/>
               </SfTab>
-              <SfTab title="Billing address">
-                <Address :address="activeBillingAddress"/>
+              <SfTab title="Active billing address">
+                <Address :key="activeBillingAddress.id" :address="activeBillingAddress"/>
+              </SfTab>
+              <SfTab title="All addresses">
+                <Address v-for="address in allAddresses" :key="address.id" :address="address"/>
               </SfTab>
             </SfTabs>
           </SfContentPage>
@@ -44,12 +47,13 @@ export default {
   components: { OrderHistory, SfContentPages, SfTabs, MyProfile, SfList, Address },
   middleware: "auth",
   setup() {
-    const { logout, user } = useUser()
-    return { logout, user }
+    const { logout, user, getAddresses, loadOrders, orders } = useUser()
+    return { logout, user, getAddresses, loadOrders, orders }
   },
   data() {
     return {
-      activePage: "My profile"
+      activePage: "My profile",
+      allAddresses: []
     }
   },
   computed: {
@@ -58,7 +62,10 @@ export default {
     },
     activeShippingAddress() {
       return this.user && this.user && this.user.activeShippingAddress || {}
-    }
+    },
+  },
+  async mounted() {
+    this.allAddresses = await this.getAddresses()
   },
   methods: {
     async updateActivePage(title) {

packages/shopware-6-client/src/index.ts

@@ -17,6 +17,8 @@ export * from "@shopware-pwa/shopware-6-client/src/interfaces/models/content/cms
 export * from "@shopware-pwa/shopware-6-client/src/interfaces/search/SearchCriteria";
 export * from "@shopware-pwa/shopware-6-client/src/interfaces/search/SearchFilter";
 export * from "@shopware-pwa/shopware-6-client/src/interfaces/response/SearchResult";
+export * from "@shopware-pwa/shopware-6-client/src/interfaces/models/checkout/customer/CustomerAddress";
+export * from "@shopware-pwa/shopware-6-client/src/interfaces/models/checkout/order/Order";
 
 /**
  * Setup configuration. Merge default values with provided in param.

packages/shopware-6-client/src/services/customerService.ts

@@ -15,7 +15,7 @@ import { apiService } from "../apiService";
 import { CustomerAddress } from "@shopware-pwa/shopware-6-client/src/interfaces/models/checkout/customer/CustomerAddress";
 import { CustomerRegistrationParams } from "@shopware-pwa/shopware-6-client/src/interfaces/request/CustomerRegistrationParams";
 import { ContextTokenResponse } from "@shopware-pwa/shopware-6-client/src/interfaces/response/ContextTokenResponse";
-import { Order } from "../interfaces/models/checkout/order/Order";
+import { Order } from "@shopware-pwa/shopware-6-client/src/interfaces/models/checkout/order/Order";
 
 export interface CustomerRegisterResponse {
   data: string;