@tellescope/react-components 1.234.1 → 1.235.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.234.1",
+  "version": "1.235.1",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -30,60 +30,60 @@
   "homepage": "https://github.com/tellescope-os/enduser-authentication#readme",
   "devDependencies": {
     "@babel/core": "7.28.5",
-    "@types/css-to-react-native": "^3.0.0",
-    "@types/react": "^17.0.27",
-    "@types/react-beautiful-dnd": "^13.1.2",
-    "@types/react-dom": "^17.0.9",
-    "@types/react-native": "^0.65.24",
-    "@types/react-window": "^1.8.5",
+    "@types/css-to-react-native": "3.0.0",
+    "@types/react": "17.0.52",
+    "@types/react-beautiful-dnd": "13.1.2",
+    "@types/react-dom": "17.0.18",
+    "@types/react-native": "0.65.27",
+    "@types/react-window": "1.8.5",
     "babel-loader": "8.4.1",
     "react-native": "0.68.0",
     "typescript": "4.9.3"
   },
   "dependencies": {
-    "@emotion/css": "^11.9.0",
-    "@mui/icons-material": "^5.0.1",
-    "@mui/material": "^5.0.2",
-    "@reduxjs/toolkit": "^1.6.2",
-    "@stripe/react-stripe-js": "^2.9.0",
-    "@stripe/stripe-js": "^1.52.1",
-    "@tellescope/constants": "1.234.1",
-    "@tellescope/sdk": "1.234.1",
-    "@tellescope/types-client": "1.234.1",
-    "@tellescope/types-models": "1.234.1",
-    "@tellescope/types-utilities": "1.234.1",
-    "@tellescope/utilities": "1.234.1",
-    "@tellescope/validation": "1.234.1",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
-    "css-to-react-native": "^3.0.0",
-    "draft-js": "^0.11.7",
-    "draftjs-to-html": "^0.9.1",
-    "eslint": "^7.32.0",
-    "eslint-plugin-react": "^7.26.1",
-    "formik": "^2.2.9",
-    "heic2any": "^0.0.4",
-    "html-to-draftjs": "^1.5.0",
-    "react-beautiful-dnd": "^13.1.1",
-    "react-datepicker": "^3.4.1",
-    "react-draft-wysiwyg": "^1.15.0",
-    "react-draggable": "^4.4.6",
-    "react-dropzone": "^11.4.2",
-    "react-ga4": "^1.4.1",
-    "react-native-paper": "^4.10.0",
-    "react-native-render-html": "^6.3.4",
-    "react-native-vector-icons": "^9.0.0",
-    "react-native-video": "^5.2.0",
-    "react-redux": "^7.2.6",
-    "react-window": "^1.8.9",
-    "yup": "^0.32.10"
+    "@emotion/css": "11.10.5",
+    "@mui/icons-material": "5.10.15",
+    "@mui/material": "5.10.15",
+    "@reduxjs/toolkit": "1.9.0",
+    "@stripe/react-stripe-js": "2.9.0",
+    "@stripe/stripe-js": "1.52.1",
+    "@tellescope/constants": "1.235.1",
+    "@tellescope/sdk": "1.235.1",
+    "@tellescope/types-client": "1.235.1",
+    "@tellescope/types-models": "1.235.1",
+    "@tellescope/types-utilities": "1.235.1",
+    "@tellescope/utilities": "1.235.1",
+    "@tellescope/validation": "1.235.1",
+    "@typescript-eslint/eslint-plugin": "4.33.0",
+    "@typescript-eslint/parser": "4.33.0",
+    "css-to-react-native": "3.0.0",
+    "draft-js": "0.11.7",
+    "draftjs-to-html": "0.9.1",
+    "eslint": "7.32.0",
+    "eslint-plugin-react": "7.31.11",
+    "formik": "2.2.9",
+    "heic2any": "0.0.4",
+    "html-to-draftjs": "1.5.0",
+    "react-beautiful-dnd": "13.1.1",
+    "react-datepicker": "3.8.0",
+    "react-draft-wysiwyg": "1.15.0",
+    "react-draggable": "4.4.6",
+    "react-dropzone": "11.7.1",
+    "react-ga4": "1.4.1",
+    "react-native-paper": "4.12.5",
+    "react-native-render-html": "6.3.4",
+    "react-native-vector-icons": "9.2.0",
+    "react-native-video": "5.2.1",
+    "react-redux": "7.2.9",
+    "react-window": "1.8.9",
+    "yup": "0.32.11"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "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": "aa1d9a213f074e0b843c04cdbe2bb165c7997e07",
+  "gitHead": "6074a136e42e3b435d10fef5d3d736d9db2e6acb",
   "publishConfig": {
     "access": "public"
   }

package/src/CMS/ContentViewer.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useLayoutEffect, useRef, useState } from "react"
 import { ManagedContentRecord } from "@tellescope/types-client"
-import { remove_script_tags } from "@tellescope/utilities"
+import { remove_script_tags, sanitize_html_for_cms } from "@tellescope/utilities"
 import { Button, Grid, Typography } from "@mui/material"
 import { PDFBlockUI } from "./components"
 import { css } from "@emotion/css"
@@ -229,7 +229,18 @@ export const ArticleViewer = ({
                 )
               }}
             />
