Cart & Orders WIP

package.json

     "vue-js-modal": "^1.3.35",
     "vue-json-excel": "^0.2.98",
     "vue-router": "^3.1.5",
+    "vue-stepper": "^1.4.2",
     "vue-switches": "^2.0.1",
     "vue-trix": "^1.1.7",
     "vue2-editor": "^2.10.2",

public/index.html

     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.png">
     <link href="img/univate.PNG" rel="apple-touch-icon">
-    <title>Restaurants</title>
+    <title>Fork-ing Fast</title>
 
     <link
       href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"

src/App.vue

   name: "app",
   components: {
     NavBar,
-    FooterSection
+    FooterSection,
   },
   methods: {
     routerGoTo(goTo) {
       this.$router.push(goTo);
-    }
-  }
+    },
+  },
 };
 </script>
 

src/assets/Log.js

 const items = {
   setValues(item) {
-    localStorage.setItem('user', JSON.stringify(item.user));
-    localStorage.setItem('token', JSON.stringify(item.token));
-    localStorage.setItem('person', JSON.stringify(item.person));
-    localStorage.setItem('agency', JSON.stringify(item.agency));
+    localStorage.setItem("user", JSON.stringify(item.user));
+    localStorage.setItem("token", JSON.stringify(item.token));
+    localStorage.setItem("person", JSON.stringify(item.person));
+    localStorage.setItem("agency", JSON.stringify(item.agency));
   },
   tokenExpired() {
-    const item = this.getJSONObject('token');
+    const item = this.getJSONObject("token");
     if (!item && !item.expires && item.expires !== null) {
       const today = new Date();
       const date = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`;
     return true;
   },
   updateTokenExpiry() {
-    const item = this.getJSONObject('token');
+    const item = this.getJSONObject("token");
     if (!item && !item.expires) {
       item.expires = this.addMinutes();
-      localStorage.removeItem('token');
-      localStorage.setItem('token', JSON.stringify(item));
+      localStorage.removeItem("token");
+      localStorage.setItem("token", JSON.stringify(item));
     }
   },
   getJSONObject(itemString) {
     return new Date(dateTime + 15 * 60000);
   },
   clearValues() {
-    localStorage.removeItem('user');
-    localStorage.removeItem('token');
-    localStorage.removeItem('person');
-    localStorage.removeItem('agency');
+    localStorage.removeItem("user");
+    localStorage.removeItem("token");
+    localStorage.removeItem("person");
+    localStorage.removeItem("agency");
   },
   isLoggedIn() {
-    return localStorage.getItem('token') !== undefined && localStorage.getItem('token') !== null;
+    return localStorage.getItem("token") !== undefined && localStorage.getItem("token") !== null;
   },
   restaurantId() {
-    return 1;
+    return 2;
+  },
+  userId() {
+    return 4;
   },
   getUser() {
-    return localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {};
+    return localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {};
   },
   getPerson() {
-    return localStorage.getItem('person') ? JSON.parse(localStorage.getItem('person')) : {};
-  },
+    return localStorage.getItem("person") ? JSON.parse(localStorage.getItem("person")) : {};
+  }
 };
 export default items;

src/components/customer/customerDetails.vue

 <script>
 import Map from "../shared/mapSetLocation";
 import { mapState, mapActions } from "vuex";
+import Log from "../../assets/Log";
 
 export default {
   name: "CustomerDetails",
   components: {
-    Map
+    Map,
   },
   data() {
     return {
-      complex: false
+      complex: false,
     };
   },
   methods: {
       this.$modal.hide("map");
     },
     UpdateAddress(address) {
-      console.log(JSON.stringify(address));
+      this.userAddress.userId = this.user.id;
       this.userAddress.streetNumber = address.streetNumber;
       this.userAddress.streetName = address.streetName;
       this.userAddress.suburb = address.suburb;
     },
     Close() {
       this.$router.push("/");
-    }
+    },
   },
   computed: {
     ...mapState("user", ["user", "userAddress"]),
     mapCoords() {
       var coords = {
         lat: this.userAddress.latitude,
-        lng: this.userAddress.longitude
+        lng: this.userAddress.longitude,
       };
       return coords;
-    }
+    },
   },
   mounted() {
-    this.getUser(2); //Will need to replace with auth object's ID
-    this.getUserAddress(2);
-  }
+    this.getUser(Log.userId()); //Will need to replace with auth object's ID
+    this.getUserAddress(Log.userId());
+  },
 };
 </script>

src/components/home/menuItems.vue

               <h4 class="card-info-title">
                 <img src="/img/delivery-truck-with-dollar.png" height="30px" width="30px" />
               </h4>
-              <span>{{ menu.deliveryFee }}</span>
+              <span>{{ menu.deliveryFee | toCurrency }}</span>
             </li>
             <li>
               <h4 class="card-info-title">
                     class="img-b img-fluid"
                     style="object-fit: cover;"
                   />
+                  <!--  -->
+                  <p
+                    v-if="iMenuItem.outOfStock"
+                    class="top-left pendingOffer"
+                    style="text-align: center;"
+                  >
+                    <strong>Out Of Stock</strong>
+                  </p>
                 </div>
                 <div class="card-overlay">
                   <div class="card-header-b">
       </div>
     </div>
     <div v-else>
-      <MenuOptions :showItem="CurrentOption" @CloseOptions="CloseOptions" />
+      <MenuOptions
+        :showItem="CurrentOption"
+        :restaurantId="restaurantId"
+        @CloseOptions="CloseOptions"
+      />
     </div>
   </div>
 </template>
 export default {
   name: "MenuLayout",
   components: {
-    MenuOptions
+    MenuOptions,
   },
   data() {
     return {
       wait: true,
       radio: "",
-      showOptions: false
+      showOptions: false,
+      restaurantId: this.$route.params.restautantid,
     };
   },
   methods: {
     ...mapActions("homeMenu", ["getMenu", "getOptions"]),
     ShowOptions(item) {
-      this.getOptions(item);
-      this.showOptions = true;
+      if (!item.outOfStock) {
+        this.getOptions(item);
+        this.showOptions = true;
+      }
     },
     CloseOptions(value) {
       this.showOptions = value;
-    }
+    },
   },
   computed: {
     ...mapState("homeMenu", ["menu", "options"]),
     CurrentOption() {
       return this.options;
-    }
+    },
+    DeliveryFee() {
+      return this.menu.deliveryFee;
+    },
   },
   mounted() {
     this.getMenu(this.$route.params.restautantid);
-  }
+  },
   // watch: {
   //   options: {
   //     immediate: true,

src/components/home/menuOptions.vue

 export default {
   name: "MenuOptions",
   props: {
-    showItem: { default: {} }
+    showItem: { default: {} },
+    restaurantId: { default: 0 },
   },
   components: {
-    optionSelector
+    optionSelector,
   },
   data() {
     return {
       item: {},
       qty: 1,
       subTotal: 0,
-      selection: []
+      selection: [],
     };
   },
   methods: {
       }
     },
     UpdateSelectionQty(value) {
-      this.selection.find(s => s.id == value.id).qty = value.qty;
+      this.selection.find((s) => s.id == value.id).qty = value.qty;
     },
     AddToCart() {
+      if (this.cartItems.length > 0) {
+        if (this.cartItems[0].restaurantId != this.restaurantId) {
+          alert("Cannot place orders to multiple restaurants");
+          return;
+        }
+      }
+
       const cartItem = {
         id: this.item.id,
         description: this.item.description,
         image: this.item.image,
         name: this.item.name,
-        subTotal: this.subTotal,
-        specialInstructions: this.specialInstructions,
+        subTotal: this.SubTotal,
+        specialInstructions: this.item.specialInstructions,
         qty: this.qty,
-        selection: this.selection
+        selection: this.selection,
+        options: this.item.options,
+        price: this.item.price,
+        displayPrice: this.item.displayPrice,
+        restaurantId: this.restaurantId,
       };
 
       this.cartItems.push(cartItem);
       this.selection = [];
       this.qty = 1;
       this.$emit("CloseOptions", false);
-    }
+    },
   },
   computed: {
-    ...mapState("cart", ["cartItems"]),
+    ...mapState("cart", ["cartItems", "deliveryFee"]),
     SubTotal() {
       var price = this.item.price * this.qty;
 
         }
       }
       return price;
-    }
+    },
   },
   watch: {
     showItem: {
           this.item = val;
           this.subTotal = this.item.price;
         }
-      }
-    }
-  }
+      },
+    },
+  },
 };
 </script>

src/components/orders/cart.vue

         @onEdit="Edit"
         @onDelete="Delete"
       />
+      <div class="row">
+        <div class="col-md-12" style="margin-bottomL 1em">
+          <!-- RestaurantFeeDel -->
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-2 offset-md-8" style="margin-bottomL 1em">
+          <label style="margin-top: 0.5em">
+            <b>Delivery Fee:</b>
+          </label>
+        </div>
+        <div class="col-md-2" style="margin-bottomL 1em">
+          <label style="margin-top: 0.5em">
+            <b>{{deliveryFee | toCurrency}}</b>
+          </label>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-2 offset-md-8" style="margin-bottomL 1em">
+          <label style="margin-top: 0.5em">
+            <b>Order Total:</b>
+          </label>
+        </div>
+        <div class="col-md-2" style="margin-bottomL 1em">
+          <label style="margin-top: 0.5em">
+            <b>{{OrderTotal | toCurrency}}</b>
+          </label>
+        </div>
+      </div>
+      <modal name="menu" :width="800" :height="600">
+        <Cart :showItem="CurrentItem" @Close="CloseItem" />
+      </modal>
+      <br />
+      <div class="row">
+        <div class="col-md-12" style="margin-bottomL 1em">
+          <div class="row offset-md-4">
+            <div class="col-md-3">
+              <button
+                @click="CheckOut()"
+                class="btn btn-b-n"
+                type="button"
+                data-dismiss="modal"
+                :disabled="cartItems.length == 0"
+              >Check Out</button>
+            </div>
+            <div class="col-md-3">
+              <button
+                @click="ClearCart()"
+                class="btn btn-b-n"
+                type="button"
+                data-dismiss="modal"
+                :disabled="cartItems.length == 0"
+              >Clear Cart</button>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
-    <modal name="menu" :width="600" :height="auto">
-      <Cart :showItem="CurrentItem" />
-    </modal>
   </div>
 </template>
 
     };
   },
   methods: {
+    ...mapActions("cart", ["getDeliveryFee"]),
     New() {},
     Edit(item) {
       this.item = item;
     Delete(item) {
       this.cartItems.pop(item);
     },
+    CloseItem(value) {
+      if (value) {
+        this.$modal.hide("menu");
+      }
+    },
+    CheckOut() {
+      this.$router.push("/ConfirmOrder");
+    },
+    ClearCart() {
+      this.deliveryFee = 0;
+      this.cartItems.splice(0, this.cartItems.length);
+    },
   },
   computed: {
-    ...mapState("cart", ["cartItems"]),
+    ...mapState("cart", ["cartItems", "deliveryFee"]),
     CurrentItem() {
       return this.item;
     },
+    OrderTotal() {
+      var tot = 0;
+      for (let i = 0; i < this.cartItems.length; i++) {
+        tot = tot + this.cartItems[i].subTotal;
+      }
+      return tot + this.deliveryFee;
+    },
+  },
+  mounted() {
+    if (this.cartItems.length > 0) {
+      this.getDeliveryFee(this.cartItems[0].restaurantId);
+    }
   },
 };
 </script>

src/components/orders/cartItem.vue

 <template>
   <div class="container">
-    <div class="row" style="text-align:left">
-      <!--Column 1 -->
-      <div class="col-md-6" style="margin-bottomL 1em">
-        <div class="row" style="text-align:left">
-          <div class="carousel-item-c">
-            <div class="card-box-b card-shadow news-box">
-              <div class="img-box-b">
-                <img v-if="item.image !== ''" :src="item.image" alt class="img-b img-fluid" />
-                <img
-                  v-else
-                  src="../../../public/img/DefaultImg.png"
-                  alt
-                  class="img-b img-fluid"
-                  style="object-fit: cover;"
-                />
-              </div>
-              <div class="card-overlay">
-                <div class="card-header-b">
-                  <div class="card-title-b">
-                    <h2 class="title-2" style="color: #ffffff;">{{ item.name }}</h2>
-                  </div>
-                  <div class="card-date">
-                    <span class="date-a">{{ item.description }}</span>
-                  </div>
-                  <br />
-                  <div class="card-category-b">
-                    <span class="category-b">
-                      <b>{{ item.displayPrice }}</b>
-                    </span>
+    <div class="container">
+      <div class="row" style="text-align:left">
+        <!--Column 1 -->
+        <div class="col-md-6" style="margin-bottomL 1em">
+          <div class="row" style="text-align:left">
+            <div class="carousel-item-c">
+              <div class="card-box-b card-shadow news-box">
+                <div class="img-box-b">
+                  <img v-if="item.image !== ''" :src="item.image" alt class="img-b img-fluid" />
+                  <img
+                    v-else
+                    src="../../../public/img/DefaultImg.png"
+                    alt
+                    class="img-b img-fluid"
+                    style="object-fit: cover;"
+                  />
+                </div>
+                <div class="card-overlay">
+                  <div class="card-header-b">
+                    <div class="card-title-b">
+                      <h2 class="title-2" style="color: #ffffff;">{{ item.name }}</h2>
+                    </div>
+                    <div class="card-date">
+                      <span class="date-a">{{ item.description }}</span>
+                    </div>
+                    <br />
+                    <div class="card-category-b">
+                      <span class="category-b">
+                        <b>{{ item.displayPrice }}</b>
+                      </span>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-        <div class="row">
-          <div class="col-md-12" style="margin-top: 1em">
-            <div class="row">
-              <div class="col-sm-3">
-                <button
-                  @click="Minus()"
-                  class="btn btn-b-n"
-                  type="button"
-                  style="border-radius:50px"
-                >
-                  <eva-icon name="minus-outline" fill="white"></eva-icon>
-                </button>
-              </div>
-              <div class="col-sm-1">
-                <label style="margin-top: 0.5em">{{qty}}</label>
-              </div>
-              <div class="col-sm-3">
-                <button
-                  @click="Plus()"
-                  class="btn btn-b-n"
-                  type="button"
-                  style="border-radius:50px"
-                >
-                  <eva-icon name="plus-outline" fill="white"></eva-icon>
-                </button>
-              </div>
-              <div class="col-sm-2">
-                <label style="margin-top: 0.5em">
-                  <b>{{subTotal | toCurrency}}</b>
-                </label>
+          <div class="row">
+            <div class="col-md-12" style="margin-top: 1em">
+              <div class="row">
+                <div class="col-sm-2">
+                  <button
+                    @click="Minus()"
+                    class="btn btn-b-n"
+                    type="button"
+                    style="border-radius:50px"
+                  >
+                    <eva-icon name="minus-outline" fill="white"></eva-icon>
+                  </button>
+                </div>
+                <div class="col-sm-1">
+                  <label style="margin-top: 0.5em">{{qty}}</label>
+                </div>
+                <div class="col-sm-2">
+                  <button
+                    @click="Plus()"
+                    class="btn btn-b-n"
+                    type="button"
+                    style="border-radius:50px"
+                  >
+                    <eva-icon name="plus-outline" fill="white"></eva-icon>
+                  </button>
+                </div>
+                <div class="col-sm-3">
+                  <label style="margin-top: 0.5em">
+                    <b>{{SubTotal | toCurrency}}</b>
+                  </label>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <!--Column 2 -->
-      <div class="col-md-6" style="margin-bottomL 1em">
-        <div class="row" style="text-align:left">
-          <div class="container" v-for="(item, i) in options" :key="i">
-            <div class="row">
-              <div class="col-sm-12">
-                <div class="title-box-d">
-                  <h3 class="title-d">{{ item.description }}</h3>
+        <!--Column 2 -->
+        <div class="col-md-6" style="margin-bottomL 1em">
+          <div class="row" style="text-align:left">
+            <div class="container" v-for="(item, i) in item.options" :key="i">
+              <div class="row">
+                <div class="col-sm-12">
+                  <div class="title-box-d">
+                    <h3 class="title-d">{{ item.description }}</h3>
+                  </div>
                 </div>
               </div>
+              <div class="row" v-if="item.subTitle">
+                <div class="col-sm-12">{{ item.subTitle }}</div>
+              </div>
+              <hr v-if="item.subTitle" />
+              <optionSelector
+                :item="item"
+                :savedSelection="selection"
+                @UpdateSelection="UpdateSelection"
+                @UpdateSelectionQty="UpdateSelectionQty"
+              />
             </div>
-            <div class="row" v-if="item.subTitle">
-              <div class="col-sm-12">{{ item.subTitle }}</div>
-            </div>
-            <hr v-if="item.subTitle" />
-            <optionSelector
-              :item="item"
-              @UpdateSelection="UpdateSelection"
-              @UpdateSelectionQty="UpdateSelectionQty"
-            />
           </div>
-        </div>
-        <hr />
-        <div class="row">
-          <div class="col-sm-12">
-            <label>Special Instructions</label>
-            <div class="input-group-prepend">
-              <textarea
-                class="form-control editor form-control-lg form-control-a"
-                v-model="item.specialInstructions"
-              />
+          <hr />
+          <div class="row">
+            <div class="col-sm-12">
+              <label>Special Instructions</label>
+              <div class="input-group-prepend">
+                <textarea
+                  class="form-control editor form-control-lg form-control-a"
+                  v-model="item.specialInstructions"
+                />
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="row">
-      <br />
-    </div>
-
-    <div class="row">
-      <div class="col-md-12" style="margin-top: 1em">
-        <button @click="AddToCart()" class="btn btn-b-n" type="button">Add To Cart</button>
+      <div class="row">
+        <br />
       </div>
-    </div>
-    <div class="row">
-      <div class="col-md-12" style="margin-top: 1em">
-        <button @click="Close()" class="btn btn-b-n" type="button">Back</button>
+      <div class="row">
+        <div class="col-md-2 offset-md-5" style="margin-top: 1em">
+          <button @click="Update()" class="btn btn-b-n" type="button">Update</button>
+        </div>
       </div>
     </div>
   </div>
     };
   },
   methods: {
-    ...mapActions("homeMenu", ["getOptions"]),
-    Close() {
-      this.item.specialInstructions = "";
-      this.selection = [];
-      this.qty = 1;
-      this.$emit("CloseOptions", false);
-    },
     Plus() {
       this.qty = this.qty + 1;
     },
         this.qty = 1;
       }
     },
-    CheckItem(value) {
-      alert(JSON.stringify(value));
-    },
     UpdateSelection(value) {
       if (value.value) {
         this.selection.push(value.field);
     UpdateSelectionQty(value) {
       this.selection.find((s) => s.id == value.id).qty = value.qty;
     },
-    AddToCart() {
-      const cartItem = {
-        id: this.item.id,
-        description: this.item.description,
-        image: this.item.image,
-        name: this.item.name,
-        subTotal: this.subTotal,
-        specialInstructions: this.specialInstructions,
-        qty: this.qty,
-        selection: this.selection,
-      };
+    Update() {
+      this.item.qty = this.qty;
+      this.item.subTotal = this.SubTotal;
+
+      const item = this.cartItems.find((c) => c.id === this.item.id);
+      Object.assign(item, this.item);
 
-      this.cartItems.push(cartItem);
-      this.item.specialInstructions = "";
-      this.selection = [];
-      this.qty = 1;
-      this.$emit("CloseOptions", false);
+      this.$emit("Close", true);
     },
   },
   computed: {
     ...mapState("cart", ["cartItems"]),
-    ...mapState("homeMenu", ["options"]),
     SubTotal() {
       var price = this.item.price * this.qty;
 
       handler(val, oldVal) {
         if (val) {
           this.item = val;
-          this.subTotal = this.item.price;
+          this.subTotal = this.item.price * this.item.qty;
           this.qty = this.item.qty;
           this.selection = this.item.selection;
-          this.getOptions(val);
         }
       },
     },

src/components/orders/confirmOrder.vue

+<template>
+  <div class="container">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-12 col-lg-8">
+          <div class="title-box-d">
+            <br />
+            <h1 class="title-d" style="text-align:left; font-size: 250%">Order Confirmation</h1>
+          </div>
+        </div>
+      </div>
+
+      <div class="column is-8 is-offset-2">
+        <horizontal-stepper
+          :steps="demoSteps"
+          @completed-step="completeStep"
+          @active-step="isStepActive"
+          @stepper-finished="alert"
+        ></horizontal-stepper>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import HorizontalStepper from "vue-stepper";
+
+// This components will have the content for each stepper step.
+import StepOne from "./orderConf/confAddress";
+import StepTwo from "./orderConf/makePayment";
+import StepThree from "./orderConf/orderPlaced";
+
+export default {
+  components: {
+    HorizontalStepper,
+  },
+  data() {
+    return {
+      demoSteps: [
+        {
+          icon: "my_location",
+          name: "first",
+          title: "Confrim Address",
+          subtitle: "for delivery",
+          component: StepOne,
+          completed: false,
+        },
+        {
+          icon: "payment",
+          name: "second",
+          title: "Make Payment",
+          subtitle: "",
+          component: StepTwo,
+          completed: false,
+        },
+        {
+          icon: "done",
+          name: "second",
+          title: "Completed",
+          subtitle: "",
+          component: StepThree,
+          completed: false,
+        },
+      ],
+    };
+  },
+  methods: {
+    // Executed when @completed-step event is triggered
+    completeStep(payload) {
+      this.demoSteps.forEach((step) => {
+        if (step.name === payload.name) {
+          step.completed = true;
+        }
+      });
+    },
+    // Executed when @active-step event is triggered
+    isStepActive(payload) {
+      this.demoSteps.forEach((step) => {
+        if (step.name === payload.name) {
+          if (step.completed === true) {
+            step.completed = false;
+          }
+        }
+      });
+    },
+    // Executed when @stepper-finished event is triggered
+    alert(payload) {
+      alert("end");
+    },
+  },
+};
+</script>

src/components/orders/orderConf/confAddress.vue

+<template>
+  <div class="container">
+    <div class="row" style="text-align:left">
+      <div class="col-md-4" style="margin-bottom: 1em">
+        <div class="custom-control custom-switch">
+          <label>Do you live in a complex or block of flats?</label>
+          <input
+            style="margin-left: 1px"
+            type="checkbox"
+            class="custom-control-input"
+            id="thCloseSwitch"
+            :checked="userAddress.isComplex"
+            @change="selectionChanged"
+          />
+          <label class="custom-control-label" for="thCloseSwitch" style="margin-left: 40px">
+            {{
+            isComplex ? "Yes" : "No"
+            }}
+          </label>
+        </div>
+      </div>
+    </div>
+    <div class="row" style="text-align:left">
+      <div class="col-md-4" style="margin-bottom: 1em">
+        <button
+          @click="ShowMap()"
+          class="btn btn-b-n"
+          type="button"
+          data-dismiss="modal"
+        >Update Address</button>
+      </div>
+      <div class="col-md-4" style="margin-bottom: 1em">
+        <button
+          @click="GetLocation()"
+          class="btn btn-b-n"
+          type="button"
+          data-dismiss="modal"
+        >Use My Location</button>
+      </div>
+    </div>
+    <div v-if="userAddress.isComplex" class="row" style="text-align:left">
+      <div class="col-md-6" style="margin-bottom: 1em">
+        <label>Complex Name</label>
+        <div class="input-group-prepend">
+          <span class="input-group-text">
+            <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+          </span>
+          <input
+            class="form-control"
+            type="text"
+            name="FirstName"
+            v-model="userAddress.complexName"
+          />
+        </div>
+      </div>
+      <div class="col-md-6" style="margin-bottom: 1em">
+        <label>Unit Number</label>
+        <div class="input-group-prepend">
+          <span class="input-group-text">
+            <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+          </span>
+          <input class="form-control" type="text" name="Surname" v-model="userAddress.unitNumber" />
+        </div>
+      </div>
+    </div>
+    <div class="row" style="text-align:left">
+      <div class="col-md-6" style="margin-bottomL 1em">
+        <div class="row" style="text-align:left">
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <label>Street Number</label>
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+              </span>
+              <input
+                class="form-control"
+                type="text"
+                name="FirstName"
+                v-model="userAddress.streetNumber"
+                disabled
+              />
+            </div>
+          </div>
+        </div>
+        <div class="row" style="text-align:left">
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <label>Street Name</label>
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+              </span>
+              <input
+                class="form-control"
+                type="text"
+                name="FirstName"
+                v-model="userAddress.streetName"
+                disabled
+              />
+            </div>
+          </div>
+        </div>
+        <div class="row" style="text-align:left">
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <label>Suburb</label>
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+              </span>
+              <input
+                class="form-control"
+                type="text"
+                name="FirstName"
+                v-model="userAddress.suburb"
+                disabled
+              />
+            </div>
+          </div>
+        </div>
+        <div class="row" style="text-align:left">
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <label>City</label>
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+              </span>
+              <input
+                class="form-control"
+                type="text"
+                name="FirstName"
+                v-model="userAddress.city"
+                disabled
+              />
+            </div>
+          </div>
+        </div>
+        <div class="row" style="text-align:left">
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <label>Province</label>
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+              </span>
+              <input
+                class="form-control"
+                type="text"
+                name="FirstName"
+                v-model="userAddress.province"
+                disabled
+              />
+            </div>
+          </div>
+        </div>
+        <div class="row" style="text-align:left">
+          <div class="col-md-12" style="margin-bottom: 1em">
+            <label>Postal Code</label>
+            <div class="input-group-prepend">
+              <span class="input-group-text">
+                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
+              </span>
+              <input
+                class="form-control"
+                type="text"
+                name="FirstName"
+                v-model="userAddress.postalCode"
+                disabled
+              />
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-4" style="margin-bottom: 1em">
+            <button @click="Continue" class="btn btn-b-n" type="button">Use Above Address</button>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-6" style="margin-bottomL 1em">
+        <Map :showAutoComplete="false" :showLocationLabel="false" :setLocation="mapCoords" />
+      </div>
+    </div>
+
+    <modal name="map" :width="600" :height="620">
+      <div class="container">
+        <h2>Update Location</h2>
+        <br />
+        <Map :showLocationLabel="false" @GoogleAddress="UpdateAddress" />
+        <div class="row" style="text-align:left">
+          <div class="col-md-4" style="margin-bottom: 1em">
+            <button @click="HideMap()" class="btn btn-b-n" type="button" data-dismiss="modal">Close</button>
+          </div>
+        </div>
+      </div>
+    </modal>
+  </div>
+</template>
+
+<script>
+import Map from "../../shared/mapSetLocation";
+import { mapState, mapActions } from "vuex";
+import Log from "../../../assets/Log";
+
+export default {
+  name: "confirmAddress",
+  components: {
+    Map,
+  },
+  data() {
+    return {
+      varbla: false,
+    };
+  },
+  methods: {
+    ...mapActions("user", ["getUserAddress"]),
+    selectionChanged() {
+      this.userAddress.isComplex = !this.userAddress.isComplex;
+    },
+    ShowMap() {
+      this.$modal.show("map");
+    },
+    HideMap() {
+      this.$modal.hide("map");
+    },
+    GetLocation() {
+      navigator.geolocation.getCurrentPosition((position) => {
+        // this.center = {
+        //   lat: position.coords.latitude,
+        //   lng: position.coords.longitude,
+        // };
+        alert(JSON.stringify(position));
+      });
+    },
+    Continue() {
+      this.order.deliveryAddress = this.userAddress;
+      this.order.items = this.cartItems;
+      this.$emit("can-continue", { value: true });
+    },
+    UpdateAddress(address) {
+      this.userAddress.streetNumber = address.streetNumber;
+      this.userAddress.streetName = address.streetName;
+      this.userAddress.suburb = address.suburb;
+      this.userAddress.city = address.city;
+      this.userAddress.province = address.province;
+      this.userAddress.country = address.country;
+      this.userAddress.postalCode = address.postalCode;
+      this.userAddress.googleMapUrl = address.url;
+      this.userAddress.latitude = address.coordinates.lat;
+      this.userAddress.longitude = address.coordinates.lng;
+      this.$emit("can-continue", { value: true });
+    },
+  },
+  computed: {
+    ...mapState("user", ["userAddress"]),
+    ...mapState("cart", ["cartItems"]),
+    ...mapState("order", ["order"]),
+    mapCoords() {
+      var coords = {
+        lat: this.userAddress.latitude,
+        lng: this.userAddress.longitude,
+      };
+      return coords;
+    },
+    CurrentPosition() {
+      this.$getLocation(options).then((coordinates) => {
+        alert(coordinates);
+      });
+    },
+  },
+  mounted() {
+    this.getUserAddress(Log.userId());
+    this.CurrentPosition();
+  },
+};
+</script>

src/components/orders/orderConf/makePayment.vue

+<template>
+  <div class="container">
+    <!-- Place holder for payment gateway -->
+    <div class="row" style="text-align:left">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <div class="input-group-prepend">
+          <label>Method Of Payment:</label>
+          <secion>
+            <ul>
+              <li v-for="(mop, i) in methodsOfPayment" :key="i">
+                <input
+                  type="radio"
+                  :id="mop"
+                  :value="mop"
+                  name="RadioOption"
+                  v-model="selectedMop"
+                  @change="UpdateSelection(mop)"
+                />
+                <label :for="mop">{{ mop }}</label>
+              </li>
+            </ul>
+          </secion>
+        </div>
+      </div>
+    </div>
+    <div v-if="showGateWay" class="row">
+      <div class="col-md-12" style="margin-bottom: 1em">
+        <iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"></iframe>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-4" style="margin-bottom: 1em">
+        <button @click="Continue" class="btn btn-b-n" type="button">Payment Made</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from "vuex";
+import Log from "../../../assets/Log";
+
+export default {
+  name: "makePayment",
+  data() {
+    return {
+      selectedMop: "",
+      showGateWay: false,
+    };
+  },
+  methods: {
+    ...mapActions("restaurant", ["getMethodsOfPayment"]),
+    UpdateSelection(value) {
+      if (value === "Account" || value === "Cash On Delivery") {
+        this.showGateWay = false;
+      } else {
+        this.showGateWay = true;
+      }
+      this.$emit("can-continue", { value: !this.showGateWay });
+    },
+    Continue() {
+      this.order.mop = this.selectedMop;
+      this.order.payment = {};
+
+      console.log(JSON.stringify(this.order));
+      this.$emit("can-continue", { value: true });
+    },
+  },
+  computed: {
+    ...mapState("restaurant", ["methodsOfPayment"]),
+    ...mapState("cart", ["cartItems"]),
+    ...mapState("order", ["order"]),
+  },
+  mounted() {
+    this.getMethodsOfPayment(this.cartItems[0].restaurantId); //check how the ID is passed...
+  },
+};
+</script>

src/components/orders/orderConf/orderPlaced.vue

+<template>
+  <div class="container">
+    <div class="col-md-6">
+      <div class="row">order list here</div>
+    </div>
+    <div class="col-md-6">
+      <div class="row">Delivery Address Here</div>
+    </div>
+  </div>
+</template>

src/components/orders/orderOptionSelection.vue

         <label>{{ choice.description }}</label>
       </div>
       <!-- Qty -->
-      <div class="col-sm-3" v-if="choice.price > 0">
+      <div class="col-sm-3" v-if="choice.price > 0 && choice.showQty">
         <input
           class="form-control"
           type="number"
 export default {
   name: "optionSelection",
   props: {
-    item: { type: Object, default: () => {} }
+    item: { type: Object, default: () => {} },
+    savedSelection: { type: Array, default: () => [] },
   },
   data() {
     return {
       selection: [],
-      qtys: []
+      qtys: [],
     };
   },
   methods: {
     UpdateSelection(field, index) {
+      if (this.item.optionType === "Single") {
+        // // this.qtys.splice(0, this.qtys.length);
+        // // this.selection.splice(0, this.selection.length);
+        // this.selection = [];
+        // this.qtys = [];
+      }
+
       this.qtys[index] = 1;
       const item = {
         field: field,
-        value: this.selection[index]
+        value: this.selection[index],
       };
 
       item.field.qty = this.qtys[index];
       if (!item.value) {
         this.qtys[index] = "Undefined";
       }
+
       this.$emit("UpdateSelection", item);
     },
     UpdateSelectionQty(field, index) {
       field.qty = Number(this.qtys[index]);
-
-      //alert(JSON.stringify(field));
       this.$emit("UpdateSelectionQty", field);
-    }
-  }
+    },
+  },
+  watch: {
+    savedSelection: {
+      immediate: true,
+      handler(val, oldVal) {
+        if (val) {
+          for (let i = 0; i < this.item.options.length; i++) {
+            for (let j = 0; j < val.length; j++) {
+              if (val[j].id == this.item.options[i].id) {
+                this.qtys[i] = 1;
+                this.selection[i] = this.item.options[i];
+              }
+            }
+          }
+        }
+      },
+    },
+  },
 };
 </script>

src/components/shared/mapSetLocation.vue

   name: "MapLocation",
   props: {
     showMap: {
-      default: true
+      default: true,
     },
     showLocationLabel: {
-      default: true
+      default: true,
     },
     showAutoComplete: {
-      default: true
+      default: true,
     },
     setLocation: {
-      default: {}
-    }
+      default: {},
+    },
   },
   data() {
     return {
       coordinates: {
         lat: 0,
-        lng: 0
+        lng: 0,
       },
       center: { lat: 0, lng: 0 },
       markers: [],
       province: "",
       country: "",
       postalCode: "",
-      url: ""
+      url: "",
     };
   },
   created() {
     this.$getLocation({})
-      .then(coord => {
+      .then((coord) => {
         this.coordinates = coord;
         //this.markers.push({ position: coord })
       })
-      .catch(error => alert(error));
+      .catch((error) => alert(error));
   },
 
   mounted() {
       if (this.currentPlace) {
         const marker = {
           lat: this.currentPlace.geometry.location.lat(),
-          lng: this.currentPlace.geometry.location.lng()
+          lng: this.currentPlace.geometry.location.lng(),
         };
         this.markers = [];
         this.places = [];
           country: this.country,
           postalCode: this.postalCode,
           url: this.url,
-          coordinates: marker
+          coordinates: marker,
         });
       }
     },
-    geolocate: function() {
-      navigator.geolocation.getCurrentPosition(position => {
+    geolocate: function () {
+      navigator.geolocation.getCurrentPosition((position) => {
         this.center = {
           lat: position.coords.latitude,
-          lng: position.coords.longitude
+          lng: position.coords.longitude,
         };
       });
-    }
+    },
   },
   watch: {
     setLocation: {
       immediate: true,
       handler(val, oldVal) {
-        if (val) {
+        if (val && val.lat) {
           this.coordinates = val;
           this.markers = [];
           this.markers.push({ position: val });
         }
-      }
-    }
-  }
+      },
+    },
+  },
 };
 </script>

src/components/shared/navBar.vue

     isLoggedIn() {
       // console.log(Log.isLoggedIn());
       // return Log.isLoggedIn();
-      return true;
+      return false;
     },
     NAME() {
       //return Log.getPerson().name;
       return "UserName";
     },
     SystemRole() {
-      //return "Customer";
+      return "Customer";
       //return "SuperAdmin";
-      return "RestaurantAdmin";
+
+      //return "RestaurantAdmin";
     },
     // eslint-disable-next-line vue/return-in-computed-property
     Logout() {
     },
     CartCount() {
       return this.cartItems.length;
-    }
+    },
   },
   methods: {
     //...mapActions("authentication", ["logout"]),
     },
     GoToCart() {
       this.$router.push("/Cart");
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped>

src/router/index.js

 import RestaurantMenu from "../components/restaurants/restaurantMenu.vue";
 import RestaurantMenuOptions from "../components/restaurants/restaurantMenuOptions.vue";
 import RestaurantMenuOption from "../components/restaurants/restaurantMenuOption.vue";
-import RestaurantMenuItem from "../components/restaurants/restaurantMenuItem.vue"
+import RestaurantMenuItem from "../components/restaurants/restaurantMenuItem.vue";
 import RestaurantMenuItemOptions from "../components/restaurants/restaurantMenuItemOptions.vue";
 import MenuItems from "../components/home/menuItems.vue";
 import Cart from "../components/orders/cart.vue";
 import RestaurantUsers from "../components/restaurants/restaurantUsers.vue";
 import RestaurantRoles from "../components/restaurants/restaurantRoles.vue";
 import RestaurantRole from "../components/restaurants/restaurantRole.vue";
+import OrderConfirmation from "../components/orders/confirmOrder.vue";
 
 Vue.use(Router);
 
       y: 0
     };
   },
-  routes: [{
+  routes: [
+    {
       path: "/",
       name: "Home",
       component: Home
       path: "/RestaurantRole/:id",
       name: "RestaurantRole",
       component: RestaurantRole
+    },
+    {
+      path: "/ConfirmOrder",
+      name: "OrderConfirmation",
+      component: OrderConfirmation
     }
   ]
 });

src/store/index.js

-import Vue from 'vue';
-import Vuex from 'vuex';
+import Vue from "vue";
+import Vuex from "vuex";
 
-import Registration from './modules/accounts/registration';
-import Authentication from './modules/accounts/authentication';
-import RestaurantSearch from './modules/restaurants/restaurantSearch';
-import RestaurantCategories from './modules/restaurants/restaurantCategories';
-import Restaurant from './modules/restaurants/restaurant';
-import MOPs from './modules/shared/restaurantMOP'
-import User from './modules/users/user';
-import MenuCategories from './modules/restaurants/restaurantMenuCategories';
-import MenuOptions from './modules/restaurants/restaurantMenuOptions';
-import Menu from './modules/restaurants/restaurantMenu';
-import HomeMenu from './modules/restaurants/menu';
-import Cart from './modules/orders/cart';
-import RestaurantUser from './modules/restaurants/restaurantUsers';
-import RestaurantRoles from './modules/restaurants/restaurantRoles';
+import Registration from "./modules/accounts/registration";
+import Authentication from "./modules/accounts/authentication";
+import RestaurantSearch from "./modules/restaurants/restaurantSearch";
+import RestaurantCategories from "./modules/restaurants/restaurantCategories";
+import Restaurant from "./modules/restaurants/restaurant";
+import MOPs from "./modules/shared/restaurantMOP";
+import User from "./modules/users/user";
+import MenuCategories from "./modules/restaurants/restaurantMenuCategories";
+import MenuOptions from "./modules/restaurants/restaurantMenuOptions";
+import Menu from "./modules/restaurants/restaurantMenu";
+import HomeMenu from "./modules/restaurants/menu";
+import Cart from "./modules/orders/cart";
+import RestaurantUser from "./modules/restaurants/restaurantUsers";
+import RestaurantRoles from "./modules/restaurants/restaurantRoles";
+import Order from "./modules/orders/order";
 
 Vue.use(Vuex);
 /* eslint no-param-reassign: ["error", { "props": false }] */
     homeMenu: HomeMenu,
     cart: Cart,
     restaurantUser: RestaurantUser,
-    restaurantRoles: RestaurantRoles
-  },
+    restaurantRoles: RestaurantRoles,
+    order: Order
+  }
 });

src/store/modules/orders/cart.js

-import axios from 'axios'
+import axios from "axios";
 
 export default {
   namespaced: true,
   state: {
-    cartItems: []
+    cartItems: [],
+    deliveryFee: 0
+  },
+  mutations: {
+    setDeliveryFee(state, fee) {
+      state.deliveryFee = fee;
+    }
   },
-  mutations: {},
   getters: {},
-  actions: {}
-}
+  actions: {
+    getDeliveryFee({ commit }, restaurantId) {
+      axios
+        .get(`/api/restaurant/GetDeliveryFee/${restaurantId}`)
+        .then(restult => commit("setDeliveryFee", restult.data));
+    }
+  }
+};

src/store/modules/orders/order.js

+import axios from "axios";
+
+export default {
+  namespaced: true,
+  state: {
+    order: {},
+    orders: [],
+    orderItems: []
+  },
+  mutations: {
+    setOrder(state, order) {
+      state.order = order;
+    },
+    setOrders(state, orders) {
+      state.orders = orders;
+    },
+    setOrderItems(state, items) {
+      state.orderItems = items;
+    }
+  },
+  getters: {},
+  actions: {
+    getOrder({ commit }, id) {
+      axios.get(`/api/order/${id}`).then(result => commit("setOrder", result.data));
+    },
+    getUserOrders({ commit }, userId) {
+      axios
+        .get(`/api/order/GetUserOrders/${userId}`)
+        .then(result => commit("setOrders", result.data));
+    },
+    getRestaurantOrders({ commit }, restaurantId) {
+      axios
+        .get(`/api/order/GetRestaurantOrders/${restaurantId}`)
+        .then(result => commit("setOrders", result.data));
+    },
+    getOrderItems({ commit }, orderId) {
+      axios
+        .get(`/api/order/GetOrderItems/${orderId}`)
+        .then(result => commit("setOrderItems", result.data));
+    },
+    saveOrder({ commit }, order) {
+      axios.post("/api/order", order).then(result => commit("setOrders", result.data));
+    }
+  }
+};

src/store/modules/restaurants/restaurant.js

-import axios from 'axios'
-import {
-  result
-} from 'lodash';
+import axios from "axios";
+import { result } from "lodash";
 
 export default {
   namespaced: true,
     restaurants: [],
     restaurant: {},
     tradingHour: {},
-    tradingHours: []
+    tradingHours: [],
+    methodsOfPayment: []
   },
   mutations: {
     setRestaurants(state, restaurants) {
     },
     setTradingHours(state, thours) {
       state.tradingHours = thours;
+    },
+    setMethodsOfPayment(state, mops) {
+      state.methodsOfPayment = mops;
     }
   },
   getters: {},
   actions: {
-    getRestaurants({
-      commit
-    }) {
+    getRestaurants({ commit }) {
       axios
-        .get('/api/restaurant/getrestaurants')
+        .get("/api/restaurant/getrestaurants")
         .then(result => commit("setRestaurants", result.data));
     },
-    getRestaurant({
-      commit
-    }, id) {
-      axios
-        .get(`/api/restaurant/${id}`)
-        .then(result => commit("setRestaurant", result.data));
+    getRestaurant({ commit }, id) {
+      axios.get(`/api/restaurant/${id}`).then(result => commit("setRestaurant", result.data));
     },
-    getTradingHours({
-      commit
-    }, id) {
+    getTradingHours({ commit }, id) {
       axios
         .get(`/api/restaurant/GetTradingHours/${id}`)
         .then(result => commit("setTradingHours", result.data));
     },
-    updateRestaurant({
-      commit
-    }, restaurant) {
+    getMethodsOfPayment({ commit }, id) {
       axios
-        .put('/api/Restaurant', restaurant)
-        .then(result => commit("setRestaurant", restaurant))
+        .get(`/api/restaurant/GetMethodsOfPayment/${id}`)
+        .then(result => commit("setMethodsOfPayment", result.data));
     },
-    removeTradingHours({
-      commit
-    }, id) {
-      axios
-        .delete(`/api/Restaurant/RemoveTradingHours/${id}`)
+    updateRestaurant({ commit }, restaurant) {
+      axios.put("/api/Restaurant", restaurant).then(result => commit("setRestaurant", restaurant));
+    },
+    removeTradingHours({ commit }, id) {
+      axios.delete(`/api/Restaurant/RemoveTradingHours/${id}`);
     }
   }
-}
+};