Apply 30% off coupon

src/components/shop/shopping-cart/ShoppingCartSummary.vue

@@ -1,13 +1,25 @@
 <template>
-  Subtotal ({{itemsQuantity}} {{itemsQuantity | pluralize 'item'}}): {{subtotal | currency}}
-  <br>
-  Shipping:
-  <span v-if="!freeShipping"> {{shipping | currency}}</span>
-  <em v-if="freeShipping"> Free Shipping</em>
-  <br>
-  Taxes: {{taxes | currency}}
-  <br>
-  <strong>Total: {{total | currency}}</strong>
+  <div>
+    Subtotal ({{itemsQuantity}} {{itemsQuantity | pluralize 'item'}}): {{subtotal | currency}}
+    <em v-if="productDiscount"><b> (30% OFF applied)</b></em>
+  </div>
+
+  <div>
+    Shipping:
+    <span v-if="!freeShipping"> {{shipping | currency}}</span>
+    <em v-if="freeShipping"> Free Shipping</em>
+  </div>
+
+  <div>Taxes: {{taxes | currency}}</div>
+
+  <div>
+    <strong>Total:</strong>
+    <strong v-if="!totalDiscount"> {{total | currency}}</strong>
+    <span v-if="totalDiscount">
+      <strike> {{total | currency}}</strike>
+      <strong> {{totalWithDiscount | currency}}</strong>
+    </span>
+  </div>
 </template>
 
 <script>
@@ -25,13 +37,21 @@ export default {
   },
   vuex: {
     getters: {
+      productDiscount: ({ shoppingCart }) => shoppingCart.productDiscount,
       freeShipping: ({ shoppingCart }) => shoppingCart.freeShipping,
+      totalDiscount: ({ shoppingCart }) => shoppingCart.totalDiscount,
       itemsQuantity,
       subtotal,
       taxes,
       shipping,
       total
     }
+  },
+  computed: {
+    totalWithDiscount () {
+      const withDiscout = this.total - 100
+      return withDiscout > 0 ? withDiscout : 0
+    }
   }
 }
 </script>

src/vuex/shop/getters.js

@@ -19,9 +19,11 @@ export const itemsQuantity = state => {
 }
 
 export const subtotal = state => {
-  return cartProducts(state).reduce((subtotal, item) => {
+  const sum = cartProducts(state).reduce((subtotal, item) => {
     return subtotal + item.price * item.quantity
   }, 0)
+
+  return state.shoppingCart.productDiscount ? sum * 0.7 : sum
 }
 
 export const taxes = state => subtotal(state) * 0.005

src/vuex/shop/modules/shopping-cart.js

@@ -1,5 +1,7 @@
 const state = {
   added: [],
+  productDiscount: false,
+  totalDiscount: false,
   freeShipping: false
 }
 
@@ -23,8 +25,16 @@ const mutations = {
   },
 
   TOGGLE_COUPON (state, coupon) {
-    if (coupon.id === 3) {
-      state.freeShipping = !state.freeShipping
+    switch (coupon.id) {
+      case 1:
+        state.productDiscount = !state.productDiscount
+        break
+      case 2:
+        state.totalDiscount = !state.totalDiscount
+        break
+      case 3:
+        state.freeShipping = !state.freeShipping
+        break
     }
   }
 }