@tellescope/react-components 1.230.0 → 1.230.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.230.0",
+  "version": "1.230.2",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -47,13 +47,13 @@
     "@reduxjs/toolkit": "^1.6.2",
     "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^1.52.1",
-    "@tellescope/constants": "1.230.0",
-    "@tellescope/sdk": "1.230.0",
-    "@tellescope/types-client": "1.230.0",
-    "@tellescope/types-models": "1.230.0",
-    "@tellescope/types-utilities": "1.230.0",
-    "@tellescope/utilities": "1.230.0",
-    "@tellescope/validation": "1.230.0",
+    "@tellescope/constants": "1.230.2",
+    "@tellescope/sdk": "1.230.2",
+    "@tellescope/types-client": "1.230.2",
+    "@tellescope/types-models": "1.230.2",
+    "@tellescope/types-utilities": "1.230.2",
+    "@tellescope/utilities": "1.230.2",
+    "@tellescope/validation": "1.230.2",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "css-to-react-native": "^3.0.0",
@@ -83,7 +83,7 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-native": "^0.65.0 || ^0.66.0 || ^0.67.0 || ^0.68.0 || ^0.71.0"
   },
-  "gitHead": "1b1aa59aee4b8ee1610bc292143e2a2cd08f6ed3",
+  "gitHead": "0bc1e80c698398e1c62c4f026fa76475883f2396",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/forms.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { Button, CircularProgress, FileBlob, FileUploadHandler, Flex, LinearProgress, LoadingButton, Modal, Paper, Styled, Typography, form_display_text_for_language, useFileUpload, useFormResponses, useSession } from "../index"
 import { useListForFormFields, useOrganizationTheme, useTellescopeForm, WithOrganizationTheme, Response, FileResponse, NextFieldLogicOptions } from "./hooks"
 import { ChangeHandler, FormInputs } from "./types"
-import { AddToDatabaseProps, AddressInput, AllergiesInput, AppointmentBookingInput, ChargeebeeInput, ConditionsInput, DatabaseSelectInput, DateInput, DateStringInput, DropdownInput, EmailInput, EmotiiInput, FileInput, FilesInput, HeightInput, HiddenValueInput, InsuranceInput, LanguageSelect, MedicationsInput, MultipleChoiceInput, NumberInput, PhoneInput, Progress, RankingInput, RatingInput, RedirectInput, RelatedContactsInput, RichTextInput, SignatureInput, StringInput, StringLongInput, StripeInput, TableInput, TimeInput, TimezoneInput, defaultButtonStyles } from "./inputs"
+import { AddToDatabaseProps, AddressInput, AllergiesInput, AppointmentBookingInput, BelugaPatientPreferenceInput, ChargeebeeInput, ConditionsInput, DatabaseSelectInput, DateInput, DateStringInput, DropdownInput, EmailInput, EmotiiInput, FileInput, FilesInput, HeightInput, HiddenValueInput, InsuranceInput, LanguageSelect, MedicationsInput, MultipleChoiceInput, NumberInput, PhoneInput, Progress, RankingInput, RatingInput, RedirectInput, RelatedContactsInput, RichTextInput, SignatureInput, StringInput, StringLongInput, StripeInput, TableInput, TimeInput, TimezoneInput, defaultButtonStyles } from "./inputs"
 import { PRIMARY_HEX } from "@tellescope/constants"
 import { FormResponse, FormField, Form, Enduser } from "@tellescope/types-client"
 import { FormResponseAnswerFileValue, OrganizationTheme } from "@tellescope/types-models"
