From 23f5e0393b23521d7893a19cee889d76fa9d479f Mon Sep 17 00:00:00 2001
From: Udit Takkar <udit222001@gmail.com>
Date: Mon, 30 Oct 2023 20:48:07 +0530
Subject: [PATCH] fix: improve error message

---
 .../components/eventtype/EventSetupTab.tsx    | 67 ++++++++-----------
 apps/web/pages/event-types/[type]/index.tsx   | 40 +++++++++++
 2 files changed, 68 insertions(+), 39 deletions(-)

diff --git a/apps/web/components/eventtype/EventSetupTab.tsx b/apps/web/components/eventtype/EventSetupTab.tsx
index 754f060868..67e8fde94b 100644
--- a/apps/web/components/eventtype/EventSetupTab.tsx
+++ b/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,15 @@ 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}`}
+                  type="text"
+                  required
+                  onChange={onChange}
+                  value={value}
+                  className="my-0"
+                  {...rest}
+                />
               );
             }}
           />
@@ -231,21 +222,13 @@ 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
+                  name={`locations[${index}].${eventLocationType.defaultValueVariable}`}
+                  value={value}
+                  onChange={onChange}
+                  {...rest}
+                />
               );
             }}
           />
@@ -320,11 +303,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 +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
diff --git a/apps/web/pages/event-types/[type]/index.tsx b/apps/web/pages/event-types/[type]/index.tsx
index 88786db31c..f2f22d1eee 100644
--- a/apps/web/pages/event-types/[type]/index.tsx
+++ b/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(),
         })