fix(default-theme): added shipping cost to order summary (#1357)

api/composables.api.md

@@ -217,6 +217,8 @@ export interface IUseCart {
     // @deprecated (undocumented)
     removeProduct: ({ id }: Partial<Product>) => void;
     // (undocumented)
+    shippingTotal: ComputedRef<number>;
+    // (undocumented)
     subtotal: ComputedRef<number>;
     // (undocumented)
     totalPrice: ComputedRef<number>;

docs/landing/resources/api/composables.iusecart.md

@@ -31,6 +31,7 @@ export interface IUseCart
 |  [refreshCart](./composables.iusecart.refreshcart.md) | () =&gt; void | <b><i>(BETA)</i></b> |
 |  [removeItem](./composables.iusecart.removeitem.md) | ({ id }: LineItem) =&gt; Promise&lt;void&gt; | <b><i>(BETA)</i></b> |
 |  [removeProduct](./composables.iusecart.removeproduct.md) | ({ id }: Partial&lt;Product&gt;) =&gt; void | <b><i>(BETA)</i></b> |
+|  [shippingTotal](./composables.iusecart.shippingtotal.md) | ComputedRef&lt;number&gt; | <b><i>(BETA)</i></b> |
 |  [subtotal](./composables.iusecart.subtotal.md) | ComputedRef&lt;number&gt; | <b><i>(BETA)</i></b> |
 |  [totalPrice](./composables.iusecart.totalprice.md) | ComputedRef&lt;number&gt; | <b><i>(BETA)</i></b> |
 

docs/landing/resources/api/composables.iusecart.shippingtotal.md

@@ -0,0 +1,14 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@shopware-pwa/composables](./composables.md) &gt; [IUseCart](./composables.iusecart.md) &gt; [shippingTotal](./composables.iusecart.shippingtotal.md)
+
+## IUseCart.shippingTotal property
+
+> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+<b>Signature:</b>
+
+```typescript
+shippingTotal: ComputedRef<number>;
+```

packages/composables/__tests__/useCart.spec.ts

@@ -42,6 +42,44 @@ describe("Composables - useCart", () => {
     stateUser.value = null;
   });
   describe("computed", () => {
+    describe("shippingTotal", () => {
+      it("should return default value 0 (zero) if cart is empty", () => {
+        stateCart.value = undefined as any;
+        const { shippingTotal } = useCart(rootContextMock);
+        expect(shippingTotal.value).toBe(0);
+      });
+      it("should return default value 0 (zero) if there is no delivery in cart", () => {
+        stateCart.value = {
+          deliveries: undefined,
+        };
+        const { shippingTotal } = useCart(rootContextMock);
+        expect(shippingTotal.value).toBe(0);
+      });
+      it("should return default value 0 (zero) if shipping costs are empty", () => {
+        stateCart.value = {
+          deliveries: [
+            {
+              shippingCosts: undefined,
+            },
+          ],
+        };
+        const { shippingTotal } = useCart(rootContextMock);
+        expect(shippingTotal.value).toBe(0);
+      });
+      it("should return total price from shipping cost of the first delivery from cart", () => {
+        stateCart.value = {
+          deliveries: [
+            {
+              shippingCosts: {
+                totalPrice: 199.5,
+              },
+            },
+          ],
+        };
+        const { shippingTotal } = useCart(rootContextMock);
+        expect(shippingTotal.value).toBe(199.5);
+      });
+    });
     describe("cart", () => {
       it("should be null on not loaded cart", () => {
         stateCart.value = null;

packages/composables/src/hooks/useCart/index.ts

@@ -52,6 +52,7 @@ export interface IUseCart {
    */
   removeProduct: ({ id }: Partial<Product>) => void;
   totalPrice: ComputedRef<number>;
+  shippingTotal: ComputedRef<number>;
   subtotal: ComputedRef<number>;
 }
 
@@ -153,6 +154,12 @@ export const useCart = (rootContext: ApplicationVueContext): IUseCart => {
     return cartPrice || 0;
   });
 
+  const shippingTotal = computed(() => {
+    const shippingTotal =
+      cart.value?.deliveries?.[0]?.shippingCosts?.totalPrice;
+    return shippingTotal || 0;
+  });
+
   const subtotal = computed(() => {
     const cartPrice = cart.value?.price?.positionPrice;
     return cartPrice || 0;
@@ -172,6 +179,7 @@ export const useCart = (rootContext: ApplicationVueContext): IUseCart => {
     removeProduct,
     removeItem,
     totalPrice,
+    shippingTotal,
     subtotal,
   };
 };

packages/default-theme/src/components/checkout/sidebar/SidebarOrderSummary.vue

@@ -17,7 +17,7 @@
     />
     <SfProperty
       :name="$t('Shipping')"
-      :value="shippingMethod.price | price"
+      :value="shippingTotal | price"
       class="sf-property--full-width property"
     />
     <SfDivider class="divider" />
@@ -59,17 +59,13 @@ export default {
     SwPromoCode,
   },
   setup(props, { root }) {
-    const { count, totalPrice, subtotal } = useCart(root)
+    const { count, subtotal, shippingTotal, totalPrice } = useCart(root)
 
-    // TODO: use useSessionContext
-    const shippingMethod = {
-      price: "TODO: add price",
-    }
     return {
       count,
-      totalPrice,
       subtotal,
-      shippingMethod,
+      shippingTotal,
+      totalPrice,
     }
   },
   data() {

packages/default-theme/src/components/checkout/summary/TotalsSummary.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="summary">
-    <SwTotals :total="total" :subtotal="subtotal" />
+    <SwTotals :total="total" :subtotal="subtotal" :shipping="shippingTotal" />
     <div class="notification" v-if="!cartItems.length">
       <SfNotification
         :visible="true"
@@ -68,13 +68,15 @@ export default {
       subtotal,
       totalPrice,
       removeProduct,
+      shippingTotal,
       refreshCart,
     } = useCart(root)
     return {
       cartItems,
       refreshCart,
       subtotal,
       total: totalPrice,
+      shippingTotal,
       removeProduct,
     }
   },