vintasend 0.4.0 → 0.4.7

package/dist/examples/vintasend-medplum-example/src/components/ChargeItem/ChargeItemList.tsx

@@ -0,0 +1,241 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { Box, Button, Card, Flex, Modal, Stack, Text, TextInput } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { createReference, HTTP_HL7_ORG } from '@medplum/core';
+import type { ChargeItem, ChargeItemDefinition, CodeableConcept, Encounter, Patient } from '@medplum/fhirtypes';
+import { CodeableConceptInput, AsyncAutocomplete, useMedplum } from '@medplum/react';
+import { IconPlus } from '@tabler/icons-react';
+import { useCallback, useEffect, useState } from 'react';
+import type { JSX } from 'react';
+import { applyChargeItemDefinition, calculateTotalPrice } from '../../utils/chargeitems';
+import { showErrorNotification } from '../../utils/notifications';
+import ChargeItemPanel from './ChargeItemPanel';
+
+interface ChargeItemListProps {
+  chargeItems: ChargeItem[];
+  updateChargeItems: (chargeItems: ChargeItem[]) => void;
+  patient: Patient;
+  encounter: Encounter;
+}
+
+export const ChargeItemList = (props: ChargeItemListProps): JSX.Element => {
+  const { chargeItems, updateChargeItems, patient, encounter } = props;
+  const [chargeItemsState, setChargeItemsState] = useState<ChargeItem[]>(chargeItems);
+  const [opened, { open, close }] = useDisclosure(false);
+  const medplum = useMedplum();
+
+  useEffect(() => {
+    setChargeItemsState(chargeItems);
+  }, [chargeItems]);
+
+  const updateChargeItemList = useCallback(
+    async (updatedChargeItem: ChargeItem): Promise<void> => {
+      const updatedChargeItems = chargeItemsState.map((item) =>
+        item.id === updatedChargeItem.id ? updatedChargeItem : item
+      );
+      updateChargeItems(updatedChargeItems);
+    },
+    [chargeItemsState, updateChargeItems]
+  );
+
+  const deleteChargeItem = useCallback(
+    async (chargeItem: ChargeItem): Promise<void> => {
+      const updatedChargeItems = chargeItemsState.filter((item) => item.id !== chargeItem.id);
+      updateChargeItems(updatedChargeItems);
+    },
+    [chargeItemsState, updateChargeItems]
+  );
+
+  const addChargeItem = useCallback(async (): Promise<void> => {
+    open();
+  }, [open]);
+
+  const handleAddChargeItem = useCallback(
+    async (
+      cptCode: CodeableConcept | undefined,
+      chargeItemDefinition: ChargeItemDefinition | undefined
+    ): Promise<void> => {
+      if (!cptCode || !chargeItemDefinition) {
+        showErrorNotification('Please select both CPT code and charge item definition');
+        return;
+      }
+
+      try {
+        const newChargeItem: ChargeItem = {
+          resourceType: 'ChargeItem',
+          status: 'planned',
+          subject: createReference(patient),
+          context: createReference(encounter),
+          occurrenceDateTime: new Date().toISOString(),
+          extension: [
+            {
+              url: `${HTTP_HL7_ORG}/fhir/uv/order-catalog/StructureDefinition/ServiceBillingCode`,
+              valueCodeableConcept: cptCode,
+            },
+          ],
+          code: cptCode,
+          quantity: {
+            value: 1,
+          },
+          definitionCanonical: chargeItemDefinition.url ? [chargeItemDefinition.url] : [],
+        };
+
+        const createdChargeItem = await medplum.createResource(newChargeItem);
+        const appliedChargeItem = await applyChargeItemDefinition(medplum, createdChargeItem);
+
+        updateChargeItems([...chargeItemsState, appliedChargeItem]);
+        close();
+      } catch (err) {
+        showErrorNotification(err);
+      }
+    },
+    [patient, encounter, chargeItemsState, updateChargeItems, medplum, close]
+  );
+
+  return (
+    <Stack gap={0}>
+      <Flex justify="space-between" align="center" mb="md">
+        <Text fw={600} size="lg">
+          Charge Items
+        </Text>
+        <Button leftSection={<IconPlus size={16} />} onClick={addChargeItem}>
+          Add Charge Item
+        </Button>
+      </Flex>
+
+      {chargeItems.length > 0 ? (
+        <Stack gap="md">
+          {chargeItems.map((chargeItem: ChargeItem) => (
+            <ChargeItemPanel
+              key={chargeItem.id}
+              chargeItem={chargeItem}
+              onChange={updateChargeItemList}
+              onDelete={deleteChargeItem}
+            />
+          ))}
+
+          <Card withBorder shadow="sm">
+            <Flex justify="space-between" align="center">
+              <Text size="lg" fw={500}>
+                Total Calculated Price to Bill
+              </Text>
+              <Box>
+                <TextInput w={300} value={`$${calculateTotalPrice(chargeItems)}`} readOnly />
+              </Box>
+            </Flex>
+          </Card>
+        </Stack>
+      ) : (
+        <Card withBorder shadow="sm">
+          <Stack gap="md" align="center">
+            <Text c="dimmed">No charge items available</Text>
+          </Stack>
+        </Card>
+      )}
+
+      <AddChargeItemModal opened={opened} onClose={close} onSubmit={handleAddChargeItem} />
+    </Stack>
+  );
+};
+
+interface AddChargeItemModalProps {
+  opened: boolean;
+  onClose: () => void;
+  onSubmit: (cptCode: CodeableConcept | undefined, chargeItemDefinition: ChargeItemDefinition | undefined) => void;
+}
+
+function AddChargeItemModal({ opened, onClose, onSubmit }: AddChargeItemModalProps): JSX.Element {
+  const medplum = useMedplum();
+  const [cptCode, setCptCode] = useState<CodeableConcept | undefined>();
+  const [chargeItemDefinition, setChargeItemDefinition] = useState<ChargeItemDefinition | undefined>();
+
+  const loadChargeItemDefinitions = useCallback(
+    async (input: string, signal: AbortSignal): Promise<ChargeItemDefinition[]> => {
+      const searchParams = new URLSearchParams({
+        title: input,
+        _count: '10',
+        status: 'active',
+      });
+
+      try {
+        const resources = await medplum.searchResources('ChargeItemDefinition', searchParams, { signal });
+        return resources;
+      } catch (error) {
+        if (!signal.aborted) {
+          console.error('Error searching ChargeItemDefinition:', error);
+        }
+        return [];
+      }
+    },
+    [medplum]
+  );
+
+  const handleSelectChargeItemDefinition = useCallback((items: unknown[]) => {
+    if (items.length > 0) {
+      setChargeItemDefinition(items[0] as ChargeItemDefinition);
+    }
+  }, []);
+
+  const handleSubmit = useCallback(() => {
+    onSubmit(cptCode, chargeItemDefinition);
+    // Clear all state
+    setCptCode(undefined);
+    setChargeItemDefinition(undefined);
+  }, [cptCode, chargeItemDefinition, onSubmit]);
+
+  const handleClose = useCallback(() => {
+    // Clear all state
+    setCptCode(undefined);
+    setChargeItemDefinition(undefined);
+    onClose();
+  }, [onClose]);
+
+  return (
+    <Modal opened={opened} onClose={handleClose} title="Add Charge Item" size="md">
+      <Stack gap="md">
+        <CodeableConceptInput
+          binding="http://www.ama-assn.org/go/cpt/vs"
+          label="CPT Code"
+          name="cptCode"
+          path="ChargeItem.code"
+          placeholder="Search for CPT code..."
+          required
+          onChange={setCptCode}
+        />
+
+        <Box>
+          <Text size="sm" fw={500} mb={5}>
+            Charge Item Definition{' '}
+            <Text span c="red">
+              *
+            </Text>
+          </Text>
+          <AsyncAutocomplete
+            placeholder="Search for charge item definition..."
+            onChange={handleSelectChargeItemDefinition}
+            toOption={(item: unknown) => {
+              const resource = item as ChargeItemDefinition;
+              return {
+                value: resource.id || '',
+                label: resource.title || resource.id || 'Untitled',
+                resource: resource,
+              };
+            }}
+            maxValues={1}
+            loadOptions={loadChargeItemDefinitions}
+          />
+        </Box>
+
+        <Flex justify="flex-end" gap="sm" mt="md">
+          <Button variant="subtle" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} disabled={!cptCode || !chargeItemDefinition}>
+            Add Charge Item
+          </Button>
+        </Flex>
+      </Stack>
+    </Modal>
+  );
+}