fix(composables): add shipping costs (#1580)

* fix(composables): add shipping costs * fix(composables): shipping calculation * fix: changes after CR
shopware · Jan 15, 2025 · a04aa8c · a04aa8c
1 parent e72f6cc
commit a04aa8c
Show file tree

Hide file tree

Showing 9 changed files with 97 additions and 12 deletions.
diff --git a/.changeset/calm-ligers-give.md b/.changeset/calm-ligers-give.md
@@ -0,0 +1,6 @@
+---
+"@shopware-pwa/composables-next": patch
+---
+
+Added `shippingCosts` property in `useCart` composable that returns shipping costs of the cart, with the shipping discounts.
+`shippingTotal` function is now deprecated as it only returns the first value from the array. The backend is returning a collection.
diff --git a/.changeset/honest-crabs-march.md b/.changeset/honest-crabs-march.md
@@ -0,0 +1,5 @@
+---
+"vue-demo-store": patch
+---
+
+Display all shipping costs in the cart components `cart.vue`, `checkout/index.vue`
diff --git a/packages/composables/src/useCart/useCart.test.ts b/packages/composables/src/useCart/useCart.test.ts
@@ -215,4 +215,37 @@ describe("useCart", () => {
 
     expect(vm.consumeCartErrors()).toEqual(null);
   });
+
+  it("should return shipping costs", async () => {
+    injections.apiClient.invoke.mockResolvedValue({
+      data: {
+        deliveries: [
+          {
+            shippingMethod: {
+              id: "a9d9cc502b3547f4a89eb2830c032c78",
+            },
+          },
+          {
+            shippingMethod: {
+              id: "a9d9cc502b3547f4a89eb2830c032c78",
+            },
+          },
+        ],
+      },
+    });
+    await vm.refreshCart();
+
+    expect(vm.shippingCosts.length).toEqual(2);
+  });
+
+  it("should return empty shipping costs", async () => {
+    injections.apiClient.invoke.mockResolvedValue({
+      data: {
+        deliveries: null,
+      },
+    });
+    await vm.refreshCart();
+
+    expect(vm.shippingCosts.length).toEqual(0);
+  });
 });
diff --git a/packages/composables/src/useCart/useCart.ts b/packages/composables/src/useCart/useCart.ts
@@ -66,8 +66,14 @@ export type UseCartReturn = {
   totalPrice: ComputedRef<number>;
   /**
    * Shipping price
+   *
+   * @deprecated Use `shippingCosts` instead
    */
   shippingTotal: ComputedRef<number>;
+  /**
+   * Shipping costs
+   */
+  shippingCosts: ComputedRef<Schemas["CartDelivery"][]>;
   /**
    * The total price of all cart items
    */
@@ -239,6 +245,10 @@ export function useCartFunction(): UseCartReturn {
     return shippingTotal || 0;
   });
 
