From 3cd681a048ce855ff6ae2151304ad99907bb2983 Mon Sep 17 00:00:00 2001
From: aykhanahmadli <botl12020@gmail.com>
Date: Tue, 8 Oct 2024 22:48:26 +0200
Subject: [PATCH] fix number formatting for a better ux

---
 .../src/helpers/create-sample-appointments.ts |  2 -
 .../tracking-board/CreateDemoVisits.tsx       | 39 ++++++++++++-------
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/packages/telemed-ehr/app/src/helpers/create-sample-appointments.ts b/packages/telemed-ehr/app/src/helpers/create-sample-appointments.ts
index 17498ccb..55a25995 100644
--- a/packages/telemed-ehr/app/src/helpers/create-sample-appointments.ts
+++ b/packages/telemed-ehr/app/src/helpers/create-sample-appointments.ts
@@ -113,8 +113,6 @@ const generateRandomPatientInfo = async (
   const randomLocationIndex = Math.floor(Math.random() * availableLocations.length);
   const randomLocationId = availableLocations[randomLocationIndex].id;
   const randomProviderId = practitionersTemp[Math.floor(Math.random() * practitionersTemp.length)].id;
-  console.log('availableLocations', availableLocations);
-  console.log('randomLocationId', randomLocationId);
 
   const selectedLocationID = localStorage.getItem('selectedLocationID');
 
diff --git a/packages/telemed-ehr/app/src/telemed/features/tracking-board/CreateDemoVisits.tsx b/packages/telemed-ehr/app/src/telemed/features/tracking-board/CreateDemoVisits.tsx
index fb950ee5..8a1b12b9 100644
--- a/packages/telemed-ehr/app/src/telemed/features/tracking-board/CreateDemoVisits.tsx
+++ b/packages/telemed-ehr/app/src/telemed/features/tracking-board/CreateDemoVisits.tsx
@@ -25,35 +25,50 @@ const CreateDemoVisits = (): ReactElement => {
   const { fhirClient } = useApiClients();
   const { getAccessTokenSilently } = useAuth0();
 
-  const handleCreateSampleAppointments = async (phoneNumber: string): Promise<void> => {
-    if (!phoneNumber || phoneNumber.length !== 12 || !phoneNumber.startsWith('+1')) {
+  const handleCreateSampleAppointments = async (
+    event: React.MouseEvent<HTMLButtonElement> | React.FormEvent<HTMLFormElement>,
+  ): Promise<void> => {
+    event.preventDefault();
+    const formattedPhoneNumber = formatPhoneNumber(phoneNumber);
+    if (!formattedPhoneNumber) {
       setInputError(true);
       return;
+    } else {
+      setInputError(false);
     }
     try {
       setLoading(true);
       setInputError(false);
       const authToken = await getAccessTokenSilently();
-      const formattedPhoneNumber = phoneNumber.slice(2);
       const response = await createSampleAppointments(fhirClient, authToken, formattedPhoneNumber);
-      console.log('response', response);
       setSnackbar({
         open: true,
         message: 'Appointments created successfully!',
         severity: 'success',
       });
     } catch (error) {
-      console.error('Error creating appointments:', error);
       setSnackbar({
         open: true,
-        message: 'Failed to create appointments. Please try again.',
+        message: 'Error creating appointments',
         severity: 'error',
       });
+      console.error(error);
     } finally {
       setLoading(false);
     }
   };
 
+  const formatPhoneNumber = (phone: string): string | null => {
+    const digitsOnly = phone.replace(/\D/g, '');
+
+    if (digitsOnly.length === 10) {
+      return digitsOnly;
+    } else if (digitsOnly.length === 11 && digitsOnly.startsWith('1')) {
+      return digitsOnly.slice(1);
+    }
+    return null;
+  };
+
   const handleCloseSnackbar = (event?: React.SyntheticEvent | Event, reason?: string): void => {
     if (reason === 'clickaway') {
       return;
@@ -62,10 +77,8 @@ const CreateDemoVisits = (): ReactElement => {
   };
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
-    setPhoneNumber(e.target.value);
-    if (e.target.value.length === 12 && e.target.value.startsWith('+1')) {
-      setInputError(false);
-    }
+    const input = e.target.value;
+    setPhoneNumber(input);
   };
 
   return (
@@ -94,7 +107,6 @@ const CreateDemoVisits = (): ReactElement => {
           label="Phone Number"
           value={phoneNumber}
           onChange={handleChange}
-          placeholder="+1"
           size="small"
           sx={{
             flexGrow: 1,
@@ -109,12 +121,13 @@ const CreateDemoVisits = (): ReactElement => {
           }}
           required
           error={inputError}
-          helperText={inputError ? 'Please enter a valid phone number in the format +12345678900' : ''}
+          helperText={inputError ? 'Please enter a valid phone number' : ''}
         />
         <LoadingButton
           loading={loading}
-          onClick={() => handleCreateSampleAppointments(phoneNumber)}
+          onClick={handleCreateSampleAppointments}
           size="small"
+          type="submit"
           sx={{
             borderRadius: 10,
             border: '1px solid #2169F5',