@@ -190,6 +190,7 @@ export const QuestionForField = ({
   const Allergies = customInputs?.['Allergies'] ?? AllergiesInput
   const Conditions = customInputs?.['Conditions'] ?? ConditionsInput
   const RichText = customInputs?.['Rich Text'] ?? RichTextInput
+  const BelugaPatientPreference = customInputs?.['Beluga Patient Preference'] ?? BelugaPatientPreferenceInput
 
   const validationMessage = validateField(field)
 
@@ -357,6 +358,9 @@ export const QuestionForField = ({
         : field.type === 'Medications' ? (
           <Medications field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'Medications'>} form={form}/>
         )
+        : field.type === 'Beluga Patient Preference' ? (
+          <BelugaPatientPreference field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'Beluga Patient Preference'>} form={form}/>
+        )
         : field.type === 'Insurance' ? (
           <Insurance field={field} value={value.answer.value as any} form={form}
             onDatabaseSelect={handleDatabaseSelect}

package/src/Forms/forms.v2.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { Button, CircularProgress, FileBlob, FileUploadHandler, Flex, LinearProgress, LoadingButton, Modal, Paper, Styled, Typography, WithTheme, form_display_text_for_language, useFileUpload, useFormResponses, useSession } from "../index"
 import { useListForFormFields, useOrganizationTheme, useTellescopeForm, WithOrganizationTheme, Response, FileResponse, NextFieldLogicOptions } from "./hooks"
 import { ChangeHandler, FormInputs } from "./types"
-import { AddToDatabaseProps, AddressInput, AllergiesInput, AppointmentBookingInput, ChargeebeeInput, ConditionsInput, DatabaseSelectInput, DateInput, DateStringInput, DropdownInput, EmailInput, EmotiiInput, FileInput, FilesInput, HeightInput, HiddenValueInput, InsuranceInput, LanguageSelect, MedicationsInput, MultipleChoiceInput, NumberInput, PhoneInput, Progress, RankingInput, RatingInput, RedirectInput, RelatedContactsInput, RichTextInput, SignatureInput, StringInput, StringLongInput, StripeInput, TableInput, TimeInput, TimezoneInput, defaultButtonStyles } from "./inputs.v2"
+import { AddToDatabaseProps, AddressInput, AllergiesInput, AppointmentBookingInput, BelugaPatientPreferenceInput, ChargeebeeInput, ConditionsInput, DatabaseSelectInput, DateInput, DateStringInput, DropdownInput, EmailInput, EmotiiInput, FileInput, FilesInput, HeightInput, HiddenValueInput, InsuranceInput, LanguageSelect, MedicationsInput, MultipleChoiceInput, NumberInput, PhoneInput, Progress, RankingInput, RatingInput, RedirectInput, RelatedContactsInput, RichTextInput, SignatureInput, StringInput, StringLongInput, StripeInput, TableInput, TimeInput, TimezoneInput, defaultButtonStyles } from "./inputs.v2"
 import { PRIMARY_HEX } from "@tellescope/constants"
 import { FormResponse, FormField, Form, Enduser } from "@tellescope/types-client"
 import { FormResponseAnswerFileValue, OrganizationTheme } from "@tellescope/types-models"
@@ -44,8 +44,24 @@ const TellescopeFormContainerWithThemeV2: typeof TellescopeFormContainerV2 = ({
   const finalBgColor = shouldUseCustomBg ? backgroundColor : '#F4F3FA'
 
   return (
-    <Flex flex={1} column alignItems="center" style={{ backgroundColor: finalBgColor, overflow: 'hidden', paddingTop: 40, paddingBottom: 40, ...style }}>
-      <Flex flex={1} column style={{ padding: '0 20px', maxWidth: maxWidth ?? 650, minWidth: 250, width: '100%', height: '100%' }}>
+    <Flex flex={1} column alignItems="center" style={{
+      backgroundColor: finalBgColor,
+      overflow: 'auto',
+      paddingTop: window.innerWidth < 600 ? 20 : 40,
+      paddingBottom: window.innerWidth < 600 ? 20 : 40,
+      ...style
+    }}>
+      <Flex flex={1} column style={{
+        padding: window.innerWidth < 600 ? '0 12px' : '0 20px',
+        maxWidth: maxWidth ?? 650,
+        minWidth: 250,
+        width: '100%',
+        height: '100%',
+        boxSizing: 'border-box',
+        ...(window.innerWidth < 600 ? {
+          paddingBottom: '80px' // Extra bottom padding on mobile to keep button above Safari navigation
+        } : {})
+      }}>
         {language && onChangeLanguage &&
           <Flex style={{ marginTop: 22 }}>
             <LanguageSelect value={language} onChange={onChangeLanguage} />
@@ -167,6 +183,7 @@ export const QuestionForField = ({
   const Allergies = customInputs?.['Allergies'] ?? AllergiesInput
   const Conditions = customInputs?.['Conditions'] ?? ConditionsInput
   const RichText = customInputs?.['Rich Text'] ?? RichTextInput
+  const BelugaPatientPreference = customInputs?.['Beluga Patient Preference'] ?? BelugaPatientPreferenceInput
 
   const validationMessage = validateField(field)
 
@@ -333,6 +350,9 @@ export const QuestionForField = ({
         : field.type === 'Medications' ? (
           <Medications field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'Medications'>} form={form}/>
         )
+        : field.type === 'Beluga Patient Preference' ? (
+          <BelugaPatientPreference field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'Beluga Patient Preference'>} form={form}/>
+        )
         : field.type === 'Insurance' ? (
           <Insurance field={field} value={value.answer.value as any} form={form}
             onDatabaseSelect={handleDatabaseSelect}

package/src/Forms/hooks.tsx

@@ -1,4 +1,4 @@
-import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react"
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react"
 import { Session } from "@tellescope/sdk"
 import { ChangeHandler, FormFieldNode } from "./types"
 import { DatabaseRecord, Enduser, Form, FormField, FormResponse } from "@tellescope/types-client"
@@ -9,7 +9,7 @@ import { WithTheme, contact_is_valid, useAddGTMTag, useFileUpload, useFormFields
 import ReactGA from "react-ga4";
 
 import isEmail from "validator/lib/isEmail"
-import { append_current_utm_params, emit_gtm_event, field_can_autoadvance, getLocalTimezone, get_time_values, get_utm_params, is_object, object_is_empty, read_local_storage, responses_satisfy_conditions, update_local_storage } from "@tellescope/utilities"
+import { append_current_utm_params, emit_gtm_event, field_can_autoadvance, getLocalTimezone, get_time_values, get_utm_params, is_object, object_is_empty, read_local_storage, replace_form_field_template_values, responses_satisfy_conditions, update_local_storage } from "@tellescope/utilities"
 
 export const useFlattenedTree = (root?: FormFieldNode) => {
   const flat: FormField[] = []
@@ -1419,6 +1419,30 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
     return false
   }, [activeField, validateField, uploadingFiles])
 
+  // Helper function to apply templating to responses
+  // Templates field titles/descriptions with current enduser data and form response values
+  // Can be called whenever we need to update templates (e.g., on "next" button click)
+  const applyTemplatingToResponses = useCallback((
+    currentResponses: Response[]
+  ): Response[] => {
+    return currentResponses.map(response => {
+      const originalField = fields.find(f => f.id === response.fieldId) || response.field
+
+      return {
+        ...response,
+        fieldTitle: replace_form_field_template_values(originalField.title || '', { enduser, responses: currentResponses }),
+        fieldDescription: replace_form_field_template_values(originalField.description || '', { enduser, responses: currentResponses }),
+        fieldHtmlDescription: replace_form_field_template_values(originalField.htmlDescription || '', { enduser, responses: currentResponses }),
+        field: {
+          ...response.field,
+          title: replace_form_field_template_values(originalField.title || '', { enduser, responses: currentResponses }),
+          description: replace_form_field_template_values(originalField.description || '', { enduser, responses: currentResponses }),
+          htmlDescription: replace_form_field_template_values(originalField.htmlDescription || '', { enduser, responses: currentResponses }),
+        }
+      }
+    })
+  }, [fields, enduser])
+
   const autoAdvanceRef = useRef(false)
   // don't make option, to avoid user passing invalid data, like an onclick event
   const goToNextField = useCallback((answer: FormResponseValue['answer'] | undefined) => {
@@ -1426,10 +1450,24 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
     if (isNextDisabled() && currentValue?.answer.type !== 'Hidden Value') return
 
     console.log('going to next field')
+
+    // If an answer is provided (e.g., from Hidden Value), update responses first
+    const responsesWithAnswer = answer
+      ? responses.map(r =>
+          r.fieldId === currentValue.fieldId
+            ? { ...r, answer }
+            : r
+        )
+      : responses
+
+    // Apply templating to all responses including the newly updated answer
+    const templatedResponses = applyTemplatingToResponses(responsesWithAnswer)
+    setResponses(templatedResponses)
+
     if (currentValue.answer.type === 'Question Group') {
       const responsesToSave = (
         (currentValue.field.options?.subFields || [])
-        .map(({ id }) => responses.find(f => f.fieldId === id)!)
+        .map(({ id }) => templatedResponses.find(f => f.fieldId === id)!)
         .filter(f => f && f?.answer.type !== 'file' && f?.answer.type !== 'files')
       )
       if (responsesToSave.length) {
@@ -1440,7 +1478,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
         })
         .catch(console.error)
       }
-    } 
+    }
     else if (currentValue?.answer?.type !== 'file' && currentValue?.answer?.type !== 'files' && (formResponseId || accessCode)) {
       session.api.form_responses.save_field_response({
         accessCode,
@@ -1455,17 +1493,26 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
 
     try { window.scrollTo({ top: 0 }) } catch(err) {} // scroll to top if needed
     setActiveField(activeField => {
-      let newField = getNextField(activeField, currentValue, responses, logicOptions)
+      let newField = getNextField(activeField, currentValue, templatedResponses, logicOptions)
 
       // when autoadvancing, prevent adding duplicates by checking whether already on stack
       if (newField !== undefined && !prevFieldStackRef.current.find(v => v.value.id === activeField?.value.id)) {
         prevFieldStackRef.current.push(activeField)
         setCurrentPageIndex(i => i + 1)
       }
-      
-      return newField || activeField
+
+      const fieldToReturn = newField || activeField
+
+      // Apply templating to the active field by pulling from the templated responses
+      // This ensures the UI displays templated titles/descriptions immediately
+      const templatedResponse = templatedResponses.find(r => r.fieldId === fieldToReturn.value.id)
+      if (templatedResponse) {
+        fieldToReturn.value = templatedResponse.field
+      }
+
+      return fieldToReturn
     })
-  }, [prevFieldStackRef, currentValue, isNextDisabled, updateFormResponse, session, responses, logicOptions, accessCode, formResponseId, setActiveField, setCurrentPageIndex])
+  }, [prevFieldStackRef, currentValue, isNextDisabled, updateFormResponse, session, responses, logicOptions, accessCode, formResponseId, setActiveField, setCurrentPageIndex, applyTemplatingToResponses])
 
   useEffect(() => {
     if (dontAutoadvance) return

package/src/Forms/index.ts

@@ -6,4 +6,5 @@ export * from "./types";
 export * from "./localization";
 
 // V2 Forms exports
-export { TellescopeFormV2, TellescopeFormContainerV2, TellescopeSingleQuestionFlowV2 } from "./forms.v2";
+export { TellescopeFormV2, TellescopeFormContainerV2, TellescopeSingleQuestionFlowV2 } from "./forms.v2";
+export { defaultInputProps as inputPropsV2 } from "./inputs.v2";

package/src/Forms/inputs.tsx

@@ -4,7 +4,7 @@ import { Autocomplete, Box, Button, Checkbox, Chip, Collapse, Divider, FormContr
 import { FormInputProps } from "./types"
 import { useDropzone } from "react-dropzone"
 import { CANVAS_TITLE, EMOTII_TITLE, INSURANCE_RELATIONSHIPS, INSURANCE_RELATIONSHIPS_CANVAS, PRIMARY_HEX, RELATIONSHIP_TYPES, TELLESCOPE_GENDERS } from "@tellescope/constants"
-import { MM_DD_YYYY_to_YYYY_MM_DD, capture_is_supported, downloadFile, emit_gtm_event, first_letter_capitalized, form_response_value_to_string, getLocalTimezone, getPublicFileURL, mm_dd_yyyy, replace_enduser_template_values, truncate_string, update_local_storage, user_display_name } from "@tellescope/utilities"
+import { MM_DD_YYYY_to_YYYY_MM_DD, capture_is_supported, downloadFile, emit_gtm_event, first_letter_capitalized, form_response_value_to_string, format_stripe_subscription_interval, getLocalTimezone, getPublicFileURL, mm_dd_yyyy, replace_enduser_template_values, truncate_string, update_local_storage, user_display_name } from "@tellescope/utilities"
 import { Address, DatabaseSelectResponse, Enduser, EnduserRelationship, FormResponseValue, InsuranceRelationship, MedicationResponse, MultipleChoiceOptions, FormFieldOptionDetails, TellescopeGender, TIMEZONES_USA } from "@tellescope/types-models"
 import { VALID_STATES, emailValidator, phoneValidator } from "@tellescope/validation"
 import Slider from '@mui/material/Slider';
@@ -1898,7 +1898,7 @@ export const StripeInput = ({ field, value, onChange, setCustomerId, enduserId }
                       ${(priceAmount / 100).toFixed(2)} {priceCurrency.toUpperCase()}
                       {product.currentPrice?.isSubscription && (
                         <Typography component="span" variant="caption" sx={{ ml: 0.5 }}>
-                          /month
+                          {format_stripe_subscription_interval(product.currentPrice?.interval, product.currentPrice?.interval_count)}
                         </Typography>
                       )}
                     </Typography>
@@ -2948,6 +2948,164 @@ export const MedicationsInput = ({ field, value, onChange, ...props }: FormInput
   )
 }
 
+export const BelugaPatientPreferenceInput = ({ field, value: _value, onChange }: FormInputProps<'Beluga Patient Preference'>) => {
+  const value = Array.isArray(_value) ? _value : []
+
+  return (
+    <Grid container direction="column" sx={{ mt: 2 }}>
+    {value.map((v, i) => (
+      <>
+      <Grid item key={i}>
+      <Grid container alignItems="center" wrap="nowrap">
+        <Grid item sx={{ width: '100%'}}>
+        <Grid container direction="column" spacing={1.5}>
+          <Grid item>
+            <TextField label="Medication Name" size="small" fullWidth required
+              value={v.name ?? ''}
+              onChange={e =>
+                onChange(
+                  value.map((_v, _i) => (
+                    i === _i ? { ..._v, name: e.target.value } : _v
+                  )),
+                  field.id,
+                )
+              }
+            />
+          </Grid>
+
+          <Grid item>
+            <Grid container spacing={1}>
+              <Grid item xs={12} md={6}>
+                <TextField label="Strength" size="small" fullWidth required
+                  value={v.strength ?? ''}
+                  onChange={e =>
+                    onChange(
+                      value.map((_v, _i) => (
+                        i === _i ? { ..._v, strength: e.target.value } : _v
+                      )),
+                      field.id,
+                    )
+                  }
+                />
+              </Grid>
+              <Grid item xs={12} md={6}>
+                <TextField label="Dispense Unit" size="small" fullWidth required
+                  value={v.dispenseUnit ?? ''}
+                  onChange={e =>
+                    onChange(
+                      value.map((_v, _i) => (
+                        i === _i ? { ..._v, dispenseUnit: e.target.value } : _v
+                      )),
+                      field.id,
+                    )
+                  }
+                />
+              </Grid>
+            </Grid>
+          </Grid>
+
+          <Grid item>
+            <Grid container spacing={1}>
+              <Grid item xs={12} md={4}>
+                <TextField label="Quantity" size="small" fullWidth required
+                  value={v.quantity ?? ''}
+                  onChange={e =>
+                    onChange(
+                      value.map((_v, _i) => (
+                        i === _i ? { ..._v, quantity: e.target.value } : _v
+                      )),
+                      field.id,
+                    )
+                  }
+                />
+              </Grid>
+              <Grid item xs={12} md={4}>
+                <TextField label="Refills" size="small" fullWidth required
+                  value={v.refills ?? ''}
+                  onChange={e =>
+                    onChange(
+                      value.map((_v, _i) => (
+                        i === _i ? { ..._v, refills: e.target.value } : _v
+                      )),
+                      field.id,
+                    )
+                  }
+                />
+              </Grid>
+              <Grid item xs={12} md={4}>
+                <TextField label="Days Supply" size="small" fullWidth required
+                  value={v.daysSupply ?? ''}
+                  onChange={e =>
+                    onChange(
+                      value.map((_v, _i) => (
+                        i === _i ? { ..._v, daysSupply: e.target.value } : _v
+                      )),
+                      field.id,
+                    )
+                  }
+                />
+              </Grid>
+            </Grid>
+          </Grid>
+
+          <Grid item>
+            <TextField label="Sig (Instructions)" size="small" fullWidth required multiline rows={2}
+              value={v.sig ?? ''}
+              onChange={e =>
+                onChange(
+                  value.map((_v, _i) => (
+                    i === _i ? { ..._v, sig: e.target.value } : _v
+                  )),
+                  field.id,
+                )
+              }
+            />
+          </Grid>
+
+          <Grid item>
+            <TextField label="Med ID (NDC11)" size="small" fullWidth required
+              value={v.medId ?? ''}
+              onChange={e =>
+                onChange(
+                  value.map((_v, _i) => (
+                    i === _i ? { ..._v, medId: e.target.value } : _v
+                  )),
+                  field.id,
+                )
+              }
+            />
+          </Grid>
+
+          <Grid item>
+            <Typography color="primary" sx={{ textDecoration: 'underline', cursor: 'pointer' }}
+              onClick={() => onChange(value.filter((_, _i) => i !== _i), field.id)}
+            >
+              Remove medication
+            </Typography>
+          </Grid>
+        </Grid>
+        </Grid>
+      </Grid>
+      </Grid>
+
+      <Grid item><Divider flexItem sx={{ my: 1 }} /></Grid>
+      </>
+    ))}
+
+      <Grid item>
+        <Button color="primary" variant="outlined"
+          onClick={() => onChange([
+            ...value,
+            { name: '', strength: '', quantity: '', refills: '', daysSupply: '', sig: '', dispenseUnit: '', medId: '' }
+          ], field.id)}
+        >
+          Add Medication
+        </Button>
+      </Grid>
+    </Grid>
+  )
+}
+
 export const contact_is_valid = (e: Partial<Enduser>) => {
   if (e.email) {
     try {

package/src/Forms/inputs.v2.tsx

@@ -4,7 +4,7 @@ import { Autocomplete, Box, Button, Checkbox, Chip, Collapse, Divider, FormContr
 import { FormInputProps } from "./types"
 import { useDropzone } from "react-dropzone"
 import { CANVAS_TITLE, EMOTII_TITLE, INSURANCE_RELATIONSHIPS, INSURANCE_RELATIONSHIPS_CANVAS, PRIMARY_HEX, RELATIONSHIP_TYPES, TELLESCOPE_GENDERS } from "@tellescope/constants"
-import { MM_DD_YYYY_to_YYYY_MM_DD, capture_is_supported, downloadFile, emit_gtm_event, first_letter_capitalized, form_response_value_to_string, getLocalTimezone, getPublicFileURL, mm_dd_yyyy, replace_enduser_template_values, truncate_string, update_local_storage, user_display_name } from "@tellescope/utilities"
+import { MM_DD_YYYY_to_YYYY_MM_DD, capture_is_supported, downloadFile, emit_gtm_event, first_letter_capitalized, form_response_value_to_string, format_stripe_subscription_interval, getLocalTimezone, getPublicFileURL, mm_dd_yyyy, replace_enduser_template_values, truncate_string, update_local_storage, user_display_name } from "@tellescope/utilities"
 import { Address, DatabaseSelectResponse, Enduser, EnduserRelationship, FormResponseValue, InsuranceRelationship, MedicationResponse, MultipleChoiceOptions, FormFieldOptionDetails, TellescopeGender, TIMEZONES_USA } from "@tellescope/types-models"
 import { VALID_STATES, emailValidator, phoneValidator } from "@tellescope/validation"
 import Slider from '@mui/material/Slider';
@@ -1561,6 +1561,7 @@ export const MultipleChoiceInput = ({ field, form, value: _value, onChange }: Fo
                       marginBottom: '12px',
                       cursor: 'pointer',
                       backgroundColor: 'transparent',
+                      boxSizing: 'border-box',
                       '&:hover': {
                         backgroundColor: (theme: any) => `${theme.palette.primary.main}14`,
                       },
@@ -1614,7 +1615,8 @@ export const MultipleChoiceInput = ({ field, form, value: _value, onChange }: Fo
                       display: 'flex',
                       alignItems: 'center',
                       cursor: 'pointer',
-                      width: '100%'
+                      width: '100%',
+                      boxSizing: 'border-box'
                     }}
                     onClick={(e) => {
                       // Don't trigger selection if clicking on the expand button
@@ -1911,7 +1913,7 @@ export const StripeInput = ({ field, value, onChange, setCustomerId, enduserId }
                       ${(priceAmount / 100).toFixed(2)} {priceCurrency.toUpperCase()}
                       {product.currentPrice?.isSubscription && (
                         <Typography component="span" variant="caption" sx={{ ml: 0.5 }}>
-                          /month
+                          {format_stripe_subscription_interval(product.currentPrice?.interval, product.currentPrice?.interval_count)}
                         </Typography>
                       )}
                     </Typography>
@@ -2971,6 +2973,172 @@ export const MedicationsInput = ({ field, value, onChange, ...props }: FormInput
   )
 }
 
+export const BelugaPatientPreferenceInput = ({ field, value: _value, onChange }: FormInputProps<'Beluga Patient Preference'>) => {
+  const value = Array.isArray(_value) ? _value : []
+
+  return (
+    <Grid container direction="column" sx={{ mt: 2 }}>
+    {value.map((v, i) => (
+      <>
+      <Grid item key={i}>
+      <Grid container alignItems="center" wrap="nowrap">
+        <Grid item sx={{ width: '100%'}}>
+        <Grid container direction="column" spacing={1.5}>
+          <Grid item>
+            <TextField label="Medication Name" size="small" fullWidth required
+              InputProps={defaultInputProps}
+              value={v.name ?? ''}
+              onChange={e =>
+                onChange(
+                  value.map((_v, _i) => (
+                    i === _i ? { ..._v, name: e.target.value } : _v
+                  )),
+                  field.id,
+                )
+              }
+            />
+          </Grid>
+
+          <Grid item>
+            <Grid container spacing={1}>
+              <Grid item xs={12} md={6}>
+                <TextField label="Strength" size="small" fullWidth required
+                  InputProps={defaultInputProps}
+                  value={v.strength ?? ''}
+                  onChange={e =>
+                    onChange(
+                      value.map((_v, _i) => (
+                        i === _i ? { ..._v, strength: e.target.value } : _v
+                      )),
+                      field.id,
+                    )
+                  }
+                />
+              </Grid>
+              <Grid item xs={12} md={6}>
+                <TextField label="Dispense Unit" size="small" fullWidth required
+                  InputProps={defaultInputProps}
+                  value={v.dispenseUnit ?? ''}
+                  onChange={e =>
+                    onChange(
+                      value.map((_v, _i) => (
+                        i === _i ? { ..._v, dispenseUnit: e.target.value } : _v
+                      )),
+                      field.id,
+                    )
+                  }
+                />
+              </Grid>
+            </Grid>
+          </Grid>
+
+          <Grid item>
+            <Grid container spacing={1}>
+              <Grid item xs={12} md={4}>
+                <TextField label="Quantity" size="small" fullWidth required
+                  InputProps={defaultInputProps}
+                  value={v.quantity ?? ''}
+                  onChange={e =>
+                    onChange(
+                      value.map((_v, _i) => (
+                        i === _i ? { ..._v, quantity: e.target.value } : _v
+                      )),
+                      field.id,
+                    )
+                  }
+                />
+              </Grid>
+              <Grid item xs={12} md={4}>
+                <TextField label="Refills" size="small" fullWidth required
+                  InputProps={defaultInputProps}
+                  value={v.refills ?? ''}
+                  onChange={e =>
+                    onChange(
+                      value.map((_v, _i) => (
+                        i === _i ? { ..._v, refills: e.target.value } : _v
+                      )),
+                      field.id,
+                    )
+                  }
+                />
+              </Grid>
+              <Grid item xs={12} md={4}>
+                <TextField label="Days Supply" size="small" fullWidth required
+                  InputProps={defaultInputProps}
+                  value={v.daysSupply ?? ''}
+                  onChange={e =>
+                    onChange(
+                      value.map((_v, _i) => (
+                        i === _i ? { ..._v, daysSupply: e.target.value } : _v
+                      )),
+                      field.id,
+                    )
+                  }
+                />
+              </Grid>
+            </Grid>
+          </Grid>
+
+          <Grid item>
+            <TextField label="Sig (Instructions)" size="small" fullWidth required multiline rows={2}
+              InputProps={defaultInputProps}
+              value={v.sig ?? ''}
+              onChange={e =>
+                onChange(
+                  value.map((_v, _i) => (
+                    i === _i ? { ..._v, sig: e.target.value } : _v
+                  )),
+                  field.id,
+                )
+              }
+            />
+          </Grid>
+
+          <Grid item>
+            <TextField label="Med ID (NDC11)" size="small" fullWidth required
+              InputProps={defaultInputProps}
+              value={v.medId ?? ''}
+              onChange={e =>
+                onChange(
+                  value.map((_v, _i) => (
+                    i === _i ? { ..._v, medId: e.target.value } : _v
+                  )),
+                  field.id,
+                )
+              }
+            />
+          </Grid>
+
+          <Grid item>
+            <Typography color="primary" sx={{ textDecoration: 'underline', cursor: 'pointer' }}
+              onClick={() => onChange(value.filter((_, _i) => i !== _i), field.id)}
+            >
+              Remove medication
+            </Typography>
+          </Grid>
+        </Grid>
+        </Grid>
+      </Grid>
+      </Grid>
+
+      <Grid item><Divider flexItem sx={{ my: 1 }} /></Grid>
+      </>
+    ))}
+
+      <Grid item>
+        <Button color="primary" variant="outlined"
+          onClick={() => onChange([
+            ...value,
+            { name: '', strength: '', quantity: '', refills: '', daysSupply: '', sig: '', dispenseUnit: '', medId: '' }
+          ], field.id)}
+        >
+          Add Medication
+        </Button>
+      </Grid>
+    </Grid>
+  )
+}
+
 export const contact_is_valid = (e: Partial<Enduser>) => {
   if (e.email) {
     try {