Waitlist Form

Overview

The WaitlistForm component is a React form built using Chakra UI and React Hook Form. It allows users to add or update patient information for a provider's waitlist. The form validates inputs using Yup schema validation and integrates with Redux for state management.

Features

• Add new patients to the waitlist
• Update existing patient waitlist information
• Validation with Yup and React Hook Form
• Integration with Redux and API services
• Supports multi-select dropdowns for visit type, gender, insurance provider, and visit reason
• Handles phone number validation
• Includes preferred time selection using checkboxes
• Asynchronous search for visit reasons and insurance providers

Props

interface WaitlistFormProps {
  providerId: number | null; //Used to reference the provider
  type: "add" | "edit"; //Used to track which operation the form is handling
  patientData?: Waitlist | WaitlistFormPatient; //2. Used to recieve patient data which can be of any of the 2 shapes.
  isSubmitClicked?: boolean; //Default: False. Used to know when the submit button is clicked in order to submit the form.
  setIsSubmitClicked: Dispatch<SetStateAction<boolean>>; //Used to update the submit button state on the parent
  setIsFormValid: Dispatch<SetStateAction<boolean>>; //Used to update the form validity state on the parent
  onActionCompleted: () => void; //trigger cleanup actions on the parent after add or edit operations.
}

Form Fields & Validation

const registerSchema = Yup.object().shape({
  first_name: Yup.string().required("First name is required"),
  last_name: Yup.string().required("Last name is required"),
  birthdate: Yup.string().required("Date of birth is required"),
  email: Yup.string()
    .email("Must be a valid email")
    .required("Email is required"),
  phone_number: Yup.string().required("Phone number required"),
  insurance_provider: Yup.object()
    .shape({
      id: Yup.number().required(),
      value: Yup.string().required(),
      label: Yup.string().required(),
    })
    .required("Insurance provider is required"),
  visit_reason: Yup.object()
    .shape({
      id: Yup.number().required(),
      value: Yup.string().required(),
      label: Yup.string().required(),
    })
    .required("Visit reason is required"),
  gender_identity: Yup.object()
    .shape({
      id: Yup.number().required(),
      value: Yup.string().required(),
      label: Yup.string().required(),
    })
    .required("Gender is required"),
  visit_type: Yup.object()
    .shape({
      id: Yup.number().required(),
      value: Yup.string().required(),
      label: Yup.string().required(),
    })
    .required("Visit type is required"),
  preferred_time: Yup.array()
    .of(Yup.string())
    .min(1, "Preferred time is required")
    .required(),
});

Default Values

The function getDefaultValueWaitlist is used to determine default values based on existing patient data, ensuring proper handling of new and existing patients.

Submission Logic

• If adding a new patient, the form checks if the patient exists.
  • If the patient exists, they are added to the waitlist.
  • If the patient does not exist, a guest account is created first before adding them to the waitlist.
• If updating an existing patient, their waitlist data is modified accordingly.
• The form submission calls either useAddPatientToWaitlistMutation or useUpdatePatientWaitlistInfoMutation based on the type prop.
• Error handling is included to display messages when submission fails.

State Management

• Redux selectors and dispatchers handle patient data
  • addPatient: See code, postman, or backend implemetation docs on this for more

     query: ({ providerId, ...credentials }) => ({
        url: `waitlist/provider/${providerId}`, //endpoint
        method: 'POST',
        body: credentials,
      }),
  • updatePatientInfo: See code, postman, or backend implemetation docs on this for more

     query: ({ credentials, waitlistId }) => ({
        url: `waitlist/${waitlistId}`,  //endpoint
        method: 'POST',
        body: credentials,
      }),
• Redux is used to retrieve user authentication details
• API hooks (useGetVisitReasonsQuery, useProvider) fetch necessary options for dropdown fields

UI Components

The form consists of:

• Text Inputs for first name, last name, email
• Date Picker for birthdate
• Multi-select Dropdowns for gender, visit type, visit reason, insurance provider
• Phone Input with validation
• Checkboxes for preferred time selection

Conclusion

The WaitlistForm component provides a robust interface for managing patient waitlist entries, ensuring a seamless experience through form validation, state management, and API integrations.