@tellescope/react-components 1.123.1 → 1.125.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.123.1",
+  "version": "1.125.0",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -47,12 +47,12 @@
     "@reduxjs/toolkit": "^1.6.2",
     "@stripe/react-stripe-js": "^2.1.0",
     "@stripe/stripe-js": "^1.52.1",
-    "@tellescope/constants": "^1.123.1",
-    "@tellescope/sdk": "^1.123.1",
-    "@tellescope/types-client": "^1.123.1",
-    "@tellescope/types-models": "^1.123.1",
+    "@tellescope/constants": "^1.125.0",
+    "@tellescope/sdk": "^1.125.0",
+    "@tellescope/types-client": "^1.125.0",
+    "@tellescope/types-models": "^1.125.0",
     "@tellescope/types-utilities": "^1.69.3",
-    "@tellescope/utilities": "^1.123.1",
+    "@tellescope/utilities": "^1.125.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "css-to-react-native": "^3.0.0",
@@ -79,7 +79,7 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-native": "^0.65.0 || ^0.66.0 || ^0.67.0 || ^0.68.0 || ^0.71.0"
   },
-  "gitHead": "f68c00cc64ab7cdd2ad82532ddcde5571aefaf40",
+  "gitHead": "3b7b9e360ded51b4ae485be67060ffbc3897a3c6",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/forms.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from "react"
 import { Button, CircularProgress, Flex, LoadingButton, Modal, Paper, Styled, Typography, form_display_text_for_language, useFileUpload, useFormResponses, useSession } from "../index"
 import { useListForFormFields, useOrganizationTheme, useTellescopeForm, WithOrganizationTheme, Response, FileResponse } from "./hooks"
 import { ChangeHandler, FormInputs } from "./types"
