feat (add where poll): add delete func, polish UI, add translation

Author: Puppychan

apps/tumeet/messages/en.json

@@ -3795,6 +3795,18 @@
     "more_options": "more options",
     "created_by": "by",
     "filter": "Filter",
-    "sort": "Sort"
+    "sort": "Sort",
+    "select_options": "Select options to vote",
+    "create_new_option": "Add your own option...",
+    "add": "Add",
+    "confirm": "Confirm",
+    "cancel": "Cancel",
+    "voted_for": "You voted for",
+    "vote_again": "Vote again",
+    "vote_for": "Vote for",
+    "vote_confirm": "Are you sure you want to submit your vote for these options?",
+    "delete_option": "Delete Option",
+    "delete_option_confirm": "Are you sure you want to delete this option? This action cannot be undone.",
+    "delete": "Delete"
   }
 }

apps/tumeet/messages/vi.json

@@ -2068,7 +2068,19 @@
     "more_options": "tùy chọn khác",
     "created_by": "bởi",
     "filter": "Lọc",
-    "sort": "Sắp xếp"
+    "sort": "Sắp xếp",
+    "select_options": "Chọn các tùy chọn để bình chọn",
+    "create_new_option": "Thêm tùy chọn của bạn...",
+    "add": "Thêm",
+    "confirm": "Xác nhận",
+    "cancel": "Hủy",
+    "voted_for": "Bạn đã bình chọn cho",
+    "vote_again": "Bình chọn lại",
+    "vote_for": "Bình chọn cho",
+    "vote_confirm": "Bạn có chắc chắn muốn gửi phiếu bầu cho những tùy chọn này không?",
+    "delete_option": "Xóa Tùy chọn",
+    "delete_option_confirm": "Bạn có chắc chắn muốn xóa tùy chọn này không? Hành động này không thể hoàn tác.",
+    "delete": "Xóa"
   },
   "ai_chat": {
     "welcome_to": "Chào mừng đến với",

apps/web/messages/en.json

@@ -3814,6 +3814,20 @@
     "more_options": "more options",
     "created_by": "by",
     "filter": "Filter",
-    "sort": "Sort"
+    "sort": "Sort",
+    "select_options": "Select options to vote",
+    "create_new_option": "Add your own option...",
+    "add": "Add",
+    "confirm": "Confirm",
+    "cancel": "Cancel",
+    "voted_for": "You voted for",
+    "vote_again": "Vote again",
+    "vote_for": "Vote for",
+    "vote_confirm": "Are you sure you want to submit your vote for these options?",
+    "delete_option": "Delete Option",
+    "delete_option_confirm": "Are you sure you want to delete this option? This action cannot be undone.",
+    "delete": "Delete",
+    "enable_where_poll_desc": "You can enable 'Where to meet' voting for your plan.",
+    "enable_where_poll": "Enable 'Where to meet' voting"
   }
 }

apps/web/messages/vi.json

@@ -2076,7 +2076,21 @@
     "more_options": "tùy chọn khác",
     "created_by": "bởi",
     "filter": "Lọc",
