[Feature][RPKM] Integrate bottle of choice

src/components/common/Footer.astro

@@ -27,8 +27,8 @@ const footerGradient = bgGradient[variant].classes;
       variant === "rpkm_summary" ||
       variant === "rpkm_workshops" ||
       variant === "rpkm_rubpuen") && (
-      <div class="flex h-fit min-h-[120px] w-full flex-col items-center bg-white p-4 pb-6">
-        <p class="font-semibold text-black">PRESENTED BY</p>
+      <div class="flex h-fit min-h-[120px] w-full flex-col items-center p-4 pb-6 backdrop-blur-sm">
+        <p class="font-semibold text-[rgba(255,255,255,0.5)]">PRESENTED BY</p>
         <img
           src="/images/rpkm/sponsor/logo-gangnam.png"
           class="mt-2 mb-6 h-[60px] w-auto object-contain"
@@ -86,21 +86,23 @@ const footerGradient = bgGradient[variant].classes;
   </div>
 
   <!-- Contact -->
-  <div
-    class="flex w-full flex-col items-center justify-center bg-white py-4 text-black"
-  >
-    <p class="text-xl font-semibold">Contact Us</p>
-    <div class="flex flex-row gap-x-2">
-      <div class="mt-3 flex flex-col gap-y-1">
-        <img src="/common/isd-logo.svg" alt="ISD Logo" class="h-8 w-auto" />
-        <a
-          href="https://isd.sgcu.in.th"
-          target="_blank"
-          class="font-semibold underline"
-        >
-          Website
-        </a>
+  {
+    variant === "firstdate" && (
+      <div class="flex w-full flex-col items-center justify-center bg-white py-4 text-black">
+        <p class="text-xl font-semibold">Contact Us</p>
+        <div class="flex flex-row gap-x-2">
+          <div class="mt-3 flex flex-col gap-y-1">
+            <img src="/common/isd-logo.svg" alt="ISD Logo" class="h-8 w-auto" />
+            <a
+              href="https://isd.sgcu.in.th"
+              target="_blank"
+              class="font-semibold underline"
+            >
+              Website
+            </a>
+          </div>
+        </div>
       </div>
-    </div>
-  </div>
+    )
+  }
 </footer>

src/components/common/react/ButtonRpkm.tsx

@@ -270,7 +270,7 @@ export default function ButtonRpkm({
       aria-disabled={disabled}
       {...restProps}
     >
-      <div className="overflow-hidde relative z-10 flex w-full cursor-pointer items-center">
+      <div className="overflow-hidde relative z-10 flex w-full cursor-pointer items-center drop-shadow-[0_0_6px_white] filter">
         {icon && <div className="flex-shrink-0">{icon}</div>}
         <div className="flex flex-1 justify-center overflow-hidden">
           <div className="text-center leading-tight">{children}</div>

src/components/rpkm/components/profile.astro

@@ -1,6 +1,7 @@
 ---
 import UserProfile from "@rpkm/rubpuen/UserProfile";
 
+import BottleOfChoice from "@/components/rpkm/rubpuen/BottleOfChoice";
 import { getProfile } from "@/lib/profileAPI";
 import type { User } from "@/types/common";
 
@@ -10,7 +11,7 @@ if (!token) {
   return Astro.redirect("/login");
 }
 
-let user = null;
+let user: User | null = null;
 try {
   const response = await getProfile(token);
   if (response.success && response.data) {
@@ -27,4 +28,11 @@ if (!user) {
 }
 ---
 
-<UserProfile user={user} className="profile-avatar" />
+<>
+  <BottleOfChoice
+    client:load
+    initialVariant="rpkm_home"
+    isChosen={user.bottleChoice !== "NONE"}
+  />
+  <UserProfile user={user} className="profile-avatar" />
+</>

src/components/rpkm/rubpuen/BottleOfChoice.tsx

@@ -16,6 +16,7 @@ import { bottleOfChoiceSchema } from "@/types/rpkm-bottole-of-choice/schema";
 
 interface BottleOfChoiceProps {
   initialVariant?: ThemeVariant;
+  isChosen: boolean;
 }
 
 interface Choice {
@@ -47,10 +48,12 @@ const BOTTLE_OPTIONS: Choice[] = [
 
 export default function BottleOfChoice({
   initialVariant,
+  isChosen,
 }: BottleOfChoiceProps): JSX.Element {
   // State
   const [choice, setChoice] = useState<string>("");
   const [error, setError] = useState<string | null>(null);
+  const [specialMessage, setSpecialMessage] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
   // Dialogs
@@ -59,12 +62,21 @@ export default function BottleOfChoice({
 
   // Open dialog on mount
   useEffect(() => {
+    if (isChosen) {
+      return; // Do not open dialog if already chosen
+    }
     mainDialog.open();
   }, []);
 
   // Handlers
   const handleChoiceChange = (value: string): void => {
     setChoice(value);
+    if (value === "C") {
+      setSpecialMessage(true);
+    } else {
+      setSpecialMessage(false);
+    }
+
     setError(null); // Clear error when user makes selection
   };
 
@@ -176,6 +188,12 @@ export default function BottleOfChoice({
                   </div>
                 )}
 
+                {specialMessage && (
+                  <div className="w-full text-center text-xs text-white">
+                    *สามารถรับกระติกน้ำได้ที่บ้านรับเพื่อนในวันรับเพื่อนก้าวใหม่
+                  </div>
+                )}
+
                 {/* Confirm Button */}
                 <div className="flex gap-5">
                   <ButtonRpkm

src/components/rpkm/workshop/MyWorkshops.tsx

@@ -40,7 +40,7 @@ export default function MyWorkshops({
               <h1 className="text-center text-3xl font-bold text-nowrap">
                 รอบกิจกรรมของคุณ
               </h1>
-              <div className="flex gap-2">
+              <div className="flex gap-4">
                 {myWorkshopsData
                   .map((workshop) => getMyWorkshopByRpkmWorkshop(workshop))
                   .map((workshop, index) => (

src/components/rpkm/workshop/WorkshopCard.tsx

@@ -111,7 +111,10 @@ export default function WorkshopCard(workshop: WorkshopData): JSX.Element {
             <RegisterSuccess
               {...workshop}
               workshopForm={formData}
-              onDismiss={dialogSuccess.closeAll}
+              onDismiss={() => {
+                dialogSuccess.closeAll();
+                window.location.reload();
+              }}
             />
           </DialogBody>
         </Dialog>

src/config/rpkmTheme.ts

@@ -7,6 +7,7 @@ export const rpkmThemeConfigs: Record<RpkmVariant, ThemeConfig> = {
       "bg-[radial-gradient(50%_50%_at_50%_50%,_#8A2BE4_0%,_#2B2D42_100%)]",
     backgroundImage: "/images/rpkm/bg/home.png",
     primaryColor: "#8A2BE4",
+    colorVariants: "purple",
   },
   rpkm_workshops: {
     gradientType: "linear",

src/data/rpkm-workshop/workshops.ts

@@ -65,7 +65,7 @@ export function getMyWorkshopByRpkmWorkshop(
     case WorkshopType.KEYCHAIN:
       return {
         title: "Keychain",
-        imgUrl: "/images/rpkm/house-blank.png",
+        imgUrl: "/images/rpkm/keychain-workshop.webp",
         date: keychainWorkshop.metaDate,
         location: keychainWorkshop.metaLocation,
         time:
@@ -74,7 +74,7 @@ export function getMyWorkshopByRpkmWorkshop(
     case WorkshopType.DIFFUSER:
       return {
         title: "Diffuser",
-        imgUrl: "/images/rpkm/house-blank.png",
+        imgUrl: "/images/rpkm/diffuser-workshop.webp",
         date: diffuserWorkshop.metaDate,
         location: diffuserWorkshop.metaLocation,
         time:

src/layouts/rpkm/WithNavbar.astro

@@ -47,7 +47,7 @@ const backgroundImage = rpkmThemeConfigs[variant]?.backgroundImage;
         class="mx-auto h-[136px] w-[301.182px]"
       />
 
-      <main class="flex-grow px-3 pb-12">
+      <main class="flex-grow px-3 pb-6">
         <slot />
       </main>
       <Footer variant={variant} />

src/lib/rubpuenAPI.ts

@@ -9,7 +9,9 @@ import type { BottleOfChoiceFormData } from "@/types/rpkm-bottole-of-choice/sche
 export async function submitBottleOfChoice(
   formData: BottleOfChoiceFormData
 ): Promise<ApiResponse<unknown>> {
-  const response = await api.put("/water-bottle", formData);
+  const response = await api.patch("/user/water-bottle", {
+    bottleChoice: formData.choice,
+  });
   if (!response.success) {
     console.error("Failed to submit bottle of choice:", response.error);
     return response;

src/pages/rpkm/home/index.astro

@@ -8,14 +8,14 @@ import Layout from "@/layouts/rpkm/WithNavbar.astro";
   <div class="gap flex min-h-full w-full flex-col gap-8">
     <h1 class="text-center text-4xl font-bold">รับเพื่อนก้าวใหม่ 2025</h1>
 
-    <div class="flex w-full flex-col items-center gap-5 pb-12">
+    <div class="flex w-full flex-col items-center gap-5 py-8">
       <div class="flex flex-col items-center text-white">
         <p class="text-2xl font-semibold">20 กรกฎาคม</p>
         <p class="text-xl font-medium">เปิดลงทะเบียนบ้านรับเพื่อน</p>
       </div>
       <Divider />
       <div class="flex flex-col items-center text-white">
-        <p class="text-2xl font-semibold">26 กรกฎาคม</p>
+        <p class="text-2xl font-semibold">27 กรกฎาคม</p>
         <p class="text-xl font-medium">ประกาศผลบ้านรับเพื่อน</p>
       </div>
       <Divider />

src/styles/global.css

@@ -3,7 +3,13 @@
 @import "tailwindcss";
 
 @import "@fontsource-variable/orbitron";
-@import "@fontsource/ibm-plex-sans-thai";
+@import "@fontsource/ibm-plex-sans-thai/100.css";
+@import "@fontsource/ibm-plex-sans-thai/200.css";
+@import "@fontsource/ibm-plex-sans-thai/300.css";
+@import "@fontsource/ibm-plex-sans-thai/400.css";
+@import "@fontsource/ibm-plex-sans-thai/500.css";
+@import "@fontsource/ibm-plex-sans-thai/600.css";
+@import "@fontsource/ibm-plex-sans-thai/700.css";
 @import "@fontsource/zen-dots";
 
 @layer theme {