From 558c9d0f2127776a0542e8d1d95734cb5d4c7e75 Mon Sep 17 00:00:00 2001
From: Maciej D <7597086+mdanilowicz@users.noreply.github.com>
Date: Tue, 27 Jun 2023 14:57:02 +0200
Subject: [PATCH] fix: checkout refresh cart (#281)

---
 .changeset/fifty-tips-grow.md                      |  5 +++++
 .changeset/poor-squids-promise.md                  |  5 +++++
 .../src/getting-started/e-commerce/checkout.md     |  2 ++
 .../getting-started/e-commerce/custom-payment.md   |  1 +
 .../src/getting-started/e-commerce/payments.md     |  1 +
 examples/express-checkout/src/App.vue              |  3 +++
 examples/use-checkout/src/App.vue                  |  8 +++++++-
 packages/composables/src/useCheckout.ts            |  2 --
 templates/vue-demo-store/pages/checkout/index.vue  | 14 +++++++++++---
 9 files changed, 35 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/fifty-tips-grow.md
 create mode 100644 .changeset/poor-squids-promise.md

diff --git a/.changeset/fifty-tips-grow.md b/.changeset/fifty-tips-grow.md
new file mode 100644
index 000000000..aaa47bccb
--- /dev/null
+++ b/.changeset/fifty-tips-grow.md
@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/composables-next": minor
+---
+
+Remove refreshing cart from create order function
diff --git a/.changeset/poor-squids-promise.md b/.changeset/poor-squids-promise.md
new file mode 100644
index 000000000..f830ff686
--- /dev/null
+++ b/.changeset/poor-squids-promise.md
@@ -0,0 +1,5 @@
+---
+"vue-demo-store": minor
+---
+
+Checkout - refresh the cart after redirecting to the summary page
diff --git a/apps/docs/src/getting-started/e-commerce/checkout.md b/apps/docs/src/getting-started/e-commerce/checkout.md
index dcfdab1ea..06bec6568 100644
--- a/apps/docs/src/getting-started/e-commerce/checkout.md
+++ b/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.
diff --git a/apps/docs/src/getting-started/e-commerce/custom-payment.md b/apps/docs/src/getting-started/e-commerce/custom-payment.md
index 50b712622..ade16018d 100644
--- a/apps/docs/src/getting-started/e-commerce/custom-payment.md
+++ b/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",
diff --git a/apps/docs/src/getting-started/e-commerce/payments.md b/apps/docs/src/getting-started/e-commerce/payments.md
index 7ca363593..56991f999 100644
--- a/apps/docs/src/getting-started/e-commerce/payments.md
+++ b/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();
    ```
diff --git a/examples/express-checkout/src/App.vue b/examples/express-checkout/src/App.vue
index 0fc6fb781..beb763f55 100644
--- a/examples/express-checkout/src/App.vue
+++ b/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",
           {
diff --git a/examples/use-checkout/src/App.vue b/examples/use-checkout/src/App.vue
index e3ec8c7c5..b6cc1dadc 100644
--- a/examples/use-checkout/src/App.vue
+++ b/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 || [];
   }
diff --git a/packages/composables/src/useCheckout.ts b/packages/composables/src/useCheckout.ts
index b756d654b..4123e86f3 100644
--- a/packages/composables/src/useCheckout.ts
+++ b/packages/composables/src/useCheckout.ts
@@ -139,8 +139,6 @@ export function useCheckout(): UseCheckoutReturn {
     } catch (e) {
       const err = e as ClientApiError;
       throw err;
-    } finally {
-      refreshCart();
     }
   }
 
diff --git a/templates/vue-demo-store/pages/checkout/index.vue b/templates/vue-demo-store/pages/checkout/index.vue
index 57463928d..dc52469ea 100644
--- a/templates/vue-demo-store/pages/checkout/index.vue
+++ b/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(() => {