From 399f81e35a644aeb594d4983d693c500baf8f1d0 Mon Sep 17 00:00:00 2001
From: 25Ericcheong <ericcheongkaikit@gmail.com>
Date: Sat, 18 May 2024 17:45:04 +0800
Subject: [PATCH 1/3] feat: Finished menu feature

---
 src/components/menu/bingsu-menu-modal.vue  |  13 ++-
 src/components/menu/drinks-menu-modal.vue  |   5 +-
 src/components/menu/menu.vue               |   2 +-
 src/components/menu/summary-menu-modal.vue | 108 ++++++++++++++++++---
 src/stores/useMenuStore.ts                 |  34 +++++--
 5 files changed, 135 insertions(+), 27 deletions(-)

diff --git a/src/components/menu/bingsu-menu-modal.vue b/src/components/menu/bingsu-menu-modal.vue
index ff5675a..6d781a1 100644
--- a/src/components/menu/bingsu-menu-modal.vue
+++ b/src/components/menu/bingsu-menu-modal.vue
@@ -4,7 +4,7 @@ import {
   useMenuStore,
   type CartItemBingsu,
 } from "@/stores/useMenuStore";
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 import { MenuItemType } from "./menu-item-type";
 import { MENU, OAT_MILK } from "./menu-items";
 
@@ -116,10 +116,19 @@ const shouldDisableConfirmationButton = computed(() => {
 });
 
 function handleBingsuConfirmation() {
+  store.addBingsuOrder(cartItemBingsu.value);
   resetCartItem();
   closeBinqsuMenuModal();
-  store.addBingsuOrder(cartItemBingsu.value);
 }
+
+watch(
+  () => cartItemBingsu.value,
+  (cartItemBingsu) => {
+    // use toRaw here to get a readable console.log result
+    console.log(cartItemBingsu);
+  },
+  { deep: true }
+);
 </script>
 <template class="body-font text-xl xl:text-2xl">
   <section class="w-full h-[50px] flex justify-end">
diff --git a/src/components/menu/drinks-menu-modal.vue b/src/components/menu/drinks-menu-modal.vue
index f6afca8..e31ecc1 100644
--- 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/menu.vue b/src/components/menu/menu.vue
index 3da8766..f921107 100644
--- a/src/components/menu/menu.vue
+++ b/src/components/menu/menu.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useMenuStore } from "@/stores/useMenuStore";
+import { getImageUrlForMenu } from "@/util/image";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
-import { getImageUrlForMenu } from "../../util/image";
 import BingsuMenuModal from "./bingsu-menu-modal.vue";
 import DrinksMenuModal from "./drinks-menu-modal.vue";
 import { MenuItemType } from "./menu-item-type";
diff --git a/src/components/menu/summary-menu-modal.vue b/src/components/menu/summary-menu-modal.vue
index 7670e73..6ea0e18 100644
--- 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
index 64d9249..81e2123 100644
--- 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) {
@@ -105,6 +116,7 @@ export const useMenuStore = defineStore("menu", () => {
     }
 
     cart.value.push(bingsuOrder);
+    console.log(cart.value);
   }
 
   function addDrinksOrder(drinksOrder: CartItemDrinks) {
@@ -120,7 +132,9 @@ export const useMenuStore = defineStore("menu", () => {
     getItemOrderByName,
     getNumberOfItemOrderByName,
     getOrderPriceTotal,
-    getAllOrders,
+    getBingsuOrders,
+    getDrinksOrders,
+    getToppingOrders,
     addToppingOrder,
     addBingsuOrder,
     addDrinksOrder,

From dfd60f073ed200bc69ef5ef809cf4e30d9762010 Mon Sep 17 00:00:00 2001
From: 25Ericcheong <ericcheongkaikit@gmail.com>
Date: Sat, 18 May 2024 17:45:39 +0800
Subject: [PATCH 2/3] chore: Removed debugging code

---
 src/components/menu/bingsu-menu-modal.vue | 11 +----------
 src/stores/useMenuStore.ts                |  1 -
 2 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/components/menu/bingsu-menu-modal.vue b/src/components/menu/bingsu-menu-modal.vue
index 6d781a1..4ba04cf 100644
--- a/src/components/menu/bingsu-menu-modal.vue
+++ b/src/components/menu/bingsu-menu-modal.vue
@@ -4,7 +4,7 @@ import {
   useMenuStore,
   type CartItemBingsu,
 } from "@/stores/useMenuStore";
-import { computed, ref, watch } from "vue";
+import { computed, ref } from "vue";
 import { MenuItemType } from "./menu-item-type";
 import { MENU, OAT_MILK } from "./menu-items";
 
@@ -120,15 +120,6 @@ function handleBingsuConfirmation() {
   resetCartItem();
   closeBinqsuMenuModal();
 }
-
-watch(
-  () => cartItemBingsu.value,
-  (cartItemBingsu) => {
-    // use toRaw here to get a readable console.log result
-    console.log(cartItemBingsu);
-  },
-  { deep: true }
-);
 </script>
 <template class="body-font text-xl xl:text-2xl">
   <section class="w-full h-[50px] flex justify-end">
diff --git a/src/stores/useMenuStore.ts b/src/stores/useMenuStore.ts
index 81e2123..c0b23c1 100644
--- a/src/stores/useMenuStore.ts
+++ b/src/stores/useMenuStore.ts
@@ -116,7 +116,6 @@ export const useMenuStore = defineStore("menu", () => {
     }
 
     cart.value.push(bingsuOrder);
-    console.log(cart.value);
   }
 
   function addDrinksOrder(drinksOrder: CartItemDrinks) {

From bfd31f4a6cae7d0b4fa3827af07b11d9c092b292 Mon Sep 17 00:00:00 2001
From: Eric <55186326+25Ericcheong@users.noreply.github.com>
Date: Sat, 18 May 2024 17:51:41 +0800
Subject: [PATCH 3/3] Update deploy-to-prod.yml

Workflow should run for all (but deployment will still be skipped if not master)
---
 .github/workflows/deploy-to-prod.yml | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/.github/workflows/deploy-to-prod.yml b/.github/workflows/deploy-to-prod.yml
index 3420da2..092df49 100644
--- 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