-            ) 
+            )
+          : block.type === 'raw-html' ? (
+            <div style={{
+              fontSize: 18,
+              lineHeight: '25pt',
+              ...blockStyleToCSS(block.style)
+            }}
+              dangerouslySetInnerHTML={{
+                __html: sanitize_html_for_cms(block.info.html)
+              }}
+            />
+            )
           : block.type === 'image' ? (
               <img src={block.info.link} alt={block.info.alt || ''} style={{
                 maxWidth: block.info.maxWidth || '100%',
@@ -297,6 +308,9 @@ export const html_for_article = (article: ManagedContentRecord, options?: { root
       : block.type === 'html' ? (
         `<div>${remove_script_tags(remove_script_tags(block.info.html))}</div>`
         )
+      : block.type === 'raw-html' ? (
+        `<div>${sanitize_html_for_cms(block.info.html)}</div>`
+        )
       : block.type === 'image' ? (
           // wrap with div to supporting centering later
           `<div style="">

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, 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 { AddToDatabaseProps, AddressInput, AllergiesInput, AppointmentBookingInput, BelugaPatientPreferenceInput, BridgeEligibilityInput, 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"
@@ -182,6 +182,7 @@ export const QuestionForField = ({
   const Medications = customInputs?.['Medications'] ?? MedicationsInput
   const RelatedContacts = customInputs?.['Related Contacts'] ?? RelatedContactsInput
   const Insurance = customInputs?.['Insurance'] ?? InsuranceInput
+  const BridgeEligibility = customInputs?.['Bridge Eligibility'] ?? BridgeEligibilityInput
   const AppointmentBooking = customInputs?.['Appointment Booking'] ?? AppointmentBookingInput
   const Height = customInputs?.['Height'] ?? HeightInput
   const Redirect = customInputs?.['Redirect'] ?? RedirectInput
@@ -220,7 +221,7 @@ export const QuestionForField = ({
           fontSize: field.titleFontSize || (field.type === 'Question Group' ? 22 : 20), 
           fontWeight: field.type === 'Question Group' ? 'bold' : undefined,
         }}>
-          {field.title}{!(field.isOptional || field.type === 'description' || field.type === 'Question Group' || field.type === 'Insurance') ? '*' : ''}
+          {field.title}{!(field.isOptional || field.type === 'description' || field.type === 'Question Group' || field.type === 'Insurance' || field.type === 'Bridge Eligibility') ? '*' : ''}
         </Typography>
       }
       {!field.title && (field.type === 'Question Group' || field.type === 'signature') && !form?.customization?.hideLogo &&
@@ -371,6 +372,12 @@ export const QuestionForField = ({
             }, fieldId)}
           />
         )
+        : field.type === 'Bridge Eligibility' ? (
+          <BridgeEligibility field={field} value={value.answer.value as any} form={form}
+            enduser={enduser} responses={responses} enduserId={enduserId}
+            onChange={onFieldChange as ChangeHandler<'Bridge Eligibility'>}
+          />
+        )
         : field.type === 'rating' ? (
           <Rating field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'rating'>} form={form}/>
         )
@@ -785,15 +792,15 @@ const TellescopeFormWithContext: typeof TellescopeForm = (props) => {
   const theme = useOrganizationTheme()
 
   return (
-    <TellescopeFormContainer style={props.style} dontAddContext 
-      hideBg={props.hideBg || props.form?.customization?.hideBg} 
+    <TellescopeFormContainer style={props.style} dontAddContext
+      hideBg={props.hideBg || props.form?.customization?.hideBg}
       logoHeight={props.logoHeight}
       backgroundColor={props.backgroundColor}
       hideLogo={props?.customization?.hideLogo}
       maxWidth={props.form?.customization?.maxWidth}
     >
-      {props.submitted 
-        ? <ThanksMessage {...props} showRestartAtEnd={props?.customization?.showRestartAtEnd} /> 
+      {props.submitted
+        ? <ThanksMessage {...props} showRestartAtEnd={props?.customization?.showRestartAtEnd} />
         : (<TellescopeSingleQuestionFlow {...props} theme={theme} />)
       }
     </TellescopeFormContainer>

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, 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 { AddToDatabaseProps, AddressInput, AllergiesInput, AppointmentBookingInput, BelugaPatientPreferenceInput, BridgeEligibilityInput, 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"
@@ -175,6 +175,7 @@ export const QuestionForField = ({
   const Medications = customInputs?.['Medications'] ?? MedicationsInput
   const RelatedContacts = customInputs?.['Related Contacts'] ?? RelatedContactsInput
   const Insurance = customInputs?.['Insurance'] ?? InsuranceInput
+  const BridgeEligibility = customInputs?.['Bridge Eligibility'] ?? BridgeEligibilityInput
   const AppointmentBooking = customInputs?.['Appointment Booking'] ?? AppointmentBookingInput
   const Height = customInputs?.['Height'] ?? HeightInput
   const Redirect = customInputs?.['Redirect'] ?? RedirectInput
@@ -214,7 +215,7 @@ export const QuestionForField = ({
           fontSize: field.titleFontSize || (field.type === 'Question Group' ? 22 : 20),
           fontWeight: field.type === 'Question Group' ? 'bold' : undefined,
         }}>
-          {field.title}{!(field.isOptional || field.type === 'description' || field.type === 'Question Group' || field.type === 'Insurance') ? '*' : ''}
+          {field.title}{!(field.isOptional || field.type === 'description' || field.type === 'Question Group' || field.type === 'Insurance' || field.type === 'Bridge Eligibility') ? '*' : ''}
         </Typography>
       }
       {!field.title && (field.type === 'Question Group' || field.type === 'signature') && !form?.customization?.hideLogo &&
@@ -365,6 +366,12 @@ export const QuestionForField = ({
             }, fieldId)}
           />
         )
+        : field.type === 'Bridge Eligibility' ? (
+          <BridgeEligibility field={field} value={value.answer.value as any} form={form}
+            enduser={enduser} responses={responses} enduserId={enduserId}
+            onChange={onFieldChange as ChangeHandler<'Bridge Eligibility'>}
+          />
+        )
         : field.type === 'rating' ? (
           <Rating field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'rating'>} form={form}/>
         )