date picker

apps/react/src/components/EpilogFormContainer.tsx

@@ -2,7 +2,7 @@ import { useContext } from "react";
 import { classNames } from "../utils/classNames";
 import { Button } from "./Button";
 import Container from "./Container";
-/* import FormDataSpy from "./FormDataSpy"; */
+import FormDataSpy from "./FormDataSpy"; 
 import { ExistingClaimContext } from "../contexts/existingClaimContext";
 
 type Input = {
@@ -20,7 +20,7 @@ const EpilogFormContainer: React.FC<Input> = ({
   onSave,
   isCovered,
   children,
-/*   __debugFormData, */
+  __debugFormData
 }) => {
   const claimId = useContext(ExistingClaimContext);
 
@@ -54,7 +54,7 @@ const EpilogFormContainer: React.FC<Input> = ({
           Important Coverage Note: Cardinal Care only covers services received at <br/>(a) Stanford Health Care, (b) Menlo Medical Clinic, or (c) Sutter Health
         </div>
         {children}
-        {/*{__debugFormData && <FormDataSpy data={__debugFormData} />}*/}
+        {__debugFormData && <FormDataSpy data={__debugFormData} />}
       </Container>
     </>
   );

apps/react/src/components/InputDate.tsx

@@ -1,116 +1,54 @@
-import { DateTime } from "luxon";
-import { useCallback, useMemo, useRef, useState } from "react";
-import { FaRegCalendarAlt } from "react-icons/fa";
-import Datepicker from "tailwind-datepicker-react";
+import { useCallback, useContext, useState } from "react";
+//import { InputContext } from "../contexts/inputContext";
 import { COMMON_INPUT_CLASSES } from "../consts/classes.const";
-import { classNames } from "../utils/classNames";
-import { stringToDate } from "../utils/epilogUtils";
-import { getButtonClassNames } from "./Button";
 
-// https://github.com/OMikkel/tailwind-datepicker-react
-
-/* -------------------------------------------------------------------------- */
-/*                                    Types                                   */
-/* -------------------------------------------------------------------------- */
-
-type InputDate_Input = Omit<
-  React.ComponentProps<typeof Datepicker>,
-  "show" | "setShow"
-> & { onBlur?: () => void };
-
-/* -------------------------------------------------------------------------- */
-/*                                  Functions                                 */
-/* -------------------------------------------------------------------------- */
-
-// We have to override the stuff that comes from Datepicker
-const buttonClassNames = classNames(
-  getButtonClassNames("gray"),
-  "rounded-none",
-);
+type InputDateProps = {
+  value: string; // ISO date string "YYYY-MM-DD"
+  onChange: (newDate: Date) => void;
+  onBlur?: () => void;
+};
 
-const InputDate: React.FC<InputDate_Input> = ({
-  options,
+const InputDate: React.FC<InputDateProps> = ({
   value,
   onChange,
-  ...props
+  onBlur
 }) => {
-  const [show, setShow] = useState(false);
-  const datePickerWrapperRef = useRef(null);
-
-  const onChangeCallback = useCallback(
-    (date) => {
-      const dateString = DateTime.fromJSDate(date).toISODate();
-      setInputValue(dateString);
-      onChange?.(date);
-      // Keep the calendar open even after selecting a date
-    },
-    [onChange],
-  );
-
-  const opts = useMemo(
-    () => ({
-      ...options,
-      theme: {
-        selected: "bg-blue-500 hover:bg-blue-700 text-white",
-      },
-    }),
-    [options],
-  );
-
-  const [inputValue, setInputValue] = useState(
-    DateTime.fromJSDate(value).toISODate(),
-  );
+//  const inputContext = useContext(InputContext);
+//  if (!inputContext) {
+//    throw new Error("InputContext must be provided");
+//  }
+
+  const [inputValue, setInputValue] = useState(value);
+  console.log("inputValueinInputDate", inputValue);
+  console.log("valueinInputDate", value);
+
+
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const newDateValue = e.target.value; // "YYYY-MM-DD" format
+    setInputValue(newDateValue);
+    if (newDateValue.match(/^\d{4}-\d{2}-\d{2}$/)) {
+      const parts = newDateValue.split('-');
+      const year = parts[0] || '1970'; // Default to 1970 if undefined
+      const month = parts[1] || '01'; // Default to January if undefined
+      const day = parts[2] || '01'; // Default to the first day if undefined
+      onChange(new Date(parseInt(year, 10), parseInt(month, 10) - 1, parseInt(day, 10)));
+    }
+  }, [onChange]);
 
   return (
-    <>
-      <div className="relative">
-        <button
-          onClick={() => setShow(!show)}
-          className="absolute right-0 top-0 mr-3 mt-2"
-        >
-          <FaRegCalendarAlt className="text-xl" /> {/* Calendar icon */}
-        </button>
+    <label style={{ display: 'block', marginBottom: '10px', fontSize: '16px' }}>
+      <div style={{ position: 'relative' }}>
         <input
-          type="text"
+          type="date"
+          name="coverageStartDate"
           value={inputValue}
-          onChange={(e) => {
-            setInputValue(e.target.value);
-          }}
-          onBlur={(e) => {
-            // Check whether in correct format
-            const pattern: RegExp = /^\d{4}-\d{2}-\d{2}$/;
-            if (!pattern.test(inputValue)) {
-              return;
-            }
-            // Check whether it's a valid date
-            if (Number.isNaN(Date.parse(inputValue))) {
-              return;
-            }
-
-            const [year, month, day] = inputValue.split("-");
-
-            onChangeCallback(stringToDate(`${day}_${month}_${year}`));
-          }}
-          className={COMMON_INPUT_CLASSES + " w-full"}
-          placeholder="YYYY-MM-DD"
+          onChange={handleChange}
+          onBlur={onBlur}
+          className={COMMON_INPUT_CLASSES + " pl-4 pr-2 py-2 border rounded"}
+          style={{ display: 'block', width: '100%', fontSize: '16px', lineHeight: '20px' }}
         />
-        {show && (
-          <div className="date-picker-wrapper" ref={datePickerWrapperRef}>
-            <Datepicker
-              {...props}
-              show={show}
-              setShow={setShow}
-              onChange={onChangeCallback}
-              options={opts}
-            />
-            <button
-              onClick={() => setShow(false)}
-              className="absolute top-0 right-0 mt-2 mr-2 text-lg"
-            ></button>
-          </div>
-        )}
       </div>
-    </>
+    </label>
   );
 };
 

apps/react/src/components/InputSelectButtons.tsx

@@ -29,43 +29,51 @@ export default function InputSelectButtons<
   canDeselect = true,
   options,
 }: InputSelectButtons_Input<TOptions, TValue>) {
-  const isSelected = (opt: TOptions[number]) =>
-    Array.isArray(value)
-      ? value.some((v) => v.id === opt.id)
-      : value && value.id === opt.id;
+  const isSelected = (opt: TOptions[number]) => {
+    const optionKey = opt.id || opt.value;  // Assuming all options have either an id or value
+    return Array.isArray(value)
+      ? value.some((v) => v.id === optionKey || v.label === optionKey)
+      : value && (value.id === optionKey || value.label === optionKey);
+  };
+
+  console.log("Current value in InputSelectButtons: ", value); 
+
+
 
   return (
     <div className="flex gap-3 flex-wrap">
-      {options.map((opt) => (
-        <Button
-          key={opt.id}
-          className={classNames("-uppercase", [
-            isSelected(opt),
-            "bg-blue-200 hover:bg-blue-100",
-          ])}
-          disabled={opt?.specialStatus === "disabled"}
-          onClick={() => {
-            if (opt.specialStatus === "disabled") return;
-            if (isSelected(opt) && canDeselect) {
-              // Now unselect
-              onChange?.(
-                (Array.isArray(value)
-                  ? Object.freeze(value.filter((v) => v.id !== opt.id))
-                  : null) as TValue,
-              );
-            } else {
-              onChange?.(
-                (Array.isArray(value)
+      {options.map((opt) => {
+        const optKey = opt.id || opt.value;  // Handle options with id or value
+        isSelected(opt) ? console.log("isSelected(opt) is true", opt.label) : console.log("");
+        return (
+          <Button
+            key={optKey}
+            className={classNames("-uppercase", [
+              isSelected(opt),
+              "bg-blue-200 hover:bg-blue-100",
+            ])}
+            disabled={opt.specialStatus === "disabled"}
+            onClick={() => {
+              if (opt.specialStatus === "disabled") return;
+              const isOptSelected = isSelected(opt);
+              if (isOptSelected && canDeselect) {
+                const newValue = Array.isArray(value)
+                  ? Object.freeze(value.filter((v) => v.id !== optKey && v.value !== optKey))
+                  : null;
+                onChange?.(newValue as TValue);
+              } else {
+                const newValue = Array.isArray(value)
                   ? [...value, opt]
-                  : opt) as unknown as TValue,
-              );
-            }
-            onBlur?.();
-          }}
-        >
-          {opt.label}
-        </Button>
-      ))}
+                  : opt;
+                onChange?.(newValue as unknown as TValue);
+              }
+              onBlur?.();
+            }}
+          >
+            {opt.label}
+          </Button>
+        );
+      })}
     </div>
   );
 }

apps/react/src/components/RequiresExistingClaim.tsx

@@ -13,7 +13,9 @@ export default function RequiresExistingClaim({
 }) {
   /* ------------------------ Environmental conditions ------------------------ */
 
+
   const userDataset = useContext(UserDatasetContext);
+  console.log("userDatasetContext", UserDatasetContext);
 
   if (!userDataset)
     throw new Error(
@@ -22,8 +24,11 @@ export default function RequiresExistingClaim({
 
   /* ------------------------------ Actual check ------------------------------ */
 
+  console.log("userDataset in RequiresExistingClaim", userDataset);
   const existingClaimIds = getExistingIds("claim", userDataset);
 
+  console.log("existingClaimIds In RequiresExistingClaim", existingClaimIds);
+
   if (!existingClaimIds.includes(claimId)) {
     return (
       <Callout

apps/react/src/components/RequiresUserDataset.tsx

@@ -28,7 +28,7 @@ export default function RequiresUserDataset({
   if (query.isError)
     return (
       <Callout
-        heading="Network erorr"
+        heading="Network error"
         addGoHomeButton={true}
         wrapInFullpageContainer={true}
       >