vintasend 0.4.0 → 0.4.7

package/dist/examples/vintasend-medplum-example/src/components/schedule/CreateVisit.test.tsx

@@ -0,0 +1,279 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { MantineProvider } from '@mantine/core';
+import { Notifications } from '@mantine/notifications';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MedplumProvider } from '@medplum/react';
+import { MockClient, HomerSimpson } from '@medplum/mock';
+import { MemoryRouter } from 'react-router';
+import { describe, expect, test, vi, beforeEach } from 'vitest';
+import type { Patient } from '@medplum/fhirtypes';
+import type { SlotInfo } from 'react-big-calendar';
+import { CreateVisit } from './CreateVisit';
+
+describe('CreateVisit', () => {
+  let medplum: MockClient;
+  let mockPatient: Patient;
+  let mockSlotInfo: SlotInfo;
+
+  beforeEach(async () => {
+    medplum = new MockClient();
+    vi.clearAllMocks();
+
+    mockPatient = {
+      ...HomerSimpson,
+      id: 'patient-1',
+      name: [{ given: ['Homer'], family: 'Simpson' }],
+    };
+
+    const startDate = new Date('2024-01-15T10:00:00Z');
+    const endDate = new Date('2024-01-15T10:30:00Z');
+    mockSlotInfo = {
+      start: startDate,
+      end: endDate,
+      slots: [],
+      action: 'select',
+    } as SlotInfo;
+
+    await medplum.createResource(mockPatient);
+    medplum.getProfile = vi.fn().mockResolvedValue({
+      resourceType: 'Practitioner',
+      id: 'practitioner-1',
+      name: [{ given: ['Dr.'], family: 'Smith' }],
+    });
+  });
+
+  const setup = (appointmentSlot?: SlotInfo): ReturnType<typeof render> => {
+    return render(
+      <MemoryRouter>
+        <MedplumProvider medplum={medplum}>
+          <MantineProvider>
+            <Notifications />
+            <CreateVisit appointmentSlot={appointmentSlot} />
+          </MantineProvider>
+        </MedplumProvider>
+      </MemoryRouter>
+    );
+  };
+
+  describe('Rendering', () => {
+    test('renders form with all required fields', async () => {
+      await act(async () => {
+        setup(mockSlotInfo);
+      });
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/Patient/i)).toBeInTheDocument();
+        expect(screen.getByLabelText(/Start Time/i)).toBeInTheDocument();
+        expect(screen.getByLabelText(/End Time/i)).toBeInTheDocument();
+        expect(screen.getByLabelText(/Class/i)).toBeInTheDocument();
+        expect(screen.getByLabelText(/Care template/i)).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /Create Visit/i })).toBeInTheDocument();
+      });
+    });
+
+    test('renders without date/time when appointmentSlot is not provided', async () => {
+      await act(async () => {
+        setup(undefined);
+      });
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /Create Visit/i })).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Form Validation', () => {
+    test('shows error notification when submitting with missing required fields', async () => {
+      const user = userEvent.setup();
+      await act(async () => {
+        setup(mockSlotInfo);
+      });
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /Create Visit/i })).toBeInTheDocument();
+      });
+
+      const submitButton = screen.getByRole('button', { name: /Create Visit/i });
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.getByText(/Please fill out required fields/i)).toBeInTheDocument();
+      });
+    });
+
+    test('does not proceed with submission when required fields are missing', async () => {
+      const user = userEvent.setup();
+      await act(async () => {
+        setup(mockSlotInfo);
+      });
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /Create Visit/i })).toBeInTheDocument();
+      });
+
+      const submitButton = screen.getByRole('button', { name: /Create Visit/i });
+      await user.click(submitButton);
+
+      // Verify error notification is shown instead of proceeding
+      // Use getAllByText since notifications may persist from previous tests
+      await waitFor(() => {
+        const notifications = screen.getAllByText(/Please fill out required fields/i);
+        expect(notifications.length).toBeGreaterThan(0);
+      });
+    });
+  });
+
+  describe('PlanDefinition Actions', () => {
+    test('does not display included tasks card initially', async () => {
+      await act(async () => {
+        setup(mockSlotInfo);
+      });
+
+      await waitFor(() => {
+        expect(screen.queryByText(/Included Tasks/i)).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Date/Time Formatting', () => {
+    test('updates formatted date/time when appointmentSlot changes', async () => {
+      const { rerender } = await act(async () => {
+        return setup(mockSlotInfo);
+      });
+
+      await waitFor(() => {
+        expect(screen.getByText(/Jan.*15.*2024/i)).toBeInTheDocument();
+      });
+
+      const newSlotInfo: SlotInfo = {
+        start: new Date('2024-02-20T14:00:00Z'),
+        end: new Date('2024-02-20T14:30:00Z'),
+        slots: [],
+        action: 'select',
+      } as SlotInfo;
+
+      await act(async () => {
+        rerender(
+          <MemoryRouter>
+            <MedplumProvider medplum={medplum}>
+              <MantineProvider>
+                <Notifications />
+                <CreateVisit appointmentSlot={newSlotInfo} />
+              </MantineProvider>
+            </MedplumProvider>
+          </MemoryRouter>
+        );
+      });
+
+      await waitFor(() => {
+        expect(screen.getByText(/Feb.*20.*2024/i)).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Button State', () => {
+    test('submit button is initially enabled', async () => {
+      await act(async () => {
+        setup(mockSlotInfo);
+      });
+
+      await waitFor(() => {
+        const submitButton = screen.getByRole('button', { name: /Create Visit/i });
+        expect(submitButton).toBeInTheDocument();
+        expect(submitButton).not.toBeDisabled();
+      });
+    });
+  });
+
+  describe('Form Field Changes', () => {
+    test('updates patient when patient is selected', async () => {
+      await act(async () => {
+        setup(mockSlotInfo);
+      });
+
+      const patientInput = await screen.findByLabelText(/Patient/i);
+      expect(patientInput).toBeInTheDocument();
+    });
+
+    test('updates start time when changed', async () => {
+      const user = userEvent.setup();
+      await act(async () => {
+        setup(mockSlotInfo);
+      });
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/Start Time/i)).toBeInTheDocument();
+      });
+
+      const startInput = screen.getByLabelText(/Start Time/i);
+      await act(async () => {
+        await user.clear(startInput);
+        await user.type(startInput, '2024-01-15T11:00');
+      });
+
+      expect(startInput).toHaveValue('2024-01-15T11:00');
+    });
+
+    test('updates end time when changed', async () => {
+      const user = userEvent.setup();
+      await act(async () => {
+        setup(mockSlotInfo);
+      });
+
+      const endInput = await screen.findByLabelText(/End Time/i);
+      await act(async () => {
+        await user.clear(endInput);
+        await user.type(endInput, '2024-01-15T12:00');
+      });
+
+      expect(endInput).toHaveValue('2024-01-15T12:00');
+    });
+
+    test('updates class when class is selected', async () => {
+      const user = userEvent.setup();
+      await act(async () => {
+        setup(mockSlotInfo);
+      });
+
+      const classInput = await screen.findByLabelText(/Class/i);
+      await act(async () => {
+        await user.click(classInput);
+      });
+
+      expect(classInput).toBeInTheDocument();
+    });
+
+    test('updates care template when template is selected', async () => {
+      await act(async () => {
+        setup(mockSlotInfo);
+      });
+
+      const templateInput = await screen.findByLabelText(/Care template/i);
+      expect(templateInput).toBeInTheDocument();
+    });
+  });
+
+  describe('Plan Definition Actions', () => {
+    test('displays included tasks when plan definition has actions', async () => {
+      const planDefinition: any = {
+        resourceType: 'PlanDefinition',
+        id: 'plan-1',
+        status: 'active',
+        action: [
+          { id: 'action-1', title: 'Task 1' },
+          { id: 'action-2', title: 'Task 2' },
+        ],
+      };
+      await medplum.createResource(planDefinition);
+
+      await act(async () => {
+        setup(mockSlotInfo);
+      });
+
+      const templateInput = await screen.findByLabelText(/Care template/i);
+      expect(templateInput).toBeInTheDocument();
+    });
+  });
+});

package/dist/examples/vintasend-medplum-example/src/components/schedule/CreateVisit.tsx

@@ -0,0 +1,156 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { CodingInput, DateTimeInput, Form, ResourceInput, useMedplum } from '@medplum/react';
+import { useState, useEffect } from 'react';
+import type { JSX } from 'react';
+import type { SlotInfo } from 'react-big-calendar';
+import { Button, Card, Flex, Stack, Text, Title } from '@mantine/core';
+import type { Coding, Patient, PlanDefinition, PlanDefinitionAction } from '@medplum/fhirtypes';
+import { IconAlertSquareRounded, IconCircleCheck, IconCirclePlus } from '@tabler/icons-react';
+import classes from './CreateVisit.module.css';
+import { createEncounter } from '../../utils/encounter';
+import { showErrorNotification } from '../../utils/notifications';
+import { useNavigate } from 'react-router';
+import { showNotification } from '@mantine/notifications';
+
+interface CreateVisitProps {
+  appointmentSlot: SlotInfo | undefined;
+}
+
+export function CreateVisit(props: CreateVisitProps): JSX.Element {
+  const { appointmentSlot } = props;
+  const [formattedDate, setFormattedDate] = useState<string>('');
+  const [formattedSlotTime, setFormattedSlotTime] = useState<string>('');
+  const [patient, setPatient] = useState<Patient | undefined>();
+  const [planDefinitionData, setPlanDefinitionData] = useState<PlanDefinition | undefined>();
+  const [encounterClass, setEncounterClass] = useState<Coding | undefined>();
+  const [start, setStart] = useState<Date | undefined>(appointmentSlot?.start);
+  const [end, setEnd] = useState<Date | undefined>(appointmentSlot?.end);
+  const [isLoading, setIsLoading] = useState(false);
+  const medplum = useMedplum();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!appointmentSlot) {
+      return;
+    }
+
+    const startDate = new Date(appointmentSlot?.start);
+    const endDate = new Date(appointmentSlot?.end);
+
+    const options: Intl.DateTimeFormatOptions = {
+      weekday: 'short',
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    };
+    const dateStr = startDate.toLocaleDateString('en-US', options);
+
+    const timeOptions: Intl.DateTimeFormatOptions = { hour: 'numeric', minute: 'numeric', hour12: true };
+    const startTimeStr = startDate.toLocaleTimeString('en-US', timeOptions);
+    const endTimeStr = endDate.toLocaleTimeString('en-US', timeOptions);
+
+    const formattedTime = `${startTimeStr} – ${endTimeStr}`;
+    setFormattedDate(dateStr);
+    setFormattedSlotTime(formattedTime);
+  }, [appointmentSlot]);
+
+  async function handleSubmit(): Promise<void> {
+    if (!patient || !planDefinitionData || !encounterClass || !start || !end) {
+      showNotification({
+        color: 'yellow',
+        icon: <IconAlertSquareRounded />,
+        title: 'Error',
+        message: 'Please fill out required fields.',
+      });
+      return;
+    }
+    setIsLoading(true);
+    try {
+      const encounter = await createEncounter(medplum, start, end, encounterClass, patient, planDefinitionData);
+      showNotification({ icon: <IconCircleCheck />, title: 'Success', message: 'Visit created' });
+      navigate(`/Patient/${patient.id}/Encounter/${encounter.id}`)?.catch(console.error);
+    } catch (err) {
+      showErrorNotification(err);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <Form onSubmit={handleSubmit}>
+      <Flex direction="column" gap="md" h="100%" justify="space-between">
+        <Stack gap="md" h="100%">
+          <Stack gap={0}>
+            <Title order={1} fw={500}>
+              {formattedDate}
+            </Title>
+            <Text size="lg">{formattedSlotTime}</Text>
+          </Stack>
+
+          <ResourceInput
+            label="Patient"
+            resourceType="Patient"
+            name="Patient-id"
+            required={true}
+            onChange={(value) => setPatient(value as Patient)}
+          />
+
+          <DateTimeInput
+            name="start"
+            label="Start Time"
+            defaultValue={appointmentSlot?.start?.toISOString()}
+            required={true}
+            onChange={(value) => {
+              setStart(new Date(value));
+            }}
+          />
+
+          <DateTimeInput
+            name="end"
+            label="End Time"
+            defaultValue={appointmentSlot?.end?.toISOString()}
+            required={true}
+            onChange={(value) => {
+              setEnd(new Date(value));
+            }}
+          />
+
+          <CodingInput
+            name="class"
+            label="Class"
+            binding="http://terminology.hl7.org/ValueSet/v3-ActEncounterCode"
+            required={true}
+            onChange={setEncounterClass}
+            path="Encounter.type"
+          />
+
+          <ResourceInput
+            name="plandefinition"
+            resourceType="PlanDefinition"
+            label="Care template"
+            onChange={(value) => {
+              setPlanDefinitionData(value as PlanDefinition);
+            }}
+            required={true}
+          />
+        </Stack>
+
+        {planDefinitionData?.action && planDefinitionData.action.length > 0 && (
+          <Card className={classes.planDefinition}>
+            <Stack gap={0}>
+              <Text fw={500}>Included Tasks</Text>
+              {planDefinitionData?.action?.map((action: PlanDefinitionAction) => (
+                <Text key={action.id}>- {action.title}</Text>
+              ))}
+            </Stack>
+          </Card>
+        )}
+
+        <Button fullWidth mt="xl" type="submit" loading={isLoading} disabled={isLoading}>
+          <IconCirclePlus /> <Text ml="xs">Create Visit</Text>
+        </Button>
+      </Flex>
+    </Form>
+  );
+}

