@medplum/react 0.9.20 → 0.9.23

package/dist/esm/index.js

@@ -1,5 +1,5 @@
-import { formatAddress, getDisplayString, getImageSrc, capitalize, globalSchema, getPropertyDisplayName, formatHumanName, stringify, buildTypeName, PropertyType, getTypedPropertyValue, createReference, toTypedValue, getReferenceString, evalFhirPath, getSearchParameterDetails, Operator, evalFhirPathTyped, SearchParameterType, formatSearchQuery, parseSearchDefinition, DEFAULT_SEARCH_COUNT, isUUID } from '@medplum/core';
-import React, { useState, useRef, createContext, useEffect, useContext, useCallback } from 'react';
+import { formatAddress, getDisplayString, getImageSrc, capitalize, globalSchema, getPropertyDisplayName, formatHumanName, stringify, buildTypeName, PropertyType, getTypedPropertyValue, createReference, toTypedValue, getReferenceString, evalFhirPath, getSearchParameterDetails, Operator, evalFhirPathTyped, SearchParameterType, formatSearchQuery, parseSearchDefinition, DEFAULT_SEARCH_COUNT, isUUID, parseJWTPayload } from '@medplum/core';
+import React, { useState, useRef, createContext, useEffect, useContext, useCallback, useMemo } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 
 function AddressDisplay(props) {
@@ -1770,18 +1770,24 @@ function ResourceBadge(props) {
 }
 
 function DiagnosticReportDisplay(props) {
-    var _a;
+    var _a, _b;
     const diagnosticReport = useResource(props.value);
+    const specimen = useResource((_a = diagnosticReport === null || diagnosticReport === void 0 ? void 0 : diagnosticReport.specimen) === null || _a === void 0 ? void 0 : _a[0]);
     if (!diagnosticReport) {
         return null;
     }
-    let textContent = undefined;
+    let textContent = '';
     if (diagnosticReport.presentedForm && diagnosticReport.presentedForm.length > 0) {
         const pf = diagnosticReport.presentedForm[0];
-        if (((_a = pf.contentType) === null || _a === void 0 ? void 0 : _a.startsWith('text/plain')) && pf.data) {
+        if (((_b = pf.contentType) === null || _b === void 0 ? void 0 : _b.startsWith('text/plain')) && pf.data) {
             textContent = window.atob(pf.data);
         }
     }
+    if (specimen === null || specimen === void 0 ? void 0 : specimen.note) {
+        for (const note of specimen.note) {
+            textContent += note.text + '\n\n';
+        }
+    }
     return (React.createElement("div", { className: "medplum-diagnostic-report" },
         React.createElement("h1", null, "Diagnostic Report"),
         React.createElement("div", { className: "medplum-diagnostic-report-header" },
@@ -1801,8 +1807,8 @@ function DiagnosticReportDisplay(props) {
             diagnosticReport.status && (React.createElement("dl", null,
                 React.createElement("dt", null, "Status"),
                 React.createElement("dd", null, capitalize(diagnosticReport.status))))),
-        textContent && React.createElement("pre", null, textContent),
-        diagnosticReport.result && React.createElement(ObservationTable, { value: diagnosticReport.result })));
+        diagnosticReport.result && React.createElement(ObservationTable, { value: diagnosticReport.result }),
+        textContent && React.createElement("pre", null, textContent.trim())));
 }
 function ObservationTable(props) {
     var _a;
@@ -2178,8 +2184,7 @@ function ResourceTimeline(props) {
             setHistory({});
             return;
         }
-        const batchRequest = buildSearchRequests(resource);
-        medplum.post('fhir/R4', batchRequest).then(handleBatchResponse);
+        medplum.executeBatch(buildSearchRequests(resource)).then(handleBatchResponse);
     }, [medplum, resource, buildSearchRequests]);
     useEffect(() => {
         loadTimeline();
@@ -4607,31 +4612,64 @@ function QuestionnaireFormItem(props) {
             return (React.createElement(TextArea, { name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueString, onChange: (newValue) => onChangeAnswer({ valueString: newValue }) }));
         case QuestionnaireItemType.url:
             return (React.createElement(Input, { type: "url", name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueUri, onChange: (newValue) => onChangeAnswer({ valueUri: newValue }) }));
-        case QuestionnaireItemType.choice:
-        case QuestionnaireItemType.openChoice:
-            return (React.createElement("div", null, item.answerOption &&
-                item.answerOption.map((option, index) => {
-                    const valueElementDefinition = globalSchema.types['QuestionnaireItemAnswerOption'].properties['value[x]'];
-                    const optionValue = getTypedPropertyValue({ type: 'QuestionnaireItemAnswerOption', value: option }, 'value');
-                    const initialValue = getTypedPropertyValue({ type: 'QuestionnaireItemInitial', value: initial }, 'value');
-                    const propertyName = 'value' + capitalize(optionValue.type);
-                    const optionName = `${name}-option-${index}`;
-                    return (React.createElement("div", { key: optionName, className: "medplum-questionnaire-option-row" },
-                        React.createElement("div", { className: "medplum-questionnaire-option-checkbox" },
-                            React.createElement("input", { type: "radio", id: optionName, name: name, value: optionValue.value, defaultChecked: initialValue && stringify(optionValue) === stringify(initialValue), onChange: () => onChangeAnswer({ [propertyName]: optionValue.value }) })),
-                        React.createElement("div", null,
-                            React.createElement("label", { htmlFor: optionName },
-                                React.createElement(ResourcePropertyDisplay, { property: valueElementDefinition, propertyType: optionValue.type, value: optionValue.value })))));
-                })));
         case QuestionnaireItemType.attachment:
             return (React.createElement(AttachmentInput, { name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueAttachment, onChange: (newValue) => onChangeAnswer({ valueAttachment: newValue }) }));
         case QuestionnaireItemType.reference:
             return (React.createElement(ReferenceInput, { name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueReference, onChange: (newValue) => onChangeAnswer({ valueReference: newValue }) }));
         case QuestionnaireItemType.quantity:
             return (React.createElement(QuantityInput, { name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueQuantity, onChange: (newValue) => onChangeAnswer({ valueQuantity: newValue }) }));
+        case QuestionnaireItemType.choice:
+        case QuestionnaireItemType.openChoice:
+            if (isDropDownChoice(item)) {
+                return (React.createElement(QuestionnaireChoiceDropDownInput, { name: name, item: item, initial: initial, onChangeAnswer: onChangeAnswer }));
+            }
+            else {
+                return (React.createElement(QuestionnaireChoiceRadioInput, { name: name, item: item, initial: initial, onChangeAnswer: onChangeAnswer }));
+            }
     }
     return null;
 }
+function QuestionnaireChoiceDropDownInput(props) {
+    const { name, item, initial } = props;
+    const valueElementDefinition = globalSchema.types['QuestionnaireItemAnswerOption'].properties['value[x]'];
+    const initialValue = getTypedPropertyValue({ type: 'QuestionnaireItemInitial', value: initial }, 'value');
+    return (React.createElement("select", { id: name, name: name, className: "medplum-select", onChange: (e) => {
+            const index = e.currentTarget.selectedIndex;
+            if (index === 0) {
+                props.onChangeAnswer({});
+                return;
+            }
+            const option = item.answerOption[index - 1];
+            const optionValue = getTypedPropertyValue({ type: 'QuestionnaireItemAnswerOption', value: option }, 'value');
+            const propertyName = 'value' + capitalize(optionValue.type);
+            props.onChangeAnswer({ [propertyName]: optionValue.value });
+        } },
+        React.createElement("option", null),
+        item.answerOption &&
+            item.answerOption.map((option, index) => {
+                const optionValue = getTypedPropertyValue({ type: 'QuestionnaireItemAnswerOption', value: option }, 'value');
+                const optionName = `${name}-option-${index}`;
+                return (React.createElement("option", { key: optionName, value: optionValue.value, selected: initialValue && stringify(optionValue) === stringify(initialValue) },
+                    React.createElement(ResourcePropertyDisplay, { property: valueElementDefinition, propertyType: optionValue.type, value: optionValue.value })));
+            })));
+}
+function QuestionnaireChoiceRadioInput(props) {
+    const { name, item, initial, onChangeAnswer } = props;
+    const valueElementDefinition = globalSchema.types['QuestionnaireItemAnswerOption'].properties['value[x]'];
+    const initialValue = getTypedPropertyValue({ type: 'QuestionnaireItemInitial', value: initial }, 'value');
+    return (React.createElement(React.Fragment, null, item.answerOption &&
+        item.answerOption.map((option, index) => {
+            const optionValue = getTypedPropertyValue({ type: 'QuestionnaireItemAnswerOption', value: option }, 'value');
+            const propertyName = 'value' + capitalize(optionValue.type);
+            const optionName = `${name}-option-${index}`;
+            return (React.createElement("div", { key: optionName, className: "medplum-questionnaire-option-row" },
+                React.createElement("div", { className: "medplum-questionnaire-option-checkbox" },
+                    React.createElement("input", { type: "radio", id: optionName, name: name, value: optionValue.value, defaultChecked: initialValue && stringify(optionValue) === stringify(initialValue), onChange: () => onChangeAnswer({ [propertyName]: optionValue.value }) })),
+                React.createElement("div", null,
+                    React.createElement("label", { htmlFor: optionName },
+                        React.createElement(ResourcePropertyDisplay, { property: valueElementDefinition, propertyType: optionValue.type, value: optionValue.value })))));
+        })));
+}
 function buildInitialResponse(questionnaire) {
     const response = {
         resourceType: 'QuestionnaireResponse',
@@ -4657,6 +4695,14 @@ function buildInitialResponseAnswer(answer) {
     // have the same properties.
     return Object.assign({}, answer);
 }
+function isDropDownChoice(item) {
+    var _a;
+    return !!((_a = item.extension) === null || _a === void 0 ? void 0 : _a.some((e) => {
+        var _a, _b, _c;
+        return e.url === 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl' &&
+            ((_c = (_b = (_a = e.valueCodeableConcept) === null || _a === void 0 ? void 0 : _a.coding) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.code) === 'drop-down';
+    }));
+}
 
 function QuestionnaireBuilder(props) {
     const medplum = useMedplum();
@@ -4858,6 +4904,163 @@ function ensureQuestionnaireOptionKeys(options) {
     return options.map((option) => (Object.assign(Object.assign({}, option), { id: option.id || generateId() })));
 }
 
+/**
+ * Dynamically creates a script tag for the specified JavaScript file.
+ * @param src The JavaScript file URL.
+ */
+function createScriptTag(src, onload) {
+    const head = document.getElementsByTagName('head')[0];
+    const script = document.createElement('script');
+    script.async = true;
+    script.src = src;
+    script.onload = onload || null;
+    head.appendChild(script);
+}
+
+function GoogleButton(props) {
+    const medplum = useMedplum();
+    const { googleClientId, handleGoogleCredential } = props;
+    const parentRef = useRef(null);
+    const [scriptLoaded, setScriptLoaded] = useState(typeof google !== 'undefined');
+    const [initialized, setInitialized] = useState(false);
+    const [buttonRendered, setButtonRendered] = useState(false);
+    useEffect(() => {
+        if (typeof google === 'undefined') {
+            createScriptTag('https://accounts.google.com/gsi/client', () => setScriptLoaded(true));
+            return;
+        }
+        if (!initialized) {
+            google.accounts.id.initialize({
+                client_id: googleClientId,
+                callback: handleGoogleCredential,
+            });
+            setInitialized(true);
+        }
+        if (parentRef.current && !buttonRendered) {
+            google.accounts.id.renderButton(parentRef.current, {});
+            setButtonRendered(true);
+        }
+    }, [medplum, googleClientId, initialized, scriptLoaded, parentRef, buttonRendered, handleGoogleCredential]);
+    if (!googleClientId) {
+        return null;
+    }
+    return React.createElement("div", { ref: parentRef });
+}
+function getGoogleClientId(clientId) {
+    var _a, _b;
+    if (clientId) {
+        return clientId;
+    }
+    const origin = window.location.protocol + '//' + window.location.host;
+    const authorizedOrigins = (_b = (_a = "http://localhost:3000,http://localhost:6006,https://app.medplum.com,https://docs.medplum.com") === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
+    if (authorizedOrigins.includes(origin)) {
+        return "921088377005-3j1sa10vr6hj86jgmdfh2l53v3mp7lfi.apps.googleusercontent.com";
+    }
+    return undefined;
+}
+
+/**
+ * Dynamically loads the recaptcha script.
+ * We do not want to load the script on page load unless the user needs it.
+ */
+function initRecaptcha() {
+    if (typeof grecaptcha === 'undefined') {
+        createScriptTag('https://www.google.com/recaptcha/api.js?render=' + process.env.RECAPTCHA_SITE_KEY);
+    }
+}
+/**
+ * Starts a request to generate a recapcha token.
+ * @returns Promise to a recaptcha token for the current user.
+ */
+function getRecaptcha() {
+    return new Promise((resolve) => {
+        grecaptcha.ready(() => {
+            grecaptcha.execute(process.env.RECAPTCHA_SITE_KEY, { action: 'submit' }).then(resolve);
+        });
+    });
+}
+
+function RegisterForm(props) {
+    const medplum = useMedplum();
+    const googleClientId = getGoogleClientId(props.googleClientId);
+    const [outcome, setOutcome] = useState();
+    const issues = getIssuesForExpression(outcome, undefined);
+    useEffect(initRecaptcha, []);
+    function handleAuthResponse(registerRequest, partialLogin) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                let login;
+                if (props.type === 'patient') {
+                    login = yield medplum.startNewPatient(registerRequest, partialLogin);
+                }
+                else {
+                    login = yield medplum.startNewProject(registerRequest, partialLogin);
+                }
+                yield medplum.processCode(login.code);
+                props.onSuccess();
+            }
+            catch (err) {
+                setOutcome(err);
+            }
+        });
+    }
+    return (React.createElement(Document, { width: 450 },
+        React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => __awaiter(this, void 0, void 0, function* () {
+                try {
+                    const recaptchaToken = yield getRecaptcha();
+                    const registerRequest = Object.assign(Object.assign({}, formData), { recaptchaToken });
+                    const userLogin = yield medplum.startNewUser(registerRequest);
+                    handleAuthResponse(registerRequest, userLogin);
+                }
+                catch (err) {
+                    setOutcome(err);
+                }
+            }) },
+            React.createElement("div", { className: "medplum-center" }, props.children),
+            issues && (React.createElement("div", { className: "medplum-input-error" }, issues.map((issue) => {
+                var _a, _b;
+                return (React.createElement("div", { "data-testid": "text-field-error", key: (_a = issue.details) === null || _a === void 0 ? void 0 : _a.text }, (_b = issue.details) === null || _b === void 0 ? void 0 : _b.text));
+            }))),
+            googleClientId && (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "medplum-signin-google-container" },
+                    React.createElement(GoogleButton, { googleClientId: googleClientId, handleGoogleCredential: (response) => __awaiter(this, void 0, void 0, function* () {
+                            try {
+                                const loginRequest = {
+                                    googleClientId: response.clientId,
+                                    googleCredential: response.credential,
+                                };
+                                const userLogin = yield medplum.startGoogleLogin(loginRequest);
+                                const googleClaims = parseJWTPayload(loginRequest.googleCredential);
+                                const registerRequest = {
+                                    firstName: googleClaims.given_name,
+                                    lastName: googleClaims.family_name,
+                                    email: googleClaims.email,
+                                };
+                                handleAuthResponse(registerRequest, userLogin);
+                            }
+                            catch (err) {
+                                setOutcome(err);
+                            }
+                        }) })),
+                React.createElement("div", { className: "medplum-signin-separator" }, "or"))),
+            React.createElement(FormSection, { title: "First Name", htmlFor: "firstName", outcome: outcome },
+                React.createElement(Input, { name: "firstName", type: "text", testid: "firstName", placeholder: "First name", required: true, autoFocus: true, outcome: outcome })),
+            React.createElement(FormSection, { title: "Last Name", htmlFor: "lastName", outcome: outcome },
+                React.createElement(Input, { name: "lastName", type: "text", testid: "lastName", placeholder: "Last name", required: true, outcome: outcome })),
+            props.type === 'project' && (React.createElement(FormSection, { title: "Project Name", htmlFor: "projectName", outcome: outcome },
+                React.createElement(Input, { name: "projectName", type: "text", testid: "projectName", placeholder: "My Project", required: true, outcome: outcome }))),
+            React.createElement(FormSection, { title: "Email", htmlFor: "email", outcome: outcome },
+                React.createElement(Input, { name: "email", type: "email", testid: "email", placeholder: "name@domain.com", required: true, outcome: outcome })),
+            React.createElement(FormSection, { title: "Password", htmlFor: "password", outcome: outcome },
+                React.createElement(Input, { name: "password", type: "password", testid: "password", autoComplete: "off", required: true, outcome: outcome })),
+            React.createElement("div", { className: "medplum-signin-buttons" },
+                React.createElement("div", null,
+                    React.createElement("input", { type: "checkbox", id: "remember", name: "remember", value: "true" }),
+                    React.createElement("label", { htmlFor: "remember" }, "Remember me")),
+                React.createElement("div", null,
+                    React.createElement(Button, { type: "submit", testid: "submit" }, "Create account"))))));
+}
+
 function StatusBadge(props) {
     return React.createElement("span", { className: `medplum-status medplum-status-${props.status}` }, props.status);
 }
