Dev

src/components/rpkm/components/group-picker.astro

@@ -364,6 +364,10 @@ const member2 = members.length > 1 ? members[1] : null;
   import { AvatarMap } from "@rpkm/data/profile";
   import { getProfile } from "@/lib/profileAPI";
   import type { Group, User } from "@/types/common";
+  import { disablePickingDate } from "@rpkm/data/date";
+
+  const currentDate = new Date();
+  const isPickingDisabled = currentDate >= disablePickingDate;
 
   document.addEventListener("DOMContentLoaded", async () => {
     const userResponse = await getProfile();
@@ -380,8 +384,6 @@ const member2 = members.length > 1 ? members[1] : null;
     const groupData = groupResponse.data.data as Group;
 
     const isConfirmed = groupData ? groupData.isConfirmed : undefined;
-    const isOwner =
-      groupData && user ? groupData.ownerId === user.id : undefined;
     const memberCount = groupData ? groupData.memberCount : -1;
 
     const input = document.getElementById("room-id-insert") as HTMLInputElement;
@@ -490,6 +492,60 @@ const member2 = members.length > 1 ? members[1] : null;
       }
     }
 
+    if (isPickingDisabled) {
+      input.disabled = true;
+      input.placeholder = "ไม่สามารถกรอกเลขห้องได้";
+      headGroupBtn.disabled = true;
+      headGroupBtn.classList.add(
+        "cursor-not-allowed",
+        "opacity-50",
+        "brightness-75"
+      );
+      headGroupBtn.classList.remove("cursor-pointer");
+      backBtn?.classList.add("hidden");
+      exitButton?.classList.add("hidden");
+      submitGroupButton.disabled = true;
+      submitGroupButton.classList.add(
+        "cursor-not-allowed",
+        "opacity-50",
+        "brightness-75"
+      );
+      submitGroupButton.classList.remove("cursor-pointer");
+      joinGroupButton.disabled = true;
+      joinGroupButton.classList.add(
+        "cursor-not-allowed",
+        "opacity-50",
+        "brightness-75"
+      );
+      joinGroupButton.classList.remove("cursor-pointer");
+    } else {
+      input.disabled = false;
+      input.placeholder = "โปรดกรอกรหัสห้อง";
+      headGroupBtn.disabled = false;
+      headGroupBtn.classList.remove(
+        "cursor-not-allowed",
+        "opacity-50",
+        "brightness-75"
+      );
+      headGroupBtn.classList.add("cursor-pointer");
+      backBtn?.classList.remove("hidden");
+      exitButton?.classList.remove("hidden");
+      submitGroupButton.disabled = false;
+      submitGroupButton.classList.remove(
+        "cursor-not-allowed",
+        "opacity-50",
+        "brightness-75"
+      );
+      submitGroupButton.classList.add("cursor-pointer");
+      joinGroupButton.disabled = false;
+      joinGroupButton.classList.remove(
+        "cursor-not-allowed",
+        "opacity-50",
+        "brightness-75"
+      );
+      joinGroupButton.classList.add("cursor-pointer");
+    }
+
     input?.addEventListener("input", toggleSubmitButton);
     toggleSubmitButton();
 
@@ -726,7 +782,7 @@ const member2 = members.length > 1 ? members[1] : null;
       }
     });
 
