fix: m2-717. total price and discount calculation

Author: bartoszherba

packages/theme/components/CartSidebar.vue

@@ -202,15 +202,37 @@
         <transition name="sf-fade">
           <div v-if="totalItems">
             <SfProperty
-              :name="$t('Subtotal price')"
-              class="sf-property--full-width sf-property--large my-cart__total-price"
+              v-if="totals.subtotal !== totals.total"
+              :name="$t('Subtotal')"
+              class="sf-property--full-width sf-property--small"
             >
               <template #value>
                 <SfPrice
                   :regular="$fc(totals.subtotal)"
-                  :special="
-                    totals.subtotal <= totals.special ? '' : $fc(totals.special)
-                  "
+                  class="my-cart__subtotal-price"
+                />
+              </template>
+            </SfProperty>
+            <SfProperty
+              v-if="discount"
+              :name="$t('Discount')"
+              class="sf-property--full-width sf-property--small"
+            >
+              <template #value>
+                <SfPrice
+                  :regular="$fc(discount)"
+                  class="my-cart__discount"
+                />
+              </template>
+            </SfProperty>
+            <hr class="sf-divider">
+            <SfProperty
+              :name="$t('Order Total')"
+              class="sf-property--full-width sf-property--large my-cart__total-price"
+            >
+              <template #value>
+                <SfPrice
+                  :regular="$fc(totals.total)"
                 />
               </template>
             </SfProperty>
@@ -322,6 +344,7 @@ export default defineComponent({
         },
       })));
     const totals = computed(() => cartGetters.getTotals(cart.value));
+    const discount = computed(() => -cartGetters.getDiscountAmount(cart.value));
     const totalItems = computed(() => cartGetters.getTotalItems(cart.value));
     const getAttributes = (product: ConfigurableCartItem) => product.configurable_options || [];
     const getBundles = (product: BundleCartItem) => product.bundle_options?.map((b) => b.values).flat() || [];
@@ -393,6 +416,7 @@ export default defineComponent({
       isInStock,
       imageSizes,
       getMagentoImage,
+      discount,
     };
   },
 });
@@ -451,10 +475,14 @@ export default defineComponent({
     margin: 0;
   }
 
+  &__subtotal, &__discount {
+    --price-font-weight: var(--font-weight--light);
+  }
+
   &__total-price {
-    --price-font-size: var(--font-size--xl);
+    --price-font-size: var(--font-size--lg);
     --price-font-weight: var(--font-weight--medium);
-    margin: 0 0 var(--spacer-base) 0;
+    margin: var(--spacer-base) 0 var(--spacer-base) 0;
   }
 }
 

packages/theme/components/Checkout/CartPreview.vue

@@ -21,7 +21,7 @@
       <SfProperty
         v-if="hasDiscounts"
         :name="$t('Discount')"
-        :value="$fc(discountsAmount)"
+        :value="$fc(discount)"
         class="sf-property--full-width sf-property--small property"
       />
       <SfProperty
@@ -92,17 +92,13 @@ export default defineComponent({
     const products = computed(() => cartGetters.getItems(cart.value));
     const totalItems = computed(() => cartGetters.getTotalItems(cart.value));
     const totals = computed(() => cartGetters.getTotals(cart.value));
-    const discounts = computed(() => cartGetters.getDiscounts(cart.value));
-    const hasDiscounts = computed(() => discounts.value.length > 0);
-    const discountsAmount = computed(
-      () => -1 * discounts.value.reduce((a, el) => el.value + a, 0),
-    );
+    const discount = computed(() => -cartGetters.getDiscountAmount(cart.value));
+    const hasDiscounts = computed(() => Math.abs(discount.value) > 0);
     const selectedShippingMethod = computed(() => cartGetters.getSelectedShippingMethod(cart.value));
 
     return {
       cart,
-      discounts,
-      discountsAmount,
+      discount,
       hasDiscounts,
       totalItems,
       listIsHidden,

packages/theme/getters/types.d.ts

@@ -67,14 +67,6 @@ export interface UserShippingGetters<USER_SHIPPING, USER_SHIPPING_ITEM> {
   isDefault: (address: USER_SHIPPING_ITEM) => boolean;
 }
 
-export interface UserGetters<USER> {
-  getFirstName: (customer: USER) => string;
-  getLastName: (customer: USER) => string;
-  getFullName: (customer: USER) => string;
-  getEmailAddress: (customer: USER) => string;
-  [getterName: string]: (element: any, options?: any) => unknown;
-}
-
 export interface WishlistGetters<WISHLIST, WISHLIST_ITEM> {
   getItems: (wishlist: WISHLIST) => WISHLIST_ITEM[];
   getItemName: (wishlistItem: WISHLIST_ITEM) => string;
@@ -101,5 +93,6 @@ export interface CartGetters<CART, CART_ITEM> {
   // @deprecated - use getDiscounts instead
   getCoupons: (cart: CART) => Coupon[];
   getDiscounts: (cart: CART) => CartDiscount[];
+  getDiscountAmount: (cart: CART) => number;
   [getterName: string]: (element: any, options?: any) => unknown;
 }

packages/theme/modules/checkout/getters/cartGetters.ts

@@ -146,6 +146,8 @@ export const getDiscounts = (cart: Cart): CartDiscount[] => (Array.isArray(cart?
   code: d.label,
 } as CartDiscount)) : []);
 
+export const getDiscountAmount = (cart: Cart): number => calculateDiscounts(cart?.prices?.discounts ?? []);
+
 export const getAppliedCoupon = (cart: Cart): Coupon | null => (Array.isArray(cart?.applied_coupons) && cart?.applied_coupons.length > 0 ? {
   id: cart.applied_coupons[0].code,
   name: cart.applied_coupons[0].code,
@@ -189,6 +191,7 @@ const cartGetters: CartGetters = {
   getShippingPrice,
   getTotalItems,
   getTotals,
+  getDiscountAmount,
   productHasSpecialPrice,
   getStockStatus,
   getConfiguredVariant,