Where To Meet toggle when creating a new Plan (#3314)

Author: vhpx

apps/db/supabase/migrations/20250722162331_new_plan_field.sql

@@ -0,0 +1,3 @@
+alter table "public"."meet_together_plans" add column "where_to_meet" boolean not null default false;
+
+

bun.lock

@@ -4597,10 +4597,6 @@
 
     "@react-email/preview-server/@babel/core/@babel/traverse": ["@babel/traverse@7.28.0", "", { "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.0", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.28.0", "@babel/template": "^7.27.2", "@babel/types": "^7.28.0", "debug": "^4.3.1" } }, "sha512-mGe7UK5wWyh0bKRfupsUchrQGqvDbZDbKJw+kcRGSmdHVYrv+ltd0pnpDTVpiTqnaBru9iEvA8pz8W46v0Amwg=="],
 
-    "@react-email/preview-server/@babel/traverse/@babel/parser": ["@babel/parser@7.28.0", "", { "dependencies": { "@babel/types": "^7.28.0" }, "bin": "./bin/babel-parser.js" }, "sha512-jVZGvOxOuNSsuQuLRTh13nU0AogFlw32w/MT+LV6D3sP5WdbW61E77RnkbaO2dUvmPAYrBDJXGn5gGS6tH4j8g=="],
-
-    "@react-email/preview-server/@babel/traverse/globals": ["globals@11.12.0", "", {}, "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="],
-
     "@react-email/preview-server/@radix-ui/react-collapsible/@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-IrVLIhskYhH3nLvtcBLQFZr61tBG7wx7O3kEmdzcYwRGAEBmBicGGL7ATzNgruYJ3xBTbuzEEq9OXJM3PAX3tA=="],
 
     "@react-email/preview-server/@radix-ui/react-collapsible/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.0", "", { "dependencies": { "@radix-ui/react-slot": "1.2.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-/J/FhLdK0zVcILOwt5g+dH4KnkonCtkVJsa2G6JmvbbtZfBEI1gMsO3QMjseL4F/SwfAMt1Vc/0XKYKq+xJ1sw=="],

packages/types/src/supabase.ts

@@ -2722,6 +2722,7 @@ export type Database = {
           is_public: boolean;
           name: string | null;
           start_time: string;
+          where_to_meet: boolean;
           ws_id: string | null;
         };
         Insert: {
@@ -2734,6 +2735,7 @@ export type Database = {
           is_public?: boolean;
           name?: string | null;
           start_time: string;
+          where_to_meet?: boolean;
           ws_id?: string | null;
         };
         Update: {
@@ -2746,6 +2748,7 @@ export type Database = {
           is_public?: boolean;
           name?: string | null;
           start_time?: string;
+          where_to_meet?: boolean;
           ws_id?: string | null;
         };
         Relationships: [

packages/ui/src/components/ui/legacy/tumeet/create-plan-dialog.tsx

@@ -23,8 +23,10 @@ import { useForm } from '@tuturuuu/ui/hooks/use-form';
 import { toast } from '@tuturuuu/ui/hooks/use-toast';
 import { Input } from '@tuturuuu/ui/input';
 import { zodResolver } from '@tuturuuu/ui/resolvers';
+import { Separator } from '@tuturuuu/ui/separator';
 import { cn } from '@tuturuuu/utils/format';
 import dayjs from 'dayjs';
+import { MapPin, Sparkles } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -48,6 +50,7 @@ const FormSchema = z.object({
   dates: z.array(z.string()).optional(),
   is_public: z.boolean().optional(),
   ws_id: z.string().optional(),
+  where_to_meet: z.boolean().optional(), // <-- Added field
 });
 
 const convertToTimetz = (
@@ -61,7 +64,6 @@ const convertToTimetz = (
 export default function CreatePlanDialog({ plan }: Props) {
   const t = useTranslations('meet-together');
   const router = useRouter();
-
   const [isOpened, setIsOpened] = useState(false);
   const [creating, setCreating] = useState(false);
 
@@ -76,17 +78,16 @@ export default function CreatePlanDialog({ plan }: Props) {
         ?.map((date) => dayjs(date).format('YYYY-MM-DD')),
       is_public: true,
       ws_id: plan.wsId,
+      where_to_meet: false, // <-- Default value
     },
   });
 
   const isValid = form.formState.isValid;
   const isSubmitting = form.formState.isSubmitting;
-
   const disabled = !isValid || isSubmitting;
 
   const handleSubmit = async () => {
     setCreating(true);
-
     const data = form.getValues();
     let hasError = false;
 
@@ -173,39 +174,16 @@ export default function CreatePlanDialog({ plan }: Props) {
             {t('create_plan')}
           </div>
         </button>
-        {/* <button
-          className={`${
-            
-          } group relative inline-flex w-full`}
-          onClick={() => setIsOpened(true)}
-          disabled={missingFields || creating}
-        >
-          <div
-            className={cn(
-              'from-dynamic-light-red via-dynamic-light-pink to-dynamic-light-blue bg-linear-to-r',
-              missingFields || creating
-                ? 'opacity-10'
-                : 'group-hover:opacity-30',
-              'absolute rounded-lg blur transition-all duration-500'
-            )}
-          />
-          <div
-            className={`from-dynamic-light-red via-dynamic-light-pink to-dynamic-light-blue relative inline-flex w-full items-center justify-center rounded-lg bg-linear-to-r px-8 py-2 font-bold text-white transition-all md:text-lg`}
-          >
-            {t('create_plan')}
-          </div>
-        </button> */}
       </DialogTrigger>
-      <DialogContent className="sm:max-w-[425px]">
+      <DialogContent className="sm:max-w-[500px]">
         <DialogHeader>
           <DialogTitle>{t('new_plan')}</DialogTitle>
           <DialogDescription>{t('new_plan_desc')}</DialogDescription>
         </DialogHeader>
-
         <Form {...form}>
           <form
             onSubmit={form.handleSubmit(handleSubmit)}
-            className="space-y-3"
+            className="space-y-4"
           >
             <FormField
               control={form.control}
@@ -221,7 +199,89 @@ export default function CreatePlanDialog({ plan }: Props) {
               )}
             />
 
-            <DialogFooter>
+            <Separator className="my-6" />
+
+            {/* Extra Features Section */}
+            <div className="space-y-4">
+              <div className="flex items-center gap-2">
+                <Sparkles className="h-4 w-4 text-purple-500" />
+                <h3 className="text-sm font-semibold text-foreground">
+                  Extra Features
+                </h3>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                Enhance your meeting plan with additional features to make
+                coordination easier.
+              </p>
+
+              {/* Where-to-meet feature */}
+              <FormField
+                control={form.control}
+                name="where_to_meet"
+                render={({ field }) => (
+                  <FormItem>
+                    <div
+                      className="cursor-pointer rounded-lg border border-border bg-muted/30 p-4 transition-colors hover:bg-muted/50"
+                      onClick={() => field.onChange(!field.value)}
+                    >
+                      <div className="flex items-start space-x-3">
+                        <FormControl>
+                          <input
+                            type="checkbox"
+                            id="where_to_meet"
+                            checked={field.value}
+                            onChange={field.onChange}
+                            className="mt-1 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                          />
+                        </FormControl>
+                        <div className="flex-1 space-y-2">
+                          <div className="flex items-center gap-2">
+                            <MapPin className="h-4 w-4 text-blue-500" />
+                            <FormLabel
+                              htmlFor="where_to_meet"
+                              className="mb-0 cursor-pointer font-medium text-foreground"
+                              onClick={(e) => e.stopPropagation()}
+                            >
+                              Where TuMeet?
+                            </FormLabel>
+                          </div>
+                          <p className="text-xs leading-relaxed text-muted-foreground">
+                            Enable location suggestions and voting. Participants
+                            can propose meeting locations and vote on their
+                            preferred spots, making it easier to find the
+                            perfect place for everyone.
+                          </p>
+                          <div className="flex items-center gap-1 text-xs text-blue-600">
+                            <span>✨ Popular feature</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* Placeholder for future features */}
+              <div className="rounded-lg border border-dashed border-border/50 bg-muted/20 p-4">
+                <div className="flex items-center justify-center text-center">
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-center gap-2 text-muted-foreground">
+                      <Sparkles className="h-4 w-4" />
+                      <span className="text-sm font-medium">
+                        More features coming soon!
+                      </span>
+                    </div>
+                    <p className="text-xs text-muted-foreground">
+                      We&apos;re working on additional features to make your
+                      meetings even better.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <DialogFooter className="pt-4">
               <Button
                 type="submit"
                 className="w-full"