fix: improve error message

apps/web/components/eventtype/EventSetupTab.tsx

@@ -30,8 +30,7 @@ import {
   Button,
   showToast,
 } from "@calcom/ui";
-import { Plus, X, Check } from "@calcom/ui/components/icon";
-import { CornerDownRight } from "@calcom/ui/components/icon";
+import { Plus, X, Check, CornerDownRight } from "@calcom/ui/components/icon";
 
 import CheckboxField from "@components/ui/form/CheckboxField";
 import type { SingleValueLocationOption } from "@components/ui/form/LocationSelect";
@@ -200,7 +199,6 @@ export const EventSetupTab = (
             defaultValue={defaultValue}
             render={({ field: { onChange, value } }) => {
               return (
-                <>
                 <Input
                   name={`locations[${index}].${eventLocationType.defaultValueVariable}`}
                   type="text"
@@ -210,13 +208,6 @@ export const EventSetupTab = (
                   className="my-0"
                   {...rest}
                 />
-                  <ErrorMessage
-                    errors={formMethods.formState.errors.locations?.[index]}
-                    name={eventLocationType.defaultValueVariable}
-                    className="text-error my-1 text-sm"
-                    as="div"
-                  />
-                </>
               );
             }}
           />
@@ -231,7 +222,6 @@ export const EventSetupTab = (
             defaultValue={defaultValue}
             render={({ field: { onChange, value } }) => {
               return (
-                <>
                 <PhoneInput
                   required
                   name={`locations[${index}].${eventLocationType.defaultValueVariable}`}
@@ -239,13 +229,6 @@ export const EventSetupTab = (
                   onChange={onChange}
                   {...rest}
                 />
-                  <ErrorMessage
-                    errors={formMethods.formState.errors.locations?.[index]}
-                    name={eventLocationType.defaultValueVariable}
-                    className="text-error my-1 text-sm"
-                    as="div"
-                  />
-                </>
               );
             }}
           />
@@ -320,11 +303,11 @@ export const EventSetupTab = (
 
                 {eventLocationType?.organizerInputType && (
                   <div className="mt-2 space-y-2">
+                    <div className="w-full">
                       <div className="flex gap-2">
                         <div className="flex items-center justify-center">
                           <CornerDownRight className="h-4 w-4" />
                         </div>
-                      <div className="w-full">
                         <LocationInput
                           defaultValue={
                             defaultLocation
@@ -335,6 +318,12 @@ export const EventSetupTab = (
                           index={index}
                         />
                       </div>
+                      <ErrorMessage
+                        errors={formMethods.formState.errors.locations?.[index]}
+                        name={eventLocationType.defaultValueVariable}
+                        className="text-error my-1 ml-6 text-sm"
+                        as="div"
+                      />
                     </div>
                     <div className="ml-6">
                       <CheckboxField

apps/web/pages/event-types/[type]/index.tsx

@@ -8,6 +8,7 @@ import { useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
+import { getEventLocationType } from "@calcom/app-store/locations";
 import { validateCustomEventName } from "@calcom/core/event";
 import type { EventLocationType } from "@calcom/core/location";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
@@ -321,6 +322,45 @@ const EventTypePage = (props: EventTypeSetupProps) => {
                   teamName: z.string().optional(),
                 })
                 .passthrough()
+                .superRefine((val, ctx) => {
+                  if (val?.link) {
+                    const link = val.link;
+                    const eventLocationType = getEventLocationType(val.type);
+                    if (
+                      eventLocationType &&
+                      !eventLocationType.default &&
+                      eventLocationType.linkType === "static" &&
+                      eventLocationType.urlRegExp
+                    ) {
+                      const valid = z
+                        .string()
+                        .regex(new RegExp(eventLocationType.urlRegExp))
+                        .safeParse(link).success;
+
+                      if (!valid) {
+                        const sampleUrl = eventLocationType.organizerInputPlaceholder;
+                        ctx.addIssue({
+                          code: z.ZodIssueCode.custom,
+                          path: [eventLocationType.defaultValueVariable],
+                          message: `Invalid URL for ${eventLocationType.label}. ${
+                            sampleUrl ? `Sample URL: ${sampleUrl}` : ""
+                          }`,
+                        });
+                      }
+                      return;
+                    }
+
+                    const valid = z.string().url().optional().safeParse(val).success;
+                    if (!valid) {
+                      ctx.addIssue({
+                        code: z.ZodIssueCode.custom,
+                        path: [eventLocationType.defaultValueVariable],
+                        message: `Invalid URL`,
+                      });
+                    }
+                  }
+                  return;
+                })
             )
             .optional(),
         })