Allow product removal on Checkout page.

3 files changed, 9 insertions, 3 deletions

diff --git a/client/src/store/index.js b/client/src/store/index.js
index 086c544..519347d 100644
--- a/client/src/store/index.js
+++ b/client/src/store/index.js
@@ -58,8 +58,8 @@ export default createStore({
           quantity: 1
         });
     },
-    removeFromCart(state) {
-      let foundProduct = state.cart.find(x => x.id == state.currentProduct._id);
+    removeFromCart(state, productId) {
+      let foundProduct = state.cart.find(x => x.id == productId);
       if (foundProduct) {
         foundProduct.quantity--;
         if (foundProduct.quantity == 0)
diff --git a/client/src/views/Checkout.vue b/client/src/views/Checkout.vue
index 83d0940..8adeb4a 100644
--- a/client/src/views/Checkout.vue
+++ b/client/src/views/Checkout.vue
@@ -10,6 +10,7 @@
               <i>${{ item.price }}</i>
             </div>
             <span class="badge bg-primary rounded-pill">{{ item.quantity }}</span>
+            <span class="badge bg-danger rounded-pill ms-2" @click="remove(item.id)">x</span>
           </li>
         </ul>
         <p class="text-center my-3 fw-bold">You can buy {{ cartSize }} items for ${{ cartPrice }}.</p>
@@ -31,6 +32,11 @@ export default {
     cartPrice() {
       return this.$store.getters.getCartPrice;
     }
+  },
+  methods: {
+    remove(id) {
+      this.$store.commit('removeFromCart', id);
+    }
   }
 }
 </script>
diff --git a/client/src/views/Product.vue b/client/src/views/Product.vue
index ff43857..d1fde29 100644
--- a/client/src/views/Product.vue
+++ b/client/src/views/Product.vue
@@ -47,7 +47,7 @@ export default {
       this.$store.commit('addToCart');
     },
     remove() {
-      this.$store.commit('removeFromCart');
+      this.$store.commit('removeFromCart', this.$route.params.id);
     }
   }
 }