fix: checkout refresh cart (#281)

.changeset/fifty-tips-grow.md

@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/composables-next": minor
+---
+
+Remove refreshing cart from create order function

.changeset/poor-squids-promise.md

@@ -0,0 +1,5 @@
+---
+"vue-demo-store": minor
+---
+
+Checkout - refresh the cart after redirecting to the summary page

apps/docs/src/getting-started/e-commerce/checkout.md

@@ -291,8 +291,10 @@ After placing an order with the `createOrder` method, the cart is refreshed auto
 
 ```ts
 const { createOrder } = useCheckout();
+const { refreshCart } = useCart();
 
 const order = await createOrder();
+refreshCart();
 ```
 
 After creating an order, you can fetch order data. `orderId` is returned by the `createOrder` method from the `useCheckout` composable.

apps/docs/src/getting-started/e-commerce/custom-payment.md

@@ -167,6 +167,7 @@ This event is called when the user approves the payment process. It's the last s
     );
     // createOrder from useCheckout composable
     orderCreated.value = await createOrder();
+    refreshCart()
     // apiInstance from useShopwareContext composable
     const handlePaymentResponse = await apiInstance.invoke.post(
       "/store-api/handle-payment",

apps/docs/src/getting-started/e-commerce/payments.md

@@ -60,6 +60,7 @@ To give an example, let's say we need to implement a payment method which redire
 
    ```js{3}
    const { createOrder } = useCheckout();
+   const { refreshCart } = useCart();
    // create an order
    const order = await createOrder();
    ```

examples/express-checkout/src/App.vue

@@ -15,6 +15,7 @@ import {
   usePrice,
   useShopwareContext,
   useAddToCart,
+  useCart,
 } from "@shopware-pwa/composables-next";
 import {
   getProductThumbnailUrl,
@@ -36,6 +37,7 @@ const { paymentMethods, getPaymentMethods, createOrder } = useCheckout();
 const { setPaymentMethod } = useSessionContext();
 const { apiInstance } = useShopwareContext();
 const { addToCart } = useAddToCart(productFound);
+const { refreshCart } = useCart();
 
 const productName = computed(() =>
   getTranslatedProperty(productFound.value, "name")
@@ -95,6 +97,7 @@ const renderPaypalButtons = async () => {
           }
         );
         orderCreated.value = await createOrder();
+        refreshCart();
         const handlePaymentResponse = await apiInstance.invoke.post(
           "/store-api/handle-payment",
           {

examples/use-checkout/src/App.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { onMounted, ref, computed } from "vue";
-import { useCheckout, useSessionContext } from "@shopware-pwa/composables-next";
+import {
+  useCart,
+  useCheckout,
+  useSessionContext,
+} from "@shopware-pwa/composables-next";
 import { Error } from "@shopware-pwa/types";
 
 const {
@@ -17,6 +21,7 @@ const {
   selectedShippingMethod: shippingMethod,
   refreshSessionContext,
 } = useSessionContext();
+const { refreshCart } = useCart();
 
 const checkoutPaymentMethod = computed({
   get: () => paymentMethod.value?.id,
@@ -33,6 +38,7 @@ const createOrderError = ref<Error[]>([]);
 const createOrderProxy = async () => {
   try {
     const response = await createOrder();
+    refreshCart();
   } catch (error) {
     createOrderError.value = (error as any).messages || [];
   }

packages/composables/src/useCheckout.ts

@@ -139,8 +139,6 @@ export function useCheckout(): UseCheckoutReturn {
     } catch (e) {
       const err = e as ClientApiError;
       throw err;
-    } finally {
-      refreshCart();
     }
   }
 

templates/vue-demo-store/pages/checkout/index.vue

@@ -38,8 +38,15 @@ const {
   activeBillingAddress,
   setActiveBillingAddress,
 } = useSessionContext();
-const { cart, cartItems, subtotal, totalPrice, shippingTotal, isVirtualCart } =
-  useCart();
+const {
+  cart,
+  cartItems,
+  subtotal,
+  totalPrice,
+  shippingTotal,
+  isVirtualCart,
+  refreshCart,
+} = useCart();
 const { customerAddresses, loadCustomerAddresses } = useAddress();
 const isLoading = reactive<{ [key: string]: boolean }>({});
 
@@ -181,7 +188,8 @@ const placeOrder = async () => {
   isLoading["placeOrder"] = true;
   const order = await createOrder();
   isLoading["placeOrder"] = false;
-  return push("/checkout/success/" + order.id);
+  await push("/checkout/success/" + order.id);
+  refreshCart();
 };
 
 const termsSelected = computed(() => {