-import { AddressInput, AppointmentBookingInput, DatabaseSelectInput, DateInput, DateStringInput, DropdownInput, EmailInput, FileInput, FilesInput, HeightInput, HiddenValueInput, InsuranceInput, LanguageSelect, MedicationsInput, MultipleChoiceInput, NumberInput, PhoneInput, Progress, RankingInput, RatingInput, RedirectInput, RelatedContactsInput, SignatureInput, StringInput, StringLongInput, StripeInput, TableInput, TimeInput, defaultButtonStyles } from "./inputs"
+import { AddressInput, AppointmentBookingInput, DatabaseSelectInput, DateInput, DateStringInput, DropdownInput, EmailInput, EmotiiInput, FileInput, FilesInput, HeightInput, HiddenValueInput, InsuranceInput, LanguageSelect, MedicationsInput, MultipleChoiceInput, NumberInput, PhoneInput, Progress, RankingInput, RatingInput, RedirectInput, RelatedContactsInput, SignatureInput, StringInput, StringLongInput, StripeInput, TableInput, TimeInput, 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"
@@ -131,6 +131,7 @@ export const QuestionForField = ({
   groupInstance,
   goToNextField,
   spacing,
+  isSinglePage,
 } : {
   spacing?: number,
   form?: Form,
@@ -140,6 +141,7 @@ export const QuestionForField = ({
   file: FileResponse,
   field: FormField,
   setCustomerId: React.Dispatch<React.SetStateAction<string | undefined>>,
+  isSinglePage?: boolean,
 } & Pick<TellescopeFormProps, "goToNextField" | "groupId" | "groupInstance" | "submit" | "formResponseId" | 'enduserId' | 'isPreviousDisabled' | 'goToPreviousField' | 'enduser' | 'handleDatabaseSelect' | 'onAddFile' | 'onFieldChange' | 'fields' | 'customInputs' | 'responses' | 'selectedFiles' | 'validateField'>) => {
   const String = customInputs?.['string'] ?? StringInput
   const StringLong = customInputs?.['stringLong'] ?? StringLongInput
@@ -165,6 +167,7 @@ export const QuestionForField = ({
   const Height = customInputs?.['Height'] ?? HeightInput
   const Redirect = customInputs?.['Redirect'] ?? RedirectInput
   const HiddenValue = customInputs?.['Hidden Value'] ?? HiddenValueInput
+  const Emotii = customInputs?.['Emotii'] ?? EmotiiInput
 
   const validationMessage = validateField(field)
 
@@ -231,11 +234,14 @@ export const QuestionForField = ({
           <DateStringInput field={field} disabled={value.disabled} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'string'>} form={form} />
         )
         : field.type === 'Hidden Value' ? (
-          <HiddenValue goToNextField={goToNextField} goToPreviousField={goToPreviousField} field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<any>} form={form} />
+          <HiddenValue isSinglePage={isSinglePage} goToNextField={goToNextField} goToPreviousField={goToPreviousField} field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<any>} form={form} />
         )
         : field.type === 'Address' ? (
           <Address field={field} disabled={value.disabled} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<any>} form={form} />
         )
+        : field.type === 'Emotii' ? (
+          <Emotii field={field} disabled={value.disabled} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<any>} form={form} />
+        )
         : field.type === 'Height' ? (
           <Height field={field} disabled={value.disabled} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<any>} form={form} />
         )
@@ -964,7 +970,7 @@ export const TellescopeSinglePageForm: React.JSXElementConstructor<TellescopeFor
           return (
             <Flex key={activeField.id} style={{ marginBottom: 5 }}>
               <Flex column flex={1}>
-                <QuestionForField fields={fields} field={activeField} handleDatabaseSelect={handleDatabaseSelect}
+                <QuestionForField isSinglePage fields={fields} field={activeField} handleDatabaseSelect={handleDatabaseSelect}
                   enduserId={props.enduserId} formResponseId={props.formResponseId} submit={submit}
                   enduser={enduser} goToPreviousField={goToPreviousField} isPreviousDisabled={isPreviousDisabled} goToNextField={goToNextField}
                   repeats={repeats} onRepeatsChange={setRepeats} setCustomerId={setCustomerId}

package/src/Forms/hooks.tsx

@@ -9,7 +9,7 @@ import { WithTheme, contact_is_valid, useFileUpload, useFormFields, useFormRespo
 import ReactGA from "react-ga4";
 
 import isEmail from "validator/lib/isEmail"
-import { append_current_utm_params, field_can_autoadvance, getLocalTimezone, get_time_values, get_utm_params, object_is_empty, responses_satisfy_conditions } from "@tellescope/utilities"
+import { append_current_utm_params, field_can_autoadvance, getLocalTimezone, get_time_values, get_utm_params, is_object, object_is_empty, responses_satisfy_conditions } from "@tellescope/utilities"
 
 export const useFlattenedTree = (root?: FormFieldNode) => {
   const flat: FormField[] = []
@@ -909,6 +909,7 @@ export const useTellescopeForm = ({ form, urlLogicValue, customization, carePlan
       return 
     }
 
+    if (value.answer.type === 'Hidden Value') return
     if (!value.answer.value) {
       return "A response is required"
     }
@@ -1308,7 +1309,7 @@ export const useTellescopeForm = ({ form, urlLogicValue, customization, carePlan
       },
       // keep consistent with initialize existing responses
       computedValueKey: (
-        field?.intakeField === 'height' && typeof value === 'number'
+        field?.intakeField === 'height'
           ? 'Height'
       : field?.intakeField === 'weight' && typeof value === 'number'
           ? 'Weight'

package/src/Forms/inputs.tsx

@@ -3,7 +3,7 @@ import axios from "axios"
 import { Autocomplete, Box, Button, Checkbox, Divider, FormControl, FormControlLabel, FormLabel, Grid, InputLabel, MenuItem, Radio, RadioGroup, Select, SxProps, TextField, TextFieldProps, Typography } from "@mui/material"
 import { FormInputProps } from "./types"
 import { useDropzone } from "react-dropzone"
-import { INSURANCE_RELATIONSHIPS, INSURANCE_RELATIONSHIPS_CANVAS, PRIMARY_HEX, RELATIONSHIP_TYPES, TELLESCOPE_GENDERS } from "@tellescope/constants"
+import { 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, first_letter_capitalized, form_response_value_to_string, getLocalTimezone, getPublicFileURL, mm_dd_yyyy, replace_enduser_template_values, truncate_string, user_display_name } from "@tellescope/utilities"
 import { Enduser, EnduserRelationship, FormResponseValue, InsuranceRelationship, MultipleChoiceOptions, TellescopeGender } from "@tellescope/types-models"
 import { VALID_STATES, emailValidator, phoneValidator } from "@tellescope/validation"
@@ -2649,7 +2649,7 @@ export const HeightInput = ({ field, value={} as any, onChange, ...props }: Form
     </Grid>
     <Grid item sx={{ width: '100%' }}>
       <TextField fullWidth size="small" label="Inches" type="number"
-        value={value?.inches || ''}
+        value={value?.inches ?? ''}
         onChange={e => onChange({ ...value, inches: parseInt(e.target.value) }, field.id)}
       />
     </Grid>
@@ -2719,20 +2719,41 @@ export const RedirectInput = ({ groupId, groupInsance, formResponseId, field, su
   return null
 }
 
-export const HiddenValueInput = ({ goToNextField, goToPreviousField, field, value, onChange, form, ...props }: FormInputProps<'email'>) => {
+export const HiddenValueInput = ({ goToNextField, goToPreviousField, field, value, onChange, form, isSinglePage, }: FormInputProps<'email'>) => {
   let lastRef = useRef(0)
   useEffect(() => {
     if (lastRef.current > Date.now() - 1000) return
     lastRef.current = Date.now()
 
     if (value) {
+      if (isSinglePage) return
       onChange('', field.id)
       goToPreviousField?.()
     } else {
       onChange(field.title, field.id)
       goToNextField?.()
     }
-  }, [value, onChange, field, goToNextField, goToPreviousField])
+  }, [value, onChange, field, goToNextField, goToPreviousField, isSinglePage])
 
   return <></>
+}
+
+export const EmotiiInput = ({ goToNextField, goToPreviousField, field, value, onChange, form, formResponseId, ...props }: FormInputProps<'email'>) => {
+  const session = useResolvedSession()
+  const [data, setData] = useState<{ surveyRequestId: string, surveyUrl: string }>()
+
+  useEffect(() => {
+    session.api.integrations
+    .proxy_read({ 
+      integration: EMOTII_TITLE, 
+      type: 'get_survey', 
+      query: `${field.id}-${formResponseId || Date.now()}`,
+    })
+    .then(r => setData(r.data))
+  }, [session])
+
+  if (!data) { return <LinearProgress /> }
+  return (
+    <iframe src={data.surveyUrl} style={{ border: 'none', height: 400, width: '100%' }} />
+  )
 }

package/src/Forms/types.ts

@@ -30,6 +30,7 @@ export interface FormInputProps<K extends keyof AnswerForType> {
   groupId?: string,
   groupInsance?: string,
   disabled?: boolean,
+  isSinglePage?: boolean,
 }
 
 export type FormInputs = {