package/dist/examples/vintasend-medplum-example/src/components/spaces/HistoryList.module.css

@@ -0,0 +1,45 @@
+.conversationItem {
+  padding: var(--mantine-spacing-sm);
+  margin-bottom: 4px;
+  border-radius: var(--mantine-radius-md);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: var(--mantine-color-gray-7);
+  border: 1px solid transparent;
+}
+
+.conversationItem:hover {
+  background-color: var(--mantine-color-gray-1);
+  color: var(--mantine-color-dark-9);
+}
+
+.conversationItemActive {
+  background-color: var(--mantine-color-blue-0);
+  color: var(--mantine-color-blue-9);
+  border: 1px solid var(--mantine-color-blue-2);
+  box-shadow: none;
+}
+
+.conversationItemActive:hover {
+  background-color: var(--mantine-color-blue-1);
+}
+
+/* Dark Mode Overrides */
+[data-mantine-color-scheme="dark"] .conversationItem {
+  color: var(--mantine-color-gray-5);
+}
+
+[data-mantine-color-scheme="dark"] .conversationItem:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+  color: var(--mantine-color-gray-3);
+}
+
+[data-mantine-color-scheme="dark"] .conversationItemActive {
+  background-color: var(--mantine-color-blue-9);
+  color: var(--mantine-color-white);
+  border: 1px solid var(--mantine-color-blue-7);
+}
+
+[data-mantine-color-scheme="dark"] .conversationItemActive:hover {
+  background-color: var(--mantine-color-blue-8);
+}

