Merge branch 'master' of https://github.com/25Ericcheong/binq

25Ericcheong · May 18, 2024 · 4366294 · 4366294
2 parents afb2948 + a275cec
commit 4366294
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 28 deletions.
diff --git a/.github/workflows/deploy-to-prod.yml b/.github/workflows/deploy-to-prod.yml
@@ -7,13 +7,11 @@ concurrency:
 run-name: Building and Deploying
 on:
   push:
-    branches:
-      - "master"
-
   pull_request:
     branches:
       - "dev"
       - "feature-**/"
+      - "master"
 
 env:
   NODE_VERSION: 20.10.0

diff --git a/src/components/menu/bingsu-menu-modal.vue b/src/components/menu/bingsu-menu-modal.vue
@@ -116,9 +116,9 @@ const shouldDisableConfirmationButton = computed(() => {
 });
 
 function handleBingsuConfirmation() {
+  store.addBingsuOrder(cartItemBingsu.value);
   resetCartItem();
   closeBinqsuMenuModal();
-  store.addBingsuOrder(cartItemBingsu.value);
 }
 </script>
 <template class="body-font text-xl xl:text-2xl">

diff --git a/src/components/menu/drinks-menu-modal.vue b/src/components/menu/drinks-menu-modal.vue
@@ -99,9 +99,9 @@ const shouldDisableConfirmationButton = computed(() => {
 });
 
 function handleDrinksConfirmation() {
+  store.addDrinksOrder(cartItemDrink.value);
   resetCartItem();
   closeDrinksMenuModal();
-  store.addDrinksOrder(cartItemDrink.value);
 }
 </script>
 <template>
@@ -232,6 +232,9 @@ function handleDrinksConfirmation() {
         <div class="fixed bottom-10 bg-creamyellowbq block">
           <button
             class="w-[365px] p-2 bg-darkorangebq rounded-full text-creamwhitebq"
+            :class="{
+              'opacity-50': shouldDisableConfirmationButton,
+            }"
             @click="handleDrinksConfirmation"
             :disabled="shouldDisableConfirmationButton"
           >

diff --git a/src/components/menu/summary-menu-modal.vue b/src/components/menu/summary-menu-modal.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useMenuStore } from "@/stores/useMenuStore";
 import { ref } from "vue";
-import { MenuItemType } from "./menu-item-type";
 
 const store = useMenuStore();
 const dialog = ref<HTMLDialogElement>();
