1143 lines
36 KiB
JavaScript
1143 lines
36 KiB
JavaScript
import SendIcon from "@mui/icons-material/Send";
|
|
import Box from "@mui/material/Box";
|
|
import Button from "@mui/material/Button";
|
|
import FormControl from "@mui/material/FormControl";
|
|
import Grid from "@mui/material/Grid";
|
|
import InputLabel from "@mui/material/InputLabel";
|
|
import * as React from "react";
|
|
import { pushNotification } from "../../utils/notification";
|
|
import { NOTIFICATION_TYPE } from "../Notifications/notificationConstant";
|
|
import {
|
|
Dialog,
|
|
DialogActions,
|
|
DialogContent,
|
|
DialogContentText,
|
|
DialogTitle,
|
|
InputAdornment,
|
|
MenuItem,
|
|
Paper,
|
|
Select,
|
|
Step,
|
|
StepLabel,
|
|
Stepper,
|
|
TextField,
|
|
Typography,
|
|
} from "@mui/material";
|
|
import WarningAmberIcon from "@mui/icons-material/WarningAmber";
|
|
import {
|
|
CLINIC_GREETINGS_LENGTH,
|
|
CLINIC_SCENARIOS_LENGTH,
|
|
NOTIFICATION,
|
|
} from "../../constants";
|
|
import { useSelector } from "react-redux";
|
|
import { getClinicsById, updateClinic } from "../../services/clinics.service";
|
|
import { useStyles } from "./clinicSetupStyles";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
// Integration software options
|
|
const integrationOptions = [
|
|
{
|
|
id: "bp",
|
|
name: "BP Software",
|
|
},
|
|
{
|
|
id: "medicaldirector",
|
|
name: "Medical Director",
|
|
},
|
|
];
|
|
|
|
// Steps for the stepper
|
|
const steps = [
|
|
"General Information",
|
|
"AI Receptionist Setup",
|
|
"Scenarios Setup",
|
|
"General Info Setup",
|
|
"Integration Settings",
|
|
];
|
|
|
|
const voiceModels = [
|
|
{ id: "stream", name: "Stream", gender: "female" },
|
|
{ id: "sandy", name: "Sandy", gender: "female" },
|
|
{ id: "breeze", name: "Breeze", gender: "female" },
|
|
{ id: "wolf", name: "Wolf", gender: "male" },
|
|
{ id: "stan", name: "Sten", gender: "male" },
|
|
{ id: "blaze", name: "Blaze", gender: "male" },
|
|
];
|
|
|
|
const voiceModelGender = [
|
|
{ id: "male", name: "Male" },
|
|
{ id: "female", name: "Female" },
|
|
];
|
|
|
|
export default function ClinicSetup() {
|
|
const classes = useStyles();
|
|
|
|
// Active step state
|
|
const [activeStep, setActiveStep] = React.useState(0);
|
|
const [openDialog, setOpenDialog] = React.useState(false);
|
|
const [audioContext, setAudioContext] = React.useState(null);
|
|
const [testConnDone, setTestConnDone] = React.useState(true);
|
|
const [confirmPhoneNumber, setConfirmPhoneNumber] = React.useState(true);
|
|
const [audioListenDone, setAudioListenDone] = React.useState(true);
|
|
const navigate = useNavigate();
|
|
|
|
const user = useSelector((state) => state.login.user);
|
|
const clinic = user?.created_clinics[0];
|
|
|
|
if (!clinic) {
|
|
pushNotification("Clinic not found!", NOTIFICATION.ERROR);
|
|
return;
|
|
}
|
|
|
|
// Completed steps state
|
|
const [completed, setCompleted] = React.useState({});
|
|
|
|
// Form state
|
|
const [formData, setFormData] = React.useState({
|
|
// General Information
|
|
clinicId: clinic?.id,
|
|
clinicPhone: "",
|
|
clinicPonePrefix: "+61",
|
|
clinicAddress: "1 Wilkinson Road, Para Hills SA 5096",
|
|
otherInfo: "",
|
|
|
|
// Greetings Setup
|
|
clinicGreetings:
|
|
"Welcome to 365 days medical center group, para hills clinic. We are here to help you.",
|
|
clinicScenarios: `Booking for care plan /Care plan Review
|
|
Existing patients- Book with regular GP and Nurse on same day ( if not possible book different day, F2F with nurse for care plan and another days F2F consultation with Dr to sign of care plan )
|
|
New patients- At the moment we are not taking New patients on long term care but tell them they can see GP and can discuss with GP before booking for care plan .
|
|
Need to tell thee is not gap when booking for care plan and care plan review
|
|
|
|
Booking for MHCP/MHCP review
|
|
Do you have a Medicare card?
|
|
If No -Pt who do not have a Medicare card / Private patients with or without Insurance can have MHCP/MHCP review but have to pay if full and need to check with their insurance if they get back any amount. Need to tell Dressing fee ............but need toTell them to Visit the Patient Info tab at 365daysmedicalcentre.com.au to view our billing policy
|
|
`,
|
|
clinicOthers: `# Wellness Way Medical Centre
|
|
|
|
## Contact Information
|
|
**Address**: 83 Kesters Road, Para Hills, SA 5096, Australia
|
|
**Website**: www.wellnesswaymedical.com.au
|
|
|
|
## Accessibility Information
|
|
**Parking Facility**: On-site parking available with 20 general spaces and 4 dedicated accessible parking spots. First 2 hours free with validation, $3/hour thereafter.
|
|
|
|
**Wheelchair Accessibility**: Fully wheelchair accessible facility with ramps at all entrances, automatic doors, accessible toilets on each floor, and elevators to all levels. Wheelchairs available for patient use upon request at reception.
|
|
|
|
**Baby Care Facilities**: Dedicated parents' room located on Level 1 next to the pediatric wing, equipped with:
|
|
- Private feeding area with comfortable chairs
|
|
- Changing tables
|
|
- Bottle warming facilities
|
|
- Microwave
|
|
- Small play area for siblings
|
|
|
|
## Transportation
|
|
**Nearby Public Transport**:
|
|
- Bus: Routes 208, 209, and 580 stop directly outside (Para Hills Shopping Centre stop)
|
|
- Train: Parafield Station (3.2km away) with connecting buses
|
|
- O-Bahn Busway: Klemzig Interchange (7km) with connecting services
|
|
|
|
**Taxi/Rideshare Information**:
|
|
- Dedicated pickup/dropoff zone at main entrance
|
|
- Rideshare pickup point clearly marked with signage
|
|
- Reception can call taxis for patients upon request
|
|
|
|
## Hours of Operation
|
|
**Regular Hours**:
|
|
- Monday to Friday: 7:00 AM - 7:00 PM
|
|
- Saturday: 8:00 AM - 4:00 PM
|
|
- Sunday: 9:00 AM - 2:00 PM
|
|
|
|
**Holiday Schedule**:
|
|
- New Year's Day: 10:00 AM - 2:00 PM
|
|
- Australia Day: 10:00 AM - 2:00 PM
|
|
- Good Friday: Closed
|
|
- Easter Monday: 10:00 AM - 2:00 PM
|
|
- Anzac Day: 1:00 PM - 5:00 PM
|
|
- Queen's Birthday: 10:00 AM - 2:00 PM
|
|
- Labour Day: 10:00 AM - 2:00 PM
|
|
- Christmas Eve: 8:00 AM - 1:00 PM
|
|
- Christmas Day: Closed
|
|
- Boxing Day: 10:00 AM - 2:00 PM
|
|
- New Year's Eve: 8:00 AM - 1:00 PM
|
|
|
|
## Amenities
|
|
**Wi-Fi Availability**:
|
|
- Free Wi-Fi available throughout the facility
|
|
- Ask front desk for Wifi details
|
|
- Usage limit: 2GB per device per day
|
|
|
|
## Policies
|
|
**Pet Policy**:
|
|
- Service animals welcome throughout the facility
|
|
- Therapy animals permitted with prior arrangement
|
|
- Pet-friendly outdoor waiting area in courtyard garden
|
|
- Other pets must remain outside the building except for veterinary consultations (available Tuesdays and Thursdays)`,
|
|
|
|
// Integration Settings
|
|
integrationSoftware: "",
|
|
practiceId: "",
|
|
practiceName: "",
|
|
|
|
// Voice Configuration
|
|
voice: "",
|
|
voiceGender: voiceModelGender[1].id,
|
|
voice_model_provider: "rime",
|
|
});
|
|
|
|
const [prevFormData, setPrevFormData] = React.useState({
|
|
...formData,
|
|
});
|
|
|
|
const mobilePrefixOptions = [
|
|
{ id: "61", name: "+61" },
|
|
{ id: "91", name: "+91" },
|
|
];
|
|
|
|
const parsePhoneNumber = (phoneString) => {
|
|
// Split by space
|
|
const parts = phoneString.split(" ");
|
|
|
|
if (parts.length !== 2) {
|
|
return {
|
|
countryCode: null,
|
|
number: null,
|
|
error: "Phone number must contain exactly one space",
|
|
};
|
|
}
|
|
|
|
const countryCode = parts[0].replace("+", ""); // Everything before space (includes +)
|
|
const number = parts[1]; // Everything after space
|
|
|
|
return {
|
|
countryCode,
|
|
number,
|
|
};
|
|
};
|
|
|
|
const getClinic = async () => {
|
|
const resp = await getClinicsById(clinic.id);
|
|
|
|
if (resp?.data?.error) {
|
|
pushNotification(resp?.data?.message, NOTIFICATION.ERROR);
|
|
return;
|
|
}
|
|
const clinicResp = resp?.data?.data?.clinic;
|
|
const { countryCode, number } = parsePhoneNumber(clinicResp?.phone);
|
|
setFormData({
|
|
...formData,
|
|
clinicPhone: number,
|
|
clinicPonePrefix: countryCode,
|
|
clinicAddress: clinicResp?.address,
|
|
clinicOthers: clinicResp?.general_info ?? "",
|
|
otherInfo: clinicResp?.other_info ?? "",
|
|
clinicGreetings: clinicResp?.greeting_msg ?? "",
|
|
clinicScenarios: clinicResp?.scenarios ?? "",
|
|
integrationSoftware: clinicResp?.integration,
|
|
practiceId: clinicResp?.pms_id,
|
|
practiceName: clinicResp?.practice_name,
|
|
voice: clinicResp?.voice_model ?? formData.voice,
|
|
voiceGender: clinicResp?.voice_model_gender ?? formData.voiceGender,
|
|
voice_model_provider: clinicResp?.voice_model_provider,
|
|
});
|
|
setPrevFormData({
|
|
...formData,
|
|
});
|
|
};
|
|
|
|
React.useEffect(() => {
|
|
getClinic();
|
|
}, []);
|
|
|
|
// Handle form reset
|
|
const handleReset = () => {
|
|
setActiveStep(0);
|
|
setCompleted({});
|
|
// reset form data to initial state
|
|
setFormData(
|
|
Object.keys(formData).reduce((acc, key) => {
|
|
acc[key] = "";
|
|
return acc;
|
|
}, {})
|
|
);
|
|
};
|
|
|
|
const handleConfirmPhoneNumber = () => {
|
|
setConfirmPhoneNumber(true);
|
|
};
|
|
|
|
React.useEffect(() => {
|
|
// Initialize audio context when component mounts
|
|
function initAudioContext() {
|
|
if (!window.AudioContext && window.webkitAudioContext) {
|
|
window.AudioContext = window.webkitAudioContext;
|
|
}
|
|
|
|
if (!window.AudioContext) {
|
|
pushNotification(
|
|
"Your browser does not support AudioContext and cannot play back audio.",
|
|
"error"
|
|
);
|
|
return null;
|
|
}
|
|
|
|
return new AudioContext();
|
|
}
|
|
|
|
const context = initAudioContext();
|
|
setAudioContext(context);
|
|
|
|
// initialize voice model
|
|
formData.voiceGender = voiceModelGender[0].id;
|
|
|
|
// Cleanup function
|
|
return () => {
|
|
if (context && context.state !== "closed") {
|
|
context.close();
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
// Calculate total steps
|
|
const totalSteps = () => steps.length;
|
|
|
|
// Calculate completed steps
|
|
const completedSteps = () => Object.keys(completed).length;
|
|
|
|
// Check if all steps completed
|
|
const allStepsCompleted = () => completedSteps() === totalSteps();
|
|
|
|
// Check if current step is the last step
|
|
const isLastStep = () => activeStep === totalSteps() - 1;
|
|
|
|
// Handle next button click
|
|
const handleNext = () => {
|
|
if (
|
|
prevFormData.clinicPhone !== formData.clinicPhone &&
|
|
!confirmPhoneNumber
|
|
) {
|
|
pushNotification("Please confirm phone number", "error");
|
|
return;
|
|
}
|
|
|
|
if (!confirmPhoneNumber) {
|
|
pushNotification("Please confirm phone number", "error");
|
|
return;
|
|
}
|
|
|
|
if (activeStep == 1) {
|
|
if (!audioListenDone) {
|
|
pushNotification(
|
|
"Please listen to the audio before proceeding",
|
|
"error"
|
|
);
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Only move to next step without marking as completed
|
|
if (!isLastStep()) {
|
|
setActiveStep(activeStep + 1);
|
|
} else if (!allStepsCompleted()) {
|
|
// If it's the last step and not all steps are completed,
|
|
// find the first uncompleted step
|
|
const firstUncompletedStep = steps.findIndex((step, i) => !(i in completed));
|
|
setActiveStep(firstUncompletedStep);
|
|
}
|
|
};
|
|
|
|
// Listen to voice using rime.ai API
|
|
const listenVoice = () => {
|
|
if (!audioContext) {
|
|
pushNotification("Audio context not initialized", "error");
|
|
return;
|
|
}
|
|
|
|
if (!formData.clinicGreetings || formData.clinicGreetings.length === 0) {
|
|
pushNotification(
|
|
"Please enter clinic greetings to listen preview",
|
|
"error"
|
|
);
|
|
return;
|
|
}
|
|
|
|
const options = {
|
|
method: "POST",
|
|
headers: {
|
|
Accept: "audio/mp3",
|
|
Authorization: "Bearer OFhm3M8ZJKhooRPbm_eoQoUAVDmWGO_9SwdU7mXuvYU",
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
speaker: formData.voice || "wolf",
|
|
text: formData.clinicGreetings,
|
|
modelId: "mist",
|
|
lang: "eng",
|
|
samplingRate: 22050,
|
|
speedAlpha: 1.0,
|
|
reduceLatency: false,
|
|
}),
|
|
};
|
|
|
|
// Show loading state
|
|
pushNotification("Generating audio...", "info");
|
|
|
|
fetch("https://users.rime.ai/v1/rime-tts", options)
|
|
.then((response) => {
|
|
// Check if the response is successful
|
|
if (!response.ok) {
|
|
throw new Error(`API responded with status ${response.status}`);
|
|
}
|
|
// Get the response as an ArrayBuffer instead of text
|
|
return response.arrayBuffer();
|
|
})
|
|
.then((arrayBuffer) => {
|
|
// Decode the audio data
|
|
audioContext.decodeAudioData(
|
|
arrayBuffer,
|
|
(buffer) => playAudioBuffer(buffer, audioContext),
|
|
(error) => {
|
|
pushNotification("Failed to decode audio data", "error");
|
|
}
|
|
);
|
|
})
|
|
.then(() => {
|
|
setAudioListenDone(true);
|
|
})
|
|
.catch((err) => {
|
|
pushNotification(`Error: ${err.message}`, "error");
|
|
});
|
|
};
|
|
|
|
// Play decoded audio buffer
|
|
function playAudioBuffer(audioBuffer, context) {
|
|
// Create a source node
|
|
const source = context.createBufferSource();
|
|
source.buffer = audioBuffer;
|
|
|
|
// Connect to the audio context destination (speakers)
|
|
source.connect(context.destination);
|
|
|
|
// Play the audio
|
|
source.start(0);
|
|
|
|
// Notify user
|
|
pushNotification("Playing audio...", "success");
|
|
}
|
|
|
|
// Handle back button click
|
|
const handleBack = () => {
|
|
setActiveStep((prevActiveStep) => prevActiveStep - 1);
|
|
};
|
|
|
|
// Handle step click
|
|
const handleStep = (step) => () => {
|
|
// First check if phone number is confirmed for any step navigation
|
|
if (!confirmPhoneNumber) {
|
|
pushNotification(
|
|
"Please confirm phone number before navigating between steps",
|
|
"error"
|
|
);
|
|
return;
|
|
}
|
|
|
|
// if voice model or voice gender is changed then must listen first
|
|
if (activeStep == 1) {
|
|
if (!audioListenDone) {
|
|
pushNotification(
|
|
"Please listen to the audio before proceeding",
|
|
"error"
|
|
);
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Then check if the step is completed
|
|
if (completed[step]) {
|
|
setActiveStep(step);
|
|
} else {
|
|
// Alert user about validation errors
|
|
pushNotification(
|
|
"Please complete the current step before proceeding",
|
|
"error"
|
|
);
|
|
}
|
|
};
|
|
|
|
// test connection
|
|
const handleTestConnection = () => {
|
|
// logic here
|
|
setTestConnDone(true);
|
|
pushNotification("Test connection successful", "success");
|
|
};
|
|
|
|
// Form validation state
|
|
const [errors, setErrors] = React.useState({
|
|
clinicPhone: false,
|
|
clinicAddress: false,
|
|
});
|
|
|
|
// Validate the current step
|
|
const validateStep = () => {
|
|
switch (activeStep) {
|
|
case 0: // General Information
|
|
// eslint-disable-next-line no-case-declarations
|
|
// const stepErrors = {
|
|
// clinicPhone: formData.clinicPhone.trim() === '',
|
|
// clinicAddress: formData.clinicAddress.trim() === '',
|
|
// };
|
|
|
|
// setErrors(stepErrors);
|
|
// return !Object.values(stepErrors).some((isError) => isError);
|
|
return true;
|
|
|
|
case 1: // Clinic Timings
|
|
// No required fields in this step
|
|
return true;
|
|
|
|
case 2: // Greetings Setup
|
|
// No required fields in this step
|
|
return true;
|
|
|
|
case 3: // Integration Settings
|
|
// Validate only if software is selected
|
|
if (formData.integrationSoftware) {
|
|
const integrationErrors = {
|
|
practiceId: formData.practiceId.trim() === "",
|
|
practiceName: formData.practiceName.trim() === "",
|
|
};
|
|
setErrors(integrationErrors);
|
|
return !Object.values(integrationErrors).some((isError) => isError);
|
|
}
|
|
return true;
|
|
|
|
default:
|
|
return true;
|
|
}
|
|
};
|
|
|
|
// Handle complete step
|
|
const handleComplete = () => {
|
|
if (activeStep == 4 && !testConnDone) {
|
|
pushNotification("Please test connection before proceeding", NOTIFICATION.ERROR);
|
|
return;
|
|
}
|
|
|
|
// Mark current step as completed
|
|
const newCompleted = { ...completed };
|
|
newCompleted[activeStep] = true;
|
|
setCompleted(newCompleted);
|
|
|
|
// Move to next step or first uncompleted step
|
|
if (!isLastStep()) {
|
|
setActiveStep(activeStep + 1);
|
|
} else if (!allStepsCompleted()) {
|
|
const firstUncompletedStep = steps.findIndex((step, i) => !(i in newCompleted));
|
|
setActiveStep(firstUncompletedStep);
|
|
} else {
|
|
// All steps completed
|
|
setActiveStep(steps.length);
|
|
}
|
|
};
|
|
|
|
// Handle simple input changes
|
|
const handleChange = (e) => {
|
|
const { name, value } = e.target;
|
|
|
|
if (name === "clinicPhone" && value != formData.clinicPhone) {
|
|
setConfirmPhoneNumber(false);
|
|
}
|
|
|
|
if (name === "voice" || name === "voiceGender") {
|
|
setAudioListenDone(false);
|
|
}
|
|
|
|
if (name === "integrationSoftware" || name === "practiceId" || name === "practiceName") {
|
|
setTestConnDone(false);
|
|
}
|
|
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
[name]: value,
|
|
}));
|
|
|
|
// Clear error for this field if it exists
|
|
if (errors[name]) {
|
|
setErrors((prev) => ({
|
|
...prev,
|
|
[name]: false,
|
|
}));
|
|
}
|
|
};
|
|
|
|
// Handle timing changes
|
|
const handleTimingChange = (timingType, day, timeType, value) => {
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
[timingType]: {
|
|
...prev[timingType],
|
|
[day]: {
|
|
...prev[timingType][day],
|
|
[timeType]: value,
|
|
},
|
|
},
|
|
}));
|
|
};
|
|
|
|
// Validate the entire form
|
|
const validateForm = () => {
|
|
// Check all steps
|
|
const generalInfoValid =
|
|
formData.clinicPhone.trim() !== "" &&
|
|
formData.clinicAddress.trim() !== "";
|
|
|
|
let integrationValid = true;
|
|
if (formData.integrationSoftware) {
|
|
integrationValid =
|
|
formData.practiceId.trim() !== "" &&
|
|
formData.practiceName.trim() !== "";
|
|
}
|
|
|
|
return generalInfoValid && integrationValid;
|
|
};
|
|
|
|
// Handle form submission
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
const payload = {
|
|
clinicId: formData.clinicId,
|
|
phone: `${formData.clinicPonePrefix} ${formData.clinicPhone}`,
|
|
address: formData.clinicAddress,
|
|
other_info: formData.otherInfo,
|
|
general_info: formData.clinicOthers,
|
|
greeting_msg: formData.clinicGreetings,
|
|
scenarios: formData.clinicScenarios,
|
|
integration: formData.integrationSoftware,
|
|
pms_id: formData.practiceId,
|
|
practice_name: formData.practiceName,
|
|
voice_model: formData.voice,
|
|
voice_model_gender: formData.voiceGender,
|
|
voice_model_provider:"rime"
|
|
};
|
|
if (validateForm()) {
|
|
const resp = await updateClinic(formData.clinicId, payload);
|
|
if(resp?.data?.error){
|
|
pushNotification(resp?.data?.message, NOTIFICATION.ERROR);
|
|
return;
|
|
}
|
|
// Here you would typically send the data to your backend
|
|
pushNotification("Clinic setup updated successfully", "success");
|
|
// Reset the form state manually
|
|
setActiveStep(0);
|
|
setCompleted({});
|
|
setConfirmPhoneNumber(true);
|
|
setTestConnDone(true);
|
|
setAudioListenDone(true);
|
|
|
|
// Refetch the clinic data to get the latest state
|
|
await getClinic();
|
|
}
|
|
};
|
|
|
|
// Render the current step content
|
|
const renderStepContent = (step) => {
|
|
switch (step) {
|
|
case 0: // General Information
|
|
return (
|
|
<Grid container spacing={3}>
|
|
<Grid
|
|
item
|
|
xs={12}
|
|
md={10}
|
|
alignItems="baseline"
|
|
flexDirection="row"
|
|
display="flex"
|
|
>
|
|
<TextField
|
|
className={classes.mobileNumberInput}
|
|
type="string"
|
|
style={{ width: "40%" }}
|
|
name="clinicPhone"
|
|
value={formData.clinicPhone}
|
|
onChange={(e) => {
|
|
if (e.target.value.length <= 10) {
|
|
const value = e.target.value?.match(/\d+/g) || "";
|
|
handleChange(e);
|
|
}
|
|
}}
|
|
helperText={
|
|
errors.clinicPhone
|
|
? "Phone number is required"
|
|
: "Unique single number for your clinic"
|
|
}
|
|
variant="outlined"
|
|
error={errors.clinicPhone}
|
|
InputProps={{
|
|
startAdornment: (
|
|
<Box sx={{ padding: "1px" }}>
|
|
<InputAdornment position="start">
|
|
<Select
|
|
name="clinicPonePrefix"
|
|
value={formData.clinicPonePrefix}
|
|
onChange={(e) => {
|
|
setFormData({
|
|
...formData,
|
|
clinicPonePrefix: e.target.value,
|
|
});
|
|
}}
|
|
>
|
|
{mobilePrefixOptions.map((option) => (
|
|
<MenuItem
|
|
sx={{
|
|
outline: "none",
|
|
border: "none",
|
|
}}
|
|
key={option.id}
|
|
value={option.id}
|
|
>
|
|
{option.name}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</InputAdornment>
|
|
</Box>
|
|
),
|
|
}}
|
|
/>
|
|
<Button
|
|
style={{ marginLeft: "10px" }}
|
|
variant="contained"
|
|
color="primary"
|
|
startIcon={<SendIcon />}
|
|
onClick={handleConfirmPhoneNumber}
|
|
>
|
|
Confirm
|
|
</Button>
|
|
<>
|
|
<Button
|
|
style={{ marginLeft: "10px" }}
|
|
variant="outlined"
|
|
color="error"
|
|
startIcon={<WarningAmberIcon />}
|
|
onClick={() => setOpenDialog(true)}
|
|
>
|
|
Disable 24x7 AI Receptionist
|
|
</Button>
|
|
<Dialog
|
|
open={openDialog}
|
|
onClose={() => setOpenDialog(false)}
|
|
aria-labelledby="alert-dialog-title"
|
|
aria-describedby="alert-dialog-description"
|
|
>
|
|
<DialogTitle id="alert-dialog-title">
|
|
{"Confirm Disable AI Receptionist"}
|
|
</DialogTitle>
|
|
<DialogContent>
|
|
<DialogContentText id="alert-dialog-description">
|
|
Warning: This action will disable the 24x7 AI Receptionist
|
|
service for your clinic. This may affect your clinic's
|
|
ability to handle after-hours calls and appointments. You
|
|
have to manually disable the call forwarding from this
|
|
number. Are you sure you want to proceed?
|
|
</DialogContentText>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button
|
|
onClick={() => setOpenDialog(false)}
|
|
color="primary"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
onClick={() => {
|
|
pushNotification(
|
|
"AI Receptionist disabled successfully",
|
|
NOTIFICATION_TYPE.SUCCESS
|
|
);
|
|
setOpenDialog(false);
|
|
}}
|
|
color="error"
|
|
autoFocus
|
|
>
|
|
Yes, Disable AI Receptionist
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
</>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<TextField
|
|
fullWidth
|
|
label="Clinic Address"
|
|
name="clinicAddress"
|
|
value={formData.clinicAddress}
|
|
onChange={handleChange}
|
|
multiline
|
|
rows={3}
|
|
variant="outlined"
|
|
error={errors.clinicAddress}
|
|
helperText={
|
|
errors.clinicAddress ? "Clinic address is required" : ""
|
|
}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<TextField
|
|
fullWidth
|
|
label="Other Information"
|
|
name="otherInfo"
|
|
value={formData.otherInfo}
|
|
onChange={handleChange}
|
|
multiline
|
|
rows={2}
|
|
variant="outlined"
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
|
|
case 1: // Greetings Setup
|
|
return (
|
|
<>
|
|
<TextField
|
|
fullWidth
|
|
label="Clinic Greetings"
|
|
name="clinicGreetings"
|
|
value={formData.clinicGreetings}
|
|
onChange={handleChange}
|
|
multiline
|
|
rows={3}
|
|
variant="outlined"
|
|
helperText={`${formData.clinicGreetings.length}/${CLINIC_GREETINGS_LENGTH} characters`}
|
|
inputProps={{ maxLength: CLINIC_GREETINGS_LENGTH }}
|
|
/>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
maxWidth: "40%",
|
|
// marginTop: '10px',
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<Button
|
|
onClick={listenVoice}
|
|
variant="contained"
|
|
endIcon={<SendIcon />}
|
|
>
|
|
Listen & Confirm
|
|
</Button>
|
|
<FormControl>
|
|
<Select
|
|
id="voice-model-gender"
|
|
onChange={handleChange}
|
|
value={formData.voiceGender || voiceModelGender[0].id}
|
|
displayEmpty
|
|
name="voiceGender"
|
|
>
|
|
{voiceModelGender.map((model) => (
|
|
<MenuItem key={model.id} value={model.id}>
|
|
{model.name}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
{formData.voiceGender && (
|
|
<FormControl>
|
|
<Select
|
|
id="voice-model-id"
|
|
onChange={handleChange}
|
|
value={
|
|
formData.voice ||
|
|
(formData.voiceGender === "male"
|
|
? voiceModels.find((model) => model.gender === "male")
|
|
.id
|
|
: voiceModels.find((model) => model.gender === "female")
|
|
.id)
|
|
}
|
|
displayEmpty
|
|
name="voice"
|
|
>
|
|
{voiceModels
|
|
.filter((model) => model.gender === formData.voiceGender)
|
|
.map((model) => (
|
|
<MenuItem key={model.id} value={model.id}>
|
|
{model.name}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
|
|
case 2:
|
|
return (
|
|
<>
|
|
<TextField
|
|
style={{ marginTop: "10px" }}
|
|
fullWidth
|
|
label="Scenarios"
|
|
name="clinicScenarios"
|
|
value={formData.clinicScenarios}
|
|
onChange={handleChange}
|
|
multiline
|
|
rows={8}
|
|
helperText={`${formData.clinicScenarios.length}/${CLINIC_SCENARIOS_LENGTH} characters`}
|
|
variant="outlined"
|
|
inputProps={{ maxLength: CLINIC_SCENARIOS_LENGTH }}
|
|
/>
|
|
</>
|
|
);
|
|
|
|
case 3:
|
|
return (
|
|
<>
|
|
<TextField
|
|
style={{ marginTop: "10px" }}
|
|
fullWidth
|
|
label="General Info"
|
|
name="clinicOthers"
|
|
value={formData.clinicOthers}
|
|
onChange={handleChange}
|
|
multiline
|
|
rows={8}
|
|
variant="outlined"
|
|
helperText={`${formData.clinicOthers.length}/3000 characters`}
|
|
inputProps={{ maxLength: 3000 }}
|
|
/>
|
|
</>
|
|
);
|
|
|
|
case 4: // Integration Settings
|
|
return (
|
|
<Grid container spacing={3}>
|
|
{/* Error summary - show only if there are errors */}
|
|
{/* {Object.values(errors).some((error) => error) && (
|
|
<Grid item xs={12}>
|
|
<Box
|
|
sx={{
|
|
backgroundColor: '#fdeded',
|
|
color: '#5f2120',
|
|
p: 2,
|
|
borderRadius: 1,
|
|
mb: 2,
|
|
}}
|
|
>
|
|
<Typography variant="subtitle1" sx={{ fontWeight: 'medium' }}>
|
|
Please correct the following errors:
|
|
</Typography>
|
|
<ul style={{ margin: '8px 0', paddingLeft: '24px' }}>
|
|
{errors.practiceId && (
|
|
<li>
|
|
Practice ID is required when integration software is
|
|
selected
|
|
</li>
|
|
)}
|
|
{errors.practiceName && (
|
|
<li>
|
|
Practice Name is required when integration software is
|
|
selected
|
|
</li>
|
|
)}
|
|
</ul>
|
|
</Box>
|
|
</Grid>
|
|
)} */}
|
|
|
|
<Grid item xs={12} md={6}>
|
|
<FormControl fullWidth variant="outlined">
|
|
<InputLabel id="integration-software-label">
|
|
Integrate with
|
|
</InputLabel>
|
|
<Select
|
|
labelId="integration-software-label"
|
|
label="Integrate with"
|
|
name="integrationSoftware"
|
|
value={formData.integrationSoftware}
|
|
onChange={handleChange}
|
|
>
|
|
<MenuItem value="">
|
|
<em>None</em>
|
|
</MenuItem>
|
|
{integrationOptions.map((option) => (
|
|
<MenuItem key={option.id} value={option.id}>
|
|
{option.name}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
</Grid>
|
|
<Grid item xs={12} md={6}>
|
|
<TextField
|
|
fullWidth
|
|
label="PMS ID"
|
|
name="practiceId"
|
|
value={formData.practiceId}
|
|
onChange={handleChange}
|
|
variant="outlined"
|
|
disabled={!formData.integrationSoftware}
|
|
error={!!formData.integrationSoftware && errors.practiceId}
|
|
helperText={
|
|
!!formData.integrationSoftware && errors.practiceId
|
|
? "Practice ID is required"
|
|
: ""
|
|
}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<TextField
|
|
fullWidth
|
|
label="Practice Name"
|
|
name="practiceName"
|
|
value={formData.practiceName}
|
|
onChange={handleChange}
|
|
variant="outlined"
|
|
disabled={!formData.integrationSoftware}
|
|
error={!!formData.integrationSoftware && errors.practiceName}
|
|
helperText={
|
|
!!formData.integrationSoftware && errors.practiceName
|
|
? "Practice Name is required"
|
|
: ""
|
|
}
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
|
|
default:
|
|
return "Unknown step";
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Box component="form" onSubmit={handleSubmit} sx={{ width: "100%" }}>
|
|
<Paper elevation={0} sx={{ p: 2 }}>
|
|
<Typography
|
|
variant="h4"
|
|
component="h1"
|
|
sx={{ fontWeight: "bold", mb: 3 }}
|
|
>
|
|
Clinic Setup
|
|
</Typography>
|
|
|
|
{/* Stepper */}
|
|
<Stepper
|
|
activeStep={activeStep}
|
|
sx={{
|
|
mb: 4,
|
|
'& .Mui-completed': {
|
|
'& .MuiStepIcon-root': {
|
|
color: 'success.main',
|
|
},
|
|
'& .MuiStepLabel-label.Mui-completed': {
|
|
color: 'success.main',
|
|
fontWeight: 'bold',
|
|
},
|
|
},
|
|
'& .MuiStepIcon-active': {
|
|
color: 'primary.main',
|
|
},
|
|
'& .MuiStepIcon-completed': {
|
|
color: 'success.main',
|
|
},
|
|
}}
|
|
>
|
|
{steps.map((label, index) => {
|
|
const stepProps = {};
|
|
const labelProps = {};
|
|
// Determine if this step is clickable
|
|
const isClickable = confirmPhoneNumber && (completed[index] || index < activeStep);
|
|
// Only show as completed if explicitly marked as completed
|
|
const isStepCompleted = completed[index] === true;
|
|
|
|
return (
|
|
<Step key={label} {...stepProps} completed={isStepCompleted}>
|
|
<StepLabel
|
|
{...labelProps}
|
|
onClick={isClickable ? handleStep(index) : undefined}
|
|
sx={{
|
|
cursor: isClickable ? "pointer" : "not-allowed",
|
|
opacity: isClickable ? 1 : 0.7,
|
|
"& .MuiStepLabel-label": {
|
|
color: isClickable ? "text.primary" : "text.disabled",
|
|
},
|
|
}}
|
|
>
|
|
{label}
|
|
</StepLabel>
|
|
</Step>
|
|
);
|
|
})}
|
|
</Stepper>
|
|
|
|
{/* Step Content */}
|
|
<Box sx={{ mt: 2, mb: 2, minHeight: "300px" }}>
|
|
{allStepsCompleted() ? (
|
|
<React.Fragment>
|
|
<Typography sx={{ mt: 2, mb: 1 }}>
|
|
All steps completed - Setup is ready to be saved.
|
|
</Typography>
|
|
<Box sx={{ display: "flex", flexDirection: "row", pt: 2 }}>
|
|
<Box sx={{ flex: "1 1 auto" }} />
|
|
{/* <Button onClick={handleBack} sx={{ mr: 1 }} color="primary" variant="outlined">
|
|
Back
|
|
</Button> */}
|
|
<Button onClick={handleSubmit} variant="contained" color="primary" type="submit" disabled={activeStep == 4 && !testConnDone}>
|
|
Submit Setup
|
|
</Button>
|
|
</Box>
|
|
</React.Fragment>
|
|
) : (
|
|
<React.Fragment>
|
|
{renderStepContent(activeStep)}
|
|
|
|
{/* Navigation Buttons */}
|
|
<Box sx={{ display: "flex", flexDirection: "row", pt: 2, mt: 4 }}>
|
|
<Button
|
|
color="inherit"
|
|
disabled={activeStep === 0}
|
|
onClick={handleBack}
|
|
sx={{ mr: 1 }}
|
|
variant="outlined"
|
|
>
|
|
Back
|
|
</Button>
|
|
<Box sx={{ flex: "1 1 auto" }} />
|
|
{activeStep == 4 && (
|
|
<Button
|
|
onClick={handleTestConnection}
|
|
sx={{ mr: 1 }}
|
|
variant="outlined"
|
|
>
|
|
Test Connection
|
|
</Button>
|
|
)}
|
|
{activeStep != 4 && (
|
|
<Button
|
|
disabled={activeStep == 4 && !testConnDone}
|
|
onClick={handleNext}
|
|
sx={{ mr: 1 }}
|
|
variant="outlined"
|
|
>
|
|
Next
|
|
</Button>
|
|
)}
|
|
{activeStep !== steps.length && (
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
onClick={handleComplete}
|
|
>
|
|
{isLastStep() ? "Finish" : "Complete Step"}
|
|
</Button>
|
|
)}
|
|
</Box>
|
|
</React.Fragment>
|
|
)}
|
|
</Box>
|
|
</Paper>
|
|
</Box>
|
|
);
|
|
}
|