@tellescope/react-components 1.207.0 → 1.208.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.207.0",
+  "version": "1.208.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.207.0",
-    "@tellescope/sdk": "^1.207.0",
-    "@tellescope/types-client": "^1.207.0",
-    "@tellescope/types-models": "^1.207.0",
-    "@tellescope/types-utilities": "^1.207.0",
-    "@tellescope/utilities": "^1.207.0",
-    "@tellescope/validation": "^1.207.0",
+    "@tellescope/constants": "^1.208.0",
+    "@tellescope/sdk": "^1.208.0",
+    "@tellescope/types-client": "^1.208.0",
+    "@tellescope/types-models": "^1.208.0",
+    "@tellescope/types-utilities": "^1.208.0",
+    "@tellescope/utilities": "^1.208.0",
+    "@tellescope/validation": "^1.208.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "css-to-react-native": "^3.0.0",
@@ -84,7 +84,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": "ddf48910e1681e4fc241e85af98f4c6a0f3f42bb",
+  "gitHead": "386150ae354f2879790b6dbf5d5064eca5015b83",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/forms.tsx

@@ -20,6 +20,7 @@ export const TellescopeFormContainer = ({ businessId, organizationIds, ...props
   logoHeight?: number,
   language?: string,
   onChangeLanguage?: (l: string) => void,
+  paperMinHeight?: React.CSSProperties['minHeight'],
 } & Styled) => {
   // if context already is provided, no need to duplicate
   if (props.dontAddContext) return (
@@ -33,9 +34,8 @@ export const TellescopeFormContainer = ({ businessId, organizationIds, ...props
   )
 }
 
-const TellescopeFormContainerWithTheme: typeof TellescopeFormContainer = ({ children, language, onChangeLanguage, style, hideBg, backgroundColor, hideLogo, logoHeight }) => {
+const TellescopeFormContainerWithTheme: typeof TellescopeFormContainer = ({ paperMinHeight=575, children, language, onChangeLanguage, style, hideBg, backgroundColor, hideLogo, logoHeight }) => {
   const theme = useOrganizationTheme()
-  console.log('logoHeight',logoHeight)
 
   const formContent = (
     <Flex flex={1} column>
@@ -72,7 +72,7 @@ const TellescopeFormContainerWithTheme: typeof TellescopeFormContainer = ({ chil
   }
   return (
     <Flex flex={1} alignItems="center" justifyContent="center" style={{ backgroundColor: backgroundColor ?? theme.themeColor ?? '#ffffff', ...style }}>
-    <Paper flex elevation={3} style={{ marginTop: 50, marginBottom: 50, padding: 20, maxWidth: 650, minWidth: 250, minHeight: 575 }}>
+    <Paper flex elevation={3} style={{ marginTop: 50, marginBottom: 50, padding: 20, maxWidth: 650, minWidth: 250, minHeight: paperMinHeight }}>
       {formContent}
     </Paper>
     </Flex>

package/src/Forms/hooks.tsx

@@ -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, 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, responses_satisfy_conditions, update_local_storage } from "@tellescope/utilities"
 
 export const useFlattenedTree = (root?: FormFieldNode) => {
   const flat: FormField[] = []
@@ -1297,6 +1297,12 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
       if (submitRedirectURL) {
         (window?.top ?? window).location.href = append_current_utm_params(submitRedirectURL);
       }
+      if (form?.redirectToBookedAppointmentOnSubmit) {
+        const url = read_local_storage('tellescope_last_booking_page_join_link')
+        if (url) {
+          (window?.top ?? window).location.href = append_current_utm_params(url);
+        }
+      }
     } catch(err: any) {
       console.error(err)
       setSubmitErrorMessage(err?.message ?? 'An error occurred')

package/src/Forms/inputs.tsx

@@ -4,7 +4,7 @@ import { Autocomplete, Box, Button, Checkbox, Chip, Divider, FormControl, FormCo
 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, 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, getLocalTimezone, getPublicFileURL, mm_dd_yyyy, replace_enduser_template_values, truncate_string, update_local_storage, user_display_name } from "@tellescope/utilities"
 import { DatabaseSelectResponse, Enduser, EnduserRelationship, FormResponseValue, InsuranceRelationship, MedicationResponse, MultipleChoiceOptions, TellescopeGender } from "@tellescope/types-models"
 import { VALID_STATES, emailValidator, phoneValidator } from "@tellescope/validation"
 import Slider from '@mui/material/Slider';
@@ -2900,7 +2900,11 @@ export const AppointmentBookingInput = ({ formResponseId, field, value, onChange
       }
       if (m?.data?.type === 'Confirmation') {
         setConfirming(true)
-      } else {
+      } 
+      if (m?.data?.type === 'Join Link' && m?.data?.link) {
+        update_local_storage('tellescope_last_booking_page_join_link', m.data.link)
+      }
+      else {
         setConfirming(false)
       }
     }

package/src/layout.tsx

@@ -282,6 +282,7 @@ export type TitleComponentType = React.JSXElementConstructor<{ title?: React.Rea
 export interface ScrollingListProps <T extends { id: string | number }> extends Styled {
   items: T[],
   Item: React.JSXElementConstructor<{ item: T, index: number }>
+  renderItem?: (p: { item: T, index: number }) => React.ReactElement,
   title?: React.ReactNode,
   header?: React.ReactNode,
   emptyText?: React.ReactNode,
@@ -317,6 +318,7 @@ export const ScrollingList = <T extends { id: string | number }>({
   doneLoading,
   loadMore,
   Item,
+  renderItem,
   TitleComponent,
   titleActionsComponent,
   style,
@@ -410,7 +412,8 @@ export const ScrollingList = <T extends { id: string | number }>({
             >
               {({ data, index, style }) => (
                 <div style={style}>
-                  <Item key={data[index].id} item={data[index]} index={index} />
+                  {renderItem ? renderItem({ item: data[index], index }) : <Item key={data[index].id} item={data[index]} index={index} />}
+
                   {index === items.length -1 && loadMore && !doneLoading?.() &&
                     <div style={{ textAlign: 'center' }}>
                     <LoadingButton submitText="Load Older Data" submittingText="Loading..."
@@ -424,7 +427,7 @@ export const ScrollingList = <T extends { id: string | number }>({
             </FixedSizeList>
         ) : (
           items.map((item, index) => (
-            <Item key={item.id} item={item} index={index} />
+            renderItem ? renderItem({ item, index }) : <Item key={item.id} item={item} index={index} />
           ))
         )
       }

package/src/table.tsx

@@ -769,6 +769,7 @@ export interface TableProps<T extends Item> extends WithTitle, WithHeader<T>, Wi
   columnResizeZIndex?: number,
   rowHeight?: number,
   headerHeight?: number,
+  onChangeColumnSorting?: (sorting: Sorting[]) => void,
 }
 export const Table = <T extends Item>({
   items,
@@ -827,6 +828,7 @@ export const Table = <T extends Item>({
   refreshFilterSuggestionsKey,
   minColumnWidth,
   columnResizeZIndex,
+  onChangeColumnSorting,
 }: TableProps<T> & Styled) => {
   const sortingStorageKey = (memoryId ?? '') + 'sorting'
   const cachedSortString = read_local_storage(sortingStorageKey)
@@ -883,10 +885,11 @@ export const Table = <T extends Item>({
   )
 
   useEffect(() => {
-    if (!memoryId) return
-    
+    onChangeColumnSorting?.(sorting)
+
+    if (!memoryId) return 
     update_local_storage(sortingStorageKey, JSON.stringify(sorting))
-  }, [sorting, memoryId])
+  }, [sorting, memoryId, onChangeColumnSorting])
 
   // sorts in place
   const applySorting = useCallback((items: T[]) => {