Merge branch 'main' into fix/location-improvements

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,23 +199,16 @@ export const EventSetupTab = (
             defaultValue={defaultValue}
             render={({ field: { onChange, value } }) => {
               return (
-                <>
-                  <Input
-                    name={`locations[${index}].${eventLocationType.defaultValueVariable}`}
-                    type="text"
-                    required
-                    onChange={onChange}
-                    value={value}
-                    className="my-0"
-                    {...rest}
-                  />
-                  <ErrorMessage
-                    errors={formMethods.formState.errors.locations?.[index]}
-                    name={eventLocationType.defaultValueVariable}
-                    className="text-error my-1 text-sm"
-                    as="div"
-                  />
-                </>
+                <Input
+                  name={`locations[${index}].${eventLocationType.defaultValueVariable}`}
+                  placeholder={t(eventLocationType.organizerInputPlaceholder || "")}
+                  type="text"
+                  required
+                  onChange={onChange}
+                  value={value}
+                  className="my-0"
+                  {...rest}
+                />
               );
             }}
           />
@@ -231,21 +223,14 @@ export const EventSetupTab = (
             defaultValue={defaultValue}
             render={({ field: { onChange, value } }) => {
               return (
-                <>
-                  <PhoneInput
-                    required
-                    name={`locations[${index}].${eventLocationType.defaultValueVariable}`}
-                    value={value}
-                    onChange={onChange}
-                    {...rest}
-                  />
-                  <ErrorMessage
-                    errors={formMethods.formState.errors.locations?.[index]}
-                    name={eventLocationType.defaultValueVariable}
-                    className="text-error my-1 text-sm"
-                    as="div"
-                  />
-                </>
+                <PhoneInput
+                  required
+                  placeholder={t(eventLocationType.organizerInputPlaceholder || "")}
+                  name={`locations[${index}].${eventLocationType.defaultValueVariable}`}
+                  value={value}
+                  onChange={onChange}
+                  {...rest}
+                />
               );
             }}
           />
@@ -320,11 +305,11 @@ export const EventSetupTab = (
 
                 {eventLocationType?.organizerInputType && (
                   <div className="mt-2 space-y-2">
-                    <div className="flex gap-2">
-                      <div className="flex items-center justify-center">
-                        <CornerDownRight className="h-4 w-4" />
-                      </div>
-                      <div className="w-full">
+                    <div className="w-full">
+                      <div className="flex gap-2">
+                        <div className="flex items-center justify-center">
+                          <CornerDownRight className="h-4 w-4" />
+                        </div>
                         <LocationInput
                           defaultValue={
                             defaultLocation
@@ -335,6 +320,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,47 @@ 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 ?? "link"],
+                          message: t("invalid_url_error_message", {
+                            label: eventLocationType.label,
+                            sampleUrl: sampleUrl ?? "https://cal.com",
+                          }),
+                        });
+                      }
+                      return;
+                    }
+
+                    const valid = z.string().url().optional().safeParse(link).success;
+
+                    if (!valid) {
+                      ctx.addIssue({
+                        code: z.ZodIssueCode.custom,
+                        path: [eventLocationType?.defaultValueVariable ?? "link"],
+                        message: `Invalid URL`,
+                      });
+                    }
+                  }
+                  return;
+                })
             )
             .optional(),
         })

apps/web/public/static/locales/en/common.json

@@ -1222,6 +1222,7 @@
   "organizer_name_variable": "Organizer name",
   "app_upgrade_description": "In order to use this feature, you need to upgrade to a Pro account.",
   "invalid_number": "Invalid phone number",
+  "invalid_url_error_message": "Invalid URL for {{label}}. Sample URL: {{sampleUrl}}",
   "navigate": "Navigate",
   "open": "Open",
   "close": "Close",