add error message for invalid phone number (#3249)

Co-authored-by: CarinaWolli <wollencarina@gmail.com>

apps/web/components/booking/pages/BookingPage.tsx

@@ -11,6 +11,7 @@ import {
 import { zodResolver } from "@hookform/resolvers/zod";
 import { EventTypeCustomInputType } from "@prisma/client";
 import { useContracts } from "contexts/contractsContext";
+import { isValidPhoneNumber } from "libphonenumber-js";
 import { useSession } from "next-auth/react";
 import dynamic from "next/dynamic";
 import Head from "next/head";
@@ -278,6 +279,10 @@ const BookingPage = ({
     .object({
       name: z.string().min(1),
       email: z.string().email(),
+      phone: z
+        .string()
+        .refine((val) => isValidPhoneNumber(val))
+        .optional(),
     })
     .passthrough();
 
@@ -656,6 +661,12 @@ const BookingPage = ({
                           disabled={disableInput}
                         />
                       </div>
+                      {bookingForm.formState.errors.phone && (
+                        <div className="mt-2 flex items-center text-sm text-red-700 ">
+                          <ExclamationCircleIcon className="mr-2 h-3 w-3" />
+                          <p>{t("invalid_number")}</p>
+                        </div>
+                      )}
                     </div>
                   )}
                   {eventType.customInputs

apps/web/components/dialog/EditLocationDialog.tsx

@@ -228,7 +228,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
             }
           />
           {locationFormMethods.formState.errors.locationPhoneNumber && (
-            <p className="mt-1 text-sm text-red-500">Invalid input</p>
+            <p className="mt-1 text-sm text-red-500">{t("invalid_number")}</p>
           )}
         </div>
       </div>

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

@@ -919,11 +919,12 @@
   "specific_issue": "Have a specific issue",
   "browse_our_docs": "browse our docs",
   "broken_video_action": "We could not add the <1>{{location}}</1> meeting link to your scheduled event. Contact your invitees or update your calendar event to add the details. You can either <3> change your location on the event type </3> or try <5>removing and adding the app again.</5>",
-  "broken_calendar_action": "We could not update your <1>{{calendar}}</1>. <2> Please check your calendar settings or remove and add your calendar again </2>", 
+  "broken_calendar_action": "We could not update your <1>{{calendar}}</1>. <2> Please check your calendar settings or remove and add your calendar again </2>",
   "attendee_name": "Attendee's name",
   "broken_integration": "Broken integration",
   "problem_adding_video_link": "There was a problem adding a video link",
   "problem_updating_calendar": "There was a problem updating your calendar",
   "new_seat_subject": "New Attendee {{name}} on {{eventType}} at {{date}}",
-  "new_seat_title": "Someone has added themselves to an event"
+  "new_seat_title": "Someone has added themselves to an event",
+  "invalid_number": "Invalid phone number"
 }