@@ -13,11 +12,6 @@ function openSummaryuMenuModal() {
 function closeSummmaryMenuModal() {
   dialog.value?.close();
 }
-
-const orders = store.getAllOrders;
-const bingsus = orders.map((item) => item.type === MenuItemType.Bingsu);
-const drinks = orders.map((item) => item.type === MenuItemType.Drinks);
-const toppings = orders.map((item) => item.type === MenuItemType.Topping);
 </script>
 <template>
   <section>
@@ -39,16 +33,104 @@ const toppings = orders.map((item) => item.type === MenuItemType.Topping);
           <img class="h-full w-full" src="../../assets/icons/cross.jpg" />
         </button>
       </div>
-      <div class="bg-darkorangebq text-creamwhitebq p-10">
-        <h2 class="self-center text-5xl xl:text-6xl header-font font-bold pb-3">
-          Summary
-        </h2>
+      <div class="bg-darkorangebq text-creamwhitebq py-10 px-5">
+        <h1 class="text-3xl xl:text-6xl header-font font-bold pb-3">Summary</h1>
         <p>
-          Repeat your order at the cashier. This speeds up our ability to queue
-          orders. Thank you
+          Please confirm your order at the cashier by paying. This speeds up our
+          ability to queue orders. Thank you
         </p>
       </div>
-      <section></section>
+      <section
+        v-if="store.getBingsuOrders.length > 0"
+        class="p-5 text-darkorangebq"
+      >
+        <h1 class="text-3xl xl:text-5xl header-font font-bold pb-3">
+          Bingsu ({{ store.getBingsuOrders.length }})
+        </h1>
+        <div v-for="bingsu in store.getBingsuOrders" class="pb-5">
+          <h2 class="text-xl xl:text-3xl font-bold pb-2">
+            {{ bingsu.name }} (RM{{ bingsu.price }})
+          </h2>
+          <div class="pb-3">
+            <p>&ensp;- Toppings</p>
+            <p v-for="topping in bingsu.toppings">&ensp; {{ topping }}</p>
+          </div>
+          <div v-if="bingsu.hasCreamCheese !== undefined" class="pb-3">
+            <p>&ensp;- Cream Cheese</p>
+            <p v-if="bingsu.hasCreamCheese">&ensp; Include</p>
+            <p v-else>&ensp; Exclude</p>
+          </div>
+          <div v-if="bingsu.hasKonjacJelly !== undefined" class="pb-3">
+            <p>&ensp;- Konjac Jelly</p>
+            <p v-if="bingsu.hasKonjacJelly">&ensp; Include</p>
+            <p v-else>&ensp; Exclude</p>
+          </div>
+          <div v-if="bingsu.mangoToppings !== undefined" class="pb-3">
+            <p>&ensp;- Mango Toppings</p>
+            <p>&ensp; {{ bingsu.mangoToppings }}</p>
+          </div>
+          <div v-if="bingsu.isNormalOrOatMilk !== undefined" class="pb-3">
+            <p>&ensp;- Milk Type</p>
+            <p>&ensp; {{ bingsu.isNormalOrOatMilk }}</p>
+          </div>
+          <div v-if="bingsu.instructions !== undefined">
+            <p>&ensp;- Instructions</p>
+            <p>&ensp; {{ bingsu.instructions }}</p>
+          </div>
+        </div>
+      </section>
+      <section
+        v-if="store.getDrinksOrders.length > 0"
+        class="p-5 text-darkorangebq"
+      >
+        <h1 class="text-3xl xl:text-5xl header-font font-bold pb-3">
+          Drinks ({{ store.getDrinksOrders.length }})
+        </h1>
+        <div v-for="drink in store.getDrinksOrders" class="pb-5">
+          <h2 class="text-xl xl:text-3xl font-bold pb-2">
+            {{ drink.name }} (RM{{ drink.price }})
+          </h2>
+          <div class="pb-3">
+            <p>&ensp;- Sugar Level</p>
+            <p>&ensp; {{ drink.sugarLevel }}%</p>
+          </div>
+          <div v-if="drink.iceLevel !== undefined" class="pb-3">
+            <p>&ensp;- Ice Level</p>
+            <p>&ensp; {{ drink.iceLevel }}%</p>
+          </div>
+          <div v-if="drink.hasCreamCheese !== undefined" class="pb-3">
+            <p>&ensp;- Cream Cheese</p>
+            <p v-if="drink.hasCreamCheese">&ensp; Include</p>
+            <p v-else>&ensp; Exclude</p>
+          </div>
+          <div v-if="drink.topping !== undefined" class="pb-3">
+            <p>&ensp;- Topping Chosen</p>
+            <p>&ensp; {{ drink.topping }}</p>
+          </div>
+          <div v-if="drink.instructions !== undefined">
+            <p>&ensp;- Instructions</p>
+            <p>&ensp; {{ drink.instructions }}</p>
+          </div>
+        </div>
+      </section>
+      <section
+        v-if="store.getToppingOrders.length > 0"
+        class="p-5 text-darkorangebq"
+      >
+        <h1 class="text-3xl xl:text-5xl header-font font-bold pb-3">
+          Additional Toppings ({{
+            store.getToppingOrders.reduce(
+              (sum, prev) => sum + prev.quantity,
+              0
+            )
+          }})
+        </h1>
+        <div v-for="topping in store.getToppingOrders" class="pb-5">
+          <p class="pb-2">
+            {{ topping.name }} (RM{{ topping.price }}) X {{ topping.quantity }}
+          </p>
+        </div>
+      </section>
     </dialog>
   </section>
 </template>

diff --git a/src/stores/useMenuStore.ts b/src/stores/useMenuStore.ts
@@ -60,13 +60,10 @@ export const useMenuStore = defineStore("menu", () => {
   const getOrderPriceTotal = computed(() => {
     let total = 0;
     cart.value.forEach((item) => {
-      if (item.type === MenuItemType.Bingsu || MenuItemType.Drinks) {
-        const drinks = item as CartItemBingsu;
-        if (drinks.isNormalOrOatMilk === OAT_MILK) {
-          total += OAT_MILK_PRICE;
-        }
-        total += drinks.price;
-      } else {
+      if (
+        item.type === MenuItemType.Bingsu ||
+        item.type === MenuItemType.Drinks
+      ) {
         total += item.price;
       }
 
@@ -80,8 +77,22 @@ export const useMenuStore = defineStore("menu", () => {
     return total;
   });
 
-  const getAllOrders = computed(() => {
-    return cart.value;
+  const getBingsuOrders = computed(() => {
+    return cart.value.filter(
+      (i) => i.type === MenuItemType.Bingsu
+    ) as CartItemBingsu[];
+  });
+
+  const getDrinksOrders = computed(() => {
+    return cart.value.filter(
+      (i) => i.type === MenuItemType.Drinks
+    ) as CartItemDrinks[];
+  });
+
+  const getToppingOrders = computed(() => {
+    return cart.value.filter(
+      (i) => i.type === MenuItemType.Topping
+    ) as CartItemBase[];
   });
 
   function addToppingOrder(quantity: number, toppingName: string) {
@@ -120,7 +131,9 @@ export const useMenuStore = defineStore("menu", () => {
     getItemOrderByName,
     getNumberOfItemOrderByName,
     getOrderPriceTotal,
-    getAllOrders,
+    getBingsuOrders,
+    getDrinksOrders,
+    getToppingOrders,
     addToppingOrder,
     addBingsuOrder,
     addDrinksOrder,