@@ -4870,7 +5073,7 @@ function RequestGroupDisplay(props) {
     const [responseBundle, setResponseBundle] = useState();
     useEffect(() => {
         if (requestGroup && !startedLoading) {
-            medplum.post('fhir/R4', buildBatchRequest(requestGroup)).then(setResponseBundle);
+            medplum.executeBatch(buildBatchRequest(requestGroup)).then(setResponseBundle);
             setStartedLoading(true);
         }
     }, [medplum, requestGroup, startedLoading]);
@@ -5225,6 +5428,165 @@ function getVersionUrl(resource) {
     return `/${resource.resourceType}/${resource.id}/_history/${(_a = resource.meta) === null || _a === void 0 ? void 0 : _a.versionId}`;
 }
 
+/**
+ * Returns a month display string (e.g. "January 2020").
+ * @param date Any date within the month.
+ * @returns The month display string (e.g. "January 2020")
+ */
+function getMonthString(date) {
+    return date.toLocaleString('default', { month: 'long' }) + ' ' + date.getFullYear();
+}
+function CalendarInput(props) {
+    const [month, setMonth] = useState(getStartMonth);
+    function moveMonth(delta) {
+        setMonth((currMonth) => {
+            const prevMonth = new Date(currMonth.getTime());
+            prevMonth.setMonth(currMonth.getMonth() + delta);
+            return prevMonth;
+        });
+    }
+    const grid = useMemo(() => buildGrid(month, props.slots), [month, props.slots]);
+    return (React.createElement("div", null,
+        React.createElement(InputRow, null,
+            React.createElement("p", { style: { flex: 1 } }, getMonthString(month)),
+            React.createElement("p", null,
+                React.createElement(Button, { label: "Previous month", onClick: () => moveMonth(-1) }, "<"),
+                React.createElement(Button, { label: "Next month", onClick: () => moveMonth(1) }, ">"))),
+        React.createElement("table", { className: "medplum-calendar-table" },
+            React.createElement("thead", null,
+                React.createElement("tr", null,
+                    React.createElement("th", null, "SUN"),
+                    React.createElement("th", null, "MON"),
+                    React.createElement("th", null, "TUE"),
+                    React.createElement("th", null, "WED"),
+                    React.createElement("th", null, "THU"),
+                    React.createElement("th", null, "FRI"),
+                    React.createElement("th", null, "SAT"))),
+            React.createElement("tbody", null, grid.map((week, weekIndex) => (React.createElement("tr", { key: 'week-' + weekIndex }, week.map((day, dayIndex) => (React.createElement("td", { key: 'day-' + dayIndex }, day && (React.createElement("button", { disabled: !day.available, onClick: () => props.onClick(day.date) }, day.date.getDate()))))))))))));
+}
+function getStartMonth() {
+    const result = new Date();
+    result.setDate(1);
+    result.setHours(0, 0, 0, 0);
+    return result;
+}
+function buildGrid(startDate, slots) {
+    const d = new Date(startDate.getFullYear(), startDate.getMonth());
+    const grid = [];
+    let row = [];
+    // Fill leading empty days
+    for (let i = 0; i < d.getDay(); i++) {
+        row.push(undefined);
+    }
+    while (d.getMonth() === startDate.getMonth()) {
+        row.push({
+            date: new Date(d.getTime()),
+            // available: isAvailable(d),
+            available: isDayAvailable(d, slots),
+        });
+        if (d.getDay() === 6) {
+            grid.push(row);
+            row = [];
+        }
+        d.setDate(d.getDate() + 1);
+    }
+    // Fill trailing empty days
+    if (d.getDay() !== 0) {
+        for (let i = d.getDay(); i < 7; i++) {
+            row.push(undefined);
+        }
+        grid.push(row);
+    }
+    return grid;
+}
+/**
+ * Returns true if the given date is available for booking.
+ * @param day The day to check.
+ * @param slots The list of available slots.
+ * @returns True if there are any available slots for the day.
+ */
+function isDayAvailable(day, slots) {
+    // Note that slot start and end time may or may not be in UTC.
+    for (const slot of slots) {
+        const slotStart = new Date(slot.start);
+        if (slotStart.getFullYear() === day.getFullYear() &&
+            slotStart.getMonth() === day.getMonth() &&
+            slotStart.getDate() === day.getDate()) {
+            return true;
+        }
+    }
+    return false;
+}
+
+function Scheduler(props) {
+    var _a;
+    const medplum = useMedplum();
+    const schedule = useResource(props.schedule);
+    const [slots, setSlots] = useState();
+    const slotsRef = useRef();
+    slotsRef.current = slots;
+    const [date, setDate] = useState();
+    const [slot, setSlot] = useState();
+    const [info, setInfo] = useState();
+    const [form, setForm] = useState();
+    useEffect(() => {
+        if (schedule) {
+            medplum.search('Slot', 'schedule=' + getReferenceString(schedule)).then((bundle) => {
+                setSlots(bundle.entry.map((entry) => entry.resource));
+            });
+        }
+        else {
+            setSlots(undefined);
+        }
+    }, [medplum, schedule]);
+    if (!schedule || !slots) {
+        return null;
+    }
+    const actor = (_a = schedule.actor) === null || _a === void 0 ? void 0 : _a[0];
+    return (React.createElement("div", { className: "medplum-calendar-container", "data-testid": "scheduler" },
+        React.createElement("div", { className: "medplum-calendar-info-pane" },
+            actor && React.createElement(Avatar, { value: actor, size: "large" }),
+            actor && (React.createElement("h1", null,
+                React.createElement(ResourceName, { value: actor }))),
+            React.createElement("p", null, "1 hour"),
+            date && React.createElement("p", null, date.toLocaleDateString()),
+            slot && React.createElement("p", null, formatTime(new Date(slot.start)))),
+        React.createElement("div", { className: "medplum-calendar-selection-pane" },
+            !date && (React.createElement("div", null,
+                React.createElement("h3", null, "Select date"),
+                React.createElement(CalendarInput, { slots: slots, onClick: setDate }))),
+            date && !slot && (React.createElement("div", null,
+                React.createElement("h3", null, "Select time"),
+                slots.map((s) => {
+                    const slotStart = new Date(s.start);
+                    return (slotStart.getTime() > date.getTime() &&
+                        slotStart.getTime() < date.getTime() + 24 * 3600 * 1000 && (React.createElement("div", { key: s.id },
+                        React.createElement(Button, { style: { width: 150 }, onClick: () => setSlot(s) }, formatTime(slotStart)))));
+                }))),
+            date && slot && !info && (React.createElement("div", null,
+                React.createElement("h3", null, "Enter your info"),
+                React.createElement(FormSection, { title: "Name", htmlFor: "name" },
+                    React.createElement(Input, { name: "name" })),
+                React.createElement(FormSection, { title: "Email", htmlFor: "email" },
+                    React.createElement(Input, { name: "email" })),
+                React.createElement(Button, { primary: true, onClick: () => setInfo('info') }, "Next"))),
+            date && slot && info && !form && (React.createElement("div", null,
+                React.createElement("h3", null, "Custom questions"),
+                React.createElement(FormSection, { title: "Question 1", htmlFor: "q1" },
+                    React.createElement(Input, { name: "q1" })),
+                React.createElement(FormSection, { title: "Question 2", htmlFor: "q2" },
+                    React.createElement(Input, { name: "email" })),
+                React.createElement(FormSection, { title: "Question 3", htmlFor: "q3" },
+                    React.createElement(Input, { name: "email" })),
+                React.createElement(Button, { primary: true, onClick: () => setForm('form') }, "Next"))),
+            date && slot && info && form && (React.createElement("div", null,
+                React.createElement("h3", null, "You're all set!"),
+                React.createElement("p", null, "Check your email for a calendar invite."))))));
+}
+function formatTime(date) {
+    return date.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+}
+
 function ServiceRequestTimeline(props) {
     return (React.createElement(ResourceTimeline, { value: props.serviceRequest, buildSearchRequests: (resource) => ({
             resourceType: 'Bundle',
@@ -5272,62 +5634,6 @@ function ServiceRequestTimeline(props) {
         }) }));
 }
 
-/**
- * Dynamically creates a script tag for the specified JavaScript file.
- * @param src The JavaScript file URL.
- */
-function createScriptTag(src, onload) {
-    const head = document.getElementsByTagName('head')[0];
-    const script = document.createElement('script');
-    script.async = true;
-    script.src = src;
-    script.onload = onload || null;
-    head.appendChild(script);
-}
-
-function GoogleButton(props) {
-    const medplum = useMedplum();
-    const { handleGoogleCredential } = props;
-    const googleClientId = getGoogleClientId(props.googleClientId);
-    const parentRef = useRef(null);
-    const [scriptLoaded, setScriptLoaded] = useState(typeof google !== 'undefined');
-    const [initialized, setInitialized] = useState(false);
-    const [buttonRendered, setButtonRendered] = useState(false);
-    useEffect(() => {
-        if (typeof google === 'undefined') {
-            createScriptTag('https://accounts.google.com/gsi/client', () => setScriptLoaded(true));
-            return;
-        }
-        if (!initialized) {
-            google.accounts.id.initialize({
-                client_id: googleClientId,
-                callback: handleGoogleCredential,
-            });
-            setInitialized(true);
-        }
-        if (parentRef.current && !buttonRendered) {
-            google.accounts.id.renderButton(parentRef.current, {});
-            setButtonRendered(true);
-        }
-    }, [medplum, googleClientId, initialized, scriptLoaded, parentRef, buttonRendered, handleGoogleCredential]);
-    if (!googleClientId) {
-        return null;
-    }
-    return React.createElement("div", { ref: parentRef });
-}
-function getGoogleClientId(clientId) {
-    var _a, _b;
-    if (clientId) {
-        return clientId;
-    }
-    const origin = window.location.protocol + '//' + window.location.host;
-    const authorizedOrigins = (_b = (_a = "http://localhost:3000,http://localhost:6006,https://app.medplum.com,https://docs.medplum.com") === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
-    if (authorizedOrigins.includes(origin)) {
-        return "921088377005-3j1sa10vr6hj86jgmdfh2l53v3mp7lfi.apps.googleusercontent.com";
-    }
-    return undefined;
-}
-
 function SignInForm(props) {
     const medplum = useMedplum();
     const [login, setLogin] = useState(undefined);
@@ -5369,6 +5675,7 @@ function SignInForm(props) {
 }
 function AuthenticationForm(props) {
     const medplum = useMedplum();
+    const googleClientId = getGoogleClientId(props.googleClientId);
     const [outcome, setOutcome] = useState();
     const issues = getIssuesForExpression(outcome, undefined);
     return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => {
@@ -5389,6 +5696,21 @@ function AuthenticationForm(props) {
             var _a, _b;
             return (React.createElement("div", { "data-testid": "text-field-error", key: (_a = issue.details) === null || _a === void 0 ? void 0 : _a.text }, (_b = issue.details) === null || _b === void 0 ? void 0 : _b.text));
         }))),
+        googleClientId && (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "medplum-signin-google-container" },
+                React.createElement(GoogleButton, { googleClientId: googleClientId, handleGoogleCredential: (response) => {
+                        medplum
+                            .startGoogleLogin({
+                            clientId: props.clientId,
+                            scope: props.scope,
+                            nonce: props.nonce,
+                            googleClientId: response.clientId,
+                            googleCredential: response.credential,
+                        })
+                            .then(props.handleAuthResponse)
+                            .catch(setOutcome);
+                    } })),
+            React.createElement("div", { className: "medplum-signin-separator" }, "or"))),
         React.createElement(FormSection, { title: "Email", htmlFor: "email", outcome: outcome },
             React.createElement(Input, { name: "email", type: "email", testid: "email", required: true, autoFocus: true, outcome: outcome })),
         React.createElement(FormSection, { title: "Password", htmlFor: "password", outcome: outcome },
@@ -5401,20 +5723,7 @@ function AuthenticationForm(props) {
                 React.createElement("input", { type: "checkbox", id: "remember", name: "remember", value: "true" }),
                 React.createElement("label", { htmlFor: "remember" }, "Remember me")),
             React.createElement("div", null,
-                React.createElement(Button, { type: "submit", testid: "submit" }, "Sign in"))),
-        React.createElement("div", { className: "medplum-signin-google-container" },
-            React.createElement(GoogleButton, { googleClientId: props.googleClientId, handleGoogleCredential: (response) => {
-                    medplum
-                        .startGoogleLogin({
-                        clientId: props.clientId,
-                        scope: props.scope,
-                        nonce: props.nonce,
-                        googleClientId: response.clientId,
-                        googleCredential: response.credential,
-                    })
-                        .then(props.handleAuthResponse)
-                        .catch(setOutcome);
-                } }))));
+                React.createElement(Button, { type: "submit", testid: "submit" }, "Sign in")))));
 }
 function ProfileForm(props) {
     const medplum = useMedplum();
@@ -5486,5 +5795,5 @@ function TabSwitch(props) {
     })));
 }
 
