From 7d6a6bf8125dd65d296a691aab799bbeff7965b7 Mon Sep 17 00:00:00 2001
From: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com>
Date: Wed, 6 Jul 2022 15:01:16 -0400
Subject: [PATCH] add error message for invalid phone number (#3249)

Co-authored-by: CarinaWolli <wollencarina@gmail.com>
---
 apps/web/components/booking/pages/BookingPage.tsx | 11 +++++++++++
 apps/web/components/dialog/EditLocationDialog.tsx |  2 +-
 apps/web/public/static/locales/en/common.json     |  5 +++--
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx
index 8c793e3426..0f9eb6110f 100644
--- a/apps/web/components/booking/pages/BookingPage.tsx
+++ b/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
diff --git a/apps/web/components/dialog/EditLocationDialog.tsx b/apps/web/components/dialog/EditLocationDialog.tsx
index 3f10d90fcd..e771f4d27b 100644
--- a/apps/web/components/dialog/EditLocationDialog.tsx
+++ b/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>
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index 8b4a529f14..46fbd44772 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/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"
 }