From 0d243daf4294d57a266eb9b8c760d33b24c46fbf Mon Sep 17 00:00:00 2001
From: xiaomai <xiaomai@ramatex.com.my>
Date: Thu, 16 Oct 2025 21:52:33 +0800
Subject: [PATCH] feat(eventOrder): add WhatsApp quote request functionality

Replaces the 'copy to clipboard' action with a direct 'Request a Quote' via WhatsApp. This streamlines the process for
users to submit their event order details.

- The 'Request a Quote' button now opens a pre-filled WhatsApp message to a designated contact number.
- A new `buildMessage` computed property is created in the `eventOrder` composable to generate a detailed quote request
message.
- Adds support for tracking referrers via a `?referer` URL query parameter, which is included in the final message.
---
 app/components/eventOrder/OrderSummary.vue | 12 ++----
 app/composables/eventOrder.ts              | 47 ++++++++++++++++++++++
 2 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/app/components/eventOrder/OrderSummary.vue b/app/components/eventOrder/OrderSummary.vue
index 1978d24..8d7c639 100644
--- a/app/components/eventOrder/OrderSummary.vue
+++ b/app/components/eventOrder/OrderSummary.vue
@@ -58,19 +58,15 @@
 </template>
 
 <script lang="ts" setup>
-const { priceBreakdown, estimatedTotal, money } = useEventOrder();
+const { priceBreakdown, estimatedTotal, buildMessage, money } = useEventOrder();
 
 const items = computed(() => priceBreakdown.value);
 const total = computed(() => estimatedTotal.value);
 
 function onRequestQuote() {
-  // Placeholder interaction (no backend). Could open mailto or copy summary.
-  const lines = items.value.map(
-    (i) =>
-      `${i.label}：${money.format(i.amount)}${i.note ? `（${i.note}）` : ""}`
-  );
-  const text = `预算合计：${money.format(total.value)}\n\n` + lines.join("\n");
-  if (navigator?.clipboard) navigator.clipboard.writeText(text).catch(() => {});
+  const text = encodeURIComponent(buildMessage.value);
+  const url = `http://api.whatsapp.com/send?phone=+601157753558&text=${text}`;
+  window.open(url, "_blank");
 }
 </script>
 
diff --git a/app/composables/eventOrder.ts b/app/composables/eventOrder.ts
index 09a75c9..24b8cf0 100644
--- a/app/composables/eventOrder.ts
+++ b/app/composables/eventOrder.ts
@@ -4,6 +4,26 @@ import * as z from "zod";
 export const _useEventOrder = () => {
   const sectionIndex = ref(0);
 
+  // Referer
+  const REFERRER_MAP = {
+    anadesign: "A&A Design 广告先生",
+    dreamstudio: "Dream Studio",
+    infinity: "Infinity Visuals",
+    // 你可以自由扩充
+  } as const;
+
+  const route = useRoute();
+
+  const refererKey = computed(() => {
+    const raw = route.query.referer;
+    return Array.isArray(raw) ? raw[0] : raw || "";
+  });
+
+  const refererNote = computed(() => {
+    const key = refererKey.value as keyof typeof REFERRER_MAP;
+    return key in REFERRER_MAP ? `推薦單位：${REFERRER_MAP[key]}` : "";
+  });
+  
   function formatLocalDate(date: Date): string {
     const y = date.getFullYear();
     const m = String(date.getMonth() + 1).padStart(2, "0");
@@ -253,6 +273,32 @@ export const _useEventOrder = () => {
     maximumFractionDigits: 0,
   });
 
+  // 🚀 生成最终字符串
+  const buildMessage = computed(() => {
+    const lines = priceBreakdown.value
+      .map(
+        (i) =>
+          `- ${i.label}: ${money.format(i.amount)}${
+            i.note ? `（${i.note}）` : ""
+          }`
+      )
+      .join("\n");
+
+    return [
+      `[下单] 宴会大屏报价请求`,
+      `姓名：${orderState.contactName}`,
+      `电话：${orderState.contactNumber || "未填写"}`,
+      `活动：${orderState.eventName}`,
+      `日期：${orderState.eventDate}`,
+      `地点：${orderState.eventLocation}`,
+      ``,
+      `服务明细：\n${lines || "无"}`,
+      ``,
+      `总计：${money.format(estimatedTotal.value)}`,
+      `推荐单位：${refererNote.value || "无"}`,
+    ].join("\n");
+  });
+
   return {
     sectionIndex,
     eventLocationItems,
@@ -260,6 +306,7 @@ export const _useEventOrder = () => {
     orderState,
     priceBreakdown,
     estimatedTotal,
+    buildMessage,
     money,
   };
 };