@tellescope/react-components 1.172.0 → 1.173.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.172.0",
+  "version": "1.173.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.172.0",
-    "@tellescope/sdk": "^1.172.0",
-    "@tellescope/types-client": "^1.172.0",
-    "@tellescope/types-models": "^1.172.0",
-    "@tellescope/types-utilities": "^1.172.0",
-    "@tellescope/utilities": "^1.172.0",
-    "@tellescope/validation": "^1.172.0",
+    "@tellescope/constants": "^1.173.0",
+    "@tellescope/sdk": "^1.173.0",
+    "@tellescope/types-client": "^1.173.0",
+    "@tellescope/types-models": "^1.173.0",
+    "@tellescope/types-utilities": "^1.173.0",
+    "@tellescope/utilities": "^1.173.0",
+    "@tellescope/validation": "^1.173.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",
     "react-native": "^0.65.0 || ^0.66.0 || ^0.67.0 || ^0.68.0 || ^0.71.0"
   },
-  "gitHead": "b415f876ba14e2e77c7ff8d0265e5667b68c6335",
+  "gitHead": "0239f40d9a62d16c2d94830a5f65db54aee48e1f",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/forms.tsx

@@ -967,7 +967,10 @@ export const TellescopeSinglePageForm: React.JSXElementConstructor<TellescopeFor
   const list = useListForFormFields(fields, responses, { form: props.form, gender: enduser?.gender })
 
   const includedFieldIds = (
-    Array.from(new Set([...list.map(f => f.id), ...(existingResponses ?? []).map(e => e.fieldId)])) 
+    Array.from(new Set([
+      ...list.map(f => f.id), 
+      ...(existingResponses ?? []).filter(e => !e.isPrepopulatedFromEnduserField).map(e => e.fieldId)
+    ]))
   )
 
   const handleSubmit = useCallback(async () => {

package/src/Forms/hooks.tsx

@@ -348,7 +348,7 @@ interface UseTellescopeFormOptions {
   automationStepId?: string,
   form?: Form,
   fields: FormField[],
-  existingResponses?: FormResponse['responses'],
+  existingResponses?: (FormResponseValue & { isPrepopulatedFromEnduserField?: boolean })[],
   formResponseId?: string,
   isInternalNote?: boolean,
   formTitle?: string,
@@ -1213,7 +1213,12 @@ export const useTellescopeForm = ({ isPublicForm, form, urlLogicValue, customiza
             responses: [
               ...responsesToSubmit,
               // include existing responses in case previously saved as draft
-              ...(existingResponses ?? []).filter(r => !responsesToSubmit.find(_r => r.fieldId === _r.fieldId)),
+              ...(existingResponses ?? []).filter(r => 
+                !responsesToSubmit.find(_r => r.fieldId === _r.fieldId)
+                // but don't include responses which were populated from a patient field and not a prior response
+                // if these are edited, they would be included in responsesToSubmit
+                && !r.isPrepopulatedFromEnduserField
+              ),
             ],
             automationStepId,
             customerId,
@@ -1415,6 +1420,26 @@ export const useTellescopeForm = ({ isPublicForm, form, urlLogicValue, customiza
       })
       .catch(console.error)
     }
+
+    const cbSaveField = fields.find(f => f.id === fieldId && (f.type === 'Chargebee'))
+    if (cbSaveField && typeof value === 'object' && (formResponseId || accessCode)) {
+      session.api.form_responses.save_field_response({
+        accessCode,
+        formResponseId,
+        response: {
+          answer: {
+            type: cbSaveField.type as "Chargebee",
+            value,
+          } as any,
+          fieldId: cbSaveField.id,
+          fieldTitle: cbSaveField.title,
+          externalId: cbSaveField.externalId,
+          fieldDescription: cbSaveField.description,
+          fieldHtmlDescription: cbSaveField.htmlDescription,
+        },
+      })
+      .catch(console.error)
+    }
   }, [fields])
 
   const onAddFile = useCallback((blobs?: FileBlob | FileBlob[], fieldId=activeField.value.id) => {

package/src/Forms/inputs.tsx

@@ -355,6 +355,23 @@ export const TableInput = ({ field, value=[], onChange, ...props }: FormInputPro
                     </Select>
                   </FormControl>
                 )
+              : (v.type === 'Database' && v.info.databaseId && v.info.databaseLabel) ? (
+                <DatabaseSelectInput responses={[]} size="small"
+                  field={{
+                    ...field,
+                    options: { databaseId: v.info.databaseId, databaseLabel: v.info.databaseLabel },
+                    title: v.label,
+                  }}
+                  value={row.find((_, _i) => columnIndex === _i)?.entry ? [{
+                    text: JSON.parse(row.find((_, _i) => columnIndex === _i)?.entry || '{}').text || '',
+                    databaseId: JSON.parse(row.find((_, _i) => columnIndex === _i)?.entry || '{}').databaseId || '',
+                    recordId: JSON.parse(row.find((_, _i) => columnIndex === _i)?.entry || '{}').recordId || '',
+                  }] : []}
+                  onChange={
+                    (records) => handleChange(i, columnIndex, { label: v.label, entry: JSON.stringify(records?.[0] ?? '') })
+                  }
+                />
+              )
               : null
               } 
             </Grid>
@@ -1761,6 +1778,7 @@ const choicesForDatabase: {
     lastId?: string,
   }
 } = {}
+const preventRefetch: Record<string, boolean> = {}
 
 const LOAD_CHOICES_LIMIT = 500
 const useDatabaseChoices = ({ databaseId='', field, otherAnswers } : { databaseId?: string, field: FormField, otherAnswers?: DatabaseSelectResponse[] }) => {
@@ -1774,11 +1792,14 @@ const useDatabaseChoices = ({ databaseId='', field, otherAnswers } : { databaseI
     const choices = choicesForDatabase[databaseId]?.records ?? []
     const lastId = choicesForDatabase[databaseId]?.lastId
 
+    if (preventRefetch[databaseId + field.id + lastId]) return
+    preventRefetch[databaseId + field.id + lastId] = true
+
     session.api.form_fields.load_choices_from_database({
       fieldId: field.id,
       lastId,
       limit: LOAD_CHOICES_LIMIT,
-      databaseId, // doesn't do anything now, but avoids cache hit when editing to change databaseId for same field
+      databaseId, // overrides fieldId, supports using Database question in Table Input
     })
     .then(({ choices: newChoices }) => {
       choicesForDatabase[databaseId] = {
@@ -1795,6 +1816,7 @@ const useDatabaseChoices = ({ databaseId='', field, otherAnswers } : { databaseI
     })
     .catch(err => {
       console.error(err)
+      preventRefetch[databaseId + field.id + lastId] = false
     })
   }, [session, field, databaseId, renderCount])
 
@@ -1849,7 +1871,7 @@ const get_other_answers = (_value?: DatabaseSelectResponse[], typing?: string) =
   return []
 }
 
-export const DatabaseSelectInput = ({ field, value: _value, onChange, onDatabaseSelect, responses }: FormInputProps<'Database Select'> & {
+export const DatabaseSelectInput = ({ field, value: _value, onChange, onDatabaseSelect, responses, size }: FormInputProps<'Database Select'> & {
   responses: FormResponseValue[],
 }) => {
   const [typing, setTyping] = useState('')
@@ -1944,7 +1966,7 @@ export const DatabaseSelectInput = ({ field, value: _value, onChange, onDatabase
 
   if (!doneLoading) return <LinearProgress />
   return (
-    <Autocomplete id={field.id} freeSolo={false}
+    <Autocomplete id={field.id} freeSolo={false} size={size}
       componentsProps={{ popper: { sx: { wordBreak: "break-word" } } } }
       options={filteredChoices} multiple={true}
       getOptionLabel={o => (
@@ -3342,9 +3364,7 @@ export const ChargeebeeInput = ({ field, value, onChange, setCustomerId }: FormI
     onChange({ url }, field.id)
   }, [loadCount, url])
 
-  if (error && typeof error === 'string') return <Typography color="error">{error}</Typography>
-  if (!url) return <LinearProgress />
-  if (loadCount === 2) {
+  if (value || loadCount === 2) {
     return (
       <Grid container alignItems="center" wrap="nowrap">
         <CheckCircleOutline color="success" />
@@ -3355,6 +3375,8 @@ export const ChargeebeeInput = ({ field, value, onChange, setCustomerId }: FormI
       </Grid>
     )
   }
+  if (error && typeof error === 'string') return <Typography color="error">{error}</Typography>
+  if (!url) return <LinearProgress />
   return (
     <iframe src={url} title="Checkout" style={{ border: 'none', width: '100%', height: 700 }} 
       onLoad={() => setLoadCount(l => l + 1)} 

package/src/table.tsx

@@ -132,6 +132,7 @@ export type TableField <T> = {
   filterIsActive?: boolean,
   filterComponent?: React.ReactNode,
   allowWidthAdjustment?: boolean,
+  columnResizeZIndex?: number,
 }
 export interface TableHeaderProps<T extends Item> extends Styled, HorizontalPadded, SelectionPropsOptional {
   fields: TableField<T>[],
@@ -147,6 +148,7 @@ export interface TableHeaderProps<T extends Item> extends Styled, HorizontalPadd
   setLocalFilters: React.Dispatch<React.SetStateAction<LocalFilter[]>>,
   filterSuggestions: Record<string, string[]>,
   minColumnWidth?: number,
+  columnResizeZIndex?: number,
 }
 export const TableHeader = <T extends Item>({ 
   fields, 
@@ -167,6 +169,7 @@ export const TableHeader = <T extends Item>({
   setLocalFilters,
   filterSuggestions,
   minColumnWidth=75,
+  columnResizeZIndex=1000,
 } : TableHeaderProps<T>) => { 
   const [openFilter, setOpenFilter] = useState(-1)
   const [startX, setStartX] = useState(0)
@@ -341,7 +344,7 @@ export const TableHeader = <T extends Item>({
                   height: '30px', 
                   backgroundColor: '#22222266', 
                   cursor: 'col-resize', 
-                  zIndex: 1000,
+                  zIndex: columnResizeZIndex,
                   position: 'relative', right: '6px',
                 }} />
               </Draggable>
@@ -725,6 +728,7 @@ export interface TableProps<T extends Item> extends WithTitle, WithHeader<T>, Wi
   loadMoreOptions?: LoadMoreOptions<T>,
   refreshFilterSuggestionsKey?: number,
   minColumnWidth?: number,
+  columnResizeZIndex?: number,
 }
 export const Table = <T extends Item>({
   items,
@@ -775,10 +779,11 @@ export const Table = <T extends Item>({
   onReorder,
   virtualization,
   onExport,
-
+  
   sort,
   refreshFilterSuggestionsKey,
   minColumnWidth,
+  columnResizeZIndex,
 }: TableProps<T> & Styled) => {
   const sortingStorageKey = (memoryId ?? '') + 'sorting'
   const cachedSortString = read_local_storage(sortingStorageKey)
@@ -1045,6 +1050,7 @@ export const Table = <T extends Item>({
               : undefined
             }
             minColumnWidth={minColumnWidth}
+            columnResizeZIndex={columnResizeZIndex}
           />
         )}