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,
  }
  },