Merge pull request #475 from masslight/aykhan/number-prefix

Sample visits phone number input refactor
masslight · Oct 10, 2024 · 6fb5ab2 · 6fb5ab2
2 parents 70daaf9 + 3cd681a
commit 6fb5ab2
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 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
@@ -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
@@ -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',