package/dist/examples/vintasend-medplum-example/src/components/spaces/HistoryList.test.tsx

@@ -0,0 +1,90 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { MantineProvider } from '@mantine/core';
+import { act, render, screen } from '@testing-library/react';
+import { MedplumProvider } from '@medplum/react';
+import { MockClient } from '@medplum/mock';
+import { MemoryRouter } from 'react-router';
+import { describe, expect, test, vi, beforeEach } from 'vitest';
+import { HistoryList } from './HistoryList';
+import * as spacePersistence from '../../utils/spacePersistence';
+
+const mockTopics = [
+  {
+    resourceType: 'Communication',
+    id: 'topic-1',
+    meta: { lastUpdated: '2023-01-01T10:00:00Z' },
+    topic: { text: 'Topic 1' },
+  },
+  {
+    resourceType: 'Communication',
+    id: 'topic-2',
+    meta: { lastUpdated: '2023-01-02T10:00:00Z' },
+    topic: { text: 'Topic 2' },
+  },
+];
+
+describe('HistoryList', () => {
+  let medplum: MockClient;
+
+  beforeEach(() => {
+    medplum = new MockClient();
+    vi.clearAllMocks();
+    vi.spyOn(spacePersistence, 'loadRecentTopics').mockResolvedValue(mockTopics as any);
+  });
+
+  const setup = (currentTopicId?: string): ReturnType<typeof render> => {
+    return render(
+      <MemoryRouter>
+        <MedplumProvider medplum={medplum}>
+          <MantineProvider>
+            <HistoryList
+              currentTopicId={currentTopicId}
+              onSelectTopic={vi.fn()}
+              onSelectedItem={(topic) => `/Spaces/Communication/${topic.id}`}
+            />
+          </MantineProvider>
+        </MedplumProvider>
+      </MemoryRouter>
+    );
+  };
+
+  test('renders loading state initially', async () => {
+    vi.spyOn(spacePersistence, 'loadRecentTopics').mockImplementation(() => new Promise(() => {}));
+
+    setup();
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  });
+
+  test('renders empty state when no topics', async () => {
+    vi.spyOn(spacePersistence, 'loadRecentTopics').mockResolvedValue([]);
+
+    await act(async () => {
+      setup();
+    });
+
+    expect(screen.getByText('No conversations yet')).toBeInTheDocument();
+  });
+
+  test('renders list of topics', async () => {
+    await act(async () => {
+      setup();
+    });
+
+    expect(screen.getByText('Recent Conversations')).toBeInTheDocument();
+    expect(screen.getByText('Topic 1')).toBeInTheDocument();
+    expect(screen.getByText('Topic 2')).toBeInTheDocument();
+  });
+
+  test('generates correct links', async () => {
+    await act(async () => {
+      setup();
+    });
+
+    const link1 = screen.getByText('Topic 1').closest('a');
+    expect(link1).toHaveAttribute('href', '/Spaces/Communication/topic-1');
+
+    const link2 = screen.getByText('Topic 2').closest('a');
+    expect(link2).toHaveAttribute('href', '/Spaces/Communication/topic-2');
+  });
+});