-export { AddressDisplay, AddressInput, AttachmentArrayDisplay, AttachmentArrayInput, AttachmentInput, Autocomplete, Avatar, BackboneElementInput, Button, Checkbox, CheckboxFormSection, CodeInput, CodeableConceptDisplay, CodeableConceptInput, ContactDetailDisplay, ContactDetailInput, ContactPointDisplay, ContactPointInput, DateTimeDisplay, DateTimeInput, DefaultResourceTimeline, DiagnosticReportDisplay, Document, ElementDefinitionInputSelector, ElementDefinitionTypeInput, EncounterTimeline, ErrorBoundary, FhirPathTable, FooterLinks, Form, FormSection, Header, HumanNameDisplay, HumanNameInput, IdentifierInput, Input, Loading, Logo, MedplumLink, MedplumProvider, MemoizedFhirPathTable, MemoizedSearchControl, MenuItem, ObservationTable, PatientTimeline, PlanDefinitionBuilder, Popup, QuestionnaireBuilder, QuestionnaireForm, QuestionnaireFormItem, QuestionnaireItemType, RangeDisplay, RangeInput, ReferenceInput, RequestGroupDisplay, ResourceArrayDisplay, ResourceArrayInput, ResourceBadge, ResourceBlame, ResourceDiff, ResourceForm, ResourceHistoryTable, ResourceInput, ResourceName, ResourcePropertyDisplay, ResourcePropertyInput, ResourceTable, ResourceTimeline, Scrollable, SearchChangeEvent, SearchClickEvent, SearchControl, SearchFieldEditor, SearchFilterEditor, SearchLoadEvent, Select, ServiceRequestTimeline, SignInForm, StatusBadge, Tab, TabList, TabPanel, TabSwitch, TextArea, Timeline, TimelineItem, TitleBar, UploadButton, addDateEqualsFilter, addDateFilter, addDateFilterBetween, addField, addFilter, addLastMonthFilter, addMissingFilter, addNextMonthFilter, addQuestionnaireInitialValues, addThisMonthFilter, addTodayFilter, addTomorrowFilter, addYearToDateFilter, addYesterdayFilter, buildFieldNameString, clearFilters, clearFiltersOnField, convertIsoToLocal, convertLocalToIso, createScriptTag, deleteFilter, formatRangeString, getOpString, getSearchOperators, getSortField, getTimeString, getValueAndType, hasFilterOnField, isChoiceQuestion, isSortDescending, movePage, parseForm, renderValue, setFilters, setOffset, setPropertyValue, setSort, sortByDateAndPriority, toggleSort, useMedplum, useMedplumContext, useMedplumProfile, useResource };
+export { AddressDisplay, AddressInput, AttachmentArrayDisplay, AttachmentArrayInput, AttachmentInput, Autocomplete, Avatar, BackboneElementInput, Button, Checkbox, CheckboxFormSection, CodeInput, CodeableConceptDisplay, CodeableConceptInput, ContactDetailDisplay, ContactDetailInput, ContactPointDisplay, ContactPointInput, DateTimeDisplay, DateTimeInput, DefaultResourceTimeline, DiagnosticReportDisplay, Document, ElementDefinitionInputSelector, ElementDefinitionTypeInput, EncounterTimeline, ErrorBoundary, FhirPathTable, FooterLinks, Form, FormSection, Header, HumanNameDisplay, HumanNameInput, IdentifierInput, Input, Loading, Logo, MedplumLink, MedplumProvider, MemoizedFhirPathTable, MemoizedSearchControl, MenuItem, ObservationTable, PatientTimeline, PlanDefinitionBuilder, Popup, QuestionnaireBuilder, QuestionnaireForm, QuestionnaireFormItem, QuestionnaireItemType, RangeDisplay, RangeInput, ReferenceInput, RegisterForm, RequestGroupDisplay, ResourceArrayDisplay, ResourceArrayInput, ResourceBadge, ResourceBlame, ResourceDiff, ResourceForm, ResourceHistoryTable, ResourceInput, ResourceName, ResourcePropertyDisplay, ResourcePropertyInput, ResourceTable, ResourceTimeline, Scheduler, Scrollable, SearchChangeEvent, SearchClickEvent, SearchControl, SearchFieldEditor, SearchFilterEditor, SearchLoadEvent, Select, ServiceRequestTimeline, SignInForm, StatusBadge, Tab, TabList, TabPanel, TabSwitch, TextArea, Timeline, TimelineItem, TitleBar, UploadButton, addDateEqualsFilter, addDateFilter, addDateFilterBetween, addField, addFilter, addLastMonthFilter, addMissingFilter, addNextMonthFilter, addQuestionnaireInitialValues, addThisMonthFilter, addTodayFilter, addTomorrowFilter, addYearToDateFilter, addYesterdayFilter, buildFieldNameString, clearFilters, clearFiltersOnField, convertIsoToLocal, convertLocalToIso, createScriptTag, deleteFilter, formatRangeString, getOpString, getRecaptcha, getSearchOperators, getSortField, getTimeString, getValueAndType, hasFilterOnField, initRecaptcha, isChoiceQuestion, isSortDescending, movePage, parseForm, renderValue, setFilters, setOffset, setPropertyValue, setSort, sortByDateAndPriority, toggleSort, useMedplum, useMedplumContext, useMedplumProfile, useResource };
 //# sourceMappingURL=index.js.map