fix(theme): in My addresses edit address does not work (#452)

Co-authored-by: Michal-Dziedzinski <michal.marcin.dziedzinski@gmail.com>

api/composables.api.md

@@ -5,6 +5,7 @@
 ```ts
 
 import { AddressType } from '@shopware-pwa/commons/interfaces/models/checkout/customer/CustomerAddress';
+import { Country } from '@shopware-pwa/commons/interfaces/models/system/country/Country';
 import { Customer } from '@shopware-pwa/commons/interfaces/models/checkout/customer/Customer';
 import { CustomerAddress } from '@shopware-pwa/commons/interfaces/models/checkout/customer/CustomerAddress';
 import { CustomerAddressParam } from '@shopware-pwa/shopware-6-client';
@@ -15,6 +16,7 @@ import { CustomerUpdateProfileParam } from '@shopware-pwa/shopware-6-client';
 import { Order } from '@shopware-pwa/commons/interfaces/models/checkout/order/Order';
 import { Product } from '@shopware-pwa/commons/interfaces/models/content/product/Product';
 import { Ref } from '@vue/composition-api';
+import { Salutation } from '@shopware-pwa/commons/interfaces/models/system/salutation/Salutation';
 
 // @alpha (undocumented)
 export function getStore(): any;
@@ -139,6 +141,8 @@ export interface UseUser {
     // (undocumented)
     addresses: Ref<CustomerAddress[] | null>;
     // (undocumented)
+    country: Ref<Country | null>;
+    // (undocumented)
     deleteAddress: (addressId: string) => Promise<boolean>;
     // (undocumented)
     error: Ref<any>;
@@ -149,10 +153,14 @@ export interface UseUser {
     // (undocumented)
     loadAddresses: () => Promise<void>;
     // (undocumented)
+    loadCountry: (countryId: string) => Promise<void>;
+    // (undocumented)
     loading: Ref<boolean>;
     // (undocumented)
     loadOrders: () => Promise<void>;
     // (undocumented)
+    loadSalutation: (salutationId: string) => Promise<void>;
+    // (undocumented)
     login: ({ username, password }: {
         username?: string;
         password?: string;
@@ -171,6 +179,8 @@ export interface UseUser {
     // (undocumented)
     register: ({}: CustomerRegistrationParams) => Promise<boolean>;
     // (undocumented)
+    salutation: Ref<Salutation | null>;
+    // (undocumented)
     updateEmail: (updateEmailData: CustomerUpdateEmailParam) => Promise<boolean>;
     // (undocumented)
     updatePassword: (updatePasswordData: CustomerUpdatePasswordParam) => Promise<boolean>;

api/shopware-6-client.api.md

@@ -175,6 +175,12 @@ export const getProducts: (searchCriteria?: SearchCriteria | undefined) => Promi
 // @alpha
 export const getProductsIds: () => Promise<SearchResult<string[]>>;
 
+// @alpha (undocumented)
+export function getUserCountry(countryId: string): Promise<Country>;
+
+// @alpha (undocumented)
+export function getUserSalutation(salutationId: string): Promise<Salutation>;
+
 // @alpha
 export function login({ username, password }?: {
     username?: string;

packages/composables/__tests__/useUser.spec.ts

@@ -303,6 +303,72 @@ describe("Composables - useUser", () => {
       });
     });
 
+    describe("loadCountry", () => {
+      it("should invoke client getUserCountry method which return country object", async () => {
+        mockedApiClient.getUserCountry.mockResolvedValue([
+          {
+            name: "Poland",
+            id: "12345"
+          }
+        ] as any);
+        const { country, loadCountry, error } = useUser();
+        const userId = "123qwe";
+        await loadCountry(userId);
+        expect(mockedApiClient.getUserCountry).toBeCalledTimes(1);
+        expect(error.value).toBeFalsy();
+        expect(country.value).toStrictEqual([
+          {
+            name: "Poland",
+            id: "12345"
+          }
+        ]);
+      });
+
+      it("should invoke client getUserCountry method and assign error message if client request is rejected", async () => {
+        mockedApiClient.getUserCountry.mockRejectedValueOnce({
+          message: "Something went wrong..."
+        });
+        const { loadCountry, error } = useUser();
+        const salutationId = "123qwe";
+        await loadCountry(salutationId);
+        expect(mockedApiClient.getUserCountry).toBeCalledTimes(1);
+        expect(error.value).toBe("Something went wrong...");
+      });
+    });
+
+    describe("loadSalutation", () => {
+      it("should invoke client getUserSalutation method which return country object", async () => {
+        mockedApiClient.getUserSalutation.mockResolvedValue([
+          {
+            name: "Mrs.",
+            id: "12345"
+          }
+        ] as any);
+        const { salutation, loadSalutation, error } = useUser();
+        const salutationId = "123qwe";
+        await loadSalutation(salutationId);
+        expect(mockedApiClient.getUserSalutation).toBeCalledTimes(1);
+        expect(error.value).toBeFalsy();
+        expect(salutation.value).toStrictEqual([
+          {
+            name: "Mrs.",
+            id: "12345"
+          }
+        ]);
+      });
+
+      it("should invoke client getUserSalutation method and assign error message if client request is rejected", async () => {
+        mockedApiClient.getUserSalutation.mockRejectedValueOnce({
+          message: "Something went wrong..."
+        });
+        const { loadSalutation, error } = useUser();
+        const userId = "123qwe";
+        await loadSalutation(userId);
+        expect(mockedApiClient.getUserSalutation).toBeCalledTimes(1);
+        expect(error.value).toBe("Something went wrong...");
+      });
+    });
+
     describe("markAddressAsDefault", () => {
       it("should invoke client setDefaultCustomerBillingAddress method and return true on success", async () => {
         mockedApiClient.setDefaultCustomerBillingAddress.mockResolvedValue(

packages/composables/src/hooks/useUser.ts

@@ -9,6 +9,8 @@ import {
   getCustomerOrders,
   getCustomerOrderDetails,
   getCustomerAddresses,
+  getUserCountry,
+  getUserSalutation,
   setDefaultCustomerBillingAddress,
   setDefaultCustomerShippingAddress,
   deleteCustomerAddress,
@@ -28,6 +30,8 @@ import {
 } from "@shopware-pwa/commons/interfaces/models/checkout/customer/CustomerAddress";
 import { CustomerRegistrationParams } from "@shopware-pwa/commons/interfaces/request/CustomerRegistrationParams";
 import { ClientApiError } from "@shopware-pwa/commons/interfaces/errors/ApiError";
+import { Country } from "@shopware-pwa/commons/interfaces/models/system/country/Country";
+import { Salutation } from "@shopware-pwa/commons/interfaces/models/system/salutation/Salutation";
 
 /**
  * @alpha
@@ -47,11 +51,15 @@ export interface UseUser {
   loading: Ref<boolean>;
   error: Ref<any>;
   isLoggedIn: Ref<boolean>;
+  country: Ref<Country | null>;
+  salutation: Ref<Salutation | null>;
   refreshUser: () => Promise<void>;
   logout: () => Promise<void>;
   loadOrders: () => Promise<void>;
   getOrderDetails: (orderId: string) => Promise<Order>;
   loadAddresses: () => Promise<void>;
+  loadCountry: (countryId: string) => Promise<void>;
+  loadSalutation: (salutationId: string) => Promise<void>;
   addAddress: (params: CustomerAddressParam) => Promise<boolean>;
   deleteAddress: (addressId: string) => Promise<boolean>;
   updatePersonalInfo: (
@@ -79,6 +87,8 @@ export const useUser = (): UseUser => {
   const error: Ref<any> = ref(null);
   const orders: Ref<Order[] | null> = ref(null);
   const addresses: Ref<CustomerAddress[] | null> = ref(null);
+  const country: Ref<Country | null> = ref(null);
+  const salutation: Ref<Salutation | null> = ref(null);
   const user: any = computed(() => {
     return vuexStore.getters.getUser;
   });
@@ -157,6 +167,24 @@ export const useUser = (): UseUser => {
     }
   };
 
+  const loadCountry = async (userId: string): Promise<void> => {
+    try {
+      country.value = await getUserCountry(userId);
+    } catch (e) {
+      const err: ClientApiError = e;
+      error.value = err.message;
+    }
+  };
+
+  const loadSalutation = async (salutationId: string): Promise<void> => {
+    try {
+      salutation.value = await getUserSalutation(salutationId);
+    } catch (e) {
+      const err: ClientApiError = e;
+      error.value = err.message;
+    }
+  };
+
   const markAddressAsDefault = async ({
     addressId,
     type
@@ -269,6 +297,10 @@ export const useUser = (): UseUser => {
     updatePersonalInfo,
     updatePassword,
     addAddress,
-    deleteAddress
+    deleteAddress,
+    loadSalutation,
+    salutation,
+    loadCountry,
+    country
   };
 };

packages/default-theme/components/forms/SwAddress.vue

@@ -105,6 +105,7 @@
         @blur="$v.form.country.$touch()"
         required
         class="sf-select--underlined form__element form__element--half form__element--half-even form__select"
+
       >
         <SfSelectOption
           v-for="countryOption in getMappedCountries"
@@ -140,7 +141,7 @@
 <script>
 import { validationMixin } from 'vuelidate'
 import { required } from 'vuelidate/lib/validators'
-import { computed } from '@vue/composition-api'
+import { computed, reactive, ref, onBeforeMount } from '@vue/composition-api'
 import {
   SfAlert,
   SfTabs,
@@ -176,29 +177,35 @@ export default {
       })
     }
   },
-  data() {
-    return {
-      editAddress: false,
-      editedAddress: -1,
-      form: this.address
-    }
-  },
-  setup() {
+  setup(props) {
     const { getSalutations, error: salutationsError } = useSalutations()
     const { addAddress, error: userError } = useUser()
     const { getCountries, error: countriesError } = useCountries()
+    const editAddress = ref(false)
+    const editedAddress = ref(-1)
+    const form = reactive(JSON.parse(JSON.stringify(props.address)))
 
     const getMappedCountries = computed(() => mapCountries(getCountries.value))
     const getMappedSalutations = computed(() =>
       mapSalutations(getSalutations.value)
     )
 
+    form.salutation = {
+      name: props.address.salutation.displayName,
+      id: props.address.salutation.id
+    }
+    form.country = {
+      name: props.address.country.name,
+      id: props.address.country.id
+    }
+
     return {
       addAddress,
       userError,
       countriesError,
       getMappedCountries,
-      getMappedSalutations
+      getMappedSalutations,
+      form
     }
   },
   computed: {
@@ -212,9 +219,11 @@ export default {
         apartment,
         city,
         country,
-        phoneNumber
+        phoneNumber,
+        _uniqueIdentifier
       } = this.form
       return {
+        id: _uniqueIdentifier,
         firstName,
         lastName,
         salutationId: salutation.id,

packages/default-theme/pages/account/addresses/add.vue

@@ -1,12 +1,7 @@
 <template>
   <div class="addresses-add">
-    <div v-if="address.length > 0">
-      <SwAddress 
-        :address="address[0]"
-      />
-    </div>
-    <div v-else>
-      <SwAddress/>
+    <div v-if="address !== ''"> 
+      <SwAddress :address="address"/>
     </div>
   </div>
 </template>
@@ -23,17 +18,25 @@ export default {
     }
   },
   setup() {
-    const { addresses, loadAddresses } = useUser()
+    const { addresses, loadAddresses, country, loadCountry, salutation, loadSalutation } = useUser()
     return {
       loadAddresses,
-      addresses
+      addresses,
+      loadCountry,
+      country,
+      loadSalutation,
+      salutation
     }
   },
   async mounted() {
     await this.loadAddresses();
     const paramsId = this.$route.params && this.$route.params.id
     if (paramsId) {
-      this.address = this.addresses.filter(addr => addr.id=== paramsId)
+      const address = this.addresses.find(addr => addr.id === paramsId)
+      await this.loadCountry(address.countryId);
+      await this.loadSalutation(address.salutationId);
+
+      this.address = {...address, country: this.country.data, salutation: this.salutation.data}
     }
   }
 }

packages/shopware-6-client/__tests__/endpoints.spec.ts

@@ -29,7 +29,9 @@ import {
   getNewsletterUnsubscribeEndpoint,
   getProductsIdsEndpoint,
   getNavigationEndpoint,
-  getCustomerOrderDetailsEndpoint
+  getCustomerOrderDetailsEndpoint,
+  getContextCountryItemEndpoint,
+  getContextSalutationItemEndpoint
 } from "../src/endpoints";
 
 const sampleProductId = "eea0f69ec02d44f7a4224272b3d99478";
@@ -38,6 +40,8 @@ const sampleAddressId = "324af469318f46b68e0fe69d77ef15fb";
 const sampleCustomerId = "8b67c1fbb718487db750651430023298";
 const sampleLineItemId = "042df8812942487bb52c9fc1e5b26e20";
 const sampleOrderId = "27356105cf9b4484b96143881c37bbcb";
+const sampleCountryId = "27356105cf9b4484b96143881c37bbcb";
+const sampleSalutationId = "27356105cf9b4484b96143881c37bbcb";
 
 describe("endpoints", () => {
   describe("getProductEndpoint", () => {
@@ -263,4 +267,18 @@ describe("endpoints", () => {
       expect(result).toEqual("/vsf/navigation");
     });
   });
+
+  describe("getContextCountryItemEndpoint", () => {
+    it("should return country item endpoint", async () => {
+      const result = getContextCountryItemEndpoint(sampleCountryId);
+      expect(result).toEqual(`/country/${sampleCountryId}`);
+    });
+  });
+
+  describe("getContextSalutationItemEndpoint", () => {
+    it("should return salutation item endpoint", async () => {
+      const result = getContextSalutationItemEndpoint(sampleSalutationId);
+      expect(result).toEqual(`/salutation/${sampleSalutationId}`);
+    });
+  });
 });

packages/shopware-6-client/__tests__/services/ContextService/getUserCountry.spec.ts

@@ -0,0 +1,20 @@
+import { apiService } from "../../../src/apiService";
+import { getUserCountry } from "@shopware-pwa/shopware-6-client";
+
+jest.mock("../../../src/apiService");
+const mockedAxios = apiService as jest.Mocked<typeof apiService>;
+
+describe("ContextService - getUserCountry", () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+  it("should return user salutation object", async () => {
+    mockedAxios.get.mockResolvedValueOnce({ data: { name: "Poland" } });
+
+    const countryId = "123123123";
+    const result = await getUserCountry(countryId);
+    expect(mockedAxios.get).toBeCalledTimes(1);
+    expect(mockedAxios.get).toBeCalledWith(`/country/${countryId}`);
+    expect(result.name).toEqual("Poland");
+  });
+});