+  const shippingCosts = computed(() => {
+    return cart.value?.deliveries || [];
+  });
+
   const subtotal = computed(() => {
     const cartPrice = cart.value?.price?.positionPrice;
     return cartPrice || 0;
@@ -297,6 +307,7 @@ export function useCartFunction(): UseCartReturn {
     isEmpty,
     isVirtualCart,
     consumeCartErrors,
+    shippingCosts,
   };
 }
 

diff --git a/templates/vue-demo-store/i18n/de-DE/cart.json b/templates/vue-demo-store/i18n/de-DE/cart.json
@@ -8,6 +8,7 @@
     "orderTotal": "Gesamtbestellwert",
     "subtotal": "Zwischensumme",
     "shippingEstimate": "Versandkostenabschätzung",
+    "shippingCosts": "Versandkosten",
     "emptyCartLabel": "Ihr Warenkorb ist leer!",
     "messages": {
       "addedToCart": "{p} wurde dem Warenkorb hinzugefügt."

diff --git a/templates/vue-demo-store/i18n/en-GB/cart.json b/templates/vue-demo-store/i18n/en-GB/cart.json
@@ -8,6 +8,7 @@
     "orderTotal": "Order total",
     "subtotal": "Subtotal",
     "shippingEstimate": "Shipping estimate",
+    "shippingCosts": "Shipping costs",
     "emptyCartLabel": "Your cart is empty!",
     "messages": {
       "addedToCart": "{p} has been added to cart."

diff --git a/templates/vue-demo-store/i18n/pl-PL/cart.json b/templates/vue-demo-store/i18n/pl-PL/cart.json
@@ -8,6 +8,7 @@
     "orderTotal": "Całkowity koszt zamówienia",
     "subtotal": "Suma częściowa",
     "shippingEstimate": "Szacowana wysyłka",
+    "shippingCosts": "Koszty wysyłki",
     "emptyCartLabel": "Twój koszyk jest pusty!",
     "messages": {
       "addedToCart": "{p} został dodany do koszyka."

diff --git a/templates/vue-demo-store/pages/checkout/cart.vue b/templates/vue-demo-store/pages/checkout/cart.vue
@@ -4,7 +4,7 @@ defineOptions({
 });
 definePageMeta({ layout: "checkout" });
 
-const { cartItems, subtotal, totalPrice, shippingTotal } = useCart();
+const { cartItems, subtotal, totalPrice, shippingCosts } = useCart();
 const localePath = useLocalePath();
 const { formatLink } = useInternationalization(localePath);
 const hasItems = computed(() => cartItems.value.length > 0);
@@ -44,15 +44,24 @@ const hasItems = computed(() => cartItems.value.length > 0);
           />
         </div>
 
-        <div
-          class="flex py-4 border-b justify-between text-sm text-secondary-500"
-        >
-          <p>{{ $t("cart.shippingEstimate") }}</p>
-          <SharedPrice
-            :value="shippingTotal"
-            class="text-secondary-900 font-medium"
-            data-testid="cart-subtotal"
-          />
+        <div class="py-4 text-sm text-secondary-500 border-b">
+          <div
+            class="py-1 flex justify-between"
+            v-for="shippingCost in shippingCosts"
+            :key="shippingCost.shippingMethod?.id ?? Math.random() * 100"
+          >
+            <p>{{ $t("cart.shippingCosts") }}</p>
+            <div
+              v-if="shippingCost.shippingCosts?.totalPrice"
+              class="flex text-secondary-900"
+            >
+              <SharedPrice
+                :value="shippingCost.shippingCosts.totalPrice"
+                class="text-secondary-900 font-medium"
+                data-testid="cart-shipping-cost"
+              />
+            </div>
+          </div>
         </div>
 
         <div

diff --git a/templates/vue-demo-store/pages/checkout/index.vue b/templates/vue-demo-store/pages/checkout/index.vue
@@ -45,7 +45,7 @@ const {
   cartItems,
   subtotal,
   totalPrice,
-  shippingTotal,
+  shippingCosts,
   isVirtualCart,
   refreshCart,
 } = useCart();
@@ -1014,6 +1014,24 @@ const beforeCreateOrderValidation = () => {
             </div>
 
             <div
+              class="py-1 flex justify-between text-sm text-secondary-500"
+              v-for="shippingCost in shippingCosts"
+              :key="shippingCost.shippingMethod?.id ?? Math.random() * 100"
+            >
+              <p>{{ $t("cart.shippingCosts") }}</p>
+              <div
+                v-if="shippingCost.shippingCosts?.totalPrice"
+                class="flex text-secondary-900"
+              >
+                <SharedPrice
+                  :value="shippingCost.shippingCosts.totalPrice"
+                  class="text-secondary-900 font-medium"
+                  data-testid="cart-shipping-cost"
+                />
+              </div>
+            </div>
+
+            <!-- <div
               class="flex pb-4 border-b justify-between text-sm text-secondary-500"
             >
               <p>{{ $t("checkout.shippingEstimate") }}</p>
@@ -1022,7 +1040,7 @@ const beforeCreateOrderValidation = () => {
                 class="text-secondary-900 font-medium"
                 data-testid="cart-subtotal"
               />
-            </div>
+            </div> -->
 
             <div class="flex justify-between text-secondary-900 font-medium">
               <p>{{ $t("checkout.orderTotal") }}l</p>