-    if (isConfirmed) {
+    if (isConfirmed || isPickingDisabled) {
       exitButton?.classList.add("hidden");
       backBtn?.classList.add("hidden");
     } else {

src/components/rpkm/components/house-display.astro

@@ -0,0 +1,91 @@
+---
+import Frame from "@/components/common/Frame.astro";
+import { getGroupByGroupId } from "@/lib/groupAPI";
+import { getProfile } from "@/lib/profileAPI";
+import type { Group, User } from "@/types/common";
+
+const token = Astro.cookies.get("token")?.value;
+
+let groupData: Group | null = null;
+let user: User | null = null;
+
+if (token) {
+  let groupID = "";
+  const userResponse = await getProfile(token);
+  if (userResponse.success && userResponse.data) {
+    user = userResponse.data.user as User;
+    groupID = user.groupId ? user.groupId : "";
+    if (groupID) {
+      const groupResponse = await getGroupByGroupId(groupID, token);
+      if (groupResponse.success && groupResponse.data) {
+        groupData = groupResponse.data.data as Group;
+      } else {
+        return Astro.redirect("/login");
+      }
+    } else {
+      return Astro.redirect("/login");
+    }
+  } else {
+    console.error("Failed to fetch user data:", userResponse.error);
+  }
+} else {
+  return Astro.redirect("/login");
+}
+
+if (!groupData || !user) {
+  return Astro.redirect("/login");
+}
+
+const assignedHouse = null; // Replace with actual house attribute
+---
+
+<div class="h-full w-full" id="view-house-final">
+  {
+    !assignedHouse ? (
+      <Frame size="xs" color="purple" contentContainerClass="!h-full">
+        {/* Title */}
+        <p class="text-2xl font-semibold text-white">
+          บ้านรับเพื่อนที่เลือกไว้
+        </p>
+
+        {/* Empty Houses */}
+        <div class="pt-8">
+          <p class="text-[28px] font-semibold text-white">คุณไม่ได้เลือกบ้าน</p>
+        </div>
+      </Frame>
+    ) : (
+      <Frame
+        size="md"
+        color="purple"
+        contentContainerClass="!h-full !items-center !flex !flex-col"
+      >
+        {/* Title */}
+        <p class="text-2xl font-semibold text-white">บ้านรับเพื่อนที่ได้</p>
+
+        {/* House Image */}
+        <img
+          src="/images/rpkm/house-demo.png"
+          width={160}
+          height={160}
+          class="mt-5 border-4 border-white"
+        />
+
+        {/* House Name */}
+        <p class="pt-5 text-3xl font-semibold text-white">บ้าน xxx</p>
+
+        {/* House Instagram */}
+        <a
+          id="house-instagram-link-final"
+          href="#"
+          target="_blank"
+          class="flex cursor-pointer items-center gap-1 pt-4 pb-8"
+        >
+          <img src="/images/rpkm/instagram-icon.svg" width="20" height="20" />
+          <p id="house-instagram-final" class="font-medium text-white">
+            baan.something
+          </p>
+        </a>
+      </Frame>
+    )
+  }
+</div>

src/components/rpkm/components/house-picker.astro

@@ -1,4 +1,5 @@
 ---
+import { disablePickingDate } from "@rpkm/data/date";
 import {
   getHouses,
   type HouseDisplayType,
@@ -16,6 +17,9 @@ import { getGroupByGroupId } from "@/lib/groupAPI";
 import { getProfile } from "@/lib/profileAPI";
 import type { Group, User } from "@/types/common";
 
+const currentDate = new Date();
+const isHousePickingDisabled = currentDate >= disablePickingDate;
+
 const houseSizes = ["ทั้งหมด", "S", "M", "L", "XL", "XXL"];
 
 let houseDisplayData: HouseDisplayType[] = [];
@@ -89,7 +93,13 @@ const isPickAllMainHouses =
 
     <!-- Empty Houses -->
     <div class="pt-5">
-      <p class="text-[28px] font-semibold text-white">คุณยังไม่ได้เลือกบ้าน</p>
+      <p class="text-[28px] font-semibold text-white">
+        {
+          !isHousePickingDisabled
+            ? "คุณยังไม่ได้เลือกบ้าน"
+            : "คุณไม่ได้เลือกบ้าน"
+        }
+      </p>
     </div>
 
     <!-- Button -->
@@ -253,42 +263,6 @@ const isPickAllMainHouses =
 
 <HouseConfirmPopup />
 
-<!-- House Final Wrapper -->
-<div class="hidden h-full w-full" id="view-house-final">
-  <Frame
-    size="md"
-    color="purple"
-    contentContainerClass="!h-full !items-center !flex !flex-col"
-  >
-    <!-- Title -->
-    <p class="text-2xl font-semibold text-white">บ้านรับเพื่อนที่ได้</p>
-
-    <!-- House Image -->
-    <img
-      src="/images/rpkm/house-demo.png"
-      width={160}
-      height={160}
-      class="mt-5 border-4 border-white"
-    />
-
-    <!-- House Name -->
-    <p class="pt-5 text-3xl font-semibold text-white">บ้าน xxx</p>
-
-    <!-- House Instagram -->
-    <a
-      id="house-instagram-link-final"
-      href="https://youtu.be/dQw4w9WgXcQ?si=To9bwNaRw7cl03NT"
-      target="_blank"
-      class="flex cursor-pointer items-center gap-1 pt-4 pb-8"
-    >
-      <img src="/images/rpkm/instagram-icon.svg" width="20" height="20" />
-      <p id="house-instagram-final" class="font-medium text-white">
-        baan.something
-      </p>
-    </a>
-  </Frame>
-</div>
-
 <!-- Script -->
 <script
   define:vars={{
@@ -298,6 +272,7 @@ const isPickAllMainHouses =
     token: token || "",
     isConfirmed: isConfirmed,
     isOwner: isOwner,
+    isHousePickingDisabled: isHousePickingDisabled,
   }}
 >
   document.addEventListener("DOMContentLoaded", () => {
@@ -309,15 +284,17 @@ const isPickAllMainHouses =
     const houseSearchInput = document.getElementById("house-search");
     const houseSizeFilter = document.getElementById("house-size-filter");
     const houseSizeOptions = document.querySelectorAll(".size-option");
+
     const houseCardContainer = document.getElementById("house-card-container");
     const closeBtn = document.getElementById("popup-close-btn");
-    if (!isOwner) {
+    if (!isOwner || isHousePickingDisabled) {
       closeBtn.classList.add("hidden");
     } else {
       closeBtn.classList.remove("hidden");
     }
+
     const pickBtn = document.getElementById("btn-picking-house");
-    if (!isOwner) {
+    if (!isOwner || isConfirmed || isHousePickingDisabled) {
       pickBtn.disabled = true;
       pickBtn.classList.add("cursor-not-allowed", "opacity-50");
       pickBtn.classList.remove("cursor-pointer", "opacity-100");
@@ -328,12 +305,14 @@ const isPickAllMainHouses =
       pickBtn.classList.add("cursor-pointer", "opacity-100");
       pickBtn.innerHTML = `<p class="text-xl text-white font-medium">เลือกบ้าน</p>`;
     }
+
     const submitBtn = document.getElementById("btn-submit-house");
-    if (!isOwner) {
+    if (!isOwner || isHousePickingDisabled || isConfirmed) {
       submitBtn.classList.add("hidden");
     } else {
       submitBtn.classList.remove("hidden");
     }
+
     const notPickingView = document.getElementById("view-not-picking");
     const pickingView = document.getElementById("view-picking");
 
@@ -676,7 +655,10 @@ const isPickAllMainHouses =
                 <p class="text-xs text-[#2B2D42] font-semibold text-center overflow-hidden whitespace-nowrap text-ellipsis">${house.nameThai}</p>
               </div>
               ${
-                isOwner && !isConfirmed && !isSubmitted
+                isOwner &&
+                !isConfirmed &&
+                !isSubmitted &&
+                !isHousePickingDisabled
                   ? `
                 <div class="flex justify-center">
                   <button class="cursor-pointer flex justify-center items-center">
@@ -691,9 +673,9 @@ const isPickAllMainHouses =
         } else {
           card.innerHTML = `
             <button 
-              class="relative h-[100px] w-[80px] border-dashed border-2 flex justify-center items-center border-[#D38DD8] ${isOwner && !isConfirmed && !isSubmitted ? "hover:bg-[#D38DD8]/20 transition-colors cursor-pointer" : "cursor-default"}"
+              class="relative h-[100px] w-[80px] border-dashed border-2 flex justify-center items-center border-[#D38DD8] ${isOwner && !isConfirmed && !isSubmitted && !isHousePickingDisabled ? "hover:bg-[#D38DD8]/20 transition-colors cursor-pointer" : "cursor-default"}"
               data-rank="${rank}"
-              ${!isOwner ? "disabled" : ""}
+              ${!isOwner || isHousePickingDisabled ? "disabled" : ""}
             >
               <img 
                 src="/images/rpkm/rank-${rank}.svg"
@@ -703,7 +685,7 @@ const isPickAllMainHouses =
               />
               <img 
                 src="/images/rpkm/plus-icon.svg"
-                class="w-5 h-5 ${isOwner && !isConfirmed && !isSubmitted ? "" : "hidden"}" 
+                class="w-5 h-5 ${!isHousePickingDisabled && isOwner && !isConfirmed && !isSubmitted ? "" : "hidden"}" 
               />
             </button>
           `;
@@ -877,7 +859,7 @@ const isPickAllMainHouses =
       // Update instagram link
       const instagramLink = housePopup?.querySelector("#house-instagram-link");
       if (instagramLink) {
-        instagramLink.href = house.instagramURL;
+        instagramLink.href = house.instagram;
       }
 
       // Update button texts

src/components/rpkm/data/date.ts

@@ -0,0 +1,2 @@
+export const disablePickingDate = new Date("2025-07-24T00:00:00+07:00");
+export const displayHouseDate = new Date("2025-07-27T00:00:00+07:00");

src/components/rpkm/sample.astro

@@ -1,8 +1,12 @@
 ---
 import "@rpkm/styles/styles.css";
 import GroupPicker from "@rpkm/components/group-picker.astro";
+import HouseDisplay from "@rpkm/components/house-display.astro";
 import HousePicker from "@rpkm/components/house-picker.astro";
 import Profile from "@rpkm/components/profile.astro";
+import { displayHouseDate } from "@rpkm/data/date";
+
+const currentDate = new Date();
 ---
 
 <div
@@ -12,7 +16,7 @@ import Profile from "@rpkm/components/profile.astro";
   <Profile />
 
   <!-- House -->
-  <HousePicker />
+  {currentDate >= displayHouseDate ? <HouseDisplay /> : <HousePicker />}
 
   <!-- Group -->
   <GroupPicker />