Adding buy to cart button to the product page

Resources/vue/user/airtime/buy.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+      <h1>Buy Airtime</h1>
+      <form @submit.prevent="buyAirtime">
+          <div class="form-group">
+              <label for="amount">Amount</label>
+              <input type="number" class="form-control" id="amount" v-model="amount" required>
+          </div>
+          <div class="form-group">
+              <label for="mobile_number">Mobile Number</label>
+              <input type="text" class="form-control" id="mobile_number" v-model="mobile_number" required>
+          </div>
+          <div class="form-group">
+              <label for="network">Network</label>
+              <select class="form-control" id="network" v-model="network" required>
+                  <option value="MTN">MTN</option>
+                  <option value="GLO">GLO</option>
+                  <option value="AIRTEL">AIRTEL</option>
+                  <option value="9MOBILE">9MOBILE</option>
+              </select>
+          </div>
+          <button type="submit" class="btn btn-primary">Buy Airtime</button>
+      </form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+      return {
+          amount: '',
+          mobile_number: '',
+          network: ''
+      }
+  },
+  methods: {
+      buyAirtime() {
+          this.$store.dispatch('buyAirtime', {
+              amount: this.amount,
+              mobile_number: this.mobile_number,
+              network: this.network
+          })
+      }
+  }
+}
+
+</script>

Resources/vue/user/airtime/list.vue

@@ -0,0 +1,37 @@
+<template>
+    <div>
+        <h1>Airtime History</h1>
+        <table class="table">
+            <thead>
+                <tr>
+                    <th>Amount</th>
+                    <th>Mobile Number</th>
+                    <th>Network</th>
+                    <th>Date</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="history in airtimeHistory" :key="history.id">
+                    <td>{{ history.amount }}</td>
+                    <td>{{ history.mobile_number }}</td>
+                    <td>{{ history.network }}</td>
+                    <td>{{ history.created_at }}</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script>
+export default {
+    computed: {
+        airtimeHistory() {
+            return this.$store.getters.airtimeHistory
+        }
+    },
+    created() {
+        this.$store.dispatch('fetchAirtimeHistory')
+    }
+}
+</script>
+