package/dist/examples/vintasend-medplum-example/src/components/spaces/HistoryList.tsx

@@ -0,0 +1,84 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { Stack, Text, Group, ScrollArea, Divider, Paper, Flex } from '@mantine/core';
+import type { JSX } from 'react';
+import { useState, useEffect } from 'react';
+import { useMedplum, MedplumLink } from '@medplum/react';
+import type { Communication } from '@medplum/fhirtypes';
+import { loadRecentTopics } from '../../utils/spacePersistence';
+import { showErrorNotification } from '../../utils/notifications';
+import { formatDate } from '@medplum/core';
+import classes from './HistoryList.module.css';
+import cx from 'clsx';
+
+interface HistoryListProps {
+  currentTopicId?: string;
+  onSelectTopic: (topicId: string) => void;
+  onSelectedItem: (topic: Communication) => string;
+}
+
+export function HistoryList({ currentTopicId, onSelectedItem }: HistoryListProps): JSX.Element {
+  const medplum = useMedplum();
+  const [topics, setTopics] = useState<Communication[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const loadTopics = async (): Promise<void> => {
+      setLoading(true);
+      try {
+        const recentTopics = await loadRecentTopics(medplum, 20);
+        setTopics(recentTopics);
+      } finally {
+        setLoading(false);
+      }
+    };
+    loadTopics().catch(showErrorNotification);
+  }, [medplum]);
+
+  return (
+    <Paper h="100%" bg="transparent" p={0}>
+      <Flex direction="column" p={0} h="100%">
+        <ScrollArea style={{ flex: 1 }} p={0}>
+          <Stack gap="xs" px="md">
+            <Text fw={600} c="dimmed" mt="md">
+              Recent Conversations
+            </Text>
+            {loading && (
+              <Text size="sm" c="dimmed">
+                Loading...
+              </Text>
+            )}
+            {!loading && topics.length === 0 && (
+              <Text size="sm" c="dimmed">
+                No conversations yet
+              </Text>
+            )}
+            {!loading &&
+              topics.length > 0 &&
+              topics.map((topic, index) => (
+                <Stack gap={0} key={topic.id}>
+                  <MedplumLink to={onSelectedItem(topic)} style={{ textDecoration: 'none' }}>
+                    <div
+                      className={cx(classes.conversationItem, {
+                        [classes.conversationItemActive]: currentTopicId === topic.id,
+                      })}
+                    >
+                      <Text size="sm" fw={500} lineClamp={1} c="inherit">
+                        {topic.topic?.text || 'Untitled conversation'}
+                      </Text>
+                      <Group gap="xs" mt={4} justify="space-between">
+                        <Text size="xs" c="dimmed" style={{ opacity: 0.7 }}>
+                          {formatDate(topic.meta?.lastUpdated)}
+                        </Text>
+                      </Group>
+                    </div>
+                  </MedplumLink>
+                  {index < topics.length - 1 && <Divider />}
+                </Stack>
+              ))}
+          </Stack>
+        </ScrollArea>
+      </Flex>
+    </Paper>
+  );
+}

package/dist/examples/vintasend-medplum-example/src/components/spaces/ResourceBox.module.css

@@ -0,0 +1,26 @@
+.resourceBox {
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+[data-mantine-color-scheme='light'] .resourceBox {
+  background-color: var(--mantine-color-gray-0);
+}
+
+[data-mantine-color-scheme='dark'] .resourceBox {
+  background-color: var(--mantine-color-dark-6);
+}
+
+[data-mantine-color-scheme='light'] .resourceBox:hover {
+  background-color: var(--mantine-color-gray-1);
+}
+
+[data-mantine-color-scheme='dark'] .resourceBox:hover {
+  background-color: var(--mantine-color-dark-5);
+}
+
+.content {
+  flex: 1;
+  min-width: 0;
+}
+