-    "sort": "Sắp xếp"
+    "sort": "Sắp xếp",
+    "select_options": "Chọn các tùy chọn để bình chọn",
+    "create_new_option": "Thêm tùy chọn của bạn...",
+    "add": "Thêm",
+    "confirm": "Xác nhận",
+    "cancel": "Hủy",
+    "voted_for": "Bạn đã bình chọn cho",
+    "vote_again": "Bình chọn lại",
+    "vote_for": "Bình chọn cho",
+    "vote_confirm": "Bạn có chắc chắn muốn gửi phiếu bầu cho những tùy chọn này không?",
+    "delete_option": "Xóa Tùy chọn",
+    "delete_option_confirm": "Bạn có chắc chắn muốn xóa tùy chọn này không? Hành động này không thể hoàn tác.",
+    "delete": "Xóa",
+    "enable_where_poll_desc": "Bạn có thể bật tính năng bình chọn 'Nơi gặp mặt' cho kế hoạch của mình.",
+    "enable_where_poll": "Bật tính năng bình chọn 'Nơi gặp mặt'"
   },
   "ai_chat": {
     "welcome_to": "Chào mừng đến với",

apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/plan-details-client.tsx

@@ -140,7 +140,7 @@ export default function PlanDetailsClient({
   }, [plan.id, resolvedTheme]);
 
   return (
-    <div className="flex w-full max-w-6xl flex-col gap-6 p-4 text-foreground md:px-8 lg:gap-14 lg:px-14">
+    <div className="flex w-full max-w-6xl flex-col gap-6 p-4 text-foreground md:px-6 lg:gap-14 lg:px-14">
       <div className="flex w-full flex-col items-center">
         <UtilityButtons
           plan={plan}
@@ -152,7 +152,7 @@ export default function PlanDetailsClient({
           <p className="my-4 flex max-w-xl items-center gap-2 text-center text-2xl leading-tight! font-semibold md:mb-4 lg:text-3xl">
             {plan.name} <EditPlanDialog plan={plan} />
           </p>
-          <div className="mt-8 grid w-full items-center justify-between gap-4 md:grid-cols-2 lg:grid-cols-3">
+          <div className="mt-8 grid w-full grid-cols-1 items-start justify-between gap-4 md:grid-cols-3 md:items-center">
             <PlanLogin
               plan={plan}
               timeblocks={[]}

apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/plan-details-polls.tsx

@@ -6,7 +6,15 @@ import type {
   MeetTogetherPlan,
 } from '@tuturuuu/types/primitives/MeetTogetherPlan';
 import type { User } from '@tuturuuu/types/primitives/User';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@tuturuuu/ui/accordion';
+import { useIsMobile } from '@tuturuuu/ui/hooks/use-mobile';
 import MultipleChoiceVote from '@tuturuuu/ui/legacy/tumeet/multiple-choice-vote';
+import { useTranslations } from 'next-intl';
 
 interface PlanDetailsPollsProps {
   plan: MeetTogetherPlan;
@@ -21,6 +29,52 @@ export default function PlanDetailsPolls({
   platformUser,
   polls,
 }: PlanDetailsPollsProps) {
+  const t = useTranslations('ws-polls');
+  const isMobile = useIsMobile();
+  if (!plan.where_to_meet && !isCreator) {
+    return null; // Don't render anything if "where to meet" is not enabled and user is not creator
+  }
+
+  if (isMobile) {
+    return (
+      <Accordion
+        type="single"
+        collapsible
+        className="order-first col-span-full w-full"
+        defaultValue="item-1"
+      >
+        <AccordionItem value="item-1" className="w-full">
+          <AccordionTrigger className="pl-3 text-lg">
+            {t('plural')}
+          </AccordionTrigger>
+          <AccordionContent>
+            <PlanDetailsPollContent
+              plan={plan}
+              isCreator={isCreator}
+              platformUser={platformUser}
+              polls={polls}
+            />
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    );
+  }
+  return (
+    <PlanDetailsPollContent
+      plan={plan}
+      isCreator={isCreator}
+      platformUser={platformUser}
+      polls={polls}
+    />
+  );
+}
+function PlanDetailsPollContent({
+  plan,
+  isCreator,
+  platformUser,
+  polls,
+}: PlanDetailsPollsProps) {
+  const t = useTranslations('ws-polls');
   const { user: guestUser } = useTimeBlocking();
 
   const user = guestUser ?? platformUser;
@@ -36,7 +90,7 @@ export default function PlanDetailsPolls({
   const wherePoll = polls?.polls?.[0]; // Assuming the first poll is the "where to meet" poll
 
   const onVote = async (pollId: string, optionIds: string[]) => {
-    await fetch(`/api/meet-together/plans/${plan.id}/poll/vote`, {
+    const res = await fetch(`/api/meet-together/plans/${plan.id}/poll/vote`, {
       method: 'POST',
       body: JSON.stringify({
         pollId,
@@ -46,6 +100,10 @@ export default function PlanDetailsPolls({
       }),
       headers: { 'Content-Type': 'application/json' },
     });
+    if (!res.ok) {
+      console.error('Failed to vote in poll');
+      return;
+    }
   };
 
   const onAddOption = async (pollId: string, value: string) => {
@@ -59,25 +117,58 @@ export default function PlanDetailsPolls({
       }),
       headers: { 'Content-Type': 'application/json' },
     });
+    if (!res.ok) {
+      console.error('Failed to add poll option');
+      return;
+    }
+  };
 
-    console.log('Option added:', res);
+  const onDeleteOption = async (pollId: string, optionId: string) => {
+    const res = await fetch(
+      `/api/meet-together/plans/${plan.id}/poll/option/${optionId}`,
+      {
+        method: 'DELETE',
+        body: JSON.stringify({
+          pollId,
+          userType, // 'PLATFORM' or 'GUEST'
+          guestId: userType === 'GUEST' ? user?.id : undefined,
+        }),
+        headers: { 'Content-Type': 'application/json' },
+      }
+    );
+    if (!res.ok) {
+      console.error('Failed to delete poll option');
+    }
   };
 
-  if (!plan.where_to_meet && !isCreator) {
-    return null; // Don't render anything if "where to meet" is not enabled and user is not creator
-  }
+  const onToggleWhereToMeet = async (enable: boolean) => {
+    const res = await fetch(`/api/meet-together/plans/${plan.id}/where-poll`, {
+      method: 'PATCH',
+      body: JSON.stringify({
+        planId: plan.id,
+        whereToMeet: enable,
+      }),
+      headers: { 'Content-Type': 'application/json' },
+    });
+
+    if (!res.ok) {
+      console.error('Failed to update "where to meet" setting');
+    }
+  };
 
   return (
-    <div className="sticky top-16 z-10 self-start rounded-lg border px-2 py-4 md:px-4">
+    <div className="top-16 z-10 self-start rounded-lg border px-2 py-4 md:sticky md:px-4">
       {plan.where_to_meet && wherePoll ? (
         <MultipleChoiceVote
+          isCreator={isCreator}
           pollName={wherePoll.name}
           pollId={wherePoll.id}
           options={wherePoll.options}
           currentUserId={currentUserId}
           isDisplayMode={userType === 'DISPLAY'}
           onAddOption={onAddOption}
           onVote={onVote}
+          onDeleteOption={onDeleteOption}
         />
       ) : (
         isCreator && (
@@ -87,10 +178,7 @@ export default function PlanDetailsPolls({
             </p>
             <button
               className="rounded bg-dynamic-blue px-4 py-2 font-medium text-white shadow transition hover:bg-dynamic-blue/80"
-              onClick={async () => {
-                // call your backend here to enable where_to_meet
-                // await onUpdateWhereToMeet(true);
-              }}
+              onClick={async () => await onToggleWhereToMeet(true)}
             >
               Enable "Where to meet" voting
             </button>

apps/web/src/app/api/meet-together/plans/[planId]/poll/where-poll/route.ts

@@ -0,0 +1,88 @@
+import {
+  createAdminClient,
+  createClient,
+} from '@tuturuuu/supabase/next/server';
+import { NextResponse } from 'next/server';
+
+export async function PATCH(req: Request) {
+  const sbAdmin = await createAdminClient();
+  const supabase = await createClient();
+
+  const { planId, whereToMeet } = await req.json();
+
+  // 1. Authenticate user (optional but recommended)
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  if (!user) {
+    return NextResponse.json({ message: 'Unauthorized' }, { status: 401 });
+  }
+
+  // 2. Update where_to_meet field
+  const { data: updatedPlan, error: updateError } = await sbAdmin
+    .from('meet_together_plans')
+    .update({ where_to_meet: whereToMeet })
+    .eq('id', planId)
+    .select('id, where_to_meet')
+    .single();
+
+  if (updateError || !updatedPlan) {
+    return NextResponse.json(
+      { message: 'Error updating plan', error: updateError },
+      { status: 500 }
+    );
+  }
+
+  // 3. If enabling where_to_meet, ensure the "Where to Meet Poll" exists
+  let pollId: string | null = null;
+  if (whereToMeet) {
+    // Try to find an existing poll for this plan with correct name
+    const { data: poll, error: pollFetchError } = await sbAdmin
+      .from('polls')
+      .select('id')
+      .eq('plan_id', planId)
+      .eq('name', 'where')
+      .maybeSingle();
+
+    if (pollFetchError) {
+      return NextResponse.json(
+        { message: 'Error checking poll', error: pollFetchError },
+        { status: 500 }
+      );
+    }
+
+    if (poll?.id) {
+      // Already exists, reuse
+      pollId = poll.id;
+    } else {
+      // Not exist, create it
+      const { data: newPoll, error: createPollError } = await sbAdmin
+        .from('polls')
+        .insert({
+          plan_id: planId,
+          creator_id: user.id,
+          name: 'where',
+        })
+        .select('id')
+        .single();
+
+      if (createPollError) {
+        return NextResponse.json(
+          {
+            message: 'Plan updated, but failed to create poll',
+            error: createPollError,
+          },
+          { status: 200 }
+        );
+      }
+      pollId = newPoll?.id;
+    }
+  }
+
+  return NextResponse.json({
+    id: planId,
+    where_to_meet: updatedPlan.where_to_meet,
+    pollId,
+    message: 'Plan updated successfully',
+  });
+}