fix: refresh addresses explicitly in a component (#297)

.changeset/beige-hairs-perform.md

@@ -0,0 +1,5 @@
+---
+"vue-demo-store": patch
+---
+
+Refresh addresses on address save/edit

.changeset/long-houses-raise.md

@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/composables-next": patch
+---
+
+Remove implicit refresh action on address edit

apps/docs/src/packages/composables/useAddress.md

@@ -28,7 +28,7 @@ loadCustomerAddresses();
 
 ```vue{4}
 <script setup lang="ts">
-const { createCustomerAddress } = useAddress();
+const { createCustomerAddress, updateCustomerAddress } = useAddress();
 
 const newAddress: CustomerAddress = await createCustomerAddress({
   city: "Berlin",
@@ -39,6 +39,9 @@ const newAddress: CustomerAddress = await createCustomerAddress({
   street: "Karl-Marx-Allee 1",
   zipcode: "10178",
 });
+
+// refresh store with customer addresses (optionally if you want to see updated list of addresses)
+updateCustomerAddress();
 </script>
 ```
 
@@ -53,6 +56,9 @@ const updatedAddress = await updateCustomerAddress(
         { firstName: "Johnny" } // change the firstName value
     )
 );
+
+// refresh store with customer addresses (optionally if you want to see updated list of addresses)
+updateCustomerAddress();
 ```
 
 ### Delete an address

packages/composables/src/useAddress.ts

@@ -68,7 +68,6 @@ export type UseAddressReturn = {
  */
 export function useAddress(): UseAddressReturn {
   const { apiInstance } = useShopwareContext();
-  const { isLoggedIn, isGuestSession } = useUser();
 
   const _storeCustomerAddresses: Ref<CustomerAddress[]> = inject(
     "swCustomerAddresses",
@@ -100,7 +99,6 @@ export function useAddress(): UseAddressReturn {
     customerAddress: Omit<CustomerAddress, "id" | "salutation">
   ): Promise<CustomerAddress> {
     const result = await apiCreateCustomerAddress(customerAddress, apiInstance);
-    await loadCustomerAddresses();
     return result;
   }
 
@@ -111,7 +109,6 @@ export function useAddress(): UseAddressReturn {
     customerAddress: CustomerAddress
   ): Promise<CustomerAddress> {
     const result = await apiUpdateCustomerAddress(customerAddress, apiInstance);
-    await loadCustomerAddresses();
     return result;
   }
 
@@ -120,7 +117,6 @@ export function useAddress(): UseAddressReturn {
    */
   async function deleteCustomerAddress(addressId: string): Promise<void> {
     const result = apiDeleteCustomerAddress(addressId, apiInstance);
-    await loadCustomerAddresses();
     return result;
   }
 

packages/types/shopware-6-client/errors/ApiError.d.ts

@@ -1,21 +1,11 @@
 import { AxiosResponse, AxiosError } from "axios";
-
+import { Error } from "../response/Error";
 /**
  * API error structure for incoming errors
  *
  * @public
  */
-export type ShopwareError = {
-  status: string;
-  code: string;
-  title: string;
-  detail: string;
-  source?: {
-    pointer: string;
-  };
-  meta: unknown;
-};
-
+export type ShopwareError = Error;
 /**
  * API Error response from Shopware backend
  *

templates/vue-demo-store/components/account/AccountAddressCard.vue

@@ -5,6 +5,7 @@ const {
   setDefaultCustomerShippingAddress,
   setDefaultCustomerBillingAddress,
   deleteCustomerAddress,
+  loadCustomerAddresses,
 } = useAddress();
 const { defaultBillingAddressId, defaultShippingAddressId } = useUser();
 const { refreshSessionContext } = useSessionContext();
@@ -58,6 +59,8 @@ const removeAddress = async (addressId: string) => {
     pushSuccess(t("account.messages.addressDeletedSuccess"));
   } catch (error) {
     pushError(t("account.messages.addressDeletedError"));
+  } finally {
+    loadCustomerAddresses();
   }
 };
 

templates/vue-demo-store/components/account/AccountAddressForm.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import {
-  ClientApiError,
-  CustomerAddress,
-  ShopwareError,
-} from "@shopware-pwa/types";
+import { ClientApiError, CustomerAddress } from "@shopware-pwa/types";
 
-const { createCustomerAddress, updateCustomerAddress, errorMessageBuilder } =
-  useAddress();
+const {
+  createCustomerAddress,
+  updateCustomerAddress,
+  errorMessageBuilder,
+  loadCustomerAddresses,
+} = useAddress();
 
 const emits = defineEmits<{
   (e: "success"): void;
@@ -46,9 +46,11 @@ const invokeSave = async (): Promise<void> => {
       ? updateCustomerAddress
       : createCustomerAddress;
     await saveAddress(formData);
+    loadCustomerAddresses();
     emits("success");
-  } catch (errors) {
-    (errors as ClientApiError).messages.forEach((element: ShopwareError) => {
+  } catch (e) {
+    const errors = e as ClientApiError;
+    errors?.messages?.forEach((element) => {
       pushError(errorMessageBuilder(element) || t("messages.error"));
     });
   }