added stuff

Author: AmoDinho

src/content/create-booking-component.md

@@ -9,11 +9,11 @@ postnumber: 34
 framework: vue
 ---
 
-In this part we will create the booking component.
+In this part we will create the booking component. Essentially we will create four tabs that users will be able to enter information about the booking.
 
 First head over and create a `booking` directory and create an `Index.vue` file with the following:
 
-```
+```vue
 <template>
   <div>
     <HeadingOne class="text-center">
@@ -25,8 +25,8 @@ First head over and create a `booking` directory and create an `Index.vue` file
           v-on:goNext="next"
           :personal="personal"
           @event="
-            (newPersonal) => {
-              personal = newPersonal;
+            newPersonal => {
+              personal = newPersonal
             }
           "
         />
@@ -41,8 +41,8 @@ First head over and create a `booking` directory and create an `Index.vue` file
           v-on:goNext="next"
           :customers="customers"
           @event="
-            (cus) => {
-              customers = cus;
+            cus => {
+              customers = cus
             }
           "
           @inputData="showData"
@@ -72,12 +72,12 @@ First head over and create a `booking` directory and create an `Index.vue` file
 </template>
 
 <script>
-import CustomersTab from "./CustomersTab";
-import CustomerDetailsTab from "./CustomerDetailsTab";
-import SuccessTab from "./SuccessTab";
-import CheckoutTab from "./CheckoutTab";
-import Typography from "../../components/typography";
-const { HeadingOne } = Typography;
+import CustomersTab from "./CustomersTab"
+import CustomerDetailsTab from "./CustomerDetailsTab"
+import SuccessTab from "./SuccessTab"
+import CheckoutTab from "./CheckoutTab"
+import Typography from "../../components/typography"
+const { HeadingOne } = Typography
 export default {
   name: "BookingIndex",
   components: {
@@ -93,7 +93,7 @@ export default {
       variables() {
         return {
           listingId: this.$route.params.id,
-        };
+        }
       },
     },
   },
@@ -110,20 +110,14 @@ export default {
       showError: "",
       mutationObject: {},
       getAListing: {},
-    };
+    }
   },
   methods: {
     next(k) {
-      this.activeKey = k.toString();
-    },
-    showData() {
-      console.log(this.customers);
-      alert(
-        ` ${this.personal.date}${this.personal.number} ${this.personal.email}  ${this.customers[0].name}`
-      );
+      this.activeKey = k.toString()
     },
     mutate() {
-      this.isLoading = true;
+      this.isLoading = true
       this.$apollo
         .mutate({
           mutation: require("../../graphql/makeABooking.gql"),
@@ -134,38 +128,37 @@ export default {
             customers: this.customers,
           },
         })
-        .then((data) => {
-          console.log(data);
-          this.isLoading = false;
-          this.mutationObject = data.data.makeABooking;
-          this.activeKey = "4";
+        .then(data => {
+          console.log(data)
+          this.isLoading = false
+          this.mutationObject = data.data.makeABooking
+          this.activeKey = "4"
+        })
+        .catch(error => {
+          console.log(error)
+          this.isLoading = false
+          this.hasError = false
+          this.showError = error
         })
-        .catch((error) => {
-          console.log(error);
-          this.isLoading = false;
-          this.hasError = false;
-          this.showError = error;
-        });
     },
   },
-};
+}
 </script>
 <style>
 .ant-tabs-bar.ant-tabs-top-bar {
   display: none;
 }
 </style>
-
 ```
 
 🐢 We have the Antd Tabs component hooked up to the `v-model` with a field called `activeKey`. This is to tell the component which tab will be active.
 
-🐢 In the first tab we give it a key of 1 and this will be where we will create a form for the date etc. At the bottom we have the Red button and Red Outline button if you click on it will take you to the next tab while te Red outline button wil push you to the home page.
+🐢 In the first tab we give it a key of 1 and this will be where we will create a form for the date etc. At the bottom we have the Red button and Red Outline button if you click on it will take you to the next tab while the Red outline button wil push you to the home page.
 
 🐢 In the second tab we will add a form for the people the person is traveling with. It works similar to the 1st tab, in that if you click the buttons it will route you to the next or previous tab.
 
-🐢 The third tab will enable us to charge the user for their trip
+🐢 The third tab will enable us to charge the user for their booking.
 
-🐢 The fourth tab is the confirmation one that will fire once they ahve successfully paid for the trip.
+🐢 The fourth tab is the confirmation one that will fire once they have successfully paid for the trip.
 
-Next up we will start building out the forms. So if things do not work while we build out the components do not stress
+Next up we will start building out the forms. So if things do not work while we build out the components do not stress, we will be implementing them now.