@tellescope/react-components 1.160.1 → 1.162.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.160.1",
+  "version": "1.162.0",
   "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.160.1",
-    "@tellescope/sdk": "^1.160.1",
-    "@tellescope/types-client": "^1.160.1",
-    "@tellescope/types-models": "^1.160.1",
-    "@tellescope/types-utilities": "^1.160.1",
-    "@tellescope/utilities": "^1.160.1",
-    "@tellescope/validation": "^1.160.1",
+    "@tellescope/constants": "^1.162.0",
+    "@tellescope/sdk": "^1.162.0",
+    "@tellescope/types-client": "^1.162.0",
+    "@tellescope/types-models": "^1.162.0",
+    "@tellescope/types-utilities": "^1.162.0",
+    "@tellescope/utilities": "^1.162.0",
+    "@tellescope/validation": "^1.162.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "css-to-react-native": "^3.0.0",
@@ -80,7 +80,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": "28dfaf3ce3542b7e879639ddc9264611fece8c62",
+  "gitHead": "b58746104f8a4bf539bb7de5f0506e08c710adb4",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/forms.tsx

@@ -1,12 +1,12 @@
 import React, { useCallback, useEffect, useMemo, useRef, 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 { Button, CircularProgress, 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 { AddressInput, AllergiesInput, AppointmentBookingInput, ConditionsInput, 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"
-import { field_can_autosubmit, formatted_date, objects_equivalent, remove_script_tags, truncate_string } from "@tellescope/utilities"
+import { field_can_autosubmit, formatted_date, object_is_empty, objects_equivalent, read_local_storage, remove_script_tags, responses_satisfy_conditions, truncate_string } from "@tellescope/utilities"
 import { Divider } from "@mui/material"
 
 export const TellescopeFormContainer = ({ businessId, organizationIds, ...props } : { 
@@ -133,6 +133,8 @@ export const QuestionForField = ({
   spacing,
   isSinglePage,
   rootResponseId,
+  isInQuestionGroup,
+  logicOptions,
 } : {
   spacing?: number,
   form?: Form,
@@ -143,6 +145,8 @@ export const QuestionForField = ({
   field: FormField,
   setCustomerId: React.Dispatch<React.SetStateAction<string | undefined>>,
   isSinglePage?: boolean,
+  isInQuestionGroup?: boolean,
+  logicOptions?: NextFieldLogicOptions,
 } & Pick<TellescopeFormProps, "rootResponseId" | "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
@@ -184,6 +188,13 @@ export const QuestionForField = ({
   ), [field.feedback, value])
 
   if (!value) return null
+  if (
+    isInQuestionGroup 
+    && field.groupShowCondition && !object_is_empty(field.groupShowCondition)
+    && !responses_satisfy_conditions(responses, field.groupShowCondition, logicOptions)
+  ) {
+      return null
+  }
   return ( 
     // margin leaves room for error message in Question Group
     <Flex column flex={1} style={{ marginBottom: spacing ?? 25 }} id={field.id}> 
@@ -345,6 +356,8 @@ export const QuestionForField = ({
                   responses={responses} selectedFiles={selectedFiles}
                   validateField={validateField} enduserId={enduserId}
                   spacing={field.options?.groupPadding}
+                  logicOptions={logicOptions}
+                  isInQuestionGroup
                 />
               </Flex>
             )
@@ -429,6 +442,7 @@ export const TellescopeSingleQuestionFlow: typeof TellescopeForm = ({
   formResponseId,
   groupId,
   groupInstance,
+  logicOptions,
 }) => {
   const beforeunloadHandler = React.useCallback((e: BeforeUnloadEvent) => {
     try {
@@ -526,6 +540,7 @@ export const TellescopeSingleQuestionFlow: typeof TellescopeForm = ({
                 responses={responses} selectedFiles={selectedFiles}
                 validateField={validateField}
                 groupId={groupId} groupInstance={groupInstance}
+                logicOptions={logicOptions}
               />
             </Flex>
         </Flex>
@@ -623,6 +638,13 @@ export const ThanksMessage = ({
         <Typography style={{ marginTop: 25, alignSelf: 'center' }}>{thanksMessage || DEFAULT_THANKS_MESSAGE}</Typography>
       )
     }
+    {read_local_storage('redirecting_public_group') === 'true' &&
+      <>
+      <Typography style={{ marginTop: 25, alignSelf: 'center' }}>
+        Redirecting to next form... <CircularProgress size={20} color="primary" />
+      </Typography>
+      </>
+    }
     {downloadComponent &&
       <Flex justifyContent="center" style={{ marginTop: 15, marginBottom: 15 }}>
         {downloadComponent}

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, is_object, 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, update_local_storage } from "@tellescope/utilities"
 
 export const useFlattenedTree = (root?: FormFieldNode) => {
   const flat: FormField[] = []
@@ -194,14 +194,16 @@ export const useTreeForFormFields = (_fields: FormField[]) => {
   return nodesForId[fields.find(s => s.previousFields.find(p => p.type === 'root'))?.id ?? '']
 }
 
-export const getNextField = (activeField: FormFieldNode, currentValue: Response, responses: FormResponseValue[], options?: {
+export type NextFieldLogicOptions = {
   urlLogicValue?: string,
   dateOfBirth?: string,
   gender?: string,
   state?: string,
   form?: Form,
   activeResponses?: FormResponseValue[], // current and previous answers (not future answers)
-}) => {
+}
+
+export const getNextField = (activeField: FormFieldNode, currentValue: Response, responses: FormResponseValue[], options?: NextFieldLogicOptions) => {
   if (activeField.children.length === 0) {
     return
   } 
@@ -360,6 +362,7 @@ interface UseTellescopeFormOptions {
   context?: string,
   urlLogicValue?: string,
   enduser?: Partial<Enduser>,
+  isPublicForm?: boolean,
 }
 
 const OrganizationThemeContext = createContext(null as any as { 
@@ -508,7 +511,7 @@ const shouldCallout = (field: FormField | undefined, value: FormResponseValueAns
 
 export type Response = FormResponseValue & { touched: boolean, includeInSubmit: boolean, field: FormField }
 export type FileResponse = { fieldId: string, fieldTitle: string, blobs?: FileBlob[] }
-export const useTellescopeForm = ({ form, urlLogicValue, customization, carePlanId, calendarEventId, context, ga4measurementId, rootResponseId, parentResponseId, accessCode, existingResponses, automationStepId, enduserId, formResponseId, fields, isInternalNote, formTitle, submitRedirectURL,enduser }: UseTellescopeFormOptions) => {
+export const useTellescopeForm = ({ isPublicForm, form, urlLogicValue, customization, carePlanId, calendarEventId, context, ga4measurementId, rootResponseId, parentResponseId, accessCode, existingResponses, automationStepId, enduserId, formResponseId, fields, isInternalNote, formTitle, submitRedirectURL,enduser }: UseTellescopeFormOptions) => {
   const { amPm, hoursAmPm, minutes } = get_time_values(new Date())
 
   const root = useTreeForFormFields(fields)
@@ -675,6 +678,15 @@ export const useTellescopeForm = ({ form, urlLogicValue, customization, carePlan
     selectedFiles.find(f => f.fieldId === activeField.value.id)
   )
 
+  const logicOptions: NextFieldLogicOptions = {
+    urlLogicValue, 
+    activeResponses: responses.filter(r => r.includeInSubmit),
+    dateOfBirth: enduser?.dateOfBirth,
+    gender: enduser?.gender,
+    state: enduser?.state,
+    form,
+  }
+
   const handleDatabaseSelect = useCallback((databaseRecords: Pick<DatabaseRecord, "values" | "databaseId">[]) => {
     try {
       // no need to update if there's no prepopulation
@@ -794,6 +806,15 @@ export const useTellescopeForm = ({ form, urlLogicValue, customization, carePlan
     if (!value) return "Value not provided"
     if (!file) return "File not provided"
 
+    // if question is in group, and question is hidden in group, don't validate
+    if (
+      field.isInGroup
+      && field.groupShowCondition && !object_is_empty(field.groupShowCondition)
+      && !responses_satisfy_conditions(responses, field.groupShowCondition, logicOptions)
+    ) {
+      return null
+    }
+
     if (value.answer.type === 'Insurance') {
       if (value.answer.value?.relationshipDetails?.dateOfBirth && !isDateString(value.answer.value.relationshipDetails.dateOfBirth)) {
         return "Enter date of birth in MM-DD-YYYY format"
@@ -1014,7 +1035,7 @@ export const useTellescopeForm = ({ form, urlLogicValue, customization, carePlan
     } 
 
     return null
-  }, [responses, selectedFiles, currentValue, activeField, repeats, sessionType])
+  }, [responses, selectedFiles, currentValue, activeField, repeats, sessionType, logicOptions])
 
   // nested Question Group fields are disabled, so it's safe to avoid recursion multiple times
   const validateField = useCallback((field: FormField) => {
@@ -1058,14 +1079,7 @@ export const useTellescopeForm = ({ form, urlLogicValue, customization, carePlan
   const nextField = (
     !currentValue ? undefined 
     : (
-      getNextField(activeField, currentValue, responses, { 
-        urlLogicValue, 
-        form,
-        activeResponses: responses.filter(r => r.includeInSubmit),
-        dateOfBirth: enduser?.dateOfBirth,
-        gender: enduser?.gender,
-        state: enduser?.state,
-      })
+      getNextField(activeField, currentValue, responses, logicOptions)
     )
   )
 
@@ -1155,6 +1169,12 @@ export const useTellescopeForm = ({ form, urlLogicValue, customization, carePlan
           const match = responses.find(r => r.fieldId === f?.id)
           if (!match || responsesToSubmit.find(r => r.fieldId === match.fieldId)) continue
 
+          // hidden in group by conditional logic
+          if ((
+            match.field.groupShowCondition && !object_is_empty(match.field.groupShowCondition)
+            && !responses_satisfy_conditions(responses, match.field.groupShowCondition, logicOptions)
+          )) continue
+
           responsesToSubmit.push(match)
         }
       }
@@ -1162,7 +1182,8 @@ export const useTellescopeForm = ({ form, urlLogicValue, customization, carePlan
       const errors: { enduserId: string, message: string }[] = []
       for (const eId of [enduserId, ...(options?.otherEnduserIds ?? [])]) {
         try {
-          const { formResponse } = await session.api.form_responses.submit_form_response({ 
+          update_local_storage('redirecting_public_group', '')
+          const { formResponse, nextFormGroupPublicURL } = await session.api.form_responses.submit_form_response({ 
             accessCode : (
               accessCode 
               || (await (
@@ -1186,6 +1207,12 @@ export const useTellescopeForm = ({ form, urlLogicValue, customization, carePlan
             productIds: responsesToSubmit.flatMap(r => r.field?.options?.productIds ?? []),
             utm: get_utm_params(),
           })
+
+          // do actual redirect later to prevent popup
+          if (isPublicForm && nextFormGroupPublicURL) { 
+            update_local_storage('redirecting_public_group', 'true')
+          }
+
           if (!options?.otherEnduserIds?.length) { // only track for signle submission
             if (ga4measurementId) {
               ReactGA.event({
@@ -1206,6 +1233,10 @@ export const useTellescopeForm = ({ form, urlLogicValue, customization, carePlan
               options?.onSuccess?.(formResponse)
             }
           }
+        
+          if (isPublicForm && nextFormGroupPublicURL) { 
+            window.location.href = nextFormGroupPublicURL 
+          }
         } catch(err: any) {
           if (options?.onBulkErrors) { // only track for signle submission
             errors.push({ enduserId: eId, message: err?.message || err?.toString() })
@@ -1229,7 +1260,7 @@ export const useTellescopeForm = ({ form, urlLogicValue, customization, carePlan
     } finally {
       setSubmittingStatus(undefined)
     }
-  }, [accessCode, automationStepId, enduserId, responses, selectedFiles, session, handleUpload, existingResponses, ga4measurementId, rootResponseId, parentResponseId, calendarEventId, goBackURL])
+  }, [accessCode, automationStepId, enduserId, responses, selectedFiles, session, handleUpload, existingResponses, ga4measurementId, rootResponseId, parentResponseId, calendarEventId, goBackURL, logicOptions])
 
   const isNextDisabled = useCallback(() => {
     if (activeField.children.length === 0) {
@@ -1274,14 +1305,7 @@ export const useTellescopeForm = ({ form, urlLogicValue, customization, carePlan
 
     try { window.scrollTo({ top: 0 }) } catch(err) {} // scroll to top if needed
     setActiveField(activeField => {
-      let newField = getNextField(activeField, currentValue, responses, { 
-        urlLogicValue, 
-        form,
-        activeResponses: responses.filter(r => r.includeInSubmit),
-        dateOfBirth: enduser?.dateOfBirth,
-        gender: enduser?.gender,
-        state: enduser?.state,
-      })
+      let newField = getNextField(activeField, currentValue, responses, 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)) {
@@ -1291,7 +1315,7 @@ export const useTellescopeForm = ({ form, urlLogicValue, customization, carePlan
       
       return newField || activeField
     })
-  }, [prevFieldStackRef, currentValue, isNextDisabled, updateFormResponse, session, responses, urlLogicValue, form, enduser?.dateOfBirth])
+  }, [prevFieldStackRef, currentValue, isNextDisabled, updateFormResponse, session, responses, logicOptions])
 
   useEffect(() => {
     if (!autoAdvanceRef.current) return
@@ -1420,5 +1444,6 @@ export const useTellescopeForm = ({ form, urlLogicValue, customization, carePlan
     setCustomerId,
     customization,
     handleDatabaseSelect,
+    logicOptions,
   }
 }

package/src/mui.native.tsx

@@ -189,7 +189,7 @@ export const Typography = ({ children, onClick, onPress, color, style, ...props
   const colorStyle = { color: color ? useTheme().colors[color] : undefined }
 
   return (
-    <MuiText onPress={onPress ?? onClick} style={{ ...colorStyle, ...convert_CSS_to_RNStyles(style) }}>
+    <MuiText {...props} onPress={onPress ?? onClick} style={{ ...colorStyle, ...convert_CSS_to_RNStyles(style) }}>
       {children}
     </MuiText>
   )

package/src/mui.tsx

@@ -263,6 +263,7 @@ export type TypographyProps = {
   component?: 'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5',
   noWrap?: boolean,
   title?: string,
+  selectable?: boolean, 
 } & Clickable
 export const Typography = ({ children, onClick, onPress, component='span', ...props}: TypographyProps & ClickableWeb) => {
   return <MuiTypography onClick={onClick ?? onPress} component={component} {...props}>